@font-face {
  font-family: 'mercutio_basic';
  src: url('./fonts/mercutio_basic.ttf') format('truetype');
}
html{
  background-color: #000;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
body {
color: #808080;
font-family:Monospace;
font-size:13px;
background-color: #000;
margin: 0px;
width:100%;
height:100%;
position: relative;
overflow: hidden;
}
#container{
width:100%;
height:100%;
overflow: hidden;
}
#info {
position: absolute;
bottom: 0px; width: auto;
padding: 5px;
}

#config_icon{
position: absolute;
top: 0px; width: auto;
padding: 5px;
opacity:0.5;
cursor: pointer
}

#starchart_panel{
border: none;
}

#starchart_icon {
position: absolute;
top: 0px;
left:60px;
width: auto;
padding: 5px;
opacity:0.5;
cursor: pointer
}

#starchart_close_button {
position: absolute;
display:table-cell;
text-align:right;
vertical-align:middle;
height:20px;
right:5px;
top:10px;
cursor: pointer
}

#zoomin {
position: absolute;
top: 45px; width: auto;
padding: 8px;
opacity:0.4;
cursor: pointer
}

#zoomout {
position: absolute;
top: 75px; width: auto;
padding: 8px;
opacity:0.4;
cursor: pointer
}
#config_panel{
  background-color: black;
  padding:10px;
  color:#fff;
  opacity:0.80;
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  border:2px solid #bbb;
  border-radius: 10px; 
  position:absolute;
}

#config_panel_header{
margin-top:-30px;
height:40px;
}
#config_panel_body{
  overflow-y: auto;
  width:100%;
  height:90%;
}
#config_panel_close {
  float:right;
  width:25px;
  height:25px;
  margin-top:7px;
  margin-right:-25px;
  cursor:pointer;
}

#config_panel_close img{
width:24px;
height:24px;
}
#config_icons{
  clear:both;
  cursor:pointer;
  display:inline-block;
}

#config_panel_info{
 float:left;
 margin:0 5px 0 5px;
 cursor:pointer;
  }
#config_panel_info img{
width:40px;
height:40px;
}

#config_panel_config{
 float:left;
 margin:0 5px 0 5px;
  cursor:pointer;
	display:inline-block;
}
#config_panel_config img{
  width:40px;
  height:40px;
}

#indicator{
font-family: 'mercutio_basic';
text-transform: uppercase;
color: #00aa00;
font-size:16px;
}

.label{
font-size:10px;
}

a:link{
  color: #6699CC;
  text-decoration: none;
}

a:visited{
  text-decoration: none;
  color: #778899;
}
a:active{
  text-decoration: none;
  color: #6699CC;
}

a:hover{
  text-decoration: none;
  color: #6699CC;
}

#startup_screen{
  width:100%;
  text-align:center;
  background-color: #000;
  padding:10px;
  color: #00aa00;
  font-size:12px;
  line-height:24px;
  z-index:1000;
}

#scrubbed{
  width:100%;
  text-align:center;
  background-color: #000;
  padding:10px;
  color: #ff0000;
  font-size:12px;
  line-height:24px;
}

#launch_trajectory{
  background-color: #000;
  border:none;
  height:100%;
  width:100%;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@keyframes fadeOut {
    0% {opacity: 1}
    100% {opacity: 0}
}

@-webkit-keyframes fadeOut {
    0% {opacity: 1}
    100% {opacity: 0}
}

 .fadeout {
  opacity: 0;
  animation: fadeOut 1s ease 0s 1 normal;
  -webkit-animation: fadeOut 1s ease 0s 1 normal;
  }

  #switch_to_main_system{
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
    background-color: #000;
    padding:10px;
    border-top:1px solid #00aa00;
    border-bottom:1px solid #00aa00;
    color: #00aa00;
    font-size:12px;
    line-height:24px;
  }

/*
@media screen and (min-width: 0px) and (max-device-width: 640px) {
  #switch_to_main_system{
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
    background-color: #000;
    padding:10px;
    border-top:1px solid #00aa00;
    border-bottom:1px solid #00aa00;
    color: #00aa00;
    font-size:10px;
    line-height:20px;
  }

}
@media screen and (min-width: 641px)  {
  #switch_to_main_system{
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
    background-color: #000;
    padding:10px;
    border-top:1px solid #00aa00;
    border-bottom:1px solid #00aa00;
    color: #00aa00;
    font-size:16px;
  }
}
*/