* { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; }
h1 { font-size: 50px; }
body { font: 20px Helvetica, sans-serif; padding: 12px; }
section { display: block; margin: 0 auto; margin-top: 120px; }
a { color: #dc8100; text-decoration: none; }
a:visited { color: #c47200; }
button { width: 120px; padding: 10px; margin-bottom: 20px; margin-right: 7px; margin-left: 7px; }
table { width: 100%; text-align: center; }
table td, table th { padding: 10px; }
hr { border-style: solid; }
input, select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; margin-bottom: 12px; border-radius: 4px; resize: vertical; }
label { padding: 10px; display: inline-block; }
input[type=submit] { width: auto; padding: 12px 20px; border: none; background-color: #dc8100; color: #ffffff; cursor: pointer; }
input[type=submit]:hover { background-color: #c47200; }
table .on { background-color: #90ee90; color: #000000; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-small { font-size: 16px; }
.full-width { width: 100%; margin-top: 0; }
.container { width: 1000px; }
.container.smaller { width: 650px; margin-top: 180px; }
.type-err { color: #c34a4a; }
.type-warn { color: #ffa500; }
.type-ok { color: #90ee90; }
@media screen and (max-width: 450px) {
    section, select, input, button, pre { margin: 5px 0; }
    body { padding: 20px; }
    pre { overflow: scroll; }
    .container { width: 100%; }
}