html, body { height: 100%; color: #333; font-family: sans-serif; }

body > header { float: left; width: 24em; height: 100%; overflow: auto; margin-top: -3em; }
body > header h1 { margin: 5em 3em 1em 3em; }
body > header h1 a { font-weight: bold; font-size: 150%; }
body > header a { color: inherit; text-decoration: none; }
body > header a:hover { text-decoration: underline; }
body > header aside { margin: 0em 3em; }
body > header aside a { font-size: 85%; color: #666; }
body > header nav { margin: 3em; }
body > footer { position: fixed; bottom: 0; width: 24em; height: 3em; }
body > footer p { padding: 1em 3em; }

nav ul { list-style-type: none; margin-bottom: 1em; }
nav ul li { margin: 0.3em 1em; }
nav > ul > li { margin-left: 0; }
nav ul li h2, nav ul li h3, nav ul li h4, nav ul li h5, nav ul li h6 { font-weight: bold; margin: 1em 0 0 0; }

body > main { border-left: 0.8em solid #38b256; background-color: #fafafa; height: 100%; display: block; }
main > article { border-left: 1px solid #38b256; overflow: auto; background-color: #fff; height: 100%; }

main > article > div { padding: 2em; line-height: 1.3em; }
main > article h1 { font-size: 150%; padding: 0.5em 0; }
main > article h1, article h2 { font-weight: bold; }
main > article p { padding: 0.5em 0; width: 40em; }

table th, table td { padding: 0.1em 0.5em; text-align: left; }
table .th, table .th td { font-weight: bold; }

input, select, textarea, button {
    font-size: 100%; min-width: 20em; padding: 0.3em 0.25em 0.2em 0.25em;
}
input[type=radio], input[type=checkbox] { min-width: auto; }
textarea { width: 100%; }
select, button { min-width: 10em; }
small { font-size: 80%; }

pre { font-family: monospace; background-color: #ffffe0; border: 1px solid #ffda89; margin: 0; padding: 1em; overflow: auto; }
pre.single { background-color: inherit; border-width: 0; padding: 0.1em; display: inline; }

aside.alert { border: 1px solid #f66; border-left-width: 1em; background-color: #fee; padding: 0.5em 0.5em; width: 40em; }
aside.alert.success { border-color: #38b256; background-color: #efe; }
aside.alert.error:before { content: "Error: "; font-style: italic; }
aside.alert.success:before { content: "Confirmation: "; font-style: italic; }

h1 { font-weight: bold; }
h1, h2, h3, h4, h5, h6 { margin: 0.8em 0 0.2em 0; font-weight: bold; }
h1 > em, h2 > em, h3 > em, h4 > em, h5 > em, h6 > em { font-weight: normal; margin-left: 1em; }
ol { list-style-type: decimal; padding-left: 3em; }
ul.bullet { list-style-type: disc; padding-left: 3em; }

dl > dd { margin-left: 2em; }

.lg-ip, .lg-type, .lg-host {  }
.lg-ip { float: left; width: 7em; }
.lg-type { overflow: hidden; }
.lg-host { padding: 1em 0; }
.lg-host input { width: 20em; }

ul.charts > li { clear: both; }
ul.charts > li.half > div { width: 50%; float: left; }
ul.charts > li.third > div { width: 33%; float: left; }

ul.form { margin: 1em 0; padding: 0; list-style-type: none; }
ul.form > li { display: table-row; }
ul.form > li > * { display: table-cell; }
ul.form > li > :first-child { text-align: right; padding: 0 0.5em 0 0; min-width: 8em; }
ul.form > li > .reduce:first-child { padding: 0 0.5em 0 0; }
ul.form > li > .space:first-child { padding: 1em 0.5em 1em 0; }
ul.form > li > button:first-child { padding: 0.25em 3em; }
ul.form > li > .multi { vertical-align: top; padding-top: 0.5em; }

.success { background-color: #ecf6e7; }
.failure { background-color: #666; }
.hl-success { background-color: #cfc; }
.hl-error { background-color: #fcc; }

input[type=text].quiet { border: 0; padding: 0; width: 7em; }

.inventory li > ul > li { margin-left: 2em; }

.next_hops span { color: #666; font-size: 90%; }

.graph { height: 15em; }

#search { border: 1px solid #bbb; padding: 0; width: 42em; }
#search > input { width: 30em; padding: 1em 0.5em; border: 0px; }
#search > button { width: 8em; }