/*
 *
 * Data Explorer Specific Stylesheet
 *
 */

/* wraps the data explorer content.
   Assume this is wihtin main, content etc. */
.de-wrap{
	position: relative;
	width: 914px; 
	margin:auto;
	font: 14px normal verdana,arial,helvetica,sans-serif;

    box-sizing: content-box;
    text-align: left;
}

/* paragraphs in the intro text */
p.de-intro{}

/* last paragraph in the intro text */
p.de-intro-last{
	margin-bottom:0px;
}

/* The wrapper around the data settings, left, and map or location list on  right */
.de-split-wrap{
	display: table;
	height: 100%;
  	width: 916px; lc( 100% + 2px );
  	padding: 0px;
  	margin: 0px;
  	border: 0px;
  	position: relative;
  	margin-bottom: 4px;
}

.de-split-left{
	display: table-cell;
        vertical-align: top;
	/*width: 325px;*/
  	padding: 0px;
  	margin: 0px;
  	border: 0px;
		border:0px;
  	height: 100%;
		width: 330px;
}

.de-split-right{
	display: table-cell;
        vertical-align: top;
	/*width: 595px;*/
	  width: 570px;
  	padding: 0px;
  	margin: 0px;
		padding-left: 12px;
  	height: 100%;
		border:0px;
}

.de-maploc-wrap{
	position:relative;
	/*height: 100%;*/
	height: 500px;
	width: 570px; /*calc( 100% );*/
	clear: both;
	margin: 0px;
	padding: 0px;
	margin-top:6px;
	border: 1px solid #aaa;
	border-radius: 3px 3px 0px 0px;
	overflow:visible;
}

/* On top of the map - same location as de-maploc_head on bulk page */
.de-maploc_help{
  	background-color: #ddd;
  	border: 0px solid #aaa;
  	border-bottom:0px;
  	padding: 4px 12px;
  	border-radius: 0px; /*4px 4px 0px 0px;*/
  	height: 15px;
  	line-height: 15px;
}

/* On top of the locations - same location as de-maploc_help on map page */
.de-maploc_head{
  	background-color: transparent;
  	border: 0px;
  	border-bottom:0px;
  	padding: 4px 12px;
  	border-radius: 0px;
  	height: 24px; /*15px;*/
  	line-height: 24px;
}

/* The map div. The height is based on the height of the map_help. */
.de-maploc {
	position:relative;
	clear: both;
	width: 570px; /*100%; calc( 100% - 2px );*/
	height: 100%; /* calc( 100% - 24px - 8px );*/
	border: 0px solid #aaa;
}

#map {
	overflow:hidden;
}

#locations_wrap{
	border: 0px;
}


/* */
fieldset.de-fieldset{
	width: calc( 100% - 18px );
	margin: 0px;
	padding: 6px 6px 6px 12px;
	position:relative;
	border:1px solid #aaa;
    /*margin-bottom:6px;*/
    border-radius: 4px;

}

/* */
fieldset.de-fieldset ul{
	list-style-type:none;
	padding: 0px;
	margin: 0px;
}

/* */
hr.de-data-settings {
	border-style:solid;
	border-width:0px;
	border-bottom-width:1px;
	border-color:#aaa;
	clear:both;
	padding: 0px; -top: 6px;
	margin: 8px 0px;
}


/* This is a placeholder for exploer.js.  Don't remove. */
.de-cntrlbut{
	margin-right: 12px;
	white-space: nowrap;
	overflow: visible;
}

/* custom button */
.de-button {
  display: inline-block;
  margin:0px 12px;
  background: #663d1e;
  color: #f7efd6;
  border-color: #513018;
  border-width: 1px;
  border-color: #8789AF;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  text-decoration: none;
  padding: 2px 5px 2px;
  font-weight:bold;
  width:190px;
  /*font-size:9pt;*/
  line-height: 18px; /*9pt;*/
  text-align:center;
  white-space:nowrap;
  cursor: pointer;
}

/* custom button */
.de-button-disabled {
  display: inline-block;
  margin:0px 12px;
  background: #CCC;
  color: #969696;
  border-color: #CCC;
  border-width: 1px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  text-decoration: none;
  padding: 2px 5px 2px;
  font-weight:bold;
  /*font-size:9pt;*/
  line-height: 18px; /*9pt;*/
  text-align:center;
  white-space:nowrap;
  cursor:default;
  width:190px;
}

/* Keeps the link to the right of the page. */
.de-hide-text {
	float:right;
	cursor:pointer;
	position:relative;
}

/* data settings split climate variables */

.de-ds-split-wrap{
	display: table;
	height: 100%;
  	width: calc( 100% + 2px );
  	padding: 0px;
  	margin: 0px;
  	border: 0px;
  	position: relative;
  	margin-bottom: 4px;
}

.de-ds-split-left{
	display: table-cell;
	/*width: 325px;*/
  	padding: 0px;
  	margin: 0px;
  	border: 0px;
  	height: 100%;
}

.de-ds-split-right{
	display: table-cell;
	/*width: 595px;*/
  	padding: 0px;
  	padding-left: 12px;
  	margin: 0px;
  	height: 100%;
}


/* de-labeled-input is for lines in data settings */
.de-labeled-input{
    white-space:nowrap;
    display: inline-block;
}
.de-labeled-input label{
    vertical-align:middle;
    cursor: pointer;
}
.de-labeled-input input{
	cursor: pointer;
    /*inline-height:14px;*/
    height:14px;
    /*padding:2px;
    border:1px solid #aaa;
    border-radius: 3px;*/

}
.de-labeled-input input[type=checkbox]{
    vertical-align:sub;
}
.de-labeled-input input[type=radio]{
    vertical-align:sub;
}

.de-date-block-right{
	border: 0px solid #777;
	text-align:right;
	padding-bottom:0px;
}
.de-date-float-right{
	float:right;
	display:inline-block;
	border: 0px solid #777;
	text-align:right;
	padding-bottom:6px;
}

li.de-ctrl-group{
	border: 1px solid transparent;
	margin-top:0px;
}

/* location controls on map page */
.de-location-first{
	display:inline-block;
	width:130px;
}

/* locations error on bulk page */
span.de-loc-error{
	background:#f99;
}

/* results section on the bottom of map page */

#results{
    border:0px solid #aaa;
    background-color: #27254D;
    padding:2px;
    margin-top:2px;
    border-radius: 2px;
    font-size:0.85em;
    width: 100%;
}

#result_stats{
	margin:0px;
	width:calc( 100% ); /*886px;*/
	margin-bottom:2px;

}
#chart_help{
	background-color:white;
}
#chart_help p{
	padding:0px 24px 6px 24px;
	margin:0px;
}
#result_stats td{
    background-color:white;
}
#rstr{
	padding:6px 12px 2px 6px;
	text-align:right;
	white-space: nowrap;
}
#rstl{
	padding:6px 6px 2px 12px;
	text-align:left;
}
#rscr{
	padding:2px 12px 2px 6px;
	text-align:right;
	white-space: nowrap;
}
#rscl{
	padding:2px 6px 2px 12px;
	text-align:left;
}
#rsbr{
	padding:2px 12px 6px 6px;
	text-align:right;
	white-space: nowrap;
}
#rsbl{
	padding:2px 6px 6px 12px;
	text-align:left;
}
.rstab{
	padding:2px 6px 6px 12px;
	width: 100%;
}
.rstab th{
	padding:0px 1px 0px 6px;
	text-align: right;
	width: 14%;
	white-space: nowrap;
	vertical-align: bottom;
}
.rstab td{
	padding:0px 6px 0px 1px;
	text-align: left;
	width: 11%;
	white-space: nowrap;
	vertical-align: bottom;
}

.annorm{
	display: inline-block;
	white-space: nowrap;
	padding: 1px 12px;
}

#chart{
	width: calc( 100% );  /* 886px; 100%; */
	height: 245px; /* <--- warning, this is modified in js */
	border:0px; /*px solid #aaa;*/
	margin:2px;
	padding:0px;
	margin-bottom:0px;
}
#ajax_indicator{
    visibility:visible;
    float:right;
    margin-right:12px;
    font-weight: bold;
}
#ajax_indicator span{
	vertical-align:top;
	white-space: nowrap;
}
#ajax_indicator img{
	position:relative;
	top:-6px;
}
#stability_group{
    padding-top:8px;
}
#stability{
	font-weight:bold;
	color:#c00;
	white-space:nowrap;
}

/* ol */

.layer-switcher button{
	background-size: 24px 24px;
	width: 24px;
	height: 24px;
	background-position: 0px;
}


/* pss stuff simplified */

label.pss {

	font: 14px normal verdana,arial,helvetica,sans-serif;

	background:transparent; 
	display: inline-block;
	padding: 0px 6px 0px 0px;
	margin: 0px;
	height: 21px;
	line-height:23px;
	border-radius:2px;
	border:1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	float: none;
}

label.pss span{
	display: inline-block;
	white-space: nowrap;
}

label.pss-txt,
label.pss-sel{
white-space: normal;
}

label.pss-txt span,
label.pss-sel span{
	float: left;
	cursor: default;
	margin: 0px 3px 0px 6px;
}
label.pss button,
label.pss input,
label.pss select,
label.pss textarea {
    margin: 0;
}

label.pss input:disabled + span{
	color: #aaa;
}


/* Locations */

#locations{
	width: 100%;
	/*height: 100%;*/
}
#locations th{
	vertical-align: top;
	white-space: nowrap;
}
#locations td{
	padding: 0px 12px;
}
#locations .elevation{
	font-style: italic;
	background-color: #eee; 
}
#locations .elevation_err{
	font-style: italic;
}
#locations_container{
	overflow: auto;
	width: 100%;
	border: 1px solid #aaa;
	/*border-radius: 4px;*/
}
tr.loc_has_error td{
	/*background: #d44;*/
	border-top: 1px solid #d44;
	padding:12px 0px;
	background:#f99;
}
tr.loc_errors td{
	background:#f99;
	font-weight: bold;
	border-bottom: 1px solid #d44;
}
tr.loc_has_warning td{
	/*background: #d44;*/
	border-top: 1px solid #d80;
	padding:12px 0px;
	background:#FFF099; /*#fc0;*/
}
tr.loc_warnings td{
	background:#FFF099; /*#fc0;*/
	font-weight: 14px;
	border-bottom: 1px solid #d80;
	font-size:0.85em;
}
span.loc_error{
	background:#f99;
}

.progbar{
	display:inline-block;
	width: 400px;
}