/*************************************


CSS styles for NSIDC MIST interface

author S.Truex

created 4/9/08


*************************************/


/* GLOBAL */

.bodyContentBorder {
	border: 1px solid #CCCCCC;
	margin: 10px;
	padding: 0;
}

.border {
	border: 1px solid #CCCCCC;
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

.clear {
	clear: both;
}

/* HEADINGS */

h2 {
	color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
	padding: 0;
}

h3 {
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
	padding: 7px 0 0 24px;
}

h4 {
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .85em;
	padding: 5px 0 0 5px;
}

.section_header {
    width:100%;
	height: 26px;
    background-color: #E5E5E5;
	border: 1px solid #CCCCCC;
	border-left: none;
	border-right: none;
	clear: both;
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
}

.section_header h3 {
	float: left;
	white-space: none;
}

/*
.section_header img {
	padding: 7px 5px;
}
*/

.label_header {
	width: 100%;
	text-align: left;
	background: #b4bfdc;
	border: 1px solid #CCCCCC;
	border-left: none;
	border-right: none;
	height: 26px;
}

.label_header h4 {
	padding: 8px 0 0 44px;
}

/* SEARCH */

#search_content {
	/*border: 1px solid #CCCCCC;*/
}

#search_body {
    padding: 0;
	margin: 0;
	border: 1px solid #CCCCCC;
}

#search_head {
	background: #939393;
	margin: 10px 0 0 0;
	height: 26px;
}

#search_head h2 {
	white-space: none;
	float: left;
	padding: 5px;
}

/* STATIONS */

#stationhead {
	border-top: none;
	margin: 0 0 12px 0;
}

#availablehead {
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: none;
	padding-bottom: 10px;
}

#availablehead  h4 {
	padding: 0px 0 0 10px;
}

#availableStationsBorder {}

#pickedhead {
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: none;
	padding-bottom: 10px;

}

#pickedhead  h4 {
	padding: 0px 0 0 10px;
}

#selectedStationsBorder {}

#stationdiv {
    width: 100%;
	margin: 0;
}

#stationdiv div {
	float: left;
}

#stationlistdiv {
    padding: 0;
    width: 190px;
    text-align: center;
	margin: 0 4px 10px 10px;
}

/* GOOGLE MAP */

#mapdiv {
    width:500px;
    height:300px;
	border: 1px solid #CCCCCC;
	margin: 0 0 0 10px;
}

#mapTextContainer {
	width: 494px;
	height: 45px;
	margin: 0 10px 10px 10px;
	padding: 3px;
	background: #e5e5e5;
	border-top: 0;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	float: left;
	display: block;	
}

#mapText {
	color: #333333;
	font-size: .85em;
}

.tooltip {
    border-style:solid;
    border-width:thin;
    padding:2px;
    width:auto;
}

/* PRODUCTS */

#productdiv {
	margin: 10px;
	padding: 0 10px 10px 10px;
	background: #e5ecf0;
}

.product_parameters {
    display: none; 
    position: relative;
    left: 30px;
}

/* TIME RANGE/SEASONALITY */

#temporaldiv {
	margin: 10px;
}

#overallhead {
	border-bottom: none;
	padding-bottom: 10px;
}

#overallhead h4{
	padding-top:0;
}

#overalldiv {
	border: 1px solid #CCCCCC;
	padding: 15px 0 15px 50px;
}

#overallrangediv {
	float: left;
	margin: 0 20px 0 0;
}

#overallformatdiv {
	margin: 0 0 10px 0;
}

#seasonalhead {
	border-bottom: none;
	clear: both;
	padding-bottom: 10px;
}

#seasonalhead h4{
	padding-top:0;
}

#seasonaldiv {
	border: 1px solid #CCCCCC;
	padding: 15px 0 15px 50px;
}

#seasonalrangediv {
	float: left;
	margin: 0 20px 0 0;
}

#seasonalformatdiv {
	margin: 0 0 10px 0;
}

/* RESULTS */

#results_head {
	background: #939393;
	margin: 3px 0 0 0;
	height: 26px;
	/*clear: both;*/
}

#results_head h2 {
	white-space: none;
	float: left;
	padding: 5px;
}

#results_body {
	margin: 0;
	padding: 10px 10px 0 10px;
	border: 1px solid #CCCCCC;
}

#summary_head {
	border-bottom: none;
	clear: both;
}

#summarydiv {
	border: 1px solid #CCCCCC;
	padding: 10px 0 15px 50px;
	margin: 0 0 10px 0;
}

#resulttable {
	border: 1px solid #CCCCC;
}


/* STATUS */

#statusdiv {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	padding: 10px;
}

/* IMAGES */

.clickImg {
    cursor: pointer;
}

#search_arrow {
	float: left;
	padding: 5px 5px 5px 10px;
	border: none;
}

#results_arrow {
	float: left;
	padding: 5px 5px 5px 10px;
	border: none;
}

#graphs_arrow {
	float: left;
	padding: 5px 5px 5px 10px;
	border: none;
}

.helpIcon {
	background: url(/images/mist/help_icon_off.png) top left no-repeat;
	float: left;
	padding: 7px 10px 0 10px;
	margin: 8px 7px 0 10px;
	border: none;
	height: 22px;
}

#saveSearchHelp {
	margin: 3px 0 0 20px;
}

#nameSearchHelp {
	margin: 3px 0 0 20px;
}

#availableStationsHelp {
	margin-left: 5px;
	margin-right: 5px;
}

#selectedStationsHelp {
	margin-left: 5px;
	margin-right: 5px;
}


.mistRequired {
	float: left;
	padding: 1px 7px 0 0;
	vertical-align: text-top;
}



/* BUTTONS */

.stationButton {
	margin: 10px;
}

.searchButton {
	padding: 0 15px;
}

.buttondiv {
	padding: 10px;
	margin: 10px;
	border: 1px solid #CCCCCC;
	text-align: center;
}

#clearsearchdiv {}

#searchButtons {
	margin-left: 0;
	margin-right: 0;
	border-left: none;
	border-right: none;
	border-bottom: none;
}

#saveRestoreButtons {
	margin: 0 0 20px;
	border: none;
	padding-top: 0;
	/*border-left: none;
	border-right: none;
	border-bottom: none;*/
}

#resultsButtons {
	position: relative;
	top: 0;
	left: -25px;
	width: 97%;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	/*border-left: none;
	border-right: none;*/
	/*border-bottom: none;*/
	z-index: 100;
}

#resultSubmit {
	position: relative;
	top: 0;
	left: -10px;
	width: 100%;
	margin: 0;
	border: none;
}

#graphButtons {
	position: relative;
	top: 0;
	left: 0;
	width: auto;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	border-left: none;
	border-right: none;
}

#graphSubmit {
	position: relative;
	top: 0;
	left: 0;
	width: auto;
	margin: 0;
	border: none
}


/* HELP TEXT */

.mistHelp {}

#availStations {}

.inlineHelp {
	padding: 5px;
}

.inlineHelpBox {
	position: relative;
	background: #E5E5E5;
	border: 1px solid #CCCCCC;
	padding: 10px 10px 10px 7px;
	clear: both;
}

.inlineHelpContainer {
	position: relative;
	left: 10px;
	padding: 12px 0 5px 10px;
	margin: 0;
}

#stationInlineHelp {
	margin: 0 10px 10px 10px;
}

#resultsInlineHelp {
	position: relative;
	left: -40px;
	padding-left: 10px;
	margin: 0;
	width: 101%;
}

/* SELECT, OPTION, INPUT */

#stationlistdiv select {
    width: 190px;
	border: 0;
}

.inputLabel {
	color: #333333;
	font-weight: bold;
	padding: 0 10px;
}

.group1 {
    background-color:#FC6;
}

.group2 {
    background-color:#FFC;
}

.group3 {
    background-color:#CFC;
}

.group4 {
    background-color:#EE44BB;
}

.group5 {
    background-color:#88EEEE;
}

.group6 {
    background-color:#EE0000;
}

/************************************

styles for search results section

************************************/

#allParamResults {
	padding: 0;
	margin: 0;
}

#allParamResults div {
	padding: 5px 20px;
}

.sitesResults {}

.productsResults {}

.productParam {}

.timeResults {}

.timeParam {}


/************************************

styles for graphing section

************************************/

.graph_header h4 {
	padding: 8px 0 0 44px;
}

#create_graph {
	position: relative;
	left: -25px;
	border: 1px solid #CCCCCC;
	/*border-left: none;*/
	padding: 0 0 15px 0;
	margin: 10px 0;
}

#create_graph_head {
	clear: both;
	width: 100%;
	text-align: left;
	background: #b4bfdc;
	border-bottom: 1px solid #CCCCCC;
	height: 26px;
}

#create_graph_info {
	padding: 20px 0 15px 50px;
}

#create_graph_info input {}

#create_graph_parameters {
	padding: 10px 0 15px 50px;
}


#foldinfodiv {
	padding: 10px 0;
}

#foldinfoformatdiv {
	padding: 0 10px;
}

#graphs_head {
	background: #939393;
	margin: 3px 0 10px 0;
	height: 26px;
	/*clear: both;*/
}

#graphs_head h2 {
	white-space: none;
	float: left;
	padding: 5px;
}

#graphs_body {
	margin: 0 0 10px 0;
	padding: 0;
	border: 1px solid #CCCCCC;
}

#graphsdiv {
	border: 1px solid #CCCCCC;
	margin: 10px;
	padding: 10px 10px 10px 50px;
	display: block;
}

#graph_allsites {
	padding: 5px 20px;
}

#graph_allsites div {
	padding: 5px 20px;
}