body, html { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden}
body {font: 75% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;}
#map {margin:0;padding:0;}
#maploading {
	background: #c00;
	color: #fff;
	padding: 0 2px;}
.map-overlay-controls {
	left: 10px;
	position: absolute;
	top: 4px;
	z-index: 20;
}
.map-overlay-toggle-button {
	align-items: center;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid #9a9a9a;
	border-radius: 2px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	color: #000;
	cursor: pointer;
	display: flex;
	font: 11px Arial, sans-serif;
	gap: 6px;
	height: 48px;
	justify-content: center;
	line-height: 1;
	text-align: center;
	user-select: none;
	width: 82px;
}
.map-overlay-toggle-label {
	display: block;
	font-weight: 700;
	font-size: 13px;
}
.map-overlay-toggle-arrow {
	display: block;
	font-size: 14px;
}
.map-overlay-panel {
	background: rgba(255, 255, 255, 0.98);
	border: 1px solid #9a9a9a;
	border-radius: 2px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	margin-top: 6px;
	min-width: 172px;
	padding: 8px 10px;
}
.map-overlay-toggle {
	align-items: center;
	color: #000;
	cursor: pointer;
	display: flex;
	font: 12px Arial, sans-serif;
	gap: 6px;
	margin-bottom: 6px;
}
.map-overlay-toggle:last-child {
	margin-bottom: 0;
}
.map-overlay-toggle input {
	margin: 0;
}
.map-overlay-legend {
	border-top: 1px solid #d9d9d9;
	margin-top: 8px;
	padding-top: 8px;
}
.map-overlay-legend-title {
	color: #555;
	font: bold 11px Arial, sans-serif;
	margin-bottom: 6px;
}
.map-overlay-legend-row {
	align-items: center;
	display: flex;
	font: 11px Arial, sans-serif;
	gap: 6px;
	margin-bottom: 4px;
}
.map-overlay-legend-row:last-child {
	margin-bottom: 0;
}
.map-overlay-swatch {
	box-sizing: border-box;
	display: inline-block;
	flex: 0 0 14px;
	height: 14px;
	width: 14px;
}
.map-overlay-swatch.gas-abd {
	background: rgba(251, 154, 153, 0.5);
	border: 1px solid #E31A1C;
}
.map-overlay-swatch.gas-act {
	background: rgba(227, 26, 28, 0.5);
	border: 1px solid #E31A1C;
}
.map-overlay-swatch.gas-sus {
	background: rgba(192, 143, 144, 0.5);
	border: 1px solid #E31A1C;
}
.map-overlay-swatch.ngs-ngs {
	background: rgba(31, 105, 218, 0.5);
	border: 1px solid #1F69DA;
}
.map-overlay-swatch.oil-abd {
	background: rgba(178, 223, 138, 0.5);
	border: 1px solid #33A02C;
}
.map-overlay-swatch.oil-act {
	background: rgba(51, 160, 44, 0.5);
	border: 1px solid #33A02C;
}
.map-overlay-swatch.oil-sus {
	background: rgba(134, 160, 132, 0.5);
	border: 1px solid #33A02C;
}
.bubble {width: 350px;}
.bubble h1 {
	margin: 0;
	padding: 0;
	font-size: 150%;}
.button { width: 25%; height: 10%; float: left; font-weight: 800; font-size: larger; background-color: #000063; text-align: center; vertical-align: middle}
.button a {vertical-align: middle; color:white; text-decoration:none}

@media screen and (max-width: 768px) {
	.map-overlay-controls {
		left: 8px;
		top: 4px;
	}
	.map-overlay-panel {
		min-width: 164px;
	}
}