body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: "Montserrat";
	font-size: 16dp;
	line-height: 1.5;
	color: #fff;
}

worldview {
	position: absolute;
	width: 100%;
	height: 100%;
	visibility: hidden;
	z-index: -3;
}

levelshot {
	position: absolute;
	width: 100%;
	height: 100%;
	visibility: hidden;
	z-index: -2;
}

blur {
	position: absolute;
	z-index: -1;
}

#navi {
	background: rgba( 0, 0, 0, 128 );
	height: 100%;
	left: 32dp;
	position: absolute;
	text-transform: uppercase;
	width: 200dp;
}

.navi-padding {
	padding-top: 48dp;
}

#navi a {
	display: block;
	font-weight: bold;
	padding: 0.5em 1em;
}

#navi a:hover {
	background: rgba( 0, 0, 0, 128 );
}

#navi-settings {
	display: none;
}

#navi-settings a {
	padding-left: 2em;
}

#navi a:hover, #navi a:active, #navi a:focus {
	color: #fff;
}

#version {
	font-size: 12dp;
	padding: 1em 2em;
	position: absolute;
	bottom: 0;
}

/* TODO: this hasn't been cleaned up yet */
#notification {
	position: fixed;
	top: 16dp;
	left: 35%;
	height: 16dp;
	padding-top: 4dp;
	padding-bottom: 4dp;
	width: 30%;
	text-align: center;
	z-index: 2;
	display: none;
	font-size: 12dp;
	font-weight: bold;
}

#notification.ok {
	color: black;
	background: #bef4ad;
}

#notification.error {
	color: black;
	background: red;
}

#content {
	background: rgba( 0, 0, 0, 128 );
	height: 100%;
	left: 264dp;
	margin-right: 32dp;
	overflow-y: auto;
	position: absolute;
	top: 0;
}

.content-inner {
	padding: 16dp;
}

#quit {
	background: red;
	margin: 0 auto;
	padding: 1em 0;
	position: absolute;
	text-align: center;
	top: 30%;
	visibility: hidden;
	width: 300dp;
}

#quit h1 {
	margin: 0;
}

#quit button:hover {
	text-decoration: underline;
}

button {
	tab-index: auto;
}

button, .button, input.submit {
	padding: 8dp 16dp;
	text-align: center;
}

.setting-name {
	display: inline-block;
	font-weight: bold;
	width: 35%;
}

tabset tab {
	width: 75%;
	padding: 8dp;
	margin-right: 4dp;
	margin-left: 4dp;
	text-align: center;
	white-space: nowrap;
}

tabset tab:selected, tabset tab:hover, tabset tab:focus {
	text-decoration: underline;
}

tabset tabs {
	text-align: center;
}