{ margin: 0; padding: 0; }
html { 
background: url('../images/background-2.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 2000;
}
body {
    background-color:#000;
    color:#000;
    margin:0;
    font-family:Verdana, sans-serif;
	font-size: 70%;
    overflow:hidden;
}
a {
    color:orange;
    text-decoration:none;
}
i {
    color: #9a9;
}
strong {
    color:#ff0;
}
.main {
	position: absolute;
	top: 145px;
	right: 0px;
	height: 600px;
}

h2 {
	color:#6CB2C8;
	margin-bottom:2px;
}

#SP_button {
	position:absolute;
	right:10px;
	top: 5px;
	width: 40px;
	height: 40px;					
	overflow:hidden;
	margin: 0;
	z-index: 5;						
}
#help_button {
  position: absolute;
  right: 50px;
  top: 5px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  margin: 0;
  background-color: rgba(0.0,0.0,0.0,0.0);
  z-index: 1;				  
}

#warning_button {
  position: absolute;
  right: 90px;
  top: 5px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  margin: 0;
  background-color: rgba(0.0,0.0,0.0,0.0);
  z-index: 1;				  
}	

#showmap_button {
	position:absolute;
	right:130px;
	top: 5px;
	width: 40px;
	height: 40px;					
	overflow:hidden;
	margin: 0;
	z-index: 3;						
}

#restart_button {
  position: absolute;
  right: 170px;
  top: 5px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  margin: 0;
  background-color: rgba(0.0,0.0,0.0,0.0);
  z-index: 1;
}
#seperator {
  position: absolute;
  right: 200px;
  top: 5px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  margin: 0;
  background-color: rgba(0.0,0.0,0.0,0.0);
  z-index: 1;
}

#identifyButton {
	position:absolute;
	right:235px;
	top: 5px;
	width: 40px;
	height: 40px;					
	overflow:hidden;
	margin: 0;
	z-index: 3;						
}

#CrossButton {
	position:absolute;
	right:268px;
	top: 5px;
	width: 50px;
	height: 50px;					
	overflow:hidden;
	margin: 0;
	z-index: 3;						
}

#Distance {
	position:absolute;
	right:320px;
	top: 5px;
	width: 40px;
	height: 40px;					
	overflow:hidden;
	margin: 0;
	z-index: 3;						
}

#list_menu {
	position:absolute;
	left:10px;
	top: 50px;
	width: 240px;
	height: 400px;					
	overflow:hidden;
	margin: 0;
	z-index: 3;			
	border-radius: 5px;
}

#physical_button {
  position: absolute;
  left: 10px;
  top: 5px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  margin: 0;
  background-color: rgba(0.0,0.0,0.0,0.0);
  z-index: 1;
}				

#legal_button {
  position: absolute;
  left: 60px;
  top: 5px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  margin: 0;
  background-color: rgba(0.0,0.0,0.0,0.0);
  z-index: 1;
}						

#close_button {
	position:absolute;
	right:8px;
	bottom:8px;
	overflow:hidden;
}

#about_box_bkg {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	overflow:hidden;
	z-index:40;
	background-color:rgba(100,100,100,0.7);
	pointer-events:none;
}

#legend {
	top:55px;
	right: 16px;
	width: 267px;
	height:85px;
	position:absolute;
	overflow:hidden;
	color:#fff;
	text-align:left;
	text-align:top;
	z-index:0;
	background-color:rgba(0,0,0,1);
	font-size:1.0em;
	padding: 1px;
	border: solid 1px black;
	border-radius: 5px;
}

#about_box {
	width:80%;
	height:70%;
	position:absolute;
	left:10%;
	top:20%;
	overflow-y: scroll;
	overflow-x: hidden;
	padding:8px;
	color:#fff;
	text-align:justify;
	z-index:80;
	background-color:rgba(100,100,100,0.9);
	border-radius:10px;
	font-size:1.0em;
	border:black 2px solid;
	pointer-events:none;
}

.hide {
	opacity:0;
	transition:opacity .5s ease-out;
}

.show {
	opacity:1;
	transition:opacity .5s ease-out;
}

#gmap_canvas {
        height: 30%;
        width: 20%;
		position: absolute;
		right: 6px;
		top: 65%;
}	

#warning_box {
	width:80%;
	height:50%;
	position:absolute;
	left:10%;
	top:20%;
	overflow:hidden;
	padding:8px;
	color:#fff;
	text-align:justify;
	z-index:80;
	background-color:rgba(100,100,100,0.9);
	border-radius:10px;
	font-size:1.0em;
	border:black 2px solid;
	pointer-events:none;
}

.hide {
	opacity:0;
	transition:opacity .5s ease-out;
}

.show {
	opacity:1;
	transition:opacity .5s ease-out;
}

#title {
	font-size:2.0em;
	position:absolute;
	left:80px;
	top:16px;
	width:380px;
	height:40px;
	overflow:hidden;
	padding:8px;
	padding-top:4px;
	color:#ff9;
	background-color:rgba(100,100,100,0.6);
	border-radius:10px
}

#header {
	width:100%;
	height:50px;
	top:0px;
	position:absolute;
	overflow:hidden;
	color:#fff;
	text-align:justify;
	z-index:0;
	background-color:rgba(0,0,0,1);
	font-size:1.0em;
}

#name {
  position: absolute;
  left: 120px;
  top: 15px;
  width: 337px;
  height: 40px;
  overflow: hidden;
  margin: 0;
  background-color: rgba(0.0,0.0,0.0,0.0);
  z-index: 1;
}	

#footer {
	top:96%;
	width:100%;
	height:4%;
	position:absolute;
	overflow:hidden;
	color:#fff;
	text-align:justify;
	z-index:10;
	background-color:rgba(0,0,0,1);
	font-size:1.0em;
}	




#searchbox
{
	position: absolute;
	right: 42.5%;
	top: 1px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border-width: 1px;
	border-style: solid;
	width: 290px;
	height: 35px;
	padding: 5px;
	overflow: hidden;
	z-index: 2;
}	

        
#search, #submit
{
	float: left;
	z-index: 2;
}

#search
{
	padding: 5px 9px;
	height: 23px;
	width: 200px;
	border: 1px solid #a4c3ca;
	font: normal 13px 'trebuchet MS', arial, helvetica;
	-moz-border-radius: 50px 3px 3px 50px;
	 border-radius: 5px 5px 5px 5px;
	 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
	 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
	 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);    
	z-index: 2;			 
}

#submit
{		
	background: #0A0B0A;
	background-image: -moz-linear-gradient(#FFFFFF, #6CB2C8);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6CB2C8),color-stop(1, #FFFFFF));
	-moz-border-radius: 3px 50px 50px 3px;
	border-radius: 5px 5px 5px 5px;
	border-width: 1px;
	border-style: solid;
	-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;   		
	height: 35px;
	margin: 0 0 10 10px;
	padding: 0;
	width: 60px;
	cursor: pointer;
	font: bold 14px Arial, Helvetica;
	color: #23441e;
	z-index: 2;
	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

#submit:hover
{		
	background: #95d788;
	background-image: -moz-linear-gradient(#6cbb6b, #95d788);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ADADAD),color-stop(1, #ffffff));
	z-index: 2;
}	

#submit:active
{		
	background: #95d788;
	outline: none;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;	
	z-index: 2;			 
}

#submit::-moz-focus-inner
{
  border: none;
	z-index: 2;		  
}		

#search::-webkit-input-placeholder {
   color: #9c9c9c;
   font-style: italic;
	z-index: 2;		   
}

#search:-moz-placeholder {
   color: #9c9c9c;
   font-style: italic;
	z-index: 2;		   
}    

#search.placeholder {
   color: #9c9c9c !important;
   font-style: italic;
	z-index: 2;		   
}  

#search:focus
{
	border-color: #8badb4;
	background: #fff;
	outline: none;
	z-index: 2;			
}	

#stats {
	color: #fff;
	width: 250px;
	word-wrap: break-word;
	position: absolute;
	top: 280px;
	right: 16px;
	text-align: left;
	background: rgba(0, 0, 0, 1);
	padding: 10px;
	height: 160px;
	border: solid 1px black;
	border-radius: 5px;
	font-size: 120%;
}	

#measurment_panel {
	color: #fff;
	width: 180px;
	word-wrap: break-word;
	position: absolute;
	top: 55px;
	right: 300px;
	text-align: left;
	background: rgba(0, 0, 0, 1);
	padding: 10px;
	height: 60px;
	border: solid 1px black;
	border-radius: 5px;
	font-size: 120%;
}

#physical_menu {
	color: #fff;
	position: absolute;
	top: 60px;
	left: 10px;
	height: 80px;
	width: 225px;
	text-align: left;
	background: rgba(0, 0, 0, 1);
	padding: 10px;
	border: solid 1px black;
	border-radius: 5px;
	visibility: hidden;
	z-index: 20;					
}