@font-face {font-family: 'PT Mono'; 
  src: url('../fonts/ptm55f_w.eot'); 
  src: local('PT Mono'), url('../fonts/ptm55f_w.eot?#iefix') format('embedded-opentype'),url('../fonts/ptm55f_w.woff') format('woff'),url('ptf55m_w.ttf') format('truetype'), url('../fonts/ptm55f_w.svg#PTMono-Regular') format('svg');}

@font-face {font-family: 'PT Mono';
  src: url('../fonts/ptm75f_w.eot');
  font-style: normal;
  font-weight: bold; 
  src: local('PT Mono Bold'), url('../fonts/ptm75f_w.eot?#iefix') format('embedded-opentype'), url('../fonts/ptm75f_w.woff') format('woff'),url('../fonts/ptm75f_w.ttf') format('truetype'), url('../fonts/ptm75f_w.svg#PTMono-Bold') format('svg');}

@font-face {
    font-family: 'AeroMatics Display Bold';
    src: url('../fonts/aero_matics_display_bold-webfont.eot');
    src: url('../fonts/aero_matics_display_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/aero_matics_display_bold-webfont.woff2') format('woff2'),
         url('../fonts/aero_matics_display_bold-webfont.woff') format('woff'),
         url('../fonts/aero_matics_display_bold-webfont.ttf') format('truetype'),
         url('../fonts/aero_matics_display_bold-webfont.svg#aero_matics_displaybold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@-webkit-keyframes blink {
  0%     { opacity: 0 } 50% { opacity: 0 }
  50.01% { opacity: 1 } 100% { opacity: 1 }
}

.hidden{
  display: none;
}

html,body {
  height: 100%;
  margin: 0
}

#station {
  display: flex;
  flex-flow: column;
  height: 100%;
}

#title-bar{
  flex: 0 1 auto;
}

#content{
  flex: 1 1 auto;
}

body{
  background: #9B9B9B;
  background-image: url('../images/background-noise.png');
}

header,#content{
  padding:10px;
}

nav{
  position: fixed;
  top: -100%;
  left: 0;

  height: 100%;
  width: 100%;


  z-index: 10;
  background-color: rgba(0,0,0,0.90);
  font-family: 'AeroMatics Display Bold';

  /*transition: top 0.25s ease-in;*/

  -webkit-transition: top 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition:         top 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

nav.open{
  top: 0;
  box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.50);
  z-index: 1001;
}

#close-navigation{
  background: white;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 32px;
  cursor: pointer;
}

nav figure, #close-navigation{
  background: #9B9B9B;
  background-image: url('../images/background-noise.png');
  box-shadow: inset 0px -1px 7px 0px rgba(0,0,0,0.50);
}

nav figure{
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}

nav figure figcaption{
  margin-bottom: 10px;
  font-size: 24px;
}

nav figure ul{
  margin: 0px;
  padding: 0px;
  list-style-type:none;
  font-size: 20px;
}

nav figure ul li {
  display: inline-block;
  margin-right: 10px;
}

nav figure ul li:last-child{
  margin-right: 0px;
}

nav img{
  max-height: 100px;
  display: block;
}

nav, nav a{
  color: rgba(51,51,51, 1);
  text-decoration: none;
}

nav #overlay-grid{
  display: none;
}

nav.open #overlay-grid{
  display: inherit;
}

#open-navigation{
  font-size: 20px;
  position: fixed;
  background-color: rgba(51,51,51, 1);
  background-image: url('../images/title-noise.png');
  width: 80px;
  text-align: center;
  left: 300px;
  border-radius: 8px;
  padding-bottom: 5px;
  padding-top: 10px;
  top: -5px;

  font-family: 'AeroMatics Display Bold';
  text-shadow: 0px 2px 3px rgba(0,0,0,.8);
  color: #d4d4d4;
  box-shadow: inset 0px -1px 7px 0px rgba(0,0,0,0.50);
}

#open-navigation a{
  color: #d4d4d4;
  text-decoration: none;
}

#settings_overlay{
  display: none;
}

#settings_overlay.open{
  display: block;
}

#settings_overlay{
  z-index: 10000;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0, .8);
}

#settings{
  position: relative;
  top: 25%;
  left: 25%;
  width: 50%;
  min-height: 200px;
  background: white;
  display: inline-block;
  text-align: center;

  background: #9B9B9B;
  background-image: url('../images/background-noise.png');
  border-radius: 8px;

  color: rgba(51,51,51, 1);
  text-shadow: 0px 1px 1px rgba(255,255,255,.3);
  border: 3px solid #4A4A4A;
}

#settings fieldset{
  border: none;
  position: relative;
  top: 25%;
  left: 25%;
  width: 50%;
  max-width: 400px;
}

#settings label{
  width: 50px;
  display: inline-block;
  vertical-align: middle;
  text-align: right;
}

#settings button{
  min-width: 100px;
  background-color: rgba(51,51,51, 1);
  background-image: url('../images/title-noise.png');
  border: 1px solid ;
  border-radius: 8px;
  border: 2px solid #9B9B9B;


  text-shadow: 0px 2px 3px rgba(0,0,0,.8);
  color: #d4d4d4;
}

h1, h2, h3, h4, h5, h6{
  font-family: 'AeroMatics Display Bold';
}

h1{
  /* Ground Track: */
  font-size: 55px;
  background-color: rgba(51,51,51, 1);
  background-image: url('../images/title-noise.png');
  color: rgba(51,51,51, 1);
  margin: 0px;
  margin: auto;
  /*-webkit-text-stroke: 1px black;*/
  text-shadow: 0px 1px 1px rgba(255,255,255,.3);
  -webkit-background-clip: text;
}

.readout-display{
  background: #3A1604;
  box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.50);
  border-radius: 8px;
  color: #FD7E23;
  font-family: 'PT Mono';
  font-weight: bold;
  padding: 5px;
}

.readout-display h2{
  text-align: center;
}

.gauge .readout-display h2{
  text-shadow: none;
}

.readout-display input, .readout-display button, .readout-display select{
  border: 2px solid #FD7E23;
  background-color: #3A1604;
  color: #FD7E23;
  border-radius: 3px;
  font-family: 'PT Mono';
}

.readout-display button{
  background-color: #642607;
}

.readout-display button:hover, .readout-display select:hover{
  border: 2px solid #FD7E23;
  background-color: #FD7E23;
  color: #3A1604;
}

.resource-readout progress{
  height: 14px;
  border: 1px solid #FD7E23;
  border-radius: 3px;
}

.resource-readout progress[value]::-webkit-progress-bar{
  background: none;
}

.resource-readout progress[value]::-webkit-progress-value{
  background-color: #F5A623;
  border-right: 1px solid #FD7E23;
}

.resource-readout p{
  text-decoration: underline;
  margin-bottom: 3px;
}

.resource-readout > div:last-child{
  margin-top: 5px;
}

.resource-readout .totals{
  font-size: 10px;
}

.readout-table th{
  text-align: left;
  font-weight: normal;
}

.readout-table td{
  text-align: right;
}

button.status{
  vertical-align: top;
  width: 50px;
  height: 50px;
  /* RCS: */
  font-family: 'AeroMatics Display Bold';
  font-size: 24px;
  color: #666666;
  text-align: center;
  padding: 0;

  border: 3px solid #4A4A4A;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
  border-radius: 3px;

  background-color: #FFFFFF;
  background-image: linear-gradient(-180deg, #747474 50%, rgba(0,0,0,0.50) 100%);
}

button.status.on{
  background-image: radial-gradient(70% 70%, rgba(255,255,255,0.50) 39%, rgba(0,0,0,0.50) 100%) !important;
}

button#rcs{
  color: #417505;
  background-image: linear-gradient(-180deg, rgba(56,56,56,.5) 50%, rgba(0,0,0,.5) 100%);
  background-color: rgba(126,211,33,1);
}

button#sas{
  color: #19314D
}

button#light{
  color: rgba(0,0,0,.3);
  font-size: 18px;
}

button#gear{
  font-size: 18px;
  background-image: linear-gradient(-180deg, rgba(56,56,56,.5) 50%, rgba(0,0,0,.5) 100%);
  background-color: rgba(76,145,192,1);
  color: #2F5975
}

button#brake{
  color: #75010F;
  background-image: linear-gradient(-180deg, rgba(56,56,56,.5) 50%, rgba(0,0,0,.5) 100%);
  background-color: #D0021B;
}

button#gear.on{
  background-color: #4C91C0;
}

button#rcs.on{
  background-color: #7ED321;
}

button#sas.on{
  /* SAS: */
  color: #4A90E2;
}

button#light.on{
  color: black;
}

button#brake.on{
  background-color: #D0021B;
}

#title-bar .loss-of-signal {
  animation: blink 0.7s infinite linear alternate;
  -webkit-animation: blink 0.7s infinite linear alternate;
  -webkit-font-smoothing: antialiased;
}


#title-bar{
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display:-webkit-flex;
  display:-webkit-flexbox;
  display:-ms-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

#title-bar > h1, #title-bar > div{
  vertical-align: middle;
}

#mission-time-warp-indicator, #world-clock{
  padding: 10px;
  font-size: 24px;
}

#mission-time-warp-indicator{
  /*width: 459px;*/
}

.readout-display .ct-line, .readout-display .ct-point{
  stroke: #F5A623;
}

.readout-display .ct-grid{
  stroke: rgba(253, 126, 35, .5);
}

.readout-display .ct-label{
  color: #FD7E23;
  fill: #FD7E23;
}

#altitude-estimate-chart .ct-point,
#altitude-estimate-chart .ct-line{
  stroke-width: 5px;
}

#altitude-estimate-chart .ct-series-b .ct-line{
  stroke-width: 2px;
  stroke-dasharray: 2,2;
}

#altitude-estimate-chart .ct-series-c .ct-point,
#altitude-estimate-chart .ct-series-c .ct-line{
  stroke: #b4f489;
}

#altitude-estimate-chart .ct-series-d .ct-point,
#altitude-estimate-chart .ct-series-d .ct-line{
  stroke: #987cf9;
}

.gauge{
  /*background: #D4D3D1;*/
  padding: 10px;
  border-radius: 8px;

  color: hsla(0,0%,20%,1);
  text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 1px 1px;

  background-color: hsl(0,0%,90%);

  background-size: 50px 1000px;
  background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),

    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%)100%);

  box-shadow: inset hsla(0,0%,15%,  0.5) 0  0px 0px 4px, /* border */
    inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */
    inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */
    inset hsla(0,0%,100%,.7) 0  2px 1px 7px; /* top HL */
}

.gauge .min{
  left: 0;
  position: relative;
}

.gauge .max{
  float: right;
}

.gauge p{
  font-family: 'AeroMatics Display Bold';
  /*color: #4A4A4A;*/
  text-align: center;
  font-size: 30px;
  margin-top: 0px;
  margin-bottom: 0px;
/*
  background-color: #4A4A4A;
  background-image: url('../images/title-noise.png');
  color: #4A4A4A;

  text-shadow: 0px 1px 1px rgba(255,255,255,.3);
  -webkit-background-clip: text;*/
}

.gauge span{
  border: 0px solid #000000;
  font-family: 'AeroMatics Display Bold';
  color: #4A4A4A;
  text-align: center;
  font-size: 20px;
}

.navigation-wrapper{
  width: 200px;
  height: 200px;
}

.atmospheric-density-wrapper{
  width:400px;
}

.atmospheric-density-wrapper progress, .throttle-wrapper progress{
  border-width: 2px;
  border-style: solid;
  border-radius: 3px;
  box-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 1px 1px;
}

.atmospheric-density-wrapper progress{
  width:100%; height: 40px;
}

.throttle-wrapper{
  width:400px;
}

.throttle-wrapper progress{
  width:100%; height: 40px;
}

.throttle-wrapper .min{
  float: left;
}


.atmospheric_density, progress.atmospheric_density::-webkit-progress-bar{
  background-color: black;
  background-image:
    /* the major tick marks*/
    linear-gradient(90deg, white 1%, transparent 2%, transparent 11%, white 11%, white 12%, transparent 12%, transparent 52%, white 52%, white 54%, transparent 54%, transparent 78%, transparent 98.5%, white 98%),
    /* semi-major tick marks */
    linear-gradient(90deg, transparent, transparent 29%, white 29%, white 30%, transparent 30%, transparent 77%, white 77%, white 78%, transparent 78%),
    /* The minor tick marks */
    repeating-linear-gradient(90deg, transparent, transparent 5%, white 5%, white 6%),
    linear-gradient(90deg,   #000000 0%, #000000 11%, #153851 11%, #153851 40%, #006EBD 40%, #0D73BD 77%, #4E8EBD 77%, #4E8EBD 100%);
  background-size: 100% 100%, 100% 75%, 100% 50%, 100% 80%;
  background-position: top, top, top, center;
  background-repeat: no-repeat;
}

progress.atmospheric_density::-webkit-progress-value, progress.throttle::-webkit-progress-value{
  position: relative;
  top: 40%;
  background: none;
  border-right: 5px solid red;
  height: 60%;
}

.throttle,progress.throttle::-webkit-progress-bar{
  background-color: black;
  /* Rectangle 93: */
  background-image:
    /* the major tick marks*/
    linear-gradient(90deg, white 1%, transparent 1%, transparent 49%, white 49%, white 50%, transparent 50%, transparent 78%, transparent 99%, white 99%),
    /* semi-major tick marks */
    repeating-linear-gradient(90deg, transparent, transparent 24%, white 24%, white 25%),
    /* minor tick marks */
    repeating-linear-gradient(90deg, transparent, transparent 4%, white 4%, white 5%);

  background-size: 100% 100%, 100% 75%, 100% 50%;
  background-position: top, top, top;
  background-repeat: no-repeat;
}

#navball{
  height: 200px;
  width: 200px;
  background: #555;
  box-shadow: inset 0 .1em .8em #000, inset 0 1px 0 #000,
    hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 1px 1px;
  min-width: 10em;
  min-height: 10em;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
}

#navball::after{
  content: '';
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid red;
}

#navball-heading{
  position: relative;
  bottom: 11px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  /*background: #d4d3d1 url('/img/noise.png');*/
  /*padding: ($quarter-gutter / 2) 0 0 0;*/
  background-color: hsl(0,0%,90%);

  background-size: 50px 1000px;
  background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),

    linear-gradient(180deg, hsl(0,0%,78%)  0%, 
    hsl(0,0%,90%) 47%, 
    hsl(0,0%,78%) 53%,
    hsl(0,0%,70%)100%);
  width: 5em;
  text-align: center;
  border-top-left-radius: 2em;
  border-top-right-radius: 2em;
  box-shadow: 0 -1px 0 rgba(#fff, 1);
}

#altitude-tracker{
  width: 100%;
  height: 300px;
}

.legend p{
  font-size: 15px;
  margin: 0px;
}

.legend .item{
  vertical-align: middle;
}

.legend .item{
  height: 20px;
  width: 40px;
  display: inline-block;
  margin-right: 5px;
}

.legend #altitude{
  height: 5px;
  border-top: 2px #F5A623 dashed;
}

.legend #height-from-terrain{
  border: 3px #F5A623 solid;
  background-color: rgba(245, 166, 34, .45);
}

#altitude-tracker .ct-series-a .ct-line{
  stroke-dasharray: 10;
}

#altitude-tracker .ct-series-b .ct-area{
  fill: rgba(245,166,34,1);
  fill-opacity: .45;
}