body{
  // prevent marking text
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


a{
  color: $teal-dark;

  &:hover{
    color: $teal-light;
  }
}

// emphasized text
em{

  font-style: italic;

  &.pf-brand{
    text-transform: uppercase;
  }
}

// full screen view of an element
/*
.pf-fullscreen{

  &:fullscreen, &:-webkit-full-screen, {
    background-color: red;
  }

  &:-webkit-full-screen{
    background:url("#{$base-url}/#{$body-background-image}") $body-background-color;
    background-repeat: no-repeat;
  }

  &:-moz-full-screen{
    background-color: green;
  }
}
*/

// laoding indicator overlay
.pf-loading-overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  background: $gray-darker;
  @include border-radius(5px);

  .pf-loading-overlay-wrapper{
    width: 25px;
    height: 25px;
    margin: auto;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    
    i{
      padding: 3px;
    }
  }
}

// page menu =====================================================
.sb-left{
  .list-group-item{
    @include box-shadow(inset -10px 0px 5px -5px rgba(0,0,0,0.4));
  }
}

.sb-right{
  .list-group-item{
    @include box-shadow(inset 10px 0px 5px -5px rgba(0,0,0,0.4));
  }
}

// log types =====================================================
.pf-log-info{
  @extend .txt-color-green;
}

.pf-log-warning{
  @extend .txt-color-warning;
}

.pf-log-error{
  @extend .txt-color-red;
}

// map types =====================================================
.pf-map-type-global{
  color: $teal;
}

.pf-map-type-alliance{
  color: $blue;
}

.pf-map-type-private{
  color: $green;
}

// maps module ===================================================
#pf-map-module{
  margin: 0 10px;

  // Tabs (colored)
  #pf-map-tabs {

    .pf-map-type-tab-default{
      border-top: 2px solid transparent;
    }

    .pf-map-type-tab-global{
      border-top: 2px solid $green;
    }

    .pf-map-type-tab-alliance{
      border-top: 2px solid $blue;
    }

    .pf-map-type-tab-private{
      border-top: 2px solid $teal;
    }
  }

}

// Tab Content Body Grid ========================================
.pf-map-content-row{
  margin: 10px 0 0 0;
  padding-bottom: 40px; // space for footer

  // all modules within a row
  .pf-module{
    font-family: $font-family-bold;
    background: rgba($gray, 0.3);
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
    @include border-radius(5px);
  }

}

// WH effects ==================================================

.pf-system-effect{
  display: none;      // if effect is active it will be overwritten
  cursor: default;
  color: $gray-lighter;
}

.pf-system-effect-magnetar{
  color: $wh-color-magnetar;
  display: inline-block;
}

.pf-system-effect-redgiant{
  color: $wh-color-redgiant;
  display: inline-block;
}

.pf-system-effect-pulsar{
  color: $wh-color-pulsar;
  display: inline-block;
}

.pf-system-effect-wolfryet{
  color: $wh-color-wolfryet;
  display: inline-block;
}

.pf-system-effect-cataclysmic{
  color: $wh-color-cataclysmic;
  display: inline-block;
}

.pf-system-effect-blackhole{
  color: $wh-color-blackhole;
  display: inline-block;
}

// system info status ================================================
.pf-system-info-rally{
  .pf-system-head{
    background-color: $pink-darker;

    @include background-image(linear-gradient(-45deg,
      $purple-dark 25%,
      transparent 25%,
      transparent 50%,
      $purple-dark 50%,
      $purple-dark 75%,
      transparent 75%,
      transparent));
    background-size:25px 25px;
    -webkit-animation:move 3s linear infinite;
    -moz-animation:move 3s linear infinite;
    -ms-animation:move 3s linear infinite;
    animation:move 3s linear infinite;
  }
}


// system security status ============================================

.pf-system-security-0-0{
  color: $system-color-sec-0-0;
}

.pf-system-security-0-1{
  color: $system-color-sec-0-1;
}

.pf-system-security-0-2{
  color: $system-color-sec-0-2;
}

.pf-system-security-0-3{
  color: $system-color-sec-0-3;
}

.pf-system-security-0-4{
  color: $system-color-sec-0-4;
}

.pf-system-security-0-5{
  color: $system-color-sec-0-5;
}

.pf-system-security-0-6{
  color: $system-color-sec-0-6;
}

.pf-system-security-0-7{
  color: $system-color-sec-0-7;
}

.pf-system-security-0-8{
  color: $system-color-sec-0-8;
}

.pf-system-security-0-9{
  color: $system-color-sec-0-9;
}

.pf-system-security-1-0{
  color: $system-color-sec-1-0;
}

// system security level =============================================

.pf-system-sec{
  margin-right: 5px;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.pf-system-sec-highSec{
  color: $green;
}

.pf-system-sec-lowSec{
  color: $orange;
}

.pf-system-sec-nullSec{
  color: $red;
}

.pf-system-sec-high{
  color: $red;
}

.pf-system-sec-mid{
  color: $orange;
}

.pf-system-sec-low{
  color: $blue;
}

// system status ======================================================

.pf-system-status-friendly{
  border-color: $blue !important;
  color: $blue;
}

.pf-system-status-occupied{
  border-color: $orange !important;
  color: $orange;
}

.pf-system-status-hostile{
  border-color: $red !important;
  color: $red;
}

.pf-system-status-empty{
  border-color: $green !important;
  color: $green;
}

.pf-system-status-unscanned{
  border-color: $teal !important;
  color: $teal;
}

// system effect info dialog
.pf-system-effect-dialog-wrapper, .pf-jump-info-dialog{
  .table{
    margin: 15px 0;

    td{
      text-transform: capitalize;
    }
  }
}

// "fake connection" classes for the map manual
.pf-fake-connection{
  box-sizing: content-box;
  display: inline-block;
  width: 70px;
  height: 4px;
  margin-right: 5px;
  border-top: 2px solid $gray-light;
  border-bottom: 2px solid $gray-light;
  background-color: #3c3f41;
  position: relative;
  font-family: $font-family-sans-serif;

  &.pf-map-connection-stargate{
    background-color: $gray-light;
    border-color: $gray-light;
  }

  &.pf-map-connection-jumpbridge{
    background-color: $teal-light;
    border-color: $gray;
    background: repeating-linear-gradient(
        to right,
        $teal-light,
        $teal-light 10px,
        $gray 10px,
        $gray 20px
    );
  }

  &.pf-map-connection-wh-eol{
    border-color: $pink-dark;
  }

  &.pf-map-connection-wh-reduced{
    background-color: $orange;
  }

  &.pf-map-connection-wh-critical{
    background-color: $red-darker;
  }

  &.pf-map-connection-frig{
    border-style: dashed;
    border-left: none;
    border-right: none;

    &:after{
      content: 'frig';
      background-color: $orange;
      color: $gray-darkest;
      padding: 0px 3px;
      position: absolute;
      left: 25px;
      top: -6px;
      font-family: $font-family-bold;
      @include border-radius(3px);
    }
  }

  &.pf-map-connection-preserve-mass{
    &:after{
      content: 'save mass';
      background-color: $red-darker;
      color: $gray-lightest;
      padding: 0px 3px;
      position: absolute;
      left: 9px;
      top: -6px;
      font-family: $font-family-bold;
      @include border-radius(3px);
    }
  }

}


// global tooltip settings ======================================
.tooltip-inner{
  color: $green;
  background-color: $gray;
  font-family: $font-family-bold;
  padding: 5px 5px;
  @include border-radius(3px);
  @include box-shadow(0 6px 12px rgba(0,0,0,.4));
}

.tooltip.top .tooltip-arrow,{
  border-top-color: $gray-light;
}

.tooltip.right .tooltip-arrow,{
  border-right-color: $gray-light;
}

.tooltip.bottom .tooltip-arrow{
  border-bottom-color: $gray-light;
}

.tooltip.left .tooltip-arrow{
  border-left-color: $gray-light;
}

// header =======================================================
#pf-head{

  a{

    &:focus{
      color: $teal-dark;
    }

    &:hover{
      text-decoration: none;

      .badge{
        color: $teal-light;
      }
    }
  }

  i{
    margin-right: 2px;
  }

  .pf-head-menu{
    .pf-head-menu-logo{
      width: 18px;
      height: 18px;
      display: inline-block;
      float: left;
      background: inline-image("#{$base-url}/icons/logo-18x18-gray.png");
    }

    &:hover .pf-head-menu-logo{
      background: inline-image("#{$base-url}/icons/logo-18x18-teal.png");
    }

    &:focus .pf-head-menu-logo{
      background: inline-image("#{$base-url}/icons/logo-18x18-teal.png");
    }

  }

  .badge{
    background-color: $gray;
    color: $gray-lighter;
  }

  .pf-head-active-user, .pf-head-current-location{
    display: none; // triggered by js

    .badge{
      @include transition( color 0.3s ease-out );
    }
  }
  
  .pf-head-program-status{
    cursor: pointer;
  }

}

// footer =======================================================
#pf-footer{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  background: rgba($gray, 0.3);

  a{
    font-family: $font-family-serif;
    color: $teal-darker;

    &:hover{
      color: $teal-dark;
      text-decoration: none;
    }
  }
}

/*
Animate the stripes
*/
@-webkit-keyframes move{
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
@-moz-keyframes move{
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
@-ms-keyframes move{
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
@keyframes move{
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}



