body {
	margin: 0;
	background: #fff;
	color: #1a1a1a;
	font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
	font-size: 0.875rem;
	line-height: 1.5;
}

a { color: #0b4a9e; }
a:visited { color: #5a2d82; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: normal; }
h1 { font-size: 1.6rem; margin: 0.3em 0 0.6em; }
h2 { font-size: 1.2rem; margin: 1.4em 0 0.4em; border-bottom: 1px solid #b8c2cf; }
code, .mono, pre { font-family: Consolas, "DejaVu Sans Mono", "Courier New", monospace; }
:focus { outline: 3px solid #f0b400; outline-offset: 1px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: #fff; padding: 4px; }
.vh { position: absolute; left: -9999px; }

#header { background: #1f3d6b; color: #fff; }
#header .inner { max-width: 980px; margin: 0 auto; padding: 14px 10px; }
#header .site { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; margin-right: 14px; }
#header .server { font-size: 0.95rem; }
#header .who { float: right; font-size: 0.8rem; margin-top: 8px; }

#wrap { max-width: 980px; margin: 0 auto; padding: 14px 10px; }
#menu { float: left; width: 190px; background: #eef1f5; border: 1px solid #b8c2cf; padding: 6px 0 10px; }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu li a { display: block; padding: 5px 12px; text-decoration: none; }
#menu li a:hover { text-decoration: underline; }
#menu li a.here { font-weight: bold; background: #dfe5ec; color: #1a1a1a; }
#menu form { padding: 10px 12px 0; }
#content { margin-left: 210px; min-height: 300px; }
#content.full { margin-left: 0; max-width: 560px; }
#footer { clear: both; margin-top: 30px; padding-top: 8px; border-top: 1px solid #b8c2cf; font-size: 0.75rem; color: #555; }

table.list { border-collapse: collapse; width: 100%; margin: 8px 0; }
table.list caption { text-align: left; font-weight: bold; padding-bottom: 4px; }
table.list th, table.list td { border: 1px solid #9aa5b1; padding: 4px 6px; text-align: left; vertical-align: top; }
table.list th { background: #dfe5ec; }
table.list tr:nth-child(odd) td { background: #f5f7f9; }

table.details { border-collapse: collapse; }
table.details th { text-align: left; font-weight: normal; color: #444; padding: 3px 14px 3px 0; vertical-align: top; }
table.details td { padding: 3px 0; word-break: break-all; }

table.form { border-collapse: collapse; width: 100%; }
table.form th { width: 32%; text-align: left; font-weight: normal; padding: 6px 10px 6px 0; vertical-align: top; }
table.form td { padding: 6px 0; }
fieldset { border: 0; margin: 0; padding: 0; }
.hint { font-size: 0.8rem; color: #555; }

input, select, textarea { font-family: inherit; font-size: 1rem; border: 1px solid #6b7a8c; padding: 2px 4px; }
button {
	font-family: inherit;
	font-size: 0.875rem;
	background: #e6e9ee;
	border: 1px solid #6b7a8c;
	border-radius: 2px;
	padding: 3px 10px;
	cursor: pointer;
}
button:hover { background: #d7dce3; }
button.danger { color: #9a1010; border-color: #9a1010; }

.actions form { display: inline; margin-right: 6px; }
form.inline { margin-bottom: 8px; }

.box { border: 1px solid; padding: 8px 10px; margin: 10px 0; }
.box p { margin: 4px 0; }
.box.error { border-color: #a33; background: #fbeaea; }
.box.warning { border-color: #a87600; background: #fff6dd; }
.box.ok { border-color: #2f6b2f; background: #eaf5ea; }
.box.note { border-color: #4a6a8f; background: #eef3f9; }

pre.config { background: #f5f7f9; border: 1px solid #9aa5b1; padding: 8px; overflow-x: auto; font-size: 0.8rem; }
img.qr { border: 1px solid #9aa5b1; image-rendering: pixelated; max-width: 100%; }

@media (max-width: 720px) {
	#menu { float: none; width: auto; margin-bottom: 12px; }
	#menu li { display: inline; }
	#menu li a { display: inline-block; }
	#content { margin-left: 0; }
	#header .who { float: none; display: block; margin-top: 4px; }
	table.form th { width: auto; display: block; padding-bottom: 0; }
	table.form td { display: block; }
	table.list { display: block; overflow-x: auto; }
	button, input[type=checkbox], input[type=radio] { min-height: 32px; }
}