body {
	color: rgba(48, 48, 48, 1);
	display: flex;
	flex-direction: column;
	font-family: Verdana, Geneva, sans-serif;
	height: 100vh;
	margin: 0;
}

/*
	Main content and action area.
*/
.container {
	flex: 1;
	overflow-y: auto;
	padding-bottom: 160px;
}

.content {
	font-size: 16px;
	line-height: 24px;
	margin: 0 auto;
	width: 95%;
}

.content .page-header {
	font-family: Georgia, serif;
}

.content .page-header h1 {
	font-size: 30px;
}

.content .page-header h2 {
	font-size: 22px;
}

.content .adventure-text .adventure-image {
	width: 600px;
}

.content .adventure-text .enemy-image {
	width: 150px;
}

.content .adventure-form {
	padding: 20px 0;
}

/*
	Map area.
*/
.map-container {
	position: relative;
}

.map-background {
	height: auto;
	width: 100%;
}

.map-area {
	position: absolute;
	width: 100px;
}

.map-area a {
	text-decoration: none;
}

.map-area img {
	height: 100px;
	width: 100px;
}

.map-area .location-name {
	background-color: white;
	display: block;
	font-size: 12px;
	line-height: 12px;
	padding: 3px;
	text-align: center;
}

.map-area.structionChamber {
	top: 63%;
	left: 4%;
}

.map-area.constructionChamber {
	top: 60%;
	left: 44%;
}

.map-area.destructionChamber {
	top: 47%;
	left: 91%;
}


/*
	Character stats and navigation pane.
*/
#navigation {
	bottom: 0;
	background-color: rgba(248,248,248,1);
	border-top: 2px solid rgba(48, 48, 48, 1);
	display: flex;
	flex-direction: row;
	height: 160px;
	justify-content: space-between;
	position: fixed;
	width: 100%;
}

#navigation .character {
	padding: 10px;
	width: 100px;
}

#navigation .character h2 {
	font-size: 15px;
	margin: 0;
}

#navigation .character .headshot {
	height: 100px;
	width: 100px;
}

#navigation .character .hit-points {
	appearance: none;
	border-top: 1px solid rgba(48, 48, 48, 1);
	height: 10px;
	width: 100px;
}

#navigation .logout {
	padding: 10px;
}