/* Layout of NOAA View Portal Based on OpenLayers (e4) */

.ui-dialog { z-index: 1000000 !important; cursor: pointer;}
.ui-front { z-index: 1000000 !important; }

html, body
{

	margin: 0;
	width: 100%;
	height: 100%;
       font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
       font-size: 80%;
       color: #222;
       background: #fff;

}

#map
{

	position: fixed;
	margin: 0;
	width: 99%;
	height: 98%;
       font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
       font-size: 80%;
       color: #222;
       background: #fff;
	visibility: visible;
	z-index: 700;

}

#map2
{
	
	position: fixed;
	margin: 0;
	width: 99%;
	height: 98%;
       font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
       font-size: 80%;
       color: #222;
       background: #fff;
	visibility: hidden;
	z-index: 700;

}

#map_truecolor
{
	
	position: fixed;
	margin: 0;
	width: 99%;
	height: 98%;
       font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
       font-size: 80%;
       color: #222;
       background: #fff;
	visibility: hidden;
	z-index: 700;

}

#map_truecolor2
{
	
	position: fixed;
	margin: 0;
	width: 99%;
	height: 98%;
       font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
       font-size: 80%;
       color: #222;
       background: #fff;
	visibility: hidden;
	z-index: 700;

}

#animationcontrols
{

	list-style: none;
	text-align: center;

}

#animationcontrols div
{

	cursor:pointer;

}
	
#legend
{

	bottom: 19%;
	color: #FFFFFF;
	font-size: 120%;
	left: 10%;
	padding: 0.3em 0.3em 0;
	position: absolute;
	visibility: hidden;
	width: 80%;

}

#colorbar
{

	max-width: 100%;
	height: auto;
	max-height: 18px;
	width: auto\9; /* ie8 */
	opacity: 1 !important;

}


#olControlNoSelect{
        -moz-user-select: none;
        -khtml-user-select; none;
}


#validDateRange
{

	position: absolute;
	bottom: 8.5%;
	right: 13%;
	z-index: 20000;
       font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	background: rgb(255, 255, 255) transparent;
	color: rgb(128, 128, 128);
       font-size: 120%;
	visibility: hidden;

}

#slider-range
{

	position: absolute;
	width: 90%;
	left: 5%;
	top: 45%;

}

#currentslide
{

	position: absolute;
	width: 90%;
	left: 5%;
	top: 35%;
	font-size: 120%;

}

#sliderarea
{

	position: absolute;
	width: 30%;
	left: 35%;
	bottom: 9%;
	height: 150px;
	text-align: center;
	padding: 1px;
	margin: 0;
	color: white;
	padding:15px;
	z-index:30000;
	background-color:black;
	background: rgba(0,0,0,.6);
	background: url("../img/bg-noise.png") repeat scroll 0 0%, -webkit-linear-gradient(top, #aaaaaa 0%, rgba(65, 64, 66, .1) 100%) repeat scroll 0 0 #222222;
	background: url("../img/bg-noise.png") repeat scroll 0 0%, linear-gradient(to bottom, #aaaaaa 0%, rgba(65, 64, 66, 0) 100%) repeat scroll 0 0 #222222;
       -webkit-border-radius:50% 50% 50% 50%;
	-moz-border-radius:50% 50% 50% 50%;
	border-radius:50% 50% 50% 50%;
	-moz-box-shadow: 0 0 28px 1px #000000 inset;
       -webkit-box-shadow: 0 0 28px 1px #000000 inset;
       box-shadow:0 0 28px 1px #000000 inset;
	
}

#divTimespans
{

	font-size:10pt;
	padding: 5;

}

#collapse
{

	background-image: url('../img/collapse.png');
	position: absolute;
	width: 48px;
	height: 48px;
	left: 49%;
	bottom: 17px;
	display:none;
	z-index:30000;

}

#expand
{

	background-image: url('../img/expand.png');
	position: absolute;
	width: 48px;
	height: 48px;
	left: 49%;
	bottom: 0%;
	display:none;
	z-index:30000;

}

#leftcollapse
{

	background-image: url('../img/leftarrow.png');
	width: 48px;
	height: 48px;
	margin-left:-37px;

}

#leftexpand
{

	background-image: url('../img/rightarrow.png');
	width: 48px;
	height: 48px;
	display: none;

}

#rightcollapse
{

	background-image: url('../img/rightarrow.png');
	width: 48px;
	height: 48px;
	margin-right: -37px;
	position: relative;
	z-index: 20;

}

#rightexpand
{

	background-image: url('../img/leftarrow.png');
	width: 48px;
	height: 48px;
	display: none;

}

#amount
{

	position: absolute;
	border: 0;
	color: #f6931f;
	/*font-weight: bold;*/ 
	background: transparent;
	z-order: 10001;
	bottom: 14%;
	left: 48%;
	visibility: hidden;

}

#downloadLoading
{

	display:none;

}

input[type=text]
{

	width: 80px;

}

canvas
{

	display:none;

}

.hidden
{

	display:none;

}

#currentValue
{

	position: absolute;
	height: 20px;
	z-index: 20000;
	display:none;
	padding: 1px;
	margin: 0;
	color: white;
    	font-size: 120%;
	padding-top:5px;
	padding-bottom:5px;
	padding-right:5px;
	padding-left:5px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	background-color: black;
	opacity: .6;
	border: solid 1px #789FB5;
	
}