@CHARSET "ISO-8859-1";


::root{ /* not working yet */
	var-top-grad: #066dab;
	var-mid-grad: #8abbd7;
	var-bot-grad: #c5deea;
}

html,body {
	width: 100%;
	height: 100%;
	font-size: 9px;
	font-family: Arial;

}

strong {
	font-weight: bold;
}


a {
	color: #336699;
}

#appLayout {
	height: 875px;
	width: 960px;
	margin: auto;
	margin-top: 10px;
	overflow: hidden;
	/*top: 2%;
	left: 2%;*/
}

#wholeHeader {
	position: absolute;
	width: 100%;
	margin: 0px;
	padding: 0px;
	left: 0px;
	right: 0px;
	border: 1px solid white; /* buggy css */
}

#headerHeader{
	position: relative;
	padding: 0px;
	background: -moz-linear-gradient(top, #066dab 0%, #8abbd7 31%, #c5deea 100%);
	/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #066dab),
		color-stop(31%, #8abbd7), color-stop(100%, #c5deea));
	/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #066dab 0%, #8abbd7 31%, #c5deea 100%);
	/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #066dab 0%, #8abbd7 31%, #c5deea 100%);
	/* Opera11.10+ */
	background: -ms-linear-gradient(top, #066dab 0%, #8abbd7 31%, #c5deea 100%);
	/* IE10+ */ */
	filter: progid:DXImageTransform.Microsoft.gradient(     startColorstr=#066dab,
		endColorstr='#c5deea', GradientType=0); /* IE6-9 */
	border: 1px solid #066DAB;
	border-radius: 15px;
/*	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px; */
	vertical-align: middle;
	height: 135px;
	
	/*clear: both;*/
}

/* .soria .dojoxExpandoTitle {
	background: -moz-linear-gradient(center top, #C5DEEA 0%, #8ABBD7 31%, #066DAB 100%)
		repeat scroll 0 0 transparent;
}
*/
#logoleft {
	position: absolute;
	width: 100px;
	height: 100px;
	left: 2%;
	top: 15%;
}

#logoright {
	position: absolute;
	height: 100px; +
	width: 110px;
	right: 0%;
	top: 12%;
}

#title {
	position: absolute;
	color: #FFFFFF;
	font-size: 35px;
	font-weight: bold;
	top: 20%;
	width: 100%;
	height: 100%;
	text-align: center;

}

#headerMenu {
	position: relative;
	margin:0px;
	padding:15px;
/*	margin: auto;
	margin-top: 8px; */
	width: 100%;
	height: 30px;
	/*height: 30px;*/
}
	
.tabs {
	list-style-type: none;
	margin: auto;
	width:680px;
	height:100%;
	text-align: center;

}

.tabs li{
	height: 100%;
	width: 70px; 
	float: left;
	margin: 0px;
	border: 1px solid #066DAB;
	border-radius: 10px;
	font-size: 15px;
	font-weight: bold;
	background: #c5deea;
	margin-right: 10px;
	margin-left: 10px;
	padding: 0px 21px;
	cursor: pointer; 

}

.tabs li:hover {
	background: #CCCCCC;
	transition-property: background;
	transition-duration: 2s;
}

.tabs li.active {
	background: #FFFF00;
	foreground: #CCCCCC;
	transition-property: background;
	transition-duration: 2s;
}

#centerPane {
	font-family: Arial;
	margin:0px;
	padding:0px;
	overflow: hidden;
	/*width: 950px;
	height: 640px; */
	
	/*position: relative;
	overflow-y: hidden;*/
}

.tab_container {
	border: 1px solid #066DAB;
	border-radius: 15px;

	width: 950px;
	height: 640px;
	background: #FFFFFF;
}

#map {
	height: 98%;
	width: 55%;
	padding: 5px;
	border-right: 1px solid #066DAB;
	position: absolute;
}

#rightPane {
	position: absolute;
	margin:0px;
	padding:0px;
	width: 42%;
	color: #004460;
	height: 100%;
	left: 57%;
	clear: both;
}

#details {
	background-color: #FCFFF5;
	position: absolute;
	padding: 3px;
	margin: 0px;
	height: 20%;
	width: 100%;
	font-weight: bold;
	border-bottom: 1px solid #066DAB;
}

.detailHeader {
	position: absolute;
	margin: 3px;
	font-size: 1.7em;
	color: #00008b;
	height:20%;
}

#stationInfo table,#productInfo table {
	position:absolute;
	padding: 0px;
	cellpadding: 0px;
	cellspacing: 0px;
	margin: 0px;
	height: 80%;
	width: 100%;
	top: 14%;
	font-size: 1.1em;

	padding-top: 2%;
	word-wrap: break-word;
}
#details table {
	font-size: 1.2em;
	table-layout: fixed;
}
#details table td {
	padding: 0px;
	margin: 0px;
}

#stationInfo table td:first-child {
	width: 29%;
}

#productInfo table td:first-child {
	width: 29%;
}

#stationInfo {
	position: absolute;
	left: 0%;
	top: 0%;
	height: 100%;
	width: 38%;
}

#productInfo {
	position: absolute;
	left: 38%;
	top: 0%;
	height: 100%;
	width: 60%;
	padding-left: 1%;
	border-left: 1px solid #066DAB;
}

#alertsBar {
	position: absolute;
	top: 21%;
	margin-top: 3px;
	height: 3%;
	width: 100%;
	color: #ff0000;
	text-align: center;
	font-size: 1.4em;
	font-weight: bold;
}

#stationAlerts {
	position:absolute;
	margin: 7px;
	left: 0%;
	height: 100%;
	width: 70%;	
}
#siteButton {
	position: absolute;
	left: 75%;
	margin: 3px;
	font-size: 1em;
}

.alertValue {
	color: #5555ff;
}

.plotHeader {
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
}

#period {
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
}

#uvDiv {
	position: absolute;
	top: 25%;
	height: 73%;
	width: 100%;
	margin: 0px;
	padding: 0px;

}

#uDiv {
	position: absolute;
	top: 8%;
	width: 100%;
	height: 50%;
}

#vDiv {
	position: absolute;
	top: 55%;
	width: 100%;
	height: 50%;
}

#msgu,#msgv {
	color: red;
	padding: 10px;
}

#uimg,#vimg {
	height: 60%;
	width: 100%;
}

#utbl,#vtbl {
	width: 100%;
}

.roundedCorner {
	background-color: #EE82EE;
	border: 1px solid #066DAB;
	border-radius: 4px 4px 4px 4px;
}

#date_selection {
	width: 300px;
	margin: auto;
	font-size: 15px;
}

#legend {
	bottom: 7%;
	position: absolute;
	z-index: 10000;
	background-color: #f0f0f0;
}

#legend table {
	width: 110px;
	height: 60px;
	table-layout: fixed;
	border: 1px solid black;
	display: inline-block;
	font-size: 12px;
}

#legend table td {
	padding-right: 0px;
	padding-left: 10px;
}

#legend img {
	width: 10px;
	height: 10px;
	margin: 0px 0px 0px 0px;
}

#click_station {
	bottom: 0%;
	background-color: #ffffff;
	height: 3%;
	width: 100%;
	font-size: 15px;
	font-weight: bold;
	text-align: center;

	position: absolute;
	z-index: 100;
}

#click_station a {
	text-decoration: none;
}

#addButton,#clearButton,#resetButton{
	foreground: #FFFFFF;
	background-color: #c5deea;
	bottom: 7%;
	color: black;
	cursor: pointer;
	height: 24px;
	width: 100px;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	line-height: 24px;
	right: 2%;
	border-radius: 10px;
	position: absolute;
	padding: 4px;
	z-index: 100;
}

#addButton a,#clearButton a {
	text-decoration: none;
}

#addButton2 {
	background-color: #FFCC00;
	bottom: 5px;
	color: #45484D;
	cursor: pointer;
	right: 50%;
	padding: 4px;
	position: absolute;
	z-index: 100;
}

.tabFormDiv table{
		margin: auto;
		min-width: 250px;
}

.tabFormDiv table input, .tabFormDiv table select {
	width: 100%;
	background-color: lightblue;
	
}

#formButtons{
	display: table;
	margin: auto;
}
#formButtons input{
	margin: 10px;
}
.formLabel {
	font-size: 1.5em;
	text-align: left;
}

p {
	font-family: "Helvetica Neue", Helvetica, "Trebuchet MS", Arial,
		sans-serif;
}


#formStar {
	color: red;
}

#formInput {
}

#download_div,#diclaimer_div,#reg_form {
	width: auto;
	margin: 0px 0px 30px 0px;
	padding: 0 6px 10px 8px;
}

a {
	text-decoration: none;
}

li {
	line-height: 2em;
}

#tabDiv {
	margin: 10px;	
}

#download_p {
	font-size: 17.5px;
	line-height: 1.0m;
	text-indent: 1.5em;
}

#about_par,#diclaimer_par,#form_p {
	font-size: 17.5px;
	line-height: 1.0m;
	text-indent: 1.5em;
	font-family: "Helvetica Neue", Helvetica, "Trebuchet MS", Arial,
		sans-serif;
	color: black
}

#line {
	color: blue;
	font-size: 24px;
}

.esriAttributeInspector
	.dijitTextBox {
	width: 10em;
}

.esriAttributeInspector .atiLayerName {
	display: none;
}

.esriAttributeInspector .atiLabel {
	font-weight: bold;
	color: #705B35;
}

.esriAttributeInspector .atiField {
	background: #FFF6D9;
}

.esriAttributeInspector .atiButtons {
	color: #705B35;
}

.specAlertValue {
	color: red;
}

#footer {
	margin-top: 10px;
	border: 1px solid #066DAB;
	border-radius: 15px;
	background: #8abbd7;
	text-align: center;
	font-size: 1.6em;
}