body {
	color: #ccc;
	background-color: #202020;
	padding: 0px;
	margin: 0px;
	font-family: Courier;
}

a {
	color: #0c0;
}

a:visited {
	color: #0a0;
}

#status {
	position: fixed;
	z-index: 500;
	top: 0px;
	left: 0px;
	height: 40px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-color: #333;
	font-family: monospace;
}

#status-content {
	height: calc(100% - 8px);
	width: calc(100% - 24px);
	/* Based on: 40px * (3 items + 1) + 20px * 19 characters */
	min-width: 540px;
	color: #ccc;
	margin: 0;
	padding: 4px 4px 4px 20px;
	font-family: monospace;
	font-size: 20px;
	color: #ccc;
}

#spacer {
	height: 40px;
}

#status-content a {
	display: block;
	float: left;
	margin: 4px 1px 4px 1px;
	height: 24px;
	padding: 1px 20px 3px 20px;
	text-decoration: none;
	border-color: #333;
	border-radius: 32px;
	color: #ccc;
}

#status-content a:hover {
	background-color: #202020;
}

#page-frame {
	position: absolute;
	top: 40px;
	height: calc(100% - 40px);
	width: 100%;
	overflow-y: scroll;
	overflow-x: auto;
	padding: 0;
}

#page-content {
	/* Remove the status bar */
	min-height: calc(100% - 40px);
	width: 100%;
	padding: 0;
}

#aspect-tray {
	float: right;
	margin: 0;
	padding: 2px;
}

.aspect {
	float: right;
	overflow:hidden;
}

.aspect-icon {
	margin: 0 1px 0 1px;
	padding: 3px 5px 7px 5px;
	height: 20px;
	font-size: 24px;
	font-weight: bold;
	border-radius: 8px;
}

.aspect-selected {
	color: white;
	background-color: black;
}

.aspect-icon:hover {
	background-color: #202020;
}

.aspect-selected:hover {
	color: white;
	background-color: black;
}


#status-content a:hover.selected {
	background-color: black;
}

#status-content .selected {
	color: white;
	font-weight: bold;
	background-color: black;
}


.aspect-console {
	position: fixed;
	right:0;
	top:0;
	min-width:400px;
	width:25%;
	height:100%;
	background: #333;
}

#aspect-tray-contents {
	position: absolute;
	top: 41px;
	width: 100%;
}


.vertical-center {
	min-height: 100%;
	display: flex;
	align-items: center;
}

.horizontal-center {
	width: 100%;
	display: flex;
	justify-content: center;
}

.screen-cover {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.volume-cover {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.volume-center {
	width: 100%;
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.volume-high-center {
	width: 100%;
	min-height: 75%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.document {
	padding: 48px;
}