/**************** Reset Styles Set By Other Stylesheets ***************************************************************/
#map h1, #map h2, #map h3, #map h4, #map h5, #map h6 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


/**************** Styles imported from legacy WCC site ****************************************************************/

#map BODY, #map P, #map TH, #map TD, #map DL, #map DT, #map DD, #map UL, #map OL, #map LI
{ color:#000; font:normal 11px "Helvetica Neue",Arial,Helvetica,sans-serif }
#map B, #map STRONG, #map TH, #map TH P, #map DT
{ font-weight:bold }
#map A IMG
{ border:0px }
#map FORM
{ margin:0px; padding:0px }
#map SELECT, #map INPUT
{ color:#000; font:normal 12px arial,helvetica,sans-serif }
#map HR
{ color:#000; border-width:0px; height:1px }
#map P, #map LI
{ line-height:1.5em; padding-bottom:.2em }


/**************** Fixes for conflicting stylesheets on web site ********************************************************/

/* Fix for NRCS_Consumption_styles.css */
#map img:focus, #map a:focus {
	border: none; !important
}

/* Fix bug where menu is invisible in IE */
/* (CSS hack to target IE only) */
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
	ul.menubar > li {
		background-color: #2678af;
		background-image: url("images/Top_Nav_Center_Button.gif");
	}
}


/****************  Checkboxes and Radio Buttons  **********************************************************************/

/* Base for label styling */
#map [type="checkbox"]:not(:checked),
#map [type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

#map [type="checkbox"]:not(:checked) + span,
#map [type="checkbox"]:checked + span {
  position: relative;
  padding-left: 23px;
  cursor: pointer;
}

/* checkbox aspect */
#map [type="checkbox"]:not(:checked) + span:before,
#map [type="checkbox"]:checked + span:before {
  content: '';
  position: absolute;
  left:5px; top: 0px;
  width: 10px; height: 10px;
  border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}

/* change box appearance when checked */
#map [type="checkbox"]:checked + span:before {

  background: #C1DAEA;

}

/* change box appearance when active */
#map [type="checkbox"]:not(:checked):active + span:before, #map [type="checkbox"]:not(:checked) + span:active:before {
  background: #ccc;
}
#map [type="checkbox"]:checked:active + span:before, #map [type="checkbox"]:checked + span:active:before {
  background: #9AAEBB;
}

/* checked mark aspect */
#map [type="checkbox"]:not(:checked) + span:after,
#map [type="checkbox"]:checked + span:after {
  content: '\2713';
  position: absolute;
  top: -2px; left: 7px;
  font-size: 10px;
  color: black;
}
/* checked mark aspect changes */
#map [type="checkbox"]:not(:checked) + span:after {
  opacity: 0;
  transform: scale(0);
}
#map [type="checkbox"]:checked + span:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
#map [type="checkbox"]:disabled:not(:checked) + span:before,
#map [type="checkbox"]:disabled:checked + span:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
#map [type="checkbox"]:disabled:checked + span:after {
  color: #999;
}
#map [type="checkbox"]:disabled + span {
  color: #aaa;
}
/* accessibility */
#map [type="checkbox"]:checked:focus + span:before,
#map [type="checkbox"]:not(:checked):focus + span:before {
  outline: 1px dotted #bbb;
}

/* Radio Button */
/* Base for label styling */
#map [type="radio"]:not(:checked),
#map [type="radio"]:checked {
  position: absolute;
  left: -9999px;
}
#map [type="radio"]:not(:checked) + span,
#map [type="radio"]:checked + span {
  position: relative;
  padding-left: 23px;
  cursor: pointer;
}

/* radio aspect */
#map [type="radio"]:not(:checked) + span:before,
#map [type="radio"]:checked + span:before {
  content: '';
  position: absolute;
  left:5px; top: 0px;
  width: 10px; height: 10px;
  border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}

/* change box appearance when checked */
#map [type="radio"]:checked + span:before {
  background: #C1DAEA;
}

/* change box appearance when active */
#map [type="radio"]:not(:checked):active + span:before, #map [type="radio"]:not(:checked) + span:active:before {
  background: #ccc;
}
#map [type="radio"]:checked:active + span:before, #map [type="radio"]:checked + span:active:before {
  background: #9AAEBB;
}

/* checked mark aspect */
#map [type="radio"]:not(:checked) + span:after,
#map [type="radio"]:checked + span:after {
  content: '';
  position: absolute;
  left:9px;
  top: 4px;
  width: 4px; height: 4px;
  background: black;
  border-radius: 6px;
}
/* checked mark aspect changes */
#map [type="radio"]:not(:checked) + span:after {
  opacity: 0;
  transform: scale(0);
}
#map [type="radio"]:checked + span:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled radio */
#map [type="radio"]:disabled:not(:checked) + span:before,
#map [type="radio"]:disabled:checked + span:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
#map [type="radio"]:disabled:checked + span:after {
  color: #999;
}
#map [type="radio"]:disabled + span {
  color: #aaa;
}
/* accessibility */
#map [type="radio"]:checked:focus + span:before,
#map [type="radio"]:not(:checked):focus + span:before {
  outline: 1px dotted #bbb;
}
/* checkmark and dot fonts */
#map [type="checkbox"]:checked + span:before,
#map [type="checkbox"]:checked + span:before,
#map [type="checkbox"]:not(:checked) + span:after,
#map [type="checkbox"]:checked + span:after  {
	font-family: "Arial Black", Arial, Helvetica;
	font-weight: bold;
}
#map [type="radio"]:not(:checked) + span:before,
#map [type="radio"]:checked + span:before,
#map [type="radio"]:not(:checked) + span:after,
#map [type="radio"]:checked + span:after {
	font-family: "Arial Black", Arial, Helvetica;
	font-weight: bold;
}

/****************  General styles  ************************************************************************************/

#map div#scrollDiv *, #map div.popupContent *, #map div.leaflet-control-attribution, #map div.leaflet-control-scale, #map .tooltipInside, #map .basinTooltipInside, #map.leaflet-container {
	font-family: Arial, Helvetica, sans-serif;
}

#map a {
	text-decoration: none;
	color: #03369C;
}

#map:not(.mobileInterface) a:hover {
	color: green;
}

#map a:active {
	color: red !important;
}

#map a:focus {
	outline: 1px dotted #bbb;
}


/****************  Control Panel styles  ******************************************************************************/

/* main title for map control */
#map h1 {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	color: black;
	text-shadow: 1px 1px 3px rgba(220, 220, 220, 1);
	font-size: 12px;
	text-align: left;
	font-weight: normal;
	border-left: 1px solid gray;
	border-bottom: 1px solid black;
	border-top: 1px solid #444;
	padding-left: 2px;
	padding-right: 5px;
	letter-spacing: 1px;
}
#map .mainHeaderWrapper {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background: #aaa;
	color: black;
	text-shadow: 1px 1px 3px rgba(220, 220, 220, 1);
	font-size: 12px;
	text-align: left;
	font-weight: normal;
	border-bottom: 1px solid black;
	height: 42px;

	background: -moz-linear-gradient(top,  rgba(142,142,142,0.8) 0%, rgba(224,224,224,0.5) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(142,142,142,0.8)), color-stop(100%,rgba(224,224,224,0.5))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(142,142,142,0.8) 0%,rgba(224,224,224,0.5) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(142,142,142,0.8) 0%,rgba(224,224,224,0.5) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(142,142,142,0.8) 0%,rgba(224,224,224,0.5) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(142,142,142,0.8) 0%,rgba(224,224,224,0.5) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc8e8e8e', endColorstr='#80e0e0e0',GradientType=0 ); /* IE6-9 */
}
#map .mainHeaderWrapper h1 {
	border: none;
}

/* main section titles */
#map h2 {
	margin: 0;
	padding: 0;
	padding-left: 5px;
	padding-bottom: 2px;
	font-size: 13px;
	font-weight: normal;
	letter-spacing: 1px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}


/* collapsible subsection titles */
#map h3 {
  margin: 0;

  height: 20px;
  padding: 0 0 0 0;

  font-size: 11px;
  font-family: inherit;
  font-weight: inherit;

  line-height: 18px;
}


/* interior category headings */
#map h4 {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	color: black;
    height: 13px;
    font-size: 11px;
    padding-top: 1px;
    margin-bottom: 2px;
    font-weight: bold;
}
#map h4.streamflowHeader {
	display: inline;
}
#map h4.soilsHeader {
	display: inline-block;
	width: 90px;
}

#map .leaflet-control-layers h5 {
	color: black;
	font-weight: bold;
	margin-left: 5px;
	font-size: 10px;
	margin-top: 3px;
	margin-bottom: -1px;
}

	
/* collapsible pane title styles */
#map h3 div {
  background: url("images/sprite.png") 5px 3px no-repeat;
  display: block;
  padding: 0px;
  padding-left: 22px;
  margin: 0;
  text-decoration: none;
  font-weight: normal;
  height: 100%;
  color: black;
  cursor: pointer;
}

#map h3.open div {
	background-position: 5px -34px;
}


/* color legend squares for network selection */
#map span.color-key {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 3px;
}
#map span.color-key.legend {
	width: 20px;
	height: 10px;
	margin-right: 6px;
	border: 1px solid black;
	position: relative;
	top: 2px;
}

#map span.color-key.legend.line {
	width: 20px;
	height: 2px;
	margin-right: 6px;
	border: none;
	position: relative;
	top: -3px;
}

/* color network station count black when network is checked, gray when not checked */
#map input ~ .networkStationCount {
	color: #999;
}
#map input:checked ~ .networkStationCount {
	color: black;
}


/* total station count */
#map .totalStationCount {
	margin-left: 2px;
}


/* make sure network names don't wrap */
#map div#networkSection {
	white-space: nowrap;
}

#map div.parameterSection {
	white-space: nowrap;
}

#map div.dataElementSection {
	white-space: nowrap;
}

/* input labels */
#map label {
    height: 14px;
    font-size: 11px; 
    padding-bottom: 0px;
    color: black;
    position: relative; /* Necessary to prevent scrolling to top when a checkbox is clicked. (Sets the label as the positioning parent of the checkbox.) */
}
#map label.headerElement {
    font-weight: bold;
    margin-top: 3px;
    margin-bottom: 0px;
}
#map label.forecastPoint {
	display: inline;
	font-size: 9px;
	margin-left: 8px;
	position: relative;
	top: -1px;
}
#map label.forecastPoint > span > span {
	position: relative;
	left: -2px;
	bottom: -1px;
}
#map label.locationLabel {
	padding-left: 0px; height: 20px;
}
#map label.locationLabel span {
	display: inline-block;
}
#map label#FCSTVERCAT_label {
	white-space: normal;
	height: 24px;
	text-indent: -24px;
	padding-left: 24px;
	line-height: 13px;
}

#map span.hucLabel {
	width: 40px;
}
#map span.elevationLabel {
	width: 115px;
}
#map span.elevationUnit {
	margin-left: 5px;
}
#map label.locationLabel input {
	margin-left: 5px;
}
#map label.hucAssociationsLabelCopy {
	margin-top: -2px;
	margin-bottom: 6px;
}
#map label.indented {
	margin-left: 15px;
	margin-bottom: 1px;
}
#map label.scaleTypeLabel {
	height: 16px;
	display: inline-block;
}
#map label#scaleTypeLabelC {
	display: inline-block;
	width: auto;
}
#map input.scaleInput {
	width: 40px;
	height: 13px;
}
#map input.referenceInput {
	width: 60px;
	height: 13px;
}
#map input.minimumYearsInput {
	width: 40px;
	height: 13px;
	margin-left: 1px;
	margin-top: 3px;
	margin-bottom: 3px;
}
#map .leaflet-control-layers label.probabilityLabel {
	position: relative;
	bottom: 1px;
	display: inline;
	font-size: 9px;
	margin-left: 23px;
	margin-right: 6px;
}

/* input elements */
#map input, #map select {
	font-size: 10px;
}
#map label.locationLabel input.hucInput {
	width: 147px;
}
#map label.locationLabel input.elevationInput {
	width: 57px;
}
#map select.selectStateAndCounty {
	width: 95px;
	height: 100px;
	margin-bottom: 5px;
}
#map select.selectStateAndCounty.selectCounty {
	margin-left: 10px;
}
#map select.depth {
	margin-left: 14px;
}

#map button {
	height: 19px;

	background-color:#ffffff;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #aaa;

	color:#000000;
	font-family:Arial;
	font-size:11px;
	text-decoration:none;
	margin-left: 2px;
	margin-right: 2px;
	padding: 0px 0px 0px 0px;
}
#map button.disabled {
	color: #aaa;
	border-color: #aaa;
	
}
#map button.disabled:active {
	color: #aaa;
	border-color: #aaa;
	background: #ffffff;
}
#map button.plusminus {
	height: 17px;
	margin-right: 0px;
}
#map button.plus {
	margin-left: 5px;
}
#map button:active {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2e86f9+0,146bde+54,146bde+100 */
	background: #2e86f9; /* Old browsers */
	background: -moz-linear-gradient(top,  #2e86f9 0%, #146bde 54%, #146bde 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #2e86f9 0%,#146bde 54%,#146bde 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #2e86f9 0%,#146bde 54%,#146bde 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e86f9', endColorstr='#146bde',GradientType=0 ); /* IE6-9 */

	border-color: #0050eb;
}
#map select.disabled {
	color: #ccc;
	border-color: #ccc;
}

/* give a gray theme to station sections, and a brown theme to layer sections */
#map h2.stations {
	background-color: rgb(130, 130, 130);
	color: white;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
#map h3.stations {
	background: rgb(235,235,235); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(235,235,235,1) 0%, rgba(161,161,161,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(235,235,235,1)), color-stop(100%,rgba(161,161,161,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(235,235,235,1) 0%,rgba(161,161,161,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(235,235,235,1) 0%,rgba(161,161,161,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(235,235,235,1) 0%,rgba(161,161,161,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(235,235,235,1) 0%,rgba(161,161,161,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#a1a1a1',GradientType=0 ); /* IE6-9 */
}
#map:not(.mobileInterface) h3.stations:hover {
	background: rgb(180, 180, 180);
	filter:;
}
#map div.stations {
    background-color: #eee;
    border-bottom: 1px solid #ddd;
}
#map h2.layers {
	background-color: #7d7255;
	color: white;
}
#map h3.layers {
	background: rgb(232,228,216); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(232,228,216,1) 0%, rgba(125,120,107,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,228,216,1)), color-stop(100%,rgba(125,120,107,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(232,228,216,1) 0%,rgba(125,120,107,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(232,228,216,1) 0%,rgba(125,120,107,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(232,228,216,1) 0%,rgba(125,120,107,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(232,228,216,1) 0%,rgba(125,120,107,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e4d8', endColorstr='#7d786b',GradientType=0 ); /* IE6-9 */
}
#map:not(.mobileInterface) h3.layers:hover {
	background: #a19b8c;
	filter:;
}
#map div.layers {
    background-color: #ebe7da;
    border-bottom: 1px solid #ddd;
}
#map div.stations, #map div.layers, #map div.conditions {
	padding-left: 5px;
}
#map h2.conditions {
	background-color: #566ABA;
	color: white;
}
#map div.conditions {
    background-color: #DADDE8;
}
#map .dataElementSection, #map .parameterSection, #map .basinSection, #map .optionsSection {
	padding-bottom: 5px;
}
#map h3.conditions {
background: rgb(225,228,239); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(225,228,239,1) 0%, rgba(119,127,163,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(225,228,239,1)), color-stop(100%,rgba(119,127,163,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(225,228,239,1) 0%,rgba(119,127,163,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(225,228,239,1) 0%,rgba(119,127,163,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(225,228,239,1) 0%,rgba(119,127,163,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(225,228,239,1) 0%,rgba(119,127,163,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e4ef', endColorstr='#777fa3',GradientType=0 ); /* IE6-9 */
}
#map:not(.mobileInterface) h3.conditions:hover {
	background: #9BA3C2;
	filter:;
}
#map:not(.mobileInterface) h3 div:hover {
	color: black;
}
#map div.displayTypeSection {
	padding-bottom: 7px;
	background-color: #C3C8DB;
}
#map #attributionSection .leaflet-control-attribution {
	font-size: 9px;
	background: rgba(210, 210, 210, 0.6);
	padding-top: 10px;
	padding-left: 15px;
	padding-bottom: 8px;
	padding-right: 25px;
}

/* minimize button */
#map h1 span.minimizeButton {
	display: inline-block;
	float: left;
	font-size: 16px;
	border: 1px solid gray;
	height: 10px;
	border-radius: 3px;
	line-height: 8px;
	padding: 2px;
	margin-top: 1px;
	padding-left: 4px;
	padding-right: 3px;
	height: 10px;
	background: #ccc;
	margin-right: 40px;
	cursor: pointer;
}
#map:not(.mobileInterface) h1 span.minimizeButton:hover {
	background: #aaa;
}
#map h1 span.minimizeButton:active {
	background: #888 !important;
}


/* section spacing */
#map div.stations, #map div.layers {
	padding-bottom: 6px;
}
#map .baseMapSection {
	padding-top: 2px;
}
#map .labelsSection {
	padding-top: 2px;
}


/* station list */
#map #stationListWrapper ul {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	padding-left: 5px;
	padding-top: 2px;
	list-style-type: none;
}
#map #stationListWrapper li.hide {
	height: 0px;
}
#map #stationListWrapper li {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: 10px;
	white-space:nowrap;
	display: block;
	line-height: 13px;
	color: darkblue;
	overflow: hidden;
}
#map #stationListWrapper ul {
	cursor: pointer;
}
#map #stationListWrapper div.smd { /* smd = station metadata */
	color: #666;
	display: block;
	padding-left: 10px;
	height: 14px;
}
#map:not(.mobileInterface) #stationListWrapper li:hover, #map:not(.mobileInterface) #stationListSection li:hover div.smd {
	color: green;
}
#map #stationListWrapper li:active, #map #stationListSection li:active div.smd {
	color: red !important;
}
#map #stationsReportLink, #map .dataTableLink {
	font-size: 11.5px;
	color: #000080;
	padding-left: 5px;
	padding-bottom: 1px;
	padding-top: 1px;
	display: block;
	background-color: #e2e2e2;
	border-bottom: 1px solid #ddd;
	letter-spacing: .2px;
}
#map #stationsReportLink {
	border-bottom: 1px solid #e2e2e2;
}
#map:not(.mobileInterface) #stationsReportLink:hover, #map:not(.mobileInterface) .dataTableLink:hover {
	color: green;
	background-color: #f6f6f6;
	border-bottom: 1px solid #f6f6f6;
}
#map #stationsReportLink:active, #map .dataTableLink:active {
	color: red !important;
}


/* controls panel positioning, size, and collapsed icon */
#map div.leaflet-control-layers.leaflet-control-layers-expanded {
	padding: 0 0 0 0;
	background: transparent;
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
	width: 100%;
	margin: 0 0 0 0;
}
#map div.leaflet-control-layers-toggle {
	height: 42px;
	background-position: 50% 10%;
	border-radius: 5px;
	cursor: pointer;
}
#map:not(.mobileInterface) div.leaflet-control-layers-toggle:hover {
	background-color: #eee;
}
#map div.leaflet-control-layers-toggle:active {
	background-color: #ddd !important;
}
#map div.leaflet-control-layers-toggle.blinking {
	background-color: #eee;
}
#map div.leaflet-control-layers-toggle:after {
	content: "Controls";
	position: relative;
	top: 24px;
	font-size: 8px;
	left: 2.5px;
	color: #333;
}
#map div.leaflet-top.leaflet-right {
	bottom: 0px;
	width: 227px;
}
#map div.leaflet-bottom.leaflet-right {
	top: 0px;
}
#map div.leaflet-control-layers-expanded form.leaflet-control-layers-list {
	position: static;
}
#map .outerWrapper {
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
	width: 100%;
	background: none;
}
#map .scrollWrapper {
	position: absolute;
	top: 18px;
	bottom: 0px;
	width: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	background: rgba(100, 100, 100, .5);
}

#map.leaflet-container:-webkit-full-screen {
	top: 0!important;
}

#map.leaflet-container.leaflet-fullscreen-on {
	width:100%!important;
	height:100%!important;
	top:0px!important;
}

/* hide export control for embedded map */
#map.small .outerWrapperExport {
	display: none;
}

/* rearrange controls as screen gets smaller */
#map .leaflet-control-scale {
	position: absolute;
	bottom: 5px;
	left: 185px;
}
#map.smallmode .leaflet-control-fullscreen {
	position: absolute;
	top: 0px;
	left: 40px;
}


/* overlay download status */
#map span.status {
    float: right;
    clear: both;
    height: 0px;
    margin-right: 3px;
    white-space:nowrap;
    font-weight: normal;
}
#map span.status.not-downloaded {
	color: black;
}
#map span.status.downloading {
	color: red;
}
#map span.status.ready {
	color: black;
}


/* check-all links */
#map .checkAllLinks {
	font-size: 9px;
	margin-bottom: -3px;
	margin-top: 1px;
}
#map .checkAllLinks a {
	margin-right: 42px;
}
#map .checkAllStatesLabel {
	display: inline-block;
	width: 45px;
}
#map .checkAllCountiesLabel {
	display: inline-block;
	width: 53px;
	margin-left: 20px;
}
#map .checkAllStateCountyLinks a {
	display: inline-block;
	width: 20px;
	font-size: 9px;
}


/* special sections */
#map .andOrSection {
	background-color: #dfdfdf;
	margin-left: -5px;
	padding-bottom: 3px;
	padding-top: 1px;
	padding-left: 1px;
	border-bottom: 1px solid #ccc;
}
#map .andOrLabel {
	color: #000; font-size: 10px;
}
#map .discontinuedSection {
	background-color: #dfdfdf;
	margin-left: -5px;
	padding-top: 2px;
	padding-bottom: 4px;
	padding-left: 5px;
	margin-bottom: 0px;
	border-bottom: 1px solid #ccc
}
#map .dateUtilitySection {
	background-color: #CACDD9;
	margin-left: -5px;
	margin-top: 3px;
	padding-bottom: 4px;
	padding-top: 4px;
	padding-left: 4px;
	border-top: 1px solid #ABAEBA;
}


/* station/data tab selection */
#map .stationsView .conditionsWrapper {
	display: none;
}
#map .dataView .elementWrapper {
	display: none;
}
#map .stationsViewTab, #map .dataViewTab, #map .displayTypeTab {
	display: inline-block;

	border: 1px solid gray;

	width: 75px;
	text-align: center;
	background: RGBA(100,100,100,.15);
	font-weight: normal;
	color: #333;
	cursor: pointer;
	font-size: 11px;

	-webkit-box-shadow: inset 1px 1px 5px -2px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 1px 1px 5px -2px rgba(0,0,0,0.5);
	box-shadow: inset 1px 1px 5px -2px rgba(0,0,0,0.5);

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#map .displayTypeTabs {
	margin-left: 0px;
	margin-top: 0px;
	background: RGBA(220,220,220,1);
	border-bottom: 3px solid #444;;
}
#map .displayTypeTab {
	box-sizing: border-box;
	width: 50%;
	height: 30px;
	padding-top: 0px;
	font-size: 11px;
/* 	line-height: 14px; */
}

#map .displayTypeTab div {
	height: 11px;
}


#map .stationsViewTab {
	margin-left: 5px;
	margin-right: 0px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	width: 106px;
}
#map .dataViewTab {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-left: none;
	width: 74px;
}
#map .stationsView .stationsViewTab, #map .dataView .dataViewTab, #map .displayTypeTab.selected {
	background: #eee;
	color: black;
	font-weight: bold;
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */

	-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3);

	cursor: default;
}
#map:not(.mobileInterface) .stationsView .dataViewTab:hover, #map:not(.mobileInterface) .dataView .stationsViewTab:hover, #map:not(.mobileInterface) .displayTypeTab.unselected:hover {
	background: RGBA(255, 255, 255, .15);
	color: black;

	-webkit-box-shadow: inset 1px 1px 5px -1px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 1px 1px 5px -1px rgba(0,0,0,0.5);
	box-shadow: inset 1px 1px 5px -1px rgba(0,0,0,0.5);

}
#map .stationsView .dataViewTab:active, #map .dataView .stationsViewTab:active, #map .displayTypeTab.unselected:active,  #map .displayTypeTab.unselected.active {
	background: RGBA(0, 0, 0, .2) !important;
	color: black !important;
}
#map h2.tabLabel {
	background-color: #66677c;
	color: white;
}
#map .dataView .color-key {
	display: none;
}


/* data sections */
#map #durationContainer {
    position: relative;
    display: inline-block;
    width: 100px;
}
#map #durationContainer input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    padding: 0;
    margin: 0;
    width: 100px;
}
#map #durationContainer select {
    position: absolute;
    top: 1px;
    left: 0px;
    padding: 0;
    margin: 0;
    width: 118px;
}
#map label.dateLabel {
	display: inline-block;
	width: 65px;
	white-space: nowrap;
	font-weight: bold;
}
#map input.duration {
	width: 40px;
	margin-top: 2px;
}
#map label.dateLabel.custom {
	margin-left: 67px;
	width: 14px;
	font-weight: normal;
}
#map label.dateLabel.trailing {
	width: 70px;
	margin-left: 5px;
	font-weight: normal;
}
#map label.dateLabel.date {
	margin-left: 10px;
	width: 38px;
	font-weight: normal;
}
#map label.dateLabel.date.referencePeriod {
	margin-left: 35px;
}
#map label.dateLabel.dateHeader {
	font-weight: bold;
	width: 150px;
	padding-top: 3px;
	display: block;
	margin-bottom: 3px;
}
#map label.referencePeriodType {
	margin-top: 2px;
	margin-bottom: 1px;
}
#map .dateSection {
	white-space: nowrap;
}
#map .dateSection select, #map .optionsSection select {
	width: 137px;
	height: 18px;
	margin-top: 2px;
}
#map .dateSection select.date {
	width: 98px;
}
#map .optionsSection select.date.referencePeriod {
	width: 63px;
}



/****************  Other styles  **************************************************************************************/

/* popup window */
#map div.popupTabBar {
	max-width: 600px;
	background: #f6f6f6;
	position: absolute;
	top: 0px;
	height: 18px;
	border-bottom: 1px solid #ddd;
	right: 0px;
	left: 0px;
	padding-left: 14px;
	border-radius: 10px 10px 0 0;
	white-space: nowrap;
	overflow-x: hidden;
}

#map div.popupTabBar span {
	padding: 2px 6px 2px 6px;
	background: #ddd;
	display: inline-block;
	height: 14px;


	text-align: center;
	background: #eee;
	font-weight: normal;
	color: #444;
	cursor: pointer;
	font-size: 11px;

	-webkit-box-shadow: inset 1px 1px 5px -2px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 1px 1px 5px -2px rgba(0,0,0,0.5);
	box-shadow: inset 1px 1px 5px -2px rgba(0,0,0,0.5);

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#map div.popupTabBar span.selected {

	background: #888;
	color: white;




	cursor: default;
}
#map:not(.mobileInterface) div.popupTabBar span.unselected:hover {
	background: RGBA(190, 190, 190, .5);
	color: black;	

	-webkit-box-shadow: inset 1px 1px 5px -1px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 1px 1px 5px -1px rgba(0,0,0,0.5);
	box-shadow: inset 1px 1px 5px -1px rgba(0,0,0,0.5);

}
#map div.popupTabBar span.unselected:active {
	background: RGBA(0, 0, 0, .2) !important;
	color: black !important;
}	



#map div.popupContent {
	max-width: 600px;
}
#map .popupContent table, #map .popupContent tbody, #map .popupContent tr, #map .popupContent th, #map .popupContent td {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	font-size: 12px;
}
#map table.popupMetadataTable {
	border-collapse: collapse;
	margin-bottom: 5px;
	margin-top: 5px;
}
#map table.popupMetadataTable th {
	padding-right: 10px;
	padding-bottom: 2px;
}
#map table.basinMetadataTable th {
	padding-right: 10px;
}
#map .popupContent a {
	white-space: nowrap;
}
#map .popupTabBarSpacer {
	height: 6px;
}
#map .popupImage {
	position: absolute;
	right: 10px;
	top: 19px;
	width: 90px;
	height: 72px;
	background-size: 90px 72px;
}
#map .popupHeader {
	display: inline-block;
	white-space: nowrap;
}
#map .popupHeaderWithImage {
	margin-right: 90px;
}
#map .popupName {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 0px;
	margin-top: 0px;
}
#map .popupHeaderMeta {
	font-size: 11px;
	font-weight: normal;
	margin-left: 1em
}
#map .popupSubHeader {
	margin-bottom: 0px;
	color: #333;
	font-size: 12px;
	margin-left: 0px;
	font-weight: bold;
}
#map .popupSubHeader1 {
	margin-top: -6px
}
#map .popupSubHeader2 {
	margin-top: -3px
}
#map .popupSmallSubHeader {
	margin-top: -3px; 
	margin-bottom: 0; 
	margin-left: 0px; 
	color: #333; 
	font-size: 11px;
}
#map .popupHeaderValue {
	font-size: 14px;
	color: black; 
	margin-right: .15em;
}
#map .popupChartHeader {
	color: #000;
	font-size: 10px;
}
#map .popupMenuHeader {
	font-size: 12px;
	margin-bottom: 0px;
}
#map .popupReportHeader {
	font-size: 12px;
	color: #333;
	font-weight: bold;
	margin-bottom: 0px;
	margin-top: 0px;
}
#map #popupReportsDiv h3.open + div {
	margin-bottom: 5px;
}

#map a.leaflet-popup-close-button {
	top: -2px;
}

#map a.leaflet-popup-close-button:link {
	color: #c3c3c3;
}
#map:not(.mobileInterface) a.leaflet-popup-close-button:hover {
	color: #999;
}
#map .popupDataTableWrapper {
/* 
	margin-left: -8px;
	margin-right: -8px;
 */
/* 	margin-bottom: 7px; */
}
#map table.popupDataTable {
	white-space: nowrap;
	background: #dde8f8;
	margin-bottom: 5px;
	border: 1px solid #bbc;
	border-top: none;
	margin-top: 0px;
	border-collapse: collapse;
}
#map table.popupDataTable th, #map table.popupDataTable td {
	padding: 1px 6px 1px 6px;
	margin: 0;
}
#map table.popupDataTable th {
	padding-right: 0px;
}
#map table.popupDataTable tr:nth-child(2) th {
	padding-top: 3px;
}
#map table.popupDataTable tr:nth-child(6) th {
	padding-bottom: 3px;
}
#map table.popupDataTable tr.single td, #map table.popupDataTable tr.single th {
	padding-top: 5px;
	padding-bottom: 5px;
	background: #ECF1F8;
	border-top: 1px solid #ccc;
}
#map table.popupDataTable tr.single.odd td, #map table.popupDataTable tr.single.odd th {
	background: #DADFE6;
	padding-bottom: 4px;
	padding-top: 4px;
}
#map table.popupDataTable tr.peakfirst td, #map table.popupDataTable tr.peakfirst th {
	padding-top: 4px;
	background: #ECF1F8;
	border-top: 1px solid #ccc;
}
#map table.popupDataTable tr.peaksecond td, #map table.popupDataTable tr.peaksecond th {
	padding-bottom: 3px;
	background: #ECF1F8;
}
#map table.popupDataTable th.popupDataHeader {
	background: #58d;
	color: white;
	font-weight: normal;
	font-size: 12px;
	text-align: center;
	border-right: 1px solid #58d;
	border-left: 1px solid #58d;
	padding-top: 4px;
	padding-bottom: 3px;
	padding-left: 3px;
	padding-right: 3px;
}

#map table.basinInputsTable {
	white-space: nowrap;
	background: white;
	margin-bottom: 5px;
	border: 1px solid #999;
	margin-top: 0px;
	border-collapse: collapse;
}
#map table.basinInputsTable th, #map table.basinInputsTable td {
	padding: 1px 6px 1px 6px;
	margin: 0;
}
#map table.basinInputsTable th {
	background: #adc1de;
}
#map table.basinInputsTable tr:first-child th {
	padding-top: 2px;
}
#map table.basinInputsTable tr:nth-child(2) th {
	padding-bottom: 2px;
}
#map table.basinInputsTable tr:first-child th:nth-child(4), #map table.basinInputsTable tr:nth-child(2) th:nth-child(5) {
	border-left: 1px solid #999;
}
#map table.basinInputsTable tr:first-child th:nth-child(3), #map table.basinInputsTable tr:first-child th:nth-child(4) {
	text-align: center;
}
#map table.basinInputsTable tr:nth-child(2) th:last-child {
	text-align: center;
}
#map table.basinInputsTable th, #map table.basinInputsTable td {
	border-left: 1px solid #999;
}
#map table.basinInputsTable tr:nth-child(2) th {
	border-bottom: 1px solid rgb(158, 156, 156);
}
#map table.basinInputsTable tr:nth-child(even) td {
	background: #dbe7f7;
}
#map table.basinInputsTable tr.missing td, #map table.basinInputsTable tr.missing th, #map table.basinInputsTable td.missing {
	font-style: italic;
	color: #666;
}
#map #basinInputsDiv {
	margin-top: 5px;
}
#map.basinPopupOpen div.leaflet-popup-content-wrapper {
	background: white;
}

/* fix zoom button link colors */
#map .leaflet-control-zoom a {
	color: black;
}

/* station tooltip */
#map .tooltip {
	display: none; position: absolute; z-index: 90; width: 500px; left: 0px; text-align: center; font-size: 12px;
}
#map .tooltipInside {
	box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 7px 0px; background-color: rgba(255, 255, 255, .9); display: inline-block; border-radius: 5px; padding: 0px 5px 0px 5px
}

/* basin tooltip */
#map .basinTooltip {
	display: none; position: absolute; z-index: 90; width: 500px; left: 0px; text-align: center; font-size: 12px;
}
#map .basinTooltipInside {
/* 	box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 7px 0px; */
	background-color: rgba(220, 220, 220, .7);
	display: inline-block;
/* 	border-radius: 5px; */
	padding: 0px 5px 0px 5px;
}

#map .tooltipItem.secondary {
	color: #333;
	background: #e8e8e8;
	font-size: 12px;
	margin-left: -5px;
	margin-right: -5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 2px;
}

#map .tooltipItem.secondary:first-child {
	border-radius: 5px 5px 0 0;
}

#map .tooltipItem.main {
	padding-top: 2px;
}

#map .tooltipItem.main:first-child {
	padding-top: 0px;
}


/* incompatible browser message */
#map .incompatibleBrowserMessage {
	font-size: 14px; margin-left: 10%; margin-right: 10%; margin-top: 50px;
}
#map .incompatibleBrowserMessage a {
	color: darkblue;
}
#map .incompatibleBrowserMessage a:hover {
	color: green;
}
#map .incompatibleBrowserMessage a:active {
	color: red;
}


/* feedback and help links */
#feedback a, #help a {
	text-decoration: none;
	color: #ccc;
	font-size: 11px;
}
#feedback a:hover, #help a:hover {
	color: #ddd;
}
#feedback a:active, #help a:active {
	color: #fff;
}

/* set mouse to pointer when it is over a station marker */
#map div.leaflet-popup {
	cursor: grab;
}
#map div.leaflet-popup div.leaflet-popup-content-wrapper {
	cursor: auto;
}
#map.pointerMouse, #map.pointerMouse div.leaflet-popup {
	cursor: pointer;
}


/* make sure the drag cursor persists even when dragging over elements that have other cursors set */
body.leaflet-dragging * {
	cursor: move !important;
	cursor: -webkit-grabbing !important;
	cursor:    -moz-grabbing !important;
}


/* station list window */
#map div.leaflet-top.leaflet-left {
	bottom: 0px;
	width: 227px;
}
#map .outerWrapperSL {
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	width: 227px;
	pointer-events: none;
}
#map #stationListControl {
	height: 100%;
	position: relative;
	z-index: 600;
	pointer-events: none;
}
#map #stationListScrollDiv {
	background: #eee;
	position: absolute;
	top: 21px;
	bottom: 0px;
	pointer-events: auto;
}
#map #stationListControl h1 {
	padding: 0;
	margin: 0;
	border-right: 1px solid gray;
	height: 19px;
	border-left: none;
	pointer-events: auto;

	background: -moz-linear-gradient(top,  rgba(196,196,196,1) 0%, rgba(255,255,255,0.8) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(196,196,196,1)), color-stop(100%,rgba(255,255,255,0.8))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(196,196,196,1) 0%,rgba(255,255,255,0.8) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(196,196,196,1) 0%,rgba(255,255,255,0.8) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(196,196,196,1) 0%,rgba(255,255,255,0.8) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(196,196,196,1) 0%,rgba(255,255,255,0.8) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4c4c4', endColorstr='#ccffffff',GradientType=0 ); /* IE6-9 */
}
#map #stationListControl h1 #stationListClickTarget {
  background: url("images/sprite.png") 5px 3px no-repeat;
  display: block;
  padding: 0;
  padding-left: 22px;
  margin: 0;
  font-weight: normal;
  height: 100%;
  width: 205px;
  color: black;
  cursor: pointer;
}
#map #stationListControl h1 #stationListClickTarget:focus {
  outline: none;
}
#map #stationListControl h1.closed {
	background: rgba(255, 255, 255, .85);
	filter: ;
	border: 1px solid gray;
	border-left: none;
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	text-shadow: none;
}
#map:not(.mobileInterface) #stationListControl h1.open:hover {
	background: rgba(200, 200, 200, .92);
	filter: ;
}
#map:not(.mobileInterface) #stationListControl h1.closed:hover {
	background: rgba(200, 200, 200, .92);
}
#map #stationListControl h1.open #stationListClickTarget {
	background-position: 5px -34px;
}
#map:not(.mobileInterface) #stationListControl h1 #stationListClickTarget:active {
	background-color: rgba(180, 180, 180, .92);
}

/* legend */
#map .leaflet-control-legend {
	background: RGBA(255,255,255,.7);
	max-width: 150px;
	padding: 10px;
	padding-bottom: 2px;
	padding-right: 8px;
	border: 1px solid #888;

	
	-webkit-transform-origin: bottom left;
	-ms-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	-o-transform-origin: bottom left;
}
#map .legendBox {
	width: 30px;
	height: 10px;
	border: 1px solid black;
	z-index: 10000;
	position: relative;
	left: 18px;
}
#map .legendBoxHorizontal {
	display: inline-block;
	width: 15px;
	height: 10px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	margin-right: 0px;
}
#map .legendBoxHorizontal.left {
	border-left: 1px solid black;
}
#map .legendBoxHorizontal.right {
	border-right: 1px solid black;
}
#map .legendBox span {
	font-size: 11px;
	position: relative;
	top: -4px;
	left: 37px;
	white-space: nowrap;
}
#map .legendBlend {
	width: 10px;
	margin-left: 1px;
	height: 20px;
	border: none;
	border-bottom: none;
	border-top: none;
	margin-top: -6px;
	margin-bottom: -6px;
	position: relative;
	z-index: 5000;
	border-left: 1px solid black;
	border-right: 1px solid black;
}
#map .legendBlendCap {
	width: 10px;
	margin-left: 1px;
	height: 5px;
	border: none;
	border-bottom: none;
	border-top: none;
	margin-top: -6px;
	margin-bottom: -6px;
	border-left: 1px solid black;
	border-right: 1px solid black;
}
#map .legendBlendCap.upper {
	border-top: 1px solid black;
}
#map .legendBlendCap.lower {
	border-bottom: 1px solid black;
}
#map .legendInfo {
	font-size: 11px;
	white-space: normal;
	margin-bottom: 12px;
	margin-top: -5px;
	font-weight: bold;

	padding-left: 12px ;
  	text-indent: -12px ;
}
#map .legendInfo.overlay {
	margin-top: -1px;
	margin-bottom: 2px;
}
#map .metadataLegend {
	margin-top: -5px;
}
#map .metadataLegendEntry {
	margin-bottom: 4px;
	line-height: 15px;
}
#map .metadataLegendEntryText {
	width: 120px;
	display: inline-block;
	vertical-align: top;
}
#map .overlayLegendEntry {
	margin-bottom: 2px;
	line-height: 13px;
	white-space: nowrap;
	font-size: 11.5px;
}
#map .legendLogo {
	width: 140px;
	margin-top: 3px;
}
#map .legendNotice {
	font-size: 9px;
	margin-top: 0px;
	margin-bottom: 0px;
}
#map .legendCreationDate {
	font-size: 8px;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
}
#map .legendMarker {
	width: 9px;
	height: 9px;
	border: 1px solid black;
	border-radius: 50%;
	position:relative;
	display: inline-block;
	top: 1px;
	margin-right: 5px;
}
#map .legendMarker.missing:after{
    content:'';
    position:absolute;
    width:9px;
    height:1px;
    background-color:black;
    top:4px;
}
#map .legendMarker.zeroDenominator:after{
    content:'';
    position:absolute;
    width:1px;
    height:9px;
    background-color:black;
    left:4px;
}
#map .legendMarker.invalid:before,#map .legendMarker.invalid:after{
    content:'';
    position:absolute;
    width:9px;
    height:1px;
    background-color:black;
    top:4px;
}
#map .legendMarker.invalid:before{
	-ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg);
    left:0px;
}
#map .legendMarker.invalid:after{
	-ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
    right:0px;
}
#map .legendMarker.snowCourse {
	width: 8px;
	height: 8px;
	border-radius: 0;
	left: .5px;
}
#map .legendMarkerText {
	font-size: 11px;
}

/* data loading indicator */
#map #dataLoadingIndicator {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: RGBA(200, 200, 200, .15);
	text-align: center;
	display: none;
}
#map #dataLoadingIndicator .dataLoadingIndicatorInside {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 20px;
	margin-top: auto;
	margin-bottom:auto;
	font-size: 14px;
	font-weight: bold;
}





#map.leaflet-container {
	background-color: white;
}

#map label.sliderLabel {
	display: inline-block;
	text-align: left;
	width: 90px;
	margin-left: 7px;
	height: 20px;
}

#map div.slider {
	display: inline-block;
	
	width:90px;
	height: 5px;
	margin-top: -5px;
	background-color: #eee;
	border-color: #bbb;
}



#map .ui-slider-handle {
	width: 20px;
    height: 14px;
    top: 50%;
    margin-top: -9px;
    margin-left: -12px;
    text-align: center;
    line-height: 14px;
    font-size: 10px;
    background-color: white;
}

#map .ui-slider-handle.ui-state-active {
	background-color: #007fff;
}

/* 
#map #imageExportBoundsIndicator {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	text-align: center;
	display: none;
	z-index: 1000;
}
 */

#map.zoomingSelectionBox .selectionOutside, #map.zoomingSelectionBox .selectionBoxCorner, #map.zoomingSelectionBox .selectionBoxSide, #map.zoomingSelectionBox .legendPlaceholder {
	transition: 200ms ease-in-out;
}
#map .selectionOutside {
	position: absolute;
	width: 4000px;
	height: 4000px;
	text-align: center;
	display: block;
	background-color: RGBA(0, 0, 0, 0.3);
}

#map #selectionOutsideL, #map #selectionOutsideR {
	height: 8000px;
}



#map .selectionBoxCorner {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: transparent;
	cursor: default;
}

#map .selectionBoxCorner div {
	width: 14px;
	height: 14px;
	background-color: white;
	cursor: default;
	border: 1px solid #666;
	background-color: RGBA(255, 255, 255, 1);
	border-radius: 3px;
	margin: 2px;
}

#map .selectionBoxCorner div:after {
	content: '';
	position: absolute;
	border: 1px solid #666;
	border-top: none;
	border-bottom: none;
	width: 3px;
	height: 8px;
	top: 6px;
	left: 7.5px;
}

#map #selectionBoxTL div:after, #map #selectionBoxBR div:after {
	transform: rotate(45deg);
}

#map #selectionBoxTR div:after, #map #selectionBoxBL div:after {
	transform: rotate(-45deg);
}

#map .selectionBoxSide {
	position: absolute;
	background-color: transparent;
	cursor: default;
	padding: 4px;
	box-sizing: border-box;
}

#map #selectionBoxL, #map #selectionBoxR {
	width: 16px;
}

#map #selectionBoxT, #map #selectionBoxB {
	height: 16px;
}

#map .selectionBoxSide div {
	background-color: white;
	border: 1px solid #666;
	background-color: RGBA(255, 255, 255, 1);
	box-sizing: border-box;
}

#map #selectionBoxL div, #map #selectionBoxR div {
	width: 8px;
	height: 100%;
}

#map #selectionBoxT div, #map #selectionBoxB div {
	width: 100%;
	height: 8px;
}

#map .legendPlaceholder {
	position: absolute;
	background-color: RGBA(50, 50, 50, .75);
	cursor: default;
	display: table;
}



#map .legendPlaceholder:after {
	content: 'Legend';
	color: white;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}




#map #outerWrapperExport {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	pointer-events: none;
}

#map #exportControl {
	width: 310px;
	height: 18px;
	position: absolute;
	top: 0px;
	z-index: 1200;
	left: 50%;
	margin-left: -155px;
}

#map #exportControlHeader {
	background-color: RGBA(255, 255, 255, 0.85);
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	margin-left: 121px;
	pointer-events: auto;
	width: 68px;
	text-align: center;
	cursor: pointer;
	
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	font-size: 11px;
}

#map #exportControlHeader:hover {
	background-color: rgba(220, 220, 220, .92);
}

#map #exportControlHeader:active {
	background-color: rgba(180, 180, 180, .92)
}

#map #exportControlWindow {
	position: absolute;
	display: none;
	width: 310px;
	height: 96px;
	background-color: RGBA(255, 255, 255, 0.8);
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	pointer-events: auto;
	cursor: default;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	font-size: 12px;
	white-space: nowrap;
}
#map #exportControlWindow [type="checkbox"]:checked + span, #map #exportControlWindow [type="checkbox"]:not(:checked) + span {
	cursor: default;
}

#map #exportControlWrapper {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 310px;
	height: 96px;
	box-sizing: border-box;
	padding-left: 10px;
	padding-top: 3px;
}

#map #exportControlWrapper select {
	font-size: 12px;
}

#map #exportControlWrapper label {
	display: inline-block;
	margin-top: 3px;
	margin-left: -3px;
}

#map #exportControlWrapper label.lockAspect {
	width: 140px;
}

#map #exportControlWrapper label.titleInput {
	width: 30px;
}

#map #exportControlWrapper input.titleInput {
	width: 120px;
}

#map .exportButton {
	position: absolute;
	bottom: 5px;
}

#map .exportCloseButton {
	left: 4px;
}

#map .exportViewButton {
	right: 74px;
}

#map .exportCopyButton {
	right: 144px;
}

#map .exportSaveButton {
	right: 4px;
}

#map .leaflet-marker-pane {
	display: none;
}


#map .helpLinkControl {
	width: 24px;
	height: 24px;
	
	position: absolute;
	left: -35px;
	top: 0px;
	
	margin: 0 0 0 0;
}

#map .leaflet-control-layers-expanded .helpLinkControl {
	top: 2px;
	left: -30px;
}

#map .helpLink {
	width: 100%;
	height: 100%;
	
	display: block;
	position: relative;
}

#map .helpLink img {
	width: 100%;
	height: 100%;
	display: block;
	
	opacity: .8;
}

#map .helpLink div {
	width: 92%;
	height: 92%;
	position: absolute;
	top: 4%;
	left: 4%;
	border-radius: 46%;
	
	background: rgba(255, 255, 255, 0.15);
}

#map:not(.mobileInterface) .helpLink:hover div {
	background: rgba(100, 100, 100, .15);
}


/* menu styles */
#map .dropit {
    list-style: none;
	padding: 0;
	margin: 0;
}
#map .dropit .dropit-trigger { position: relative; }
#map .dropit .dropit-submenu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 150px;
    list-style: none;
	padding: 0;
	margin: 0;
}
#map .dropit .dropit-open .dropit-submenu { display: block; }

#map .colorMenu ul { display: none; }

#map .colorMenu ul.dropit-submenu
{
	background-color: #fff;
	border: 1px solid #b2b2b2;
	top: 19px;
	left: 5px;
	width: 182px;
}

#map .colorMenu ul.dropit-submenu li
{
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}

#map .colorMenu ul.dropit-submenu li span
{
	display: inline-block;
	width: 25px;
}

#map .colorMenu ul.dropit-submenu li span:before
{
	content: '\2713';
	font-weight: bold;
	color: transparent;
}

#map .colorMenu ul.dropit-submenu li.selected span:before
{
	color: black;
}

#map .colorMenu li.dropit-trigger
{
	display: inline-block;
	padding-top: 2px;
}

#map ul.colorMenu.dropit {
	display: inline-block;
}

#map:not(.mobileInterface) .colorMenu ul.dropit-submenu li:hover
{
	background: #3366cc;
	color: #fff;
	text-decoration: none;
}

#map .colorMenu li.dropit-trigger div.menuTrigger
{
	background: #fff;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	width: 175px;
	padding-left: 7px;
	padding-right: 0px;
	border: 1px solid #aaa;
	margin-left: 5px;
	font-size: 10px;
	cursor: default;
}

#map .colorMenu li.dropit-trigger.dropit-open div.menuTrigger
{
	background: #ccc;
}

#map .colorMenu li.dropit-trigger div.menuTrigger span {
	display: inline-block;
	height: 100%;
	width: 18px;
	text-align: center;
	float: right;
	border-left: 1px solid #888;
	color: #555;
}

#map .menuIndicator:before {
	content: '\25cf';
	color: transparent; !important; /* 'important' fixes issue on IE */
}

#map .menuIndicator.selected:before {
	color: black; !important; /* 'important' fixes issue on IE */
}



/**************** Mobile specific styles ***************************************************************/

#map #mobilePopup {
	display: none;
}

#map #miniPopupContent {
	display: none;
}


/* any mobile interface, and especially LARGE mobile interface (iPad, can show two control windows at once) */
@media (max-width: 500px), (pointer:coarse) {

	html, body, div, span {
		user-select: none;
		-o-user-select: none;
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-ms-user-select:none;
	}

	#navBar a, #navBar img {
		display: none;
	}

	#feedback {
		right: 10px !important;
	}

	#help {
		right: 127px !important;
	}

	#map #outerWrapperExport {
		display: none;
	}
	
	#map #mobilePopupScroll {
		overflow-y: scroll;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}

	#map .scrollWrapper {
		overflow-y: scroll;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}

	#map label {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

	#map .leaflet-control-layers label.sliderLabel {
		width: 160px;
		height: 30px;
	}
	
	#map div.slider {
		width: 180px;
		height: 7px;
	}
	
	#map .ui-slider-handle {
		width: 30px;
		height: 21px;
		font-size: 15px;
		margin-top: -11px;
		margin-left: -18px;
		text-align: center;
		line-height: 19px;
		font-size: 15px;
	}
	
	#map .leaflet-control-scale {
		display: none;
	}

	#map .leaflet-control-zoom, #map .leaflet-control-fullscreen {
		display: none;
	}

	#map.stationListOpen #legendControl {
		display: none !important;
	}

	#map.mobilePopupOpen #mobilePopup {
 		display: block;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: white;
		z-index:1000;
		margin: 0;

		text-align: left;
	}

	#map div.leaflet-popup div.leaflet-popup-content-wrapper {
		cursor: grab;

		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

 	#map #miniPopupContent {
 		cursor: pointer;

 		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
 	}

 	#map #mobilePopupHeader {
		height: 38px;
		color: rgb(196, 4, 6);
		background: rgb(255, 246, 241);
		padding-left: 5px;
		border-bottom: 1px solid rgb(239, 191, 177);
	}
	#map #mobilePopupHeader:before {
		content: "x ";
		position: relative;
		top: 0px;
		left: 2px;
	}
	#map #mobilePopupHeader:after {
		content: "Close";
		position: relative;
		top: 1px;
		left: 7px;
	}

	#map #mobilePopupHeader div {
		color: #666;
		float: right;
		padding-right: 50px;
		padding-top: 7px;
	}

	#map #mobilePopupContent {
		position: relative;
		padding: 20px;
		padding-top: 10px;
	}

	#map #mobilePopupScroll {
		position: absolute;
		top: 39px;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: auto;
	}

 	#map #mobilePopup .popupDataTable tr {
 		height: 25px;
 	}

 	 #map #mobilePopup .popupMetadataTable tr {
 		height: 23px;
 	}

 	#map #mobilePopup td, #map.mobilePopupOpen #mobilePopup th {
		white-space: normal;
	}

 	#map #mobilePopup .popupDataTable th {
		width: 60%;
	}

	#map #mobilePopup .popupDataTable td {
		width: 40%;
		padding-bottom: 1px;
	}

	#map #mobilePopup .popupMetadataTable td {
		padding-bottom: 3px;
	}

	#map #mobilePopup div.popupTabBar {
		position: static;
		margin-top: -10px;
		margin-left: -20px;
		margin-right: -20px;
		max-width: none;
		height: 30px;
		overflow-x: scroll;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		border-radius: initial;
	}

	#map #mobilePopup div.popupTabBar span {
		height: 30px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
	}

	#map #mobilePopup .popupImage {
		right: 18px;
	}

	#map #mobilePopup.multi .popupImage {
		top: 48px;
	}

	#map div.tooltipItem.secondary {
		background: transparent;
	}

	#map .leaflet-popup .popupContent, #map .leaflet-popup .popupTabBar, .popupTabBarSpacer {
		display: none;
	}

	#map .leaflet-popup {
		-webkit-transition: none; 
		-moz-transition: none; 
		-o-transition: none; 
		transition: none; 
	}

	#map #miniPopupContent {
		display: block;
	}

	#map #miniPopupContent:active {
		background: #eee;
	}

	#map .leaflet-popup-content {
		margin: 4px 8px 4px 8px;
	}

	#map #miniPopupMore {
		color: blue;
	}

	#map .leaflet-popup-close-button {
		display: none;	
	}

	#map div.leaflet-top.leaflet-right {
		width: 375px;
	}

	#map.mobilePopupOpen div.leaflet-bottom.leaflet-right {
		width: 375px;
		left: 50%;
		margin-left: -187px;
	}

	#map div.leaflet-top.leaflet-left {
		width: 100%;
	}

	#map .outerWrapperSL {
		width: 375px;
	}

	#map .leaflet-control-layers h1, #map .leaflet-control-layers h2, #map .leaflet-control-layers h3, #map .leaflet-control-layers h4, #map .leaflet-control-layers h5, #map .leaflet-control-layers label {
		height: 26px;
	}
	
	#map label#FCSTVERCAT_label {
		white-space: normal;
		height: 42px;
		text-indent: -25px;
		padding-left: 25px;
		line-height: 22px;
	}

	#map .leaflet-control-layers h2 {	
		height: 32px;
		line-height: 32px;
	}

	#map .leaflet-control-layers h3 {	
		height: 28px;
		padding-top: 6px;
	}

	#map h3.stations:active {
		background: rgb(180, 180, 180);
		filter:;
	}

	#map h3.layers:active {
		background: #a19b8c;
		filter:;
	}

	#map h3.conditions:active {
		background: #9BA3C2;
		filter:;
	}

	#map div.stations, #map div.layers, #map div.conditions {
		padding-left: 7px;
	}

	#map #stationListWrapper ul {
		padding-left: 12px;
	}

	#map select, #map .dateSection select {
		height: 30px;
		width: 200px;
	}
	
	#map select.depth {
		width: 100px;
	}
	
	#map h4.soilsHeader {
		width: 160px;
	}

	#map .dateSection select.date {
		width: 160px;
	}

	#map select#probabilitySelect {
		width: 100px;
	}

	#map label.dateLabel {
		width: 115px;
	}

	#map .checkAllStatesLabel {
		width: 70px;
	}

	#map .checkAllCountiesLabel {
		width: 85px;
	}

	#map .checkAllStateCountyLinks a {
		width: 40px;	
	}

	#map select.selectStateAndCounty {
		width: 150px;
	}

	#map select.selectStateAndCounty.selectCounty {
		margin-left: 20px;
	}
	#map label.dateLabel.date {
		width: 75px;
	}
	#map button.plusminus {
		width: 40px !important;
		height: 30px;
		margin-left: 10px;
		margin-bottom: 3px;
	}

	#map .dateUtilitySection button {
		width: 104px !important;
		height: 28px;
	}

	#map span.hucLabel {
		width: 60px;
	}

	#map .leaflet-control-layers label.locationLabel {
		height: 32px;
	}
	
	#map label.hucAssociationsLabelCopy {
		margin-top: 3px;
		margin-bottom: 11px;
	}

	#map span.elevationLabel {
		width: 200px;
	}

	#map input#hucInput {
		width: 220px;
	}

	#map input.hucInput {
		width: 80px;
	}

	#map label.dateLabel.custom {
		margin-left: 117px;
		width: 25px;
	}

	#map #customDurationInput {
		width: 60px;
	}

	#map label.dateLabel.trailing {
		margin-left: 8px;
	}

	#map div.checkAllLinks {
		margin-top: 7px;
		margin-bottom: 1px;
	}

	#map .colorMenu.droppit {
		margin-bottom: 4px;
	}

	#map .colorMenu li.dropit-trigger div.menuTrigger {
		font-size: 16px;
		width: 280px;
		height: 30px;
		border-radius: 5px;
		line-height: 30px;
		padding-left: 10px
	}

	#map .colorMenu li.dropit-trigger div.menuTrigger span {
		width: 32px;
		font-size: 15px;
	}

	#map .colorMenu ul.dropit-submenu {
		top: 29px;
		left: 5px;
		width: 290px;
	}

	#map .colorMenu ul.dropit-submenu li span {
		width: 42px;
	}

	#map .legendBoxHorizontal {
		width: 25px;
		height: 18px;
	}

	#map input.minimumYearsInput {
		width: 60px;
		height: initial;
	}

	#map input.scaleInput {
		width: 60px;
		height: initial;
	}

	#map.controlsOpen.stationListOpen .leaflet-control-layers {
		display: block;
	}

	#map .scrollWrapper {
		background: #aaa;
	}

	#map h1#stationList.closed {
		width: 65px;
		white-space: normal;
		margin-left: 0;
		padding-left: 0;
		height: 53px;
		border-bottom-right-radius: 10px;
	}

	#map h1#stationList.closed #stationCountSpan1 {
		margin-left: 10px;
	}

	#map h1#stationList.closed #stationListClickTarget {
		width: 58px;
		white-space: normal;
		margin-left: 0px;
		padding-left: 7px;
		background-image: none;
		height: 53px;
		border-bottom-right-radius: 10px;
	}

	#map h1#stationList #stationListClickTarget {
		height: 40px;
	}

	#map h1#stationList.closed {
		width: 65px;
		height: 53px;
		border: none;
	}

	#map h1#stationList.open #stationListHeaderText {
		margin-left: 30px;
	}

	#map h1#stationList.open #stationCountSpan1 {
		margin-left: 0px;
	}

	#map #stationListControl h1#stationList.open {
		width: 100%;
		background: rgb(255, 246, 241);
		border-bottom: 1px solid rgb(92, 60, 62);
		border-top: none;
		height: initial;
	}

	#map.stationListOpen #stationListControl {
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	}

	#map h1#stationList.open #stationListClickTarget {
		width: 100%;
		background-image: none;
		margin-left: 0px;
		padding-left: 7px;
		height: 38px;
	}

	#map #stationListControl h1.closed #stationListClickTarget:active {
		background: #ddd;
	}

	#map h1#stationList.open #mobileStationListHeaderText {
		color: rgb(196, 4, 6);
		letter-spacing: 0px;
	}

	#map h1#stationList.open #mobileStationListHeaderText:before {
		content: "x ";
		position: relative;
		top: 1px;
		left: 2px;
	}
	#map h1#stationList.open #mobileStationListHeaderText:after {
		content: "Close";
		position: relative;
		top: 1px;
		left: 7px;
	}

	#map #stationListScrollDiv  {
		top: 39px;
	}

	#map #stationListControl h1.open, #map #stationListControl h1.closed {
		background: white;
	}

	#map #stationListWrapper li {
		line-height: 19px;
	}

	#map #stationListWrapper div.smd {
		height: 22px;
	}

	#map #stationsReportLink, #map .dataTableLink {
		height: 28px;
		line-height: 25px;
	}

	#map .leaflet-control-legend {
		margin-left: 0;
		margin-bottom: 0;
		border-left: none;
		border-bottom: none;

		background: RGBA(255, 255, 255, .85);

		border-top-right-radius: 10px;

		cursor: pointer;

		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
		border: none;
	}

	#map .leaflet-control-legend:not(.expanded) {
		padding-top: 8px;
		background: RGBA(255, 255, 255, .95);
	}

	#map .leaflet-control-legend:active {
		background: #ddd;
	}

	#map .legendDetail {
		display: none;
	}

	#map .legendInfo {
		font-weight: normal;
		margin-bottom: 0;
	}

	#map .leaflet-control-legend.expanded .legendDetail {
		display: block;
	}

	#map .leaflet-control-legend.expanded .legendInfo {
		margin-bottom: 12px;
	}

	#map .leaflet-control-layers {
		margin-right: 0;
		margin-top: 0;
		border-right: none;
		border-top: none;
		border-top-right-radius: 0;
		border-top-left-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 10px;

		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	}

	#map.leaflet-touch .leaflet-control-layers {
		border: none;
		background-clip: initial;
	}

	#map .leaflet-control-layers div.leaflet-control-layers-toggle {
	 	width: 62px;
 		height: 53px;
 		background-position: 50% 5%;;
 		background-size: 34px 34px;
		border-radius: 0px;
		border-bottom-left-radius: 10px;
 	}

	#map .leaflet-control-layers div.leaflet-control-layers-toggle:after {
	 	top: 34px;
	 	left: 8px;
 	}

	#map .leaflet-control-layers.leaflet-control-layers-expanded {
		transform: none;
	}

	#map .mainHeaderWrapper h1 {
		display: inline;
		width: 49%;
		float: right;
		padding-top: 7px;
		color: #555;
		pointer-events: none;
	}

	#map .mainHeaderWrapper h1 .minimizeButton {
		display: none;
	}

	#map .mobileControlsHeader {
		height: 37px;
		color: rgb(196, 4, 6);
		background: rgb(255, 246, 241);
		padding-left: 5px;
		border-bottom: 1px solid rgb(239, 191, 177);
		margin-bottom: 0px;
	}
	#map .mobileControlsHeader:before {
		content: "x ";
		position: relative;
		top: 0px;
		left: 2px;
	}
	#map .mobileControlsHeader:after {
		content: "Close";
		position: relative;
		top: 1px;
		left: 7px;
	}

	#map .leaflet-control-layers .scrollWrapper {
		top: 39px;
	}

	#map .leaflet-control-layers .mainHeaderWrapper {
		height: 38px;
	}

	#map .displayTypeTab {
		height: 50px;
		padding-top: 2px;
	}

	#map .displayTypeTab div {
		height: 20px;
	}

	#map .optionsSection select.date.referencePeriod {
		width: 100px;
		height: 30px;
		margin-top: 2px;
	}

	#map .optionsSection span {
		font-size: 19px;
	}

	/* Radio Button */
	/* Base for label styling */
	#map [type="radio"]:not(:checked) + span,
	#map [type="radio"]:checked + span {
	  position: relative;
	  padding-left: 25px;
	}

	/* radio aspect */
	#map [type="radio"]:not(:checked) + span:before,
	#map [type="radio"]:checked + span:before {
	  left:4px; top: 3px;
	  width: 14px; height: 14px;
	  border-radius: 8px;
	}

	/* checked mark aspect */
	#map [type="radio"]:not(:checked) + span:after,
	#map [type="radio"]:checked + span:after {
	  top: 8px; left: 9px;
	  width: 6px;
	  height: 6px;
	}

	
	/* Check Box */
	/* Base for label styling */
	#map [type="checkbox"]:not(:checked) + span,
	#map [type="checkbox"]:checked + span {
	  position: relative;
	  padding-left: 25px;
	}

	/* radio aspect */
	#map [type="checkbox"]:not(:checked) + span:before,
	#map [type="checkbox"]:checked + span:before {
	  left:4px; top: 2px;
	  width: 13px; height: 13px;
	}

	/* checked mark aspect */
	#map [type="checkbox"]:not(:checked) + span:after,
	#map [type="checkbox"]:checked + span:after {
	  top: -1px; left: 6px;
	  font-size: 15px;
	  width: 9px;
	  height: 20px;
	}

		
	#map.mobilePopupOpen.controlsOpen.stationListOpen #outerWrapperStationList {
		display: none;
	}

	#map.mobilePopupOpen.controlsOpen div.leaflet-bottom.leaflet-right {
		left: 0;
		margin-left: 0;
	}

	#map.mobilePopupOpen.stationListOpen:not(.controlsOpen) div.leaflet-bottom.leaflet-right {
		left: initial;
		margin-left: initial;
	}
	
	#map .helpLinkControl {
		width: 28px;
		height: 28px;
	}
	#map .helpLink div {
		background: rgba(255, 255, 255, 0.3);
	}
	#map .helpLink img {
		opacity: .75;
	}

	#map span.status {
		margin-right: 20px;
	}

	#map #mobilePopupHeader:before {
		font-size: 22px;
	}
	#map .mobileControlsHeader:before {
		font-size: 22px;
	}
	#map h1#stationList.open #mobileStationListHeaderText:before {
		font-size: 22px;
	}
	#map .leaflet-control-layers h2 {	
		font-size: 20px;	
	}
	#map .popupName {
		font-size: 20px;
	}
	#map .popupHeaderMeta {
		font-size: 16px;
	}
	#map .popupSubHeader {
		font-size: 18px;
	}
	#map .popupSmallSubHeader {
		font-size: 16px;
	}
	#map .popupHeaderValue {
		font-size: 20px;
	}
	#map .popupChartHeader {
		font-size: 15px;
	}
	#map #mobilePopup .popupMenuHeader a {
		font-size: 20px;
	}
	#map .popupMenuHeader {
		padding-top: 8px;
	}
	#map .leaflet-control-layers label span {	
		font-size: 19px;
	}
	#map select, #map .dateSection select {
		font-size: 18px;
	}
	#map label.locationLabel span {
		font-size: 18px;
	}
	#map #mobilePopupHeader:after {
		font-size: 18px;
	}
	#map #mobilePopup .popupReportHeader, #map #mobilePopup a {
		font-size: 18px;
	}
	#map .leaflet-control-layers h1, #map .leaflet-control-layers h2, #map .leaflet-control-layers h3, #map .leaflet-control-layers h4, #map .leaflet-control-layers label {
		font-size: 18px;	
	}
	#map .leaflet-control-layers h5 {
		font-size: 16px;	
	}
	#map .mobileControlsHeader:after {
		font-size: 18px;
	}
	#map h1#stationList.open #mobileStationListHeaderText:after {
		font-size: 18px;
	}
	#map .dateUtilitySection button {
		font-size: 17px;
	}
	#map button.plusminus {
		font-size: 17px;
	}
	#map .mainHeaderWrapper h1 {
		font-size: 17px;
	}
	#map #mobilePopupHeader div {
		font-size: 16px;
	}
	#map input {
		font-size: 16px;
	}
	#map #mobilePopup .popupDataTable td {
		font-size: 16px;
	}
	#map #mobilePopup .popupMetadataTable td {
		font-size: 16px;
	}
	#map #stationListWrapper li {
		font-size: 15px;
	}
	#map #stationsReportLink, #map .dataTableLink {
		font-size: 15px;
	}
 	#map #mobilePopup td, #map.mobilePopupOpen #mobilePopup th {
		font-size: 14px;
	}
	#map #mobilePopup div.popupTabBar span {
		font-size: 14px;
	}
	#map .checkAllStateCountyLinks a {
		font-size: 14px;
	}
	#map .leaflet-control-layers label.probabilityLabel {
		font-size: 14px;
	}
	#map div.checkAllLinks {
		font-size: 14px;
	}
	#map .leaflet-control-layers label.forecastPoint, #map .leaflet-control-layers label.forecastPoint span {
		font-size: 18px;
	}
	#map .displayTypeTab {
		font-size: 18px;
		line-height: 22px;
	}
	#map h1#stationList.open #stationListHeaderText {
		font-size: 14px;
	}
	#map h1#stationList.open #stationCountSpan1 {
		font-size: 14px;
	}
	#map h1#stationList.closed #stationCountSpan1 {
		font-size: 12px;
	}
	#map .leaflet-control-layers div.leaflet-control-layers-toggle:after {
	 	font-size: 12px;
 	}
	#map h1#stationList.closed {
		font-size: 10px;
	}
	#map #attributionSection .leaflet-control-attribution {
		font-size: 12px;
	}
}

/* MEDIUM mobile interface (landscape iPhone and portrait iPad, control windows show some map next to them) */
@media (pointer: coarse) and (max-width: 760px) {
	#map.controlsOpen.stationListOpen #outerWrapperStationList {
		display: none;
	}

	#map.controlsOpen.stationListOpen .leaflet-control-layers {
		display: none;
	}

	#map.mobilePopupOpen.controlsOpen div.leaflet-bottom.leaflet-right, #map.mobilePopupOpen.stationListOpen div.leaflet-bottom.leaflet-right, #map.mobilePopupOpen.stationListOpen:not(.controlsOpen) div.leaflet-bottom.leaflet-right {
		width: 375px;
		left: 50%;
		margin-left: -187px;
	}
}

/* HUGE mobile interface (large-size iPad Pro, can show all three control windows at once) */
@media (pointer: coarse) and (min-width: 1150px) {
	#map.controlsOpen.stationListOpen #outerWrapperStationList {
		display: block;
	}

	#map.mobilePopupOpen #outerWrapperStationList, #map.mobilePopupOpen .leaflet-control-layers {
		display: block;
	}

	#map.mobilePopupOpen.controlsOpen #outerWrapperStationList, #map.mobilePopupOpen.controlsOpen .leaflet-control-layers {
		display: block;
	}

	#map.mobilePopupOpen.controlsOpen.stationListOpen #outerWrapperStationList, #map.mobilePopupOpen.controlsOpen.stationListOpen .leaflet-control-layers {
		display: block;
	}

	#map.mobilePopupOpen.controlsOpen div.leaflet-bottom.leaflet-right, #map.mobilePopupOpen.stationListOpen div.leaflet-bottom.leaflet-right, #map.mobilePopupOpen.stationListOpen:not(.controlsOpen) div.leaflet-bottom.leaflet-right {
		width: 375px;
		left: 50%;
		margin-left: -187px;
	}
}

/* SMALL mobile interface (iPhone, control windows fill full screen) */
@media (max-width: 450px) {
	#map div.leaflet-top.leaflet-right {
		width: 100%;
	}

	#map div.leaflet-top.leaflet-left {
		width: 100%;
	}

	#map div.leaflet-bottom.leaflet-right {
		width: 100%;
	}

	#map .outerWrapperSL {
		width: 100%;
	}

	#map.mobilePopupOpen .leaflet-control-legend, #map.mobilePopupOpen .outerWrapperSL {
		display: none !important;
	}

	#map.controlsOpen #legendControl {
		display: none !important;
	}

	#map.controlsOpen .leaflet-control-scale, #map.stationListOpen .leaflet-control-scale {
		display: none;
	}

	#map.controlsOpen #outerWrapperStationList {
		display: none;
	}

	#map.stationListOpen .leaflet-control-layers {
		display: none;
	}

	#map.mobilePopupOpen div.leaflet-bottom.leaflet-right, #map.mobilePopupOpen.controlsOpen div.leaflet-bottom.leaflet-right, #map.mobilePopupOpen.stationListOpen div.leaflet-bottom.leaflet-right {
		width: 100%;
		left: initial;
		margin-left: initial;
	}

	#map #mobilePopupHeader:after {
		content: "Back to Map";
	}

	#map h1#stationList.open #mobileStationListHeaderText:after {
		content: "Back to Map";
	}

	#map .mobileControlsHeader:after {
		content: "Back to Map";
	}

	#map #mobilePopupHeader:before {
		content: "< ";
		font-weight: bold;
	}

	#map h1#stationList.open #mobileStationListHeaderText:before {
		content: "< ";
		font-weight: bold;
	}

	#map .mobileControlsHeader:before {
		content: "< ";
		font-weight: bold;
	}
	
	#map .helpLinkControl {
		top: 4px;
		left: -37px;
	}
}

/* TINY mobile interface (iPhone SE, everything a bit smaller) */
@media (max-width: 370px) {

	#map #mobilePopupHeader:before {
		font-size: 20px;
	}
	#map .mobileControlsHeader:before {
		font-size: 20px;
	}
	#map h1#stationList.open #mobileStationListHeaderText:before {
		font-size: 20px;
	}
	#map .leaflet-control-layers h2 {	
		font-size: 18px;	
	}
	#map .popupName {
		font-size: 18px;
	}
	#map .popupHeaderMeta {
		font-size: 14px;
	}
	#map .popupSubHeader {
		font-size: 16px;
	}
	#map .popupSmallSubHeader {
		font-size: 14px;
	}
	#map .popupHeaderValue {
		font-size: 18px;
	}
	#map .popupChartHeader {
		font-size: 13px;
	}
	#map #mobilePopup .popupMenuHeader a {
		font-size: 18px;
	}
	#map .leaflet-control-layers label span {	
		font-size: 16px;
	}
	#map select, #map .dateSection select {
		font-size: 16px;
	}
	#map label.locationLabel span {
		font-size: 15px;
	}
	#map .optionsSection span {
		font-size: 15px;
	}
	#map #mobilePopupHeader:after {
		font-size: 16px;
	}
	#map #mobilePopup .popupReportHeader, #map #mobilePopup a {
		font-size: 15px;
	}
	#map .leaflet-control-layers h1, #map .leaflet-control-layers h2, #map .leaflet-control-layers h3, #map .leaflet-control-layers h4, #map .leaflet-control-layers label {
		font-size: 16px;	
	}
	#map .leaflet-control-layers h5 {
		font-size: 14px;
	}
	#map .mobileControlsHeader:after {
		font-size: 16px;
	}
	#map h1#stationList.open #mobileStationListHeaderText:after {
		font-size: 16px;
	}
	#map .dateUtilitySection button {
		font-size: 15px;
	}
	#map button.plusminus {
		font-size: 15px;
	}
	#map .mainHeaderWrapper h1 {
		font-size: 15px;
	}
	#map #mobilePopupHeader div {
		font-size: 15px;
	}
	#map input {
		font-size: 14px;
	}
	#map #mobilePopup .popupDataTable td {
		font-size: 15px;
	}
	#map #mobilePopup .popupMetadataTable td {
		font-size: 15px;
	}
 	#map #mobilePopup td, #map.mobilePopupOpen #mobilePopup th {
		font-size: 13px;
	}
	#map #mobilePopup div.popupTabBar span {
		font-size: 13px;
	}
	#map .checkAllStateCountyLinks a {
		font-size: 13px;
	}
	#map .leaflet-control-layers label.probabilityLabel {
		font-size: 12px;
	}
	#map .leaflet-control-layers label.sliderLabel {
		width: 140px;
		height: 30px;
	}
	#map div.slider {
		width: 150px;
		height: 7px;
	}
	#map div.checkAllLinks {
		font-size: 13px;
	}
	#map .displayTypeTab {
		font-size: 15px;
		line-height: 18px;
		height: 47px;
	}
	#map #attributionSection .leaflet-control-attribution {
		font-size: 10px;
	}
	#map .leaflet-control-layers label.forecastPoint, #map .leaflet-control-layers label.forecastPoint span {
		font-size: 15px;
	}
	#map h1#stationList.open #stationListHeaderText {
		font-size: 13px;
	}
	#map h1#stationList.open #stationCountSpan1 {
		font-size: 13px;
	}

	#map .leaflet-control-layers h1, #map .leaflet-control-layers h2, #map .leaflet-control-layers h3, #map .leaflet-control-layers h4, #map .leaflet-control-layers h5, #map .leaflet-control-layers label {
		height: 24px;
	}

	#map .leaflet-control-layers h4, #map .leaflet-control-layers h5 {
		margin-bottom: 0px;
	}
	
	#map .leaflet-control-layers h2 {	
		height: 29px;
	}

	#map .leaflet-control-layers h3 {	
		height: 25px;
		padding-top: 5px;
	}

	#map select, #map .dateSection select {
		height: 27px;
		width: 180px;
	}

	#map .dateSection select.date {
		width: 140px;
	}

	#map select#probabilitySelect {
		width: 80px;
	}

	#map label.dateLabel {
		width: 100px;
	}

	#map .checkAllStatesLabel {
		width: 60px;
	}

	#map .checkAllCountiesLabel {
		width: 70px;
	}

	#map .checkAllStateCountyLinks a {
		width: 32px;	
	}

	#map select.selectStateAndCounty {
		width: 125px;
	}

	#map select.selectStateAndCounty.selectCounty {
		margin-left: 17px;
	}
	#map label.dateLabel.date {
		width: 65px;
	}
	#map button.plusminus {
		width: 32px !important;
		height: 26px;
		margin-left: 8px;
		margin-top: -8px;
	}

	#map .dateUtilitySection button {
		width: 94px !important;
		height: 24px;
	}

	#map span.hucLabel {
		width: 50px;
	}

	#map label.dateLabel.custom {
		margin-left: 105px;
		width: 20px;
	}

	#map #customDurationInput {
		width: 50px;
	}

	#map label.dateLabel.trailing {
		margin-left: 5px;
	}

	#map .leaflet-control-layers label.locationLabel {
		height: 28px;
	}

	#map span.elevationLabel {
		width: 180px;
	}

	#map input#hucInput {
		width: 190px;
	}

	#map input.hucInput {
		width: 70px;
	}

	#map .leaflet-control-layers label.probabilityLabel {
		bottom: 1px;
	}

	#map div.checkAllLinks {
		margin-top: 5px;
		margin-bottom: 1px;
	}

	#map .optionsSection select.date.referencePeriod {
		width: 80px;
		height: 27px;
		margin-top: 2px;
	}	

	#map .colorMenu.droppit {
		margin-bottom: 3px;
	}

	#map .colorMenu li.dropit-trigger div.menuTrigger {
		font-size: 14px;
		width: 250px;
		height: 26px;
		border-radius: 5px;
		line-height: 26px;
		padding-left: 8px
	}

	#map .colorMenu li.dropit-trigger div.menuTrigger span {
		width: 28px;
		font-size: 13px;
	}

	
	#map .colorMenu ul.dropit-submenu {
		top: 25px;
		left: 5px;
		width: 258px;
	}

	#map .colorMenu ul.dropit-submenu li span {
		width: 34px;
	}

	#map .legendBoxHorizontal {
		width: 22px;
		height: 13px;
	}

	#map input.minimumYearsInput {
		width: 55px;
		height: initial;
	}

	#map input.scaleInput {
		width: 55px;
		height: initial;
	}

	#map h4.soilsHeader {
		width: 140px;
	}
	
	/* radio aspect */
	#map [type="radio"]:not(:checked) + span:before,
	#map [type="radio"]:checked + span:before {
	  top: 0px;
	}

	/* checked mark aspect */
	#map [type="radio"]:not(:checked) + span:after,
	#map [type="radio"]:checked + span:after {
	  top: 5px;
	}
}

/* mobile interface for touch only */
@media (pointer:coarse) {
	#map select.selectStateAndCounty {
		height: 30px;
	}
}