body {
	background: #EEE;
	margin: 0;
	padding:0;
	border-collapse:0;
	color: #424242;
	font-family: "Locida Console", "Courier New", monospace;
}


div#header {
	background: #FFF;
	text-align: right;
	padding: 2vh 10vw;
	font-size: 10vh;
	border-bottom: 1vh solid #EEE;
}

div#content {
	background: #FFF;
	padding: 1vh 0vw;
	padding-left: 2.1vw;
	float: left;
	width: 97.9vw;
}

div.input {
	margin-bottom: .84vh;
}

div.pane {
	float:left;
	margin-right: 5vw;
}

span.inputhead {
	display: table;
	background: #424242;
	color: white;
	padding: 2px 24px;
}

input[type=text],
input[type=date],
input[type=number],
input[type=password],
select,
textarea {
	padding: 4px 8px;
	border: 1px solid #424242;
	text-decoration: none;
	font-family: "Locida Console", "Courier New", monospace;
	transition-duration: .21s;
	size: 16;
	font-size: 16px;
}

select:focus,
input[type=text]:focus,
input[type=date]:focus,
input[type=number]:focus,
input[type=password]:focus,
textarea:focus {
	padding: 4px 4px 4px 1px;
	border-left: 12px solid #424242;
	outline: none;
	transition-duration: .21s;
}

div.statusdiv {
	position: absolute;
	top: 0;
	left: 0;
	background: #DDD;
	padding: 1vh 2.1vw;
	opacity: 1.0;
	transition-duration: .42s;
}

div.statusdiv_fade {
	position: absolute;
	top: 0;
	left: 0;
	background: #DDD;
	padding: 1vh 2.1vw;
	opacity: 0.0;
	transition-duration: .42s;
}

span.clear {
	clear:left;
	display:block;
}

p.spacer {
	height: 32px;
	margin: 0;
	padding: 0;
}

div.menu {
	float: left;
	width: 50px;
	height: 50px;
	margin: 8.4px;
	border-radius: 4px;
	transition-duration: .21s;
	background-color: #CCC;
	overflow: hidden;
}
div.menu:hover {
	filter:brightness(.84);
	border-radius:12px;
	cursor:pointer;
}
div.menu div.menuTitle {
	text-align: center;
	font-size: 14px;
}
div.menu div.menuValue {
	text-align: center;
	padding-top: 0;
}

div.menu div.menuValue span {
	font-size: 32px;
}

div.menuspacer {
	float: left;
	width: 25px;
	height: 50px;
}

/* Start page */

div.iMenu,
div.iBox {
	float: left;
	width: 120px;
	height: 84px;
	padding: 18px;
	margin: 24px;
	border-radius: 8px;
	transition-duration: .21s;
}

div.iBoxred {
	background: red;
	color: white;
}

div.iBoxgrey {
	background: #CCC;
}

div.iBoxgreen {
	background: lightgreen;
}

div.iBoxblue {
	background: lightblue;
}

div.iBoxdgrey {
	background: #848484;
	color: white;
}

div.iMenu div.iMenuValue,
div.iBox div.iBoxValue {
	text-align: center;
	font-size: 42px;
	font-weight: bold;
	padding-top: 4px;
}

div.iBox div.iBoxValue {
	padding-top: 14px;
}

div.iMenu div.iMenuTitle,
div.iBox div.iBoxTitle {
	text-align: center;
	font-size: 14px;
	padding-top: 1px;
}

div.iMenu:hover {
	filter:brightness(.84);
	border-radius:42px;
	cursor:pointer;
}

div.iMenu div.iMenuValue img {
	width: 105px;
	height: 64px;
}

/* List pages */

table.mData {
	border-collapse: collapse;
}

table.mData th {
	text-align: left;
	padding-right: 21px;
	font-size: 21px;
}

table.mData tr {
	background: #FFF;
}

table.mData tr:nth-child(even) {
	background: #EEE;
}

table.mData tr:hover {
	filter:brightness(.84);
	cursor: pointer;
}

table.mData td {
	padding: 4px 0px;
	padding-right: 21px;
	font-size: 18px;
}

table.mData td.listtitle {
	background: #424242;
	color: white;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	padding: 10px 2px;
	vertical-align: top;
}
