div#showmapper {
	border-color: #c4ad7b;
	border-style: solid;
	border-width: 5px;
}
.my-navbar {
	min-height: 40px;
	margin-left: -15px;
	margin-right: -15px;
	margin-top: 0;
	margin-bottom: 10px;
	padding-left: 0;
	position: relative;
	clear: both;
	background-color: #c4ad7b;
}
.my-nav-buttons {
	float: right;
	margin: 4px 10px;
}
/* Reduce height and vertical padding on .navbar-brand */
#custom-brand {
	padding: 10px 10px;
	height: 36px;
	color: #ffffff;
}
/* Since we are placing .dropdown-item elements inside .dropdown-header items,
 * they are getting padding twice.  Zero out the extra vertical padding and
 * reduce the horizontal padding.
 */
.dropdown-header {
	padding: 0px 10px;
}
/* Google Maps div/canvas/iframe */
#map_wrapper {
	height: 400px;
	margin-left: -5px;
	margin-right: -5px;
	margin-bottom: 10px;
}
#map_canvas {
	width: 100%;
	height: 100%
}
/* Range slider */
.range-control {
	/* display: block; */
	min-width: 280px;
	max-width: 600px;
	padding: 10px 10px;
	margin-left: auto;
	margin-right: auto;
}
.range-control::after {
	content: "";
	clear: both;
	display: table;
}
.slider {
	margin: 5px 10px;
	/* display: inline-block; */
	/* float: left; */
	/* clear: right; */
}
.range-container {
	display: -webkit-flex;
	display: flex;
	height: 20px;
	margin-bottom: 10px;
	min-width: 260px;
}
/* flex: <grow> <shrink> <basis> */
.readout-min {
	flex: 1;
	min-width: 80px;
	white-space: nowrap;
	/* margin: 5px 10px; */
	/* display: inline-block; */
	/* float: left; */
}
.readout-max {
	flex: 1;
	min-width: 80px;
	white-space: nowrap;
	text-align: right;
	/* margin: 5px 10px; */
	/* display: inline-block; */
	/* float: right; */
}
.range-label {
	flex: 1;
	min-width: 80px;
	/* height: 15px; */
	/* margin: auto; */
	text-align: center;
	/* margin: 10px auto; */
}
.c-0-color { background: #dddddd; }
.c-1-color { background: #a0d0ff; }
.c-2-color { background: #dddddd; }