html {
	height: 100vh;
	width: 100%;
	padding: 0px;
	margin: 0px;
}

body {
	min-height: 100vh;
	width: 100vw;
	padding: 0px;
	margin: 0px;
	border: 0px;
}

footer {
	display: block;
	width:100vw;
	margin: 0px;
	padding: 0px;
}

footer p {
	margin: 2px 0px 5px 0px;
	padding: 0px;
}

aside.UserSide {
	display: block;
	text-align: center;
	padding-top: 40vh;
	width: 30em;
	margin-left: auto;
	margin-right: auto;
}

.UserSideRow {
	text-align: left;
}

hr {clear: both;}

code {
	display: block;
	font-family: monospace;
	white-space: pre;
}

ul.Menu {margin: 0px;}

.User {
	box-sizing: border-box;
	width: 100%;
	max-width: 1000px;
	padding: 5px;
	clear: both;
}


.Admin {
	display: flex;
	flex-flow: column nowrap;
	width: calc(100% - 12px);
	padding: 5px;
	border: 1px dotted #f00000;
	height: auto;
	background-color: #400000;
	color: #ffffff;
}

.Editor {
	display: flex;
	flex-flow: column nowrap;
	width: calc(100% - 12px);
	height: auto;
}

.Author {
	display: flex;
	flex-flow: column nowrap;
	width: calc(100% - 12px);
	height: auto;
}

.Row {
 display: flex;
 flex-flow: row nowrap;
 width: 100%;
 padding: 5px 0px 5px 0px;
}

.Item {display: flex; flex-grow: 0; padding-right: 5px;}
.Spacer {display: flex; flex-grow: 1; justify-content: center;}
.Stretch {display: flex; flex-grow: 1;}
h4.Item {margin: 5px 0px 5px 0px;}

.Admin li a {color: #ffff00;}
.Admin h2 {color: #ffffff;}
.Admin h3 {color: #ffffff; text-align: center; margin: 5px 0px 5px 0px;}
.Admin em {color: #ffff00; font-style: normal; font-weight: bold;}


input.AdminButton {
 background-color: #622;
 color: #ff0;
 border: outset #800000;
 font-weight: bold;
}

.Controls,.AuthorControls,.EditorControls,.AdminControls {
	display: flex;
	justify-content: center;
	align-items: baseline;
	width: 100%;
	padding: 0px;
	margin: 0px;
}

/* --------------------------------- Desktop layout  ----------------------------- */

@media screen and (min-width: 1024px) {
	#status {line-height: 1.5em;}
	aside.UserSide {flex: 7 0; margin: 0px; font-size: 10pt;}
	.IRDevStatus {flex: 3 0; text-align: right;}

	#main {
		display: table;
		min-height: calc( 100vh - 100px );
		vertical-align: top;
	}

	#mainrow {
		display: table-row;
		height: 100%;
		vertical-align: top;
	}
	
	nav {
		display: table-cell;
		margin: 0px;
		vertical-align: middle;
		height: 100%;
		border-width: 0px 1px 0px 0px;
		padding: 0px;
	}

	ul.Menu {font-size: 11pt;}

	.MenuExpander {padding-right: 5px; cursor: pointer;}
	.MenuEntryActive .MenuExpander {font-weight: bold;}

	li ul.Menu {width: 144px; font-size: 10pt;}
/*	li.MenuEntry {height: 20px;	line-height: 20px;} */
	li.MenuEntry {width: 144px; border-width: 1px;}
	li.MenuEntry a {padding: 0px 5px 0px 5px;}

	li.MenuEntryActive {width: 144px;}
	li.MenuEntryActive a {padding: 0px 5px 0px 5px;}
	
	li ul.Menu {font-size: 10pt; }

	li.toc {display: inline-block; list-style-type: disc; width: 200px;}
}

/* ---------------------------------- Mobile layout  ----------------------------- */
/* @media screen and (orientation: landscape) { */
@media screen and (max-width: 959px) {
	#main {
		display: block;
		width: 100%;
		border: none;
		box-sizing: border-box;
		margin: 0px;
	}

	nav {
		display: block;
		width: 100%;
		padding: 0px;
		border-width: 0px 0px 1px 0px;
		box-sizing: border-box;
		margin: 0px;
	}


	h3 {font-size: 16pt;}

	ul {list-style-type: none; padding: 0px; margin: 0px; border: none;}
	li {
		width: 100%;
		border: none;
		margin: 0px 0px 5px 0px;
		padding-left: 0px;
	}

	 ul.Menu {font-size: 18pt; list-style-type: none;}
	 li.MenuEntry {width: 100%; border: none;}
	 li.MenuEntryActive {width: 100%; border: none;}

	.Column {display: block;}

	code {
		width: 100%;
		margin: 0px;
		border-width: 2px;
	}
}