html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: sans-serif; background-color: #fff; color: #333; }

.page { width: 100%; height: 100%; position: absolute; visibility: hidden; z-index: 10; overflow: hidden; }
.page.active { visibility: visible; z-index: 20; }
.page .column-wrapper { text-align: center; height: 100%; }
.page .column-wrapper .column { margin: 0 auto; padding: 1em; width: 50%; min-width: 20em; max-width: 40em; height: 100%; text-align: left; }

#settings { color: #33f; }
#settings .column-wrapper { background-color: #f33; }
#settings .column { background-color: #fff; }
#settings h1 { text-align: center; }
#settings .start-btn { margin-top: 1em; text-align: center; }
#settings #start-btn { width: 15em; padding: 0.5em; color: #33f; margin-bottom: 5em; }
#settings .disclaimer { border-top: 1px solid #ccc; color: #ccc; font-size: 0.8em; padding-top: 0.5em; }
#settings .disclaimer a:link,
#settings .disclaimer a:visited,
#settings .disclaimer a:hover,
#settings .disclaimer a:active { color: #ccc; }

#top { position: absolute; top: 0; left: 0; right: 0; height: 3em; line-height: 3em; text-align: center; background-color: #33f; }
#wanted { display: inline-block; min-width: 10em; font-weight: bold; font-size: 2em; color: #ff0; }
#wanted.wrong { color: #f00; }
#wanted.correct { color: #0f0; }
#map { position: absolute; top: 3em; left: 0; right: 0; bottom: 0; overflow: hidden; }
#map svg { cursor: crosshair; }
#map svg.moving { cursor: move; }
#counter { float: right; margin-right: 1em; margin-left: -1em; color: #fff; }

#results { color: #33f; }
#results .column-wrapper { background-color: #f33; }
#results .column { background-color: #fff; overflow-y: auto; }
#results h1 { text-align: center; }
#results table { width: 100%; border-collapse: collapse; }
#results table td { vertical-align: top; }
#results table .name { white-space: nowrap; }
#results table .tries { width: 2.5em; text-align: right; padding: 0 0.8em 0 0.3em; }
#results .restart-btn { margin-top: 1em; text-align: center; }
#results #restart-btn { width: 20em; padding: 0.5em; color: #33f; }
#results .settings-btn { margin-top: 1em; text-align: center; }
#results #settings-btn { width: 20em; padding: 0.5em; color: #33f; margin-bottom: 5em; }