.mapinterface {
	position:absolute;
	top:55px; /*control_top(0) + header*/
	overflow:hidden;
	clear:both;
	width:100%;
	padding:0;
	margin:0;
	position:relative;
	height: calc(100% - 115px);
	height: -webkit-calc(100% - 115px);
	height: -moz-calc(100% - 115px);
}
.mapcontainer {
	z-index: 1;
	position:relative;
	border: 0px solid transparent;
	border-width: 0 250px 0 0px;
	width: 100%;
	height: 100%;
	font-family:"Open Sans",sans-serif;
	font-size:15px;
}
.mapcontainer .notify {
	margin:0 -150px;
	width:300px;
	left:50%;
	padding:10px;
	box-shadow: 2px 2px 3px rgba(0,0,0,.2);
	border-radius: 3px;
	top:20px;
	position:absolute;
	z-index:10001; /* 1001 is the standard overlay, this is 10x that */
	background-color: #FFF;
	color:#333;
}
.mapcontainer .notify div.notify-close {
	position:absolute;
	top:2px;
	right:2px;
	font-size:10px;
	text-transform: uppercase;
	border:1px solid rgba(0,0,0,.3);
	border-radius:1px;
	cursor:pointer;
	padding:0 2px;
	height:14px;
	line-height:12px;
}
.mapcontainer .notify.danger {
	background-color: #900;
	color:#FFF;
}
.mapcontainer .notify.warn {
	background-color: #FFD54F;
	color:#000;
}

.mapcontainer {
	position:absolute;
	left:0;
	background-color: #eee;
	overflow:hidden;
}
.control-overlay {
	/*upper right of hte map we will have a display container*/
	position: absolute;
	right: 250px;
	top:0;
	background-color: transparent;
	z-index:2;
	height:100%; /*why was this removed? - it blocks content below the overlay of course*/
}

.control-overlay .gridthumbhighlight {
	position: absolute;
	width:350px;
	top:10px;
	right:10px;
	background-color:#FFFFFF;
	z-index:200000;
	padding:4px;
	border: 1px solid #333;
	border-radius:3px;
	overflow:hidden;
}
.control-overlay .gridthumbhighlight img {
	/*oversize the image slightly to eliminate some whitespace*/
	width:130%;
	position:relative;
	left:-15%;
}
.toggleopt.on {
	background-color: #FFF;
}
.legend-block {
	padding:3px;
	background-color: rgba(255,255,255,.7);
	margin:10px;
	position:relative;
	cursor:grab;
	cursor:-webkit-grab;
	cursor:-moz-grab;
}
.legend-block:active {
	cursor:grabbing;
	cursor:-webkit-grabbing;
	cursor:-moz-grabbing;
}
.legend-block .legend-controls {
	position:absolute;
	right:0;
	top:0;
	padding:0;
	z-index:50;
	
}
.hide-legend {
	background-color:#888;
	color:#FFF;
	line-height:22px;
	height:22px;
	width:22px;
	text-align:center;
	cursor:pointer;
}
.legend-block div.legendcell {
	height:16px;
	line-height:20px;
	text-align:left;
	margin:2px;
	font-weight:400;
	clear:both;
}
.legend-block div.legendcell div.showlevel {
	width:30px;
	float:left;
	height:14px;
	margin:1px 5px;

}
.legend-overlay {
	/*upper right of hte map we will have a display container*/
	position: absolute;
	left:0px; /*this is made smaller by size < 1500*/
	bottom:0;
	background-color: transparent;
	z-index:2;
}

.toggle-hover-hide .op-hide {
	display:none;
	visibility: hidden;
}
.toggle-hover-hide:hover div {
	/*background-color: rgba(0,0,0,.1)*/
}
.toggle-hover-hide:hover .op-hide {
	/*visibility: visible;*/
}
.control-overlay table{
	font-weight:400;
	font-size:14px;
}

@media screen and (max-width: 1500px) {
	/*
	*	Too small for the left control
	*/
	.control_left.natural {
		overflow:hidden;
		left:-185px;
	}
	.control_left .slideToggle {
		display:block;
	}
	.mapcontainer {
		border-width: 0 250px 0 0px;
	}
	.legend-overlay {
		/*upper right of hte map we will have a display container*/
		position: absolute;
		left:15px;
	}
}
@media screen and (max-width: 700px) {
	/*
	*	Small screens - both displays are off to the side
	*/
	.control_left.natural {
		overflow:hidden;
		left:-185px;
	}
	.control_right.natural {
		overflow:hidden;
		right:-235px;
	}
	.slideToggle {
		/*
		*	Always show the toggle, natural or not
		*/
		display:block;
	}
	.mapcontainer {
		border-width: 0 15px 0 0px;
	}
	.control-overlay {
		/*upper right of hte map we will have a display container*/
		right: 15px;
	}
}

/*
*	Top Control Formatting
*/
.maptitle {
	font-size:18px;
	margin-left:5%;
	font-weight:600;
}
.controlTitle {
	font-size:1.5em;
}


/*
*
*	IN MAP STYLES
*
*/

.marker-icon-text {
	font-family:"Open Sans", sans-serif;
	color:#000;
	font-weight:600;
	/*this is related to the 15px marker radius!*/
	/*ok, the div is 12x12px, so, yep.*/
	line-height:12px;
	z-index:12;
	padding:0;
	margin:0;
}
.firemap-marker-icon {
	width:34px;
	height:34px;
	line-height:32px;
	border-radius:17px;
	text-align:center;
	border:1px solid #000;
	padding:0;
	margin:0;
	position:relative;
	top:-11px; /*the div created by leaflet is 12x12*/
	left:-11px;
}
.firemap-marker-click {
	border:2px solid #000;
	line-height:30px;
	border-radius:3px;
}
.marker-icon-text .fao {
	display:block;
	position:absolute;
	top:-13px; /*beacuse the height is 8 less than 68 */
	right:17px;
	height:60px; /*68 is too far out*/
	width:6px;
	margin:0 -3px;
	z-index:-2;
	font-size:1.5em;
	line-height:17px;
	color: rgba(0,0,0,.8);
}
.marker-icon-text .popout {
	position:absolute;
	bottom:12px;
	left:12px;
	padding:3px;
	font-size:13px;
	max-width:250px;
	white-space:nowrap;
	display:none;
	background-color: #37474F;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border: 1px solid #FFF;
	color:#fff;
	
}
.marker-icon-text:hover .firemap-marker-icon {
	border:1px solid #FFF;
}
.marker-icon-text:hover .firemap-marker-icon.firemap-marker-click {
	border:2px solid #000;
}
.marker-icon-text:hover .popout {
	display: block;

}
.lightning-marker {
	height:15;
	width:15;
	background-color: transparent;
	border:none;
	text-shadow: 1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
	font-size:18px;

}