#logo {
	float: left;
	max-width: 45%;
	margin: 20px 15px 10px 15px;
}
#logo > a > img {
	max-height: 50px;
}
#headerRow > h2 {
	float: right;
	position: relative;
	max-width: 45%;
	text-align: left;
	margin: 20px 15px 10px 15px;
	text-align: left;
}
.mapcell {
	padding: 5px;
}
.mapcell > div {
	/* This should have an aspect ratio of 575:356 or as close to that as possible. */
	border: 1px solid black;
	border-radius: 10px;
	min-width: 100%;
	max-width: 100%;
	min-height: 290px;
	max-height: 290px;
}
.container {
	width: calc(
		100% * 290 / 468
	); /*This uses the values in .mapcell > dev plus an arbitrary modifier to make things look nice.*/
}
#badgesLeft,
#badgesRight {
	height: 60px; /*The values in .mapcell > div are calculated to accommodate a footer that's 80px tall.*/
}
#badgesLeft {
	text-align: left;
}
#badgesRight {
	text-align: right;
}
#wsfrText {
	font-size: 9px;
	font-style: italic;
	text-align: justify;
}
.badgeLeft > img,
#badgesRight > a > img,
#wsfrText {
	/*These values come from those 80px.*/
	height: 60px;
	margin: 10px;
}
.leaflet-container {
	background-color: #fafaf8;
}
.hoverLbl {
	font-weight: bold;
}
.colorSampleBox {
	display: flex;
	height: 20px;
}
.selectize-dropdown {
	z-index: 2000 !important;
}
#A1 .leaflet-control-attribution,
#A2 .leaflet-control-attribution,
#B1 .leaflet-control-attribution {
	background-color: transparent;
}
#A1 .leaflet-control-attribution a,
#A2 .leaflet-control-attribution a,
#B1 .leaflet-control-attribution a {
	color: transparent;
	pointer-events: none;
}
.mapTitle {
	font-weight: bold;
}
.image-container a {
	display: inline-block;
	margin: 0;
	border: none;
}
.technicalReportLink {
	text-align: center;
	font-style: italic;
}