/**************** 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;
}


/****************  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("../img/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 .miniStationPopupContent {
	text-align: center;
	font-size: 12px;
	margin-bottom: 1em;
}

#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: -moz-grabbing !important;
	cursor: -webkit-grabbing !important;
	cursor: move !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("../img/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;

	-o-transform-origin: bottom left;
	-webkit-transform-origin: bottom left;
	-ms-transform-origin: bottom left;
	-moz-transform-origin: bottom left;
	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);
}


#map .shortenUrlControl {
	width: 26px;
	height: 26px;

	position: absolute;
	left: -35px;
	top:25px;

	margin: 0 0 0 0;
}

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

#map .shortenUrl {
	width: 100%;
	height: 100%;

	display: block;
	position: relative;
}

#map .shortenUrl img {
	width: 100%;
	height: 100%;
	display: block;

	opacity: .9;
}

#map .shortenUrl div {
	width: 92%;
	height: 92%;
	position: absolute;
	top: 4%;
	left: 4%;
	border-radius: 46%;

	background: rgba(255, 255, 255, 0.15);
}

#map:not(.mobileInterface) .shortenUrl: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;
}

#map .menuIndicator.selected:before {
	color: black;
}



/**************** 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 {
		-ms-user-select: none;
		-o-user-select: none;
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		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;
	}

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

	#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;
		border-radius: initial;
	}

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

	#map #mobilePopup .popupImage {
		display: none;
		/* right: 18px; */
	}

	#map #mobilePopup.multi .popupImage {
		display: none;
		/* 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;
	}
}