.CodeMirror {
    top: 200px;
    left: 30%;
}

body, button, label {
    font-family: "Avenir", Arial, Helvetica, sans-serif;
    background-color: black;
}

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

demos, constraints, classes, tiles, shortcuts {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    height: 680px;
    overflow-y: scroll;
    overflow: hidden;
}

buttons {
    position: fixed;
    z-index: 2000;
    left: 1100px;
    top: 10px;
    height: 680px;
    overflow-y: scroll;
    overflow: hidden;
}

actions {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 2000;
    overflow: hidden;
}

bins {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 2000;
    overflow: hidden;
}

viewbuttons {
    position: absolute;
    z-index: 2000;
}

button, viewbutton {
    position: relative;
    font-size: 16;
    z-index: 2000;
    background: #66FF66;
}

#code-inspector-cancel-button {
    background: #ff6666;    
}

#code-inspector-save-button {
    background: #ccffcc;    
}

demo, constraint, class, tile, shortcut, action, bin, iterationsPerFrame, showEachIterationButton, button, viewbutton {
    display: block;
    margin: 10pt;
    padding: 1pt 4pt;
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 4pt;
    /*box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .4);*/
    -webkit-user-select: none;
}

viewbutton {
    position: absolute;
}

button, demo {
    text-align: right;
}

button {
    margin: 6pt;
    padding: 1pt 4pt;
}

label,input {
    text-align: left;
    position: absolute;
    left: -5px;
    top: -9px;
    margin: 10pt;
    padding: 1pt 4pt;
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 4pt;
    -webkit-user-select: none;
}

input {
    left: 0px;
    top: -6px;
    -webkit-transform: scale(2);
}

demo:hover, constraint:hover, class:hover, tile:hover, shortcut:hover, action:hover, bin:hover, button:hover, label:hover {
    background: #ddd;
    /*box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, .4);*/
}

action {
    background: #F6CED8;
}

action:hover {
    background: #D382B7;
}

bin {
    background: #ccffcc;
}

bin:hover {
    background: #99cc99
}

button:hover {
    background: #66CC66;
}

showEachIterationButton {
    padding: 4pt;
    background: #eef;
    position: fixed;
    bottom: 20px;
    left: 40%;
    color: blue;
}

showEachIterationButton:hover {
    background: #dde;
    /*box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, .4);*/
}

iterationsPerFrame {
    padding: 4pt;
    background: #f8f8f8;
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: blue;
}

iterationsPerFrame:after {
    content: ' iterations / frame';
}


