article {
    padding-top                     : 0;
}

xarticle h1 {
    margin                          : .5ex 0;
}

#map {
    background                      : #000;
    border                          : 1px solid #777;
    display                         : inline-block;
    height                          : 702px;
    position                        : relative;
    width                           : 602px;
}

#data,
#contours,
#mask,
#stations,
#progress {
    bottom                          : 0;
    left                            : 0;
    position                        : absolute;
    right                           : 0;
    top                             : 0;
}

#data {
    z-index                         : 1;
}

#contours {
    opacity                         : .5;
    z-index                         : 2;
}

#mask {
    background                      : url('nl-mask.png') no-repeat top left;
    opacity                         : .75;
    z-index                         : 3;
}

#mask.full {
    opacity                         : 1;
}

#stations {
    overflow                        : hidden;
    z-index                         : 4;
}

#stations span {
    position                        : absolute;
}

#stations span span {
    position                        : relative;
}

#stations .unit {
    font-size                       : 50%;
}

.station-marker {
    background                      : #333;
    height                          : 3px;
    position                        : absolute;
    width                           : 3px;
}

.station-direction {
    height                          : 15px;
    opacity                         : .9;
    transform-origin                : 7px 7px;
    width                           : 15px;
}

.station-direction polyline {
    fill                            : #008;
}

.show-markers .station-direction {
    margin                          : -1px 0 0 -13px;
    opacity                         : .7;
}

.station-value,
.station-marker {
    display                         : none;
}

.show-values .station-value,
.show-markers .station-marker {
    display                         : block;
}

.details-available: hover {
    cursor                          : pointer;
}

.numerator {
    vertical-align                  : super;
}

.denomiator {
    vertical-align                  : sub;
}

#info {
    bottom                          : 1ex;
    left                            : .5em;
    position                        : absolute;
    z-index                         : 5;
}

#info .timestamp {
    font-size                       : 80%;
}

#progress {
    display                         : none;
    z-index                         : 5;
}

#progressbar {
    background                      : #f0f0f0;
    border                          : 1px solid #555;
    height                          : 10px;
    left                            : 199px;
    position                        : absolute;
    top                             : 20px;
    width                           : 200px;
}

#progressbar span {
    background                      : #48c;
    display                         : block;
    height                          : 100%;
    width                           : 50px;
}

#stations span,
#palette li,
#airq-details span,
.value-1,
.value-2,
.value-3,
.value-4,
.value-5,
.value-6,
.value-7,
.value-8,
.value-9,
.value-10 {
    color                           : #000;
    font-family                     : Arial,Helvetica,sans-serif;
    font-size                       : 14px;
    font-weight                     : bolder;
    text-shadow                     : #fff 0 0 2px, #fff 0 0 2px, #fff 0 0 2px;
}

#palette {
    display                         : inline-block;
    left                            : 602px;
    margin                          : -1px 0 0 1em;
    position                        : absolute;
    top                             : 0;
    vertical-align                  : top;
    z-index                         : 5;
}

#palette ol {
    border                          : 0 solid #444;
    border-width                    : 0 1px 1px 1px;
    display                         : inline-block;
    list-style-type                 : none;
    margin-top                      : 0;
    padding                         : 0;
}

#palette li,
#airq-details span {
    border-top                      : 1px solid #444;
    font-size                       : 1.75ex;
    height                          : 3ex;
    line-height                     : 1.75ex;
    margin-top                      : 0;
    padding                         : .5ex .25em .5ex .5em;
    text-align                      : right;
}

#palette #unit {
    display                         : block;
    margin-top                      : 1ex;
    text-align                      : center;
}

#airq-details {
    bottom                          : 0;
    display                         : none;
    left                            : 602px;
    margin-left                     : 1em;
    position                        : absolute;
}

#airq-details tr:nth-child(1) {
    background                      : #777;
    color                           : #fff;
    font-weight                     : bolder;
}

#airq-details span {
    display                         : inline-block;
    border                          : 1px solid #444;
}

#airq-details sub {
    font-size                       : 90%;
}

#airq-details p {
    color                           : #666;
    font-size                       : 75%;
    line-height                     : 2.25ex;
    margin                          : .5ex .5em;
    width                           : 11em;
}

.value-1 {
    background                      : #77ddff;
}

.value-2 {
    background                      : #77ccff;
}

.value-3 {
    background                      : #77bbff;
}

.value-4 {
    background                      : #f7f777;
}

.value-5 {
    background                      : #f7f733;
}

.value-6 {
    background                      : #f0f000;
}

.value-7 {
    background                      : #ffaa00;
}

.value-8 {
    background                      : #ef8800;
}

.value-9 {
    background                      : #ff0000;
}

.value-10 {
    background                      : #ee00ee;
}

form {
    margin-top                      : 1ex;
    position                        : relative;
    width                           : 602px;
}

#icons {
    height                          : 24px;
    list-style-type                 : none;
    padding                         : 0;
    position                        : absolute;
    right                           : 0;
    top                             : -1.5ex;
}

#icons li {
    display                         : inline-block;
    margin-left                     : .25em;
    width                           : 24px;
}

#icons svg {
    cursor                          : pointer;
    fill                            : #aaa;
}

#icons .attention svg {
    fill                            : #39c;
}

#icons li:hover svg {
    fill                            : #a00;
}

.panel {
    display                         : none;
}

.panel.active {
    display                         : block;
}

.field {
    margin                          : 1ex 0 0 0;
}

.field label {
    display                         : inline-block;
    left                            : 0;
    margin-left                     : .5em;
    position                        : relative;
    width                           : 13ch;
}

.field > input {
    margin-left                     : .5em;
}

.field > input[type="checkbox"],
.field > input[type="checkbox"] + label {
    width                           : auto;
}

label {
    padding-right                   : .5em;
    vertical-align                  : bottom;
}

select {
    background                      : #f0f0f0;
    border                          : 1px solid #ddd;
}

option {
    padding                         : .25ex .5em;
}

#settings {
    margin                          : 1ex 0 3ex;
}

#settings > div {
    display                         : inline-block;
}

form .clear {
    clear                           : right;
}

#about {
    display                         : none;
    margin-top                      : 2ex;
    width                           : 602px;
}

#about > * {
    margin-left                     : .5em;
}

#about h1 {
    font-size                       : 150%;
    margin-left                     : .25em;
    margin-top                      : 1ex;
}

#about p {
    margin-bottom                   : 1ex;
    margin-top                      : 1ex;
}

#about table {
    margin-top                      : 1ex;
}

#about thead {
    background                      : #EEE;
}

#about td,
#about th {
    border                          : 1px solid #ddd;
    min-width                       : 1.5em;
}

#about th {
    color                           : #333;
    text-align                      : center;
}

#about th.index {
    text-align                      : left;
}

.numeric {
    text-align                      : right;
}