* { font-family: fsans; font-size: 16px; }

body {
	margin: 0;
	overflow: hidden;
	background-color: #000;
	background-image: url(/images/bg.jpg);
	background-size: cover;
}
div#grid {
	display: grid;
	grid-template-columns: 15px 200px 15px auto 15px;
	grid-template-rows: 15px 60px 15px auto 15px;
	height: 100vh;
}
div#head {
	grid-column-start: 2; grid-column-end: -2;
	grid-row-start: 2; grid-row-end: 3;
	margin: 0; padding: 0; overflow: hidden;
	background-color: #fff;
	position: relative; /* Allows for absolute positioning of other header elements. */
}
div#menu {
	grid-column-start: 2; grid-column-end: 3;
	grid-row-start: 4; grid-row-end: 5;
	margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto;
	background-color: #fff;
	padding: 5px;
	position: relative;
}
div#area {
	grid-column-start: 4; grid-column-end: 5;
	grid-row-start: 4; grid-row-end: 5;
	margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto;
	background-color: #fff;
	padding: 5px;
	position: relative;
}

div#menu > *:first-child { margin-top: 0; margin-block-start: 0; }
div#menu > *:last-child { margin-bottom: 0; margin-block-end: 0; }
div#area > *:first-child { margin-top: 0; margin-block-start: 0; }
div#area > *:last-child { margin-bottom: 0; margin-block-end: 0; }

h1, h2, h3 {
	font-family: fsansb;
	font-weight: normal;
	border-style: solid;
	border-color: #000;
	background-color: #ccc;
	padding: 3px;
}
h1 { border-width: 3px; font-size: 140%; }
h2 { border-width: 2px; font-size: 120%; }
h3 { border-width: 1px; font-size: inherit; }

div#mapdetail {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 250px;
	height: -moz-calc(100% - 54px);
	height: -webkit-calc(100% - 54px);
	height: calc(100% - 54px);
	z-index: 9;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.8);
	border: 2px solid #fff;
	padding: 5px;
	overflow-x: hidden;
	overflow-y: auto;
}
div#mapdetail > *:first-child { margin-top: 0; margin-block-start: 0; }
div#mapdetail > *:last-child { margin-bottom: 0; margin-block-end: 0; }