body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
   height: 100%;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#controls-bar {
    position: relative;
    padding: 6px;
    background: white;
    border-top: 1px solid #aaa;
}

#canvasBox {
    position: relative;
}

#processing {
    position: relative;
}

.controls-right {
}
@media (max-width: 624px) {
    .controls-right {
        display: block;
        position: static;
    }
}
@media (min-width: 625px) {
    .controls-right {
        display: inline;
        position: absolute;
        bottom: 6px; /* include this so that we can restore properly if window is re-expanded */
        right: 6px;
    }    
}

.controls-left > span,
.controls-right > span {
    padding: 4px;
}

#speed-range-box {
    position: relative;
    bottom: 12px;
    text-align: center;
    margin-left: 15px;
}

#speed-range {
    position: absolute;
    top: 12px;
    width: 180px;
    background: #ddd;
}
#speed-range-label {
    position: absolute;
    top: 32px; /* use top, not bottom, so that that it doesn't break when .control-right changes to 'block' */
    width: 180px;
    font-weight: normal;
}