div#outerFrame {
    position: absolute;
    overflow: auto;
}

div#mainBox {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 3px;
}

div#systemChooser {
    margin-top: 10px;
}

dl#stringArea {
    position: absolute;
    bottom: 0px;
}

canvas#processing {
    height: 100%;
    width: 100%;
}

div#angleBar {
    position: absolute;
    bottom: 0px;
    right: 200px;
    width: 750px;
    height: 49px;
    border-bottom: 1px solid black;
    background: #aaa;
}

div#infoBar {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background: white;
    border-left: 1px solid #aaa;
    padding-top: 0px;
    padding-left: 5px;
}

div#stringDisp {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    margin-top: 5px;
    font-family: "Courier", monospace;
    font-size: 10pt;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
}

div#canvasBox {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}

@media (min-height: 768px) and (min-width: 1024px) {
    div#sliderBar {
        position: absolute;
        top: 420px;
        left: 0px;
        width: 148px;
        background: white;
    }

    div#infoBar {
        width: 194px;
    }

    div#canvasBox {
        right: 200px;
    }

    div#stringDisp {
        right: 200px;
    }
}

@media (max-height: 767px), (max-width: 1023px) {
    div#sliderBar {
        position: absolute;
        top: 20px;
        left: 200px;
        width: 148px;
        background: white;
    }

    div#infoBar {
        width: 342px;
    }

    div#canvasBox {
        right: 348px;
    }

    div#stringDisp{
        right: 348px;
    }
}

div#depthGroup {
    position: absolute;
    top: 20px;
    left: 0px;
    width: 75px;
}

div#depthReadout {
    margin: auto;
    width: 60px;
    padding-top: 20px;
}

input#depthSlider {
    height: 200px;
    width: 60px;
    position: absolute;
    top: 50px;
    left: 5px;
    -webkit-appearance: slider-vertical;
}

div#angleGroup {
    position: absolute;
    top: 20px;
    left: 75px;
    width: 70px;
}

div#angleReadout {
    padding-top: 20px;
    padding-left: 6px;
}

input#angleSlider {
    height: 200px;
    width: 60px;
    position: absolute;
    top: 50px;
    left: 5px;
    -webkit-appearance: slider-vertical;
}

div#randomGroup {
    position: absolute;
    top: 300px;
    left: 20px;
    width: 100px;
}

div#stringToggleGroup {
    margin-left: 10px;
}

div.sliderContainer {
    padding-left: 20px;
}

td.changable {
    font-weight: bold;
    color: green;
}

#depth-range {
    position: absolute;
    height: 180px;
    background: #eee;
}

#angle-range {
    position: absolute;
    height: 180px;
    background: #eee;
}

.noUi-connect {
    background: #ccc;
}