@import url('https://fonts.googleapis.com/css?family=Material+Icons');

* {
    border                          : none;
    font-size                       : 100%;
    margin                          : 0;
    padding                         : 0;
}

body {
    background                      : #333;
    color                           : #da2;
    height                          : 100vh;
    width                           : 100%;
}

ol {
    list-style-type                 : none;
}

button {
    background                      : #fff;
    border                          : 1px solid #ccc;
    padding                         : .5ex .5em;
}

#map {
    background                      : #333;
    bottom                          : 0;
    left                            : 0;
    position                        : relative;
}

#map canvas {
    left                            : 0;
    position                        : absolute;
    top                             : 0;
}

#statusbar {
    background                      : #181818;
    box-sizing                      : border-box;
    display                         : flex;
    height                          : 6ex;
    justify-content                 : space-between;
    padding                         : .5ex 1ch;
}

#sb-name {
    display                         : flex;
    flex-direction                  : row;
    align-items                     : first baseline;
}

#sb-name img {
    height                          : 2ex;
    margin-right                    : .5ch;
}

#counters {
    display                         : flex;
    flex-direction                  : column;
    margin-left                     : 2ch;
}

#counters > div {
    display                         : flex;
}

#counters > div span:first-child {
    color                           : #aaa;
    text-transform                  : lowercase;
    font-variant                    : small-caps;
    padding-right                   : .25em;
    width                           : 7ch;
}

#counters .graph {
    margin-top                      : .1ex;
}

.counter {
    font-weight                     : bolder;
    width                           : 4em;
}

#sb-all {
    margin-left                     : 2ch;
}

#sb-steps {
    display                         : flex;
    flex-direction                  : column;
    text-align                      : right;
    margin-left                     : 2ch;
}

#sb-steps > span:first-child {
    color                           : #aaa;
    font-variant                    : small-caps;
    text-transform                  : lowercase;
}

#sb-steps-value {
    font-size                       : 125%;
    font-weight                     : bolder;
}

#sb-icons {
    margin-left                     : 3ch;
}

#sb-icons > span {
    xdisplay                         : block;
}

#menu-opener span,
#restart span,
#help span {
    color                           : #aaa;
    cursor                          : pointer;
    font-family                     : 'Material Icons';
    font-size                       : 125%;
}

#menu-opener span:hover,
#restart span:hover,
#help span:hover {
    color                           : #eee;
}

#settings {
    background                      : #fff;
    box-shadow                      : 0 0 1em #7777;
    color                           : #444;
    display                         : none;
    left                            : 10em;
    opacity                         : .95;
    position                        : absolute;
    top                             : 10ex;
    z-index                         : 1;
}

fieldset {
    border                          : 1px solid #ccc;
    margin                          : 1ex 1em;
}

legend {
    font-weight                     : bolder;
    margin-left                     : .5em;
    padding                         : 0 .25em;
}

#settings.active {
    display                         : block;
}

#settings h1 {
    font-size                       : 125%;
    padding                         : 1ex 1em;
}

#settings li {
    display                         : flex;
    margin                          : 1ex .5em;
}

#settings label {
    display                         : inline-block;
    text-align                      : right;
    width                           : 15em;
}

#settings input {
    display                         : inline-block;
    margin                          : .25ex 1em 0 1em;
    width                           : 15em;
}

#settings .unit {
    display                         : inline-block;
    width                           : 3em;
}

#settings p {
    margin                          : 2ex 1em 0;
}

#settings .reference {
    color                           : #c00;
    font-size                       : 75%;
    vertical-align                  : super;
}

#settings div {
    display                         : flex;
    justify-content                 : space-around;
    margin                          : 2ex 0 1ex;
}

#settings button {
    padding                         : 1ex 1em;
    width                           : 5em;
}

#settings button:hover {
    background                      : #222;
    color                           : #fff;
}