@charset "utf-8";
/* CSS Document */

html, body, #map-canvas {
    width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px
}

html {
	overflow:hidden;
}

body {
	background-color: #000;
	height: 100%;
	width:100%;
	overflow:hidden;
}

/* hides the spin-button for firefox */
input[type=number] {
	-moz-appearance:textfield;
}

/* hides the spin-button for chrome*/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}	

/*override default settings for dialog box*/
.ui-dialog-contain{
	width: 800px;  
	max-width: 800px;
    margin: 10% auto 15px auto;
	padding: 0;
	margin: 0;
}

/*Make overall jquery background black*/
.ui-page { 
	background: black;
}

/*
.ui-header .ui-title {
    margin-right: 20%;
    margin-left: 20%;
}

.ui-footer {
	height:50px;
}
*/


#footerBlock label {
/*	padding-top:5px;*/
	padding-left:10px;
}

#buttons {
	padding-top:3px;
}
.slide-label {
	font-size:1px;

}

/*hide scroll bars*/
#help {
	background-color: #000;	
}

#mapPage {
	width: 100%;
	height: 100%;
}
#map_canvas {
	width: 100%;
	height: 100%;
	padding: 0;
}

img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	background-color: #000;
}

.info {
	color:#000;	
	margin-left:5px;
}

#consoleInfo {
	overflow:auto;	
}

#infoframe { 
	width:100%; height:768px; 
}

#fblogo {
	position:absolute;
	padding:2px 0px 0px 10px;
/*	margin-top:5px;*/
}/* CSS Document */


#mapPageFooter {
    padding: 0; margin: 0;
    position: absolute;
    width: 100%;
    bottom: 0px;
    background-color: #000;
}
.headerBtn {
    position: absolute;
    font-family: sans-serif;
    font-size: 20px;
    width: 30px;
    height: 25px;
    background-color: rgba(0,0,0, .30);
    text-align: center;
    padding:0px;
    border-radius: 25px;
    top: 10px;
    right: 50px;
    color:#fff;
    z-index: 50;
    cursor: pointer;
    pointer-events: all;
}		

.headerBtn:hover {
    color:red;	
    font-weight:bold;	
}		
#showIntro {
	left: 50px;
}
.dropShadow {
    -webkit-box-shadow: 5px 5px 50px 4px rgba(255,255,255,0.1);
    -moz-box-shadow: 5px 5px 50px 4px rgba(255,255,255,0.1);
    box-shadow: 5px 5px 50px 4px rgba(255,255,255,0.1);
}

header {
    width: 100%;
    text-align: center;
    z-index: 100;
    color: #fff;
    position: absolute;
    float: left;
    text-shadow: 4px 4px 9px rgba(0, 0, 0, 1);
    font-family: "Trebuchet MS",Segoe, "Segoe UI", "DejaVu Sans",  Verdana, "sans-serif";

    user-select:none;
    pointer-events: none;
/*			background: rgba(0,0,200,.3);*/
}
#mapStyle-selector {
    width:100px;
}
#mapStyle-selector-control {
    width:300px;
}

.ui-button {
    width:75px;
    height: 30px;
    margin: 0; padding: 0;
}
.infoPanel {		
    position: absolute;
    left: 30px;
    bottom: 60px;
    width: 700px;
    height: 800px;
    background-color: rgba(0,0,0, 0.8);
    border:none;
    border-radius: 10px;
    cursor:pointer;
    overflow-y: scroll;
	color: #fff;
}
.infoPanel h2 {
    text-align: center;
    font-family: sans-serif;
}

.infoPanelHeader {
/*			padding: 10px;*/
/*			width: 100%;*/
    height: 50px;
    background-color: rgba(0,0,0, .3);
    border-radius: 10px;
    line-height: 1em;
/*			font-size: 20px;*/
}

#introPanel {
	display: block;
	position: relative;
	top:50px;
	overflow: hidden;
	margin: 0 auto;
	left: 0;
	height: 400px;
	font-size: 1.5em;
}

#introText {
	display: block;
	position: relative;
	width: 80%; 
	margin: 0 auto;
	top: 70px;
}
#introText a{
	text-decoration: none;
	font-weight: bolder;
}

.label {
    text-align: top left;
    padding-top: -10px;
/*			background-color: rgba(0,0,0,.25);	*/
    margin-bottom: 2px;
}

.upDwn:hover {
    background-color:rgba(255,0,0,0.8);
}
.upDwn {
    width: 26px;
    height: 26px;
    background-image: url(../includes/images/icons-png/carat-d-black.png);
    background-position: center;
    background-repeat: no-repeat;
    background-color:rgba(255,255,255,0.8);
    border-style: none;
    border-radius: 16px;		
    padding: 5px;
    float: right;
    z-index: 1000;
    margin: 10px;
}

.dim {
    color: #444;
}
#ul_readings {
    margin-top: 70px;
}

.labels {
    color: red;
    background-color: transparent;
    font-family: "Arial", "Lucida Grande", sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    width: 100px;
    border: 0;
}

/*vvvvvvvvvvvv Scroll Bar styles vvvvvvvvvvvv*/
/* https://css-tricks.com/custom-scrollbars-in-webkit/ */
::-webkit-scrollbar {
	width: 20px;   
	margin-right: 5px;
/*			background-color:#313131;*/
	background-color: rgba(51,102,204,.01);
}
::-webkit-scrollbar-track {
	border-radius: 5px;
	background-color: rgba(100,100,100,0.50);
	margin-right: 5px;
/*			background-color: #3366cb;*/

	/*  gives button look, remove for flat look*/
	/*-webkit-box-shadow: inset 0 0 15px rgba(0,0,0,1);*/
}
::-webkit-scrollbar-thumb {
	border-radius: 5px;
/*			background-color: rgba(0,0,0,0.50);*/
	margin-right: 5px;
	background-color: rgba(250,250,250,.25);
	/* -webkit-box-shadow: inset 1px 1px 15px rgba(0,0,0,1);*/
}
/*^^^^^^^^^^^^ End Scroll Bar styles ^^^^^^^^^^^^^^^*/