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

body.en .lang:not(.en) { display: none; }
body.de .lang:not(.de) { display: none; }

.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; }
.page .column-wrapper .column { margin: 0 auto; padding: 1em; width: 50%; min-width: 20em; max-width: 40em; height: 100%; text-align: left; }

#intro { text-align: center; }
#intro .spinner { font-size: 3em; width: 3em; height: 3em; margin-left: -1.5em; margin-top: -1.5em; position: absolute; left: 50%; top: 50%; }
#intro .spinner .fa-spinner { font-size: 3em; }

#settings { overflow-y: auto; }
#settings h1 { text-align: center; }
#settings .row-group { margin-bottom: 1em; }
#settings .row.label { margin-left: -1em; margin-bottom: 0.25em; }
#settings .row.label.indent { padding-left: 1em; }
#settings .row.label .title { display: inline-block; font-weight: bold; }
#settings .row.label .range { display: inline-block; }
#settings .row.label .hits { width: 6.5em; text-align: right; float: right; white-space: nowrap; }
#settings .row.label .clear { clear: both; }
#settings .row.input { margin-bottom: 0.25em; }
#settings .row.input.indent { padding-left: 0.5em; padding-right: 0.7em; }
#settings .row.input label { display: block; text-align: left; }
#settings .row.input .slider { margin: 0.5em 0 1.5em 0; }
#settings .start-btn { width: 100%; color: #f33; }
#settings .start-btn:hover { background-color: #3f3; }
#settings .output { overflow-y: hidden; font-size: 0.9em; min-height: 20em; }
#settings .disclaimer { margin-top: 1em; padding-top: 1em; border-top: 1px solid #888; font-size: 0.8em; color: #888; }
#settings .disclaimer a:link,
#settings .disclaimer a:visited,
#settings .disclaimer a:hover,
#settings .disclaimer a:active { color: #888; }

#game { color: #fff; }
#top { position: absolute; background-color: #000; top: 0; left: 0; right: 0; height: 3em; line-height: 3em; text-align: center; }
#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; background-color: #000; top: 3em; left: 0; right: 0; bottom: 2em; overflow: hidden; }
#map svg { cursor: crosshair; }
#map svg.moving { cursor: move; }
#bot { position: absolute; background-color: #000; bottom: 0.3em; left: 0; right: 0; height: 2em; line-height: 2em; text-align: center; color: #3f3; }
/*#bot .ui-button:hover { color: #f33; }*/
#counter { float: right; margin-right: 1em; margin-left: -1em; }

#results { overflow-y: auto; }
#results h1 { text-align: center; }
#results table { margin-bottom: 2em; border-collapse: collapse; }
#results table.details { width: 100%; }
#results table th { padding-right: 0.5em; border-bottom: 1px solid #3a3; }
#results table td { vertical-align: top; padding-right: 0.5em; }
#results button { width: 100%; margin-bottom: 0.5em; }