body {
        margin:0;
        padding:0;
        user-select:none;
        -webkit-user-select:none;
        -moz-user-select:none;
        font-size:medium;
        font-family:sans-serif;
        background:#ffffff;
    }
    div.top {
        display:flex;
    }
    div.display {
        flex-grow:0;
        min-width:634px;
        max-width:95%;
    }
    div.display>div {
        display:inline-block;
        margin:20px;
        padding:12px;
        box-shadow:inset -1px -1px 0 0 #afaf83;
        border:2px groove #cfcfa3;
        background:#111;
        position:relative;
    }
    div.display>div>canvas {
        image-rendering:optimizeSpeed;
        image-rendering:-moz-crisp-edges;
        image-rendering:pixelated;
    }
    div.display>div>input {
        resize:none;
        border:none;
        top:0;
        left:0;
        height:100%;
        width:100%;
        color:transparent;
        background:transparent;
        position:absolute;
    }
    div.side {
        display:flex;
    }
    div.sizer {
        cursor:col-resize;
        margin:20px 0 20px 0;
        /* background:#afaf83; */
        background: linear-gradient(to bottom, #d3d3d3, #a9a9a9); /* Gradient background */
        border:2px groove #cfcfa3;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
    }
    div.middle {
        margin-left:30px;
    }
    div.buttons {
        padding:0 12px 0 12px;
    }
    div.buttons>button {
        margin:4px;
        margin-top:0;
        padding-bottom:2px;
        border:1px solid #c5c5c5;
        border-radius:4px;
        width:6em;
        height:2.5em;
        font-size:14px;
        color:#ffffff;
        background:#4169E1;
    }
    div.buttons>button:hover:active {
        color:#520;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #4169E1), color-stop(1, #499));
        background:-moz-linear-gradient(center top, #377b7b 5%, #499 100%);
    }
    div.buttons>button:hover {
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #4169E1), color-stop(1, #27408B));
        background:-moz-linear-gradient(center top, #27408B 5%, #4169E1 100%);
    }
    div.buttons>div {
        margin-left:200px;
        display:inline-flex;
        align-items:center
    }
    input[type=range] {
        -webkit-appearance:none;
        margin-left:8px;
    }
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance:none;
        box-shadow:1px 1px 1px #000, 0 0 1px #ddd;
        border:1px solid #000;
        margin-top:-8px;
        height:19px;
        width:6px;
        border-radius:3px;
        background:#ddc;
        cursor:pointer;
    }
    input[type=range]::-moz-range-thumb {
        box-shadow:1px 1px 1px #000, 0 0 1px #ddd;
        border:1px solid #000;
        height:17px;
        width:4px;
        border-radius:3px;
        background:#ddc;
        cursor:pointer;
    }
    input[type=range]::-webkit-slider-runnable-track {
        height:3px;
        cursor:pointer;
        box-shadow:1px 1px 1px #000, 0 0 1px #ddd;
        background:#afaf83;
        border-radius:2px;
        border:0.2px solid #111;
    }
    input[type=range]::-moz-range-track {
        height:1px;
        cursor:pointer;
        box-shadow:1px 1px 1px #000, 0 0 1px #ddd;
        background:#afaf83;
        border-radius:2px;
        border:0.2px solid #111;
    }
    div.drives {
        margin:0 0 0 220px;
        display:inline-block;
        vertical-align:bottom;
    }
    div.drive {
        margin:12px 12px 1px 12px;
    }
    div.drive button {
        padding:4px 12px 4px 12px;
        background:#eee;
        border:1px solid #aaa;
        border-radius:5px;
    }
    div.drive>details {
        border:1px solid #734d26;
        display:inline-block;
        xbackground:#d2d1c1;
    }
    div.drive>details>summary {
        padding:20px;
        min-width:26em;
    }
    div.drive>details>summary>span:nth-child(1) {
        margin-right:16px;
    }
    div.drive>details>div {
        margin:0 18px 14px 18px;
        width:36em;
    }
    div.drive>details>div>div {
        display:flex;
        align-items:center;
        margin-bottom:8px;
    }
    div.drive>details>div span {
        width:1.8em;
    }
    div.drive>details>div input {
        flex:1;
    }
    div.drive>details>div button {
        margin-left:6px;
        width:6.2em;
    }
    input[readonly] {
        background:#eee;
    }
    span.led {
        float:right;
        padding:4px 7px 4px 7px;
        border-radius:8px;
        font-size:5px;
        vertical-align:middle;
        color:#734d26;
        box-shadow:0 0 4px #999;
        background:#d0d0d0;
    }
    span.led.on {
        color:#e1e1d0;
        box-shadow:0 0 6px #d44;
        background:radial-gradient(#d00, #900);
    }
    input[type=file] {
        font-size:20px;
        position:absolute;
        left:0;
        top:0;
        opacity:0;
    }
    div.settings {
        margin:0 0 0 18px;
        padding:6px;
        border:2px groove #cfcfa3;
        display:inline-block;
        vertical-align:bottom;
    }
    div.settings>div {
        margin:6px;
    }
    div.settings button {
        padding:4px;
        background:#eee;
        border:1px solid #aaa;
        border-radius:5px;
    }
    div.color>select {
        padding:3px;
        background:#eee;
        border:1px solid #aaa;
        border-radius:5px;
        width:12em;
    }
    div.gamepad {
        width:37;
        height:24;
        float:right;
        background-image:url("gamepad.png");
    }
    div.gamepad.off {
        opacity:0.2;
        filter:grayscale(100%);
    }
    div.doc {
        margin:20px 0 0 250px;
        display:flex;
    }
    div.doc>div {
        margin-left:40px;
    }
    div.bottom {
        margin:100px 0 40px 40px;
    }


    body {
        margin-top: 100px; /* Offset from top for upper header*/
      }