html{
		background-color: black;
		color: white;
		min-width:970px;
		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
		color: white		
} 
	
body,

#screen-panel {
        /*width: 1400px;*/
        height: 214px;
		/*width: 1300px;*/
        margin-left: auto ;
		max-width:970px;
        margin-right: auto ;
		border:2px solid white;
		/*top: 110px;*/

				
}
	
#alias {
        font-size:25px;
        margin-top:-20px;
		margin-right:20px;
		float: right;
		height: 40px;
		width: 250px;

		
		/*margin-left: 20px ;*/
				
}

#score { 
	    margin-left: auto ;
		font-size:20px;
        margin-right: auto ;
		position:relative;
		width: 850px;
		text-align: Left;
		/*margin-left: 20px ;*/	

}

#main-menu {
        height: 120px;
		width: 960px;
		padding-left:6px;
		margin-left: auto ;
        margin-right: auto ;
   		
}

#screen-container {
        margin-top: 10px;
		width: 960px;
		margin-left: auto;
		margin-right: auto;
		border:2px solid white;
		}

#map-canvas {
		top:0px;
        height: 930px;
		width: 930px;
		margin-left: auto;
		margin-right: auto;
		/*border-style: inset;*/
		/*border:2px solid white;*/
        /*-moz-border-radius: 465px;
        border-radius: 465px;*/
}
#radar{
		position: absolute;
		margin-left: 10px;
		top:228px;
		width:930px;
		height:930px;
		/*background:url(/images/vY6Tl.png);*/
		overflow:hidden;
  

}
#rad{
		position: absolute;
		margin-left: 10px;
		width:930px;
		height:930px; 
		background:url(/images/fbgUD.png);
		z-index: 10;
}

.obj{
  background:#F04141;
  position:absolute;
  border-radius:20px;
  width:20px;
  height:20px;
  margin-top:-2px;
  margin-left:-2px;
  box-shadow:0 0 10px 5px rgba(240,65,65,0.5);
  opacity:0.2;
}

#logout-box {
    background-color:black;
    display:block;
	color: #fff;
	text-shadow: -1px -1px 1px #888;
	font-weight: bold;
	font-family: Helvetica,sans-serif;
	text-align: center;
	width: 100px;
	margin-top: 20px;
	line-height: 50px;
	text-decoration: none;
	background-color: #7ab;
	background-image: linear-gradient(to bottom, #626262 0%, #919191 49%, #9C9C9C 51%, #A6A6A6 100%);

}
/* ACCORDION CSS */
/**
 * 	CSS3 Only Horizontal and Vertical Accordion
 * 	Author: Paul Underwood for Hongkiat.com
 *  Website: www.paulund.co.uk
 *  Date: 27/11/11
 *  Version: 1.0
 */

 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 16px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #fff; }

/*Define Accordion box*/
.accordion { width:940px; overflow:hidden; margin:4px auto; color:#474747; background:#414141; padding:4px; font-size: 20px;}

/*General Accordion****************************************************************************/
/*Set style of open slide*/
.accordion section:target { background:#000; padding:10px; margin-right:10px;}
.accordion section:target:hover { background:#000; }
.accordion section:target h1 {width:100%;}
.accordion section:target h1 a{ color:#fff; padding:0;}
.accordion section:target p {display:block;}
.accordion section h2 a{padding:10px 4px 4px 10px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }

/*set style of closed slide*/
.accordion section{ float:left;	overflow:hidden; color:#fff; cursor:pointer; background: #333; margin:3px; }
.accordion section:hover {background:#444;}
.accordion section p { display:none; }
.accordion section:after{position:relative;font-size:24px;color:#000;font-weight:bold;}
.accordion section:nth-child(1):after{content:'1';}
.accordion section:nth-child(2):after{content:'2';}
.accordion section:nth-child(3):after{content:'3';}
.accordion section:nth-child(4):after{content:'4';}
.accordion section:nth-child(5):after{content:'5';}
/*End General Accordion****************************************************************************/

/*Horizontal Accordion *********************************************************************/
.horizontal section{ width:5%; height:250px; 
	-moz-transition:width 0.2s ease-out; 
	-webkit-transition:width 0.2s ease-out;
  	-o-transition:width 0.2s ease-out;
	-ms-transition:width 0.2s ease-out;
  	transition:width 0.2s ease-out;
}

/*Position the number of the slide*/
.horizontal section:after{top:140px;left:15px;}

/*Header of closed slide*/
.horizontal section h1 { 
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	width:240px; position:relative; left:-100px; top:85px;
} 

/*On mouse over open slide*/
.horizontal :target{ width:73%;height:230px; }
.horizontal :target h1{ top:0px;left:0;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg); 
}
/*End Horizontal Accordion *********************************************************************/

/*Vertical Accordion *************************************************************************/
.vertical section{ width:100%; height:100px;
	-webkit-transition:height 0.2s ease-out;
	-moz-transition:height 0.2s ease-out;
  	-o-transition:height 0.2s ease-out;
	-ms-transition:height 0.2s ease-out;
  	transition:height 0.2s ease-out;
}
/*Set height of the slide*/
.vertical :target{ height:600px; width:100%; }

.vertical section h1 { position:relative; left:0; top:-15px;font-size: 40px;}

/*Set position of the number on the slide*/
.vertical section:after{ top:-60px;left:920px;}
.vertical section:target:after{ left:-9999px;}


/* END ACCORDION CSS */

 
.menu {
	margin: 0;
	margin-bottom: 16px;
	padding: 0;
}

.menu:after { /* clearfix */
	content: "";
	display: block;
	clear: both;
}

.menu li {
	margin: 0;
	float: left;
	list-style-type: none;
}

.menu a {
	display: block;
	color: #fff;
	text-shadow: -1px -1px 1px #888;
	font-weight: bold;
	font-family: Helvetica,sans-serif;
	font-size: 200%;
	text-align: center;
	width: 190px;
	line-height: 100px;
	text-decoration: none;
	background-color: #7ab;
	background-image: linear-gradient(to bottom, #626262 0%, #919191 49%, #9C9C9C 51%, #A6A6A6 100%);
}

.menu a:hover,
.menu a:active {
	background-color: #bbb;
	background-image: linear-gradient(to bottom, #eee 0%, #ccc 49%, #bbb 51%, #888 100%);
}


/* 2 */
#menu2 li {
	margin-left:6px;
}

#menu2 li:nth-child(1) {
	margin-left:0;
}

#menu2 li a {
	border-radius: 6px;
}

/* 3 */
#menu3 li {
	padding-left: 1px;
	background-color: #bbb;
	background-image: linear-gradient(to bottom, #333333 0%, #333333 49%, #DADADA 51%, #F4F4F4 100%);
	background-size: 1px 100%;
}

#menu3 li:nth-child(1) {
	padding-left: 0;
}
/*
#menu3 li:nth-child(1),
#menu3 li:nth-child(1) a {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

#menu3 li:nth-child(5),
#menu3 li:nth-child(5) a {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
} 
/* unvisited link */
a:link {
    color: #fff;
}

/* visited link */
a:visited {
    color: #fff;
}

/* mouse over link */
a:hover {
    color: #fff;
}

/* selected link */
a:active {
    color: #fff;
}

form, p, span {
    margin:0;
    padding:0; }
  
input { font:30px arial;background-color:#000;
		  color:#fff;
	      width:280px;
          border:1px solid #fff; 
		  padding-left:10px;
		  }
  
a {
    color:#0000FF;
    text-decoration:none; }

/* Message Screen Section */ 

#chatbox {
    text-align:left;
    margin:0 auto;
    margin-bottom:25px;
    padding:10px;
    background:#000;
	color:#fff;
    height:400px;
    width:940px;
    border:3px solid white;
    overflow:auto; }
  
#usermsg {
    width:395px;
	margin-left: 20px;
	background:#000;
	color:#fff;
	width:700px;
    font-size: 30px;
    border:2px solid white; }
  
#submitmsg { width: 60px; 
		  background-color:#000;
		  color:#fff;
		  height: 214px;
	      width:214px;
		  position: absolute;
		  background-color: #7ab;
		  background-image: linear-gradient(to bottom, #626262 0%, #919191 49%, #9C9C9C 51%, #A6A6A6 100%);
          border:2px solid white; }
}


.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}
.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
.modalDialog > div {
	width: 510px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}
.close {
	background: #000;
	color: #FFFFFF;
	line-height: 50px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 50px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 25px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #fff; }


/* Marker Info Window */

div.marker-info-win {
				width: 290px; 
			    font-family: Arial, Helvetica, sans-serif;
				font: 25px; 
				min-height: 200px;
				max-height: 340px;
				height: auto;
				padding: 10px;
				background-color:"black";
				}

div.marker-info-win p{font-family: Arial, Helvetica, sans-serif;padding: 0px;margin: 10px 0px 10px 0; font-size:25px; line-height:1.0;overflow:hidden!important;}
div.marker-info-win h1{font-family: Arial, Helvetica, sans-serif;padding: 0px;margin: 10px 0px 10px 0; font-size:30px; line-height:1.0;overflow:hidden!important;}

table.marker-info-win {font-family: Arial, Helvetica, sans-serif; padding: 0px;margin: 10px 0px 10px 0; font-size:25px; line-height:1.0;overflow:hidden!important;}
meter {
  width: 600px;
  height: 30px;
    /* -webkit-appearance: none; /* Reset appearance */
  border: 1px solid #ccc;
  border-radius: 3px;
}

meter::-webkit-meter-bar {
     /* -webkit-appearance: none; /* Reset appearance */
    background: #FFF;
    border: 1px solid #CCC;
	border-radius: 3px;
	width: 600px;
	height: 30px;
}

meter::-webkit-meter-optimum-value {
    background: #87C7DE;
    background: -moz-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a1d4e6), color-stop(100%, #6bb4d1));
    background: -webkit-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -o-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -ms-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: linear-gradient(to bottom, #a1d4e6 0%, #6bb4d1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);
	border-radius: 3px;
	}
meter::-webkit-meter-high-value {
    background: #87C7DE;
    background: -moz-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a1d4e6), color-stop(100%, #6bb4d1));
    background: -webkit-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -o-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -ms-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: linear-gradient(to bottom, #a1d4e6 0%, #6bb4d1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);
    border-radius: 3px;
	}

#myMap{
  width: 100%;
  height: 100%;
}

.label {
  box-sizing:border-box;
  background: #05F24C;
  box-shadow: 2px 2px 4px #333;
  border:5px solid #346FF7;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  -webkit-animation: pulse 1s ease 1s 3;
  -moz-animation: pulse 1s ease 1s 3;
  animation: pulse 1s ease 1s 3;
}

/* ANIMATIONS */
@-webkit-keyframes pulse {
 40% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    transform: scale(2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes pulse {
 40% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    transform: scale(2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulse {
  40% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    transform: scale(2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
/*tv screen css
$ease-out-quint:cubic-bezier(0.230, 1.000, 0.320, 1.000);
$ease-in-quint:cubic-bezier(0.755, 0.050, 0.855, 0.060);
*/
$ease-out-quint:cubic-bezier(0.000, 1.000, 0.000, 1.000);
$ease-in-quint:cubic-bezier(0000,1, 0.000, 1);
$screen-background:#121010;


body{
  background:#111;
  color:white;
  /*padding-top:20px;
  padding-left:20px;*/
}
#switch{
  display:none;
}
.switch-label{
  display:inline-block;
  cursor:pointer;
  background:#fff;
  color:#111;
  /*padding:10px;*/
  /*padding-left:15px;
  padding-right:15px;*/
  border-radius:5px;
  /*margin-top:10px;*/
  box-shadow:0 2px #666;
  &::after{
    content:"on";
  }
  &::before{
    content:" ";
    display:inline-block;
    border-radius:100%;
    width:10px;
    height:10px;
    background:#003321;
    /*margin-right:10px;*/
    border:1px solid #111;
  }
  &:active{
    box-shadow:none;
    transform:translate3d(0,2px,0);
  }
}
#switch:checked+.switch-label{
  &::before{
    background:#22ff55;
  }
  &::after{
    content:"off";
  }
}


@keyframes flicker{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      opacity:random();
    }
  }
}
.container{
  background:$screen-background;
  /*width:800px;
  //height:600px;
  margin-top:10px;*/
  position:relative;
  overflow:hidden;
  border:2px solid #666;

  // flicker
  &::after{
    content:" ";
    display:block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:transparentize($screen-background,0.9);
    opacity:0;
    z-index:2;
    pointer-events:none;
  }
  // scanlines
  &::before{
    content:" ";
    display:block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:linear-gradient(transparentize($screen-background,1) 50%, transparentize(darken($screen-background,10),0.75) 50%), linear-gradient(90deg,transparentize(#ff0000,0.94),transparentize(#00ff00,0.98),transparentize(#0000ff,0.94));
    z-index:2;
    background-size:100% 2px, 3px 100%;
    pointer-events:none;
  }
}
#switch:checked~.container::after{
  animation:flicker 0.15s infinite;
}


@keyframes turn-on{
  0%{
    transform:scale(1,0.8) translate3d(0,0,0);
    -webkit-filter:brightness(30);
    filter:brightness(30);
    opacity:1;
  }
  3.5%{
    transform:scale(1,0.8) translate3d(0,100%,0);
  }
  
  3.6%{
    transform:scale(1,0.8) translate3d(0,-100%,0);
    opacity:1;
  } 
  
  9%{
    transform:scale(1.3,0.6) translate3d(0,100%,0);
    -webkit-filter:brightness(30);
    filter:brightness(30);
    opacity:0;
  }
  
  
  
  11%{
    transform:scale(1,1) translate3d(0,0,0);
    -webkit-filter:contrast(0) brightness(0) ;
    filter:contrast(0) brightness(0);
    opacity:0;
  }
  
  100%{
    transform:scale(1,1) translate3d(0,0,0);
    -webkit-filter:contrast(1) brightness(1.2) saturate(1.3);
    filter:contrast(1) brightness(1.2) saturate(1.3);
    opacity:1;
  }
}
@keyframes turn-off{
  0%{
    transform:scale(1,1.3) translate3d(0,0,0);
    -webkit-filter:brightness(1);
    filter:brightness(1);
    opacity:1;
  }
  60%{
    transform:scale(1.3,0.001) translate3d(0,0,0);
    -webkit-filter:brightness(10);
    filter:brightness(10);
  }
  100%{
    animation-timing-function:$ease-in-quint;
    transform:scale(0.000,0.0001) translate3d(0,0,0);
    -webkit-filter:brightness(50);
    filter:brightness(50);
  }
}
.screen{
  width:100%;
  height:100%;
  border:none;
}
#switch~.container>.screen{
  animation: turn-off 0.55s $ease-out-quint;
  animation-fill-mode:forwards;
}
#switch:checked~.container>.screen{
  animation: turn-on 4s linear;
  animation-fill-mode:forwards;
}

@keyframes overlay-anim{
  0%{
    visibility:hidden;
  }
  20%{
    visibility:hidden;
  }
  21%{
    visibility:visible;
  }
  100%{
    visibility:hidden;
  }
}
.tv_overlay{
  color:#00FF00;
  position:absolute;
  top:20px;
  left:20px;
  font-size:60px;
  //text-shadow:2px 2px black,-2px -2px black, -2px 2px black, 2px -2px black;
  visibility:hidden;
  pointer-events:none;
}
#switch:checked~.container .tv_overlay{
  animation:overlay-anim 5s linear;
  animation-fill-mode:forwards;
}
/*end tv*/
.openlayers-map img{ margin:0px }



/*colorpicker*/


.color-box {
	float:left;
	width:90px;
	height:90px;
	margin:5px;
	border: 1px solid white;
}
/*new*/



	  .bubbletab  {
	  border-top-right-radius:5px; 
	  border-top-left-radius:5px;
	  font-size: 35px;
	  width: 250px;
	  height: 40px;
	  margin-left: 5px;
	  text-shadow: 0 -1px 0 #000;
      color: #fff;
      font-family: Helvetica Neue, Helvetica, arial;
      background: "black" !important;
	  }

	  #content {
				font-family: Helvetica Neue, Helvetica, arial;
				font-size: 40px; 
				width: 600px;
				min-height: 200px;
				max-height: 340px;
				height: auto;
				padding: 10px;
				background-color:"black";
				}
				
		#content p {
			    font-family: Helvetica Neue, Helvetica, arial;
				font-size: 38px; 
				height: 38px;
				background-color:"black";
				}

       #content table th{
	         font-family: Helvetica Neue, Helvetica, arial;
			 text-align: left;
				font-size: 38px; 
				font-weight: unset;
				font-weight: normal !important;
			  background-color:"black";
				}
				
      .phoneytext {
        text-shadow: 0 -1px 0 #000;
        color: #fff;
        font-family: Helvetica Neue, Helvetica, arial;
        font-size: 38px;
        line-height: 38px;
        
        background: url(../images/arrow.png) 95% 50% no-repeat;
      }