body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin: 0;
    overflow: hidden;
}

hr {
    border: 0;
    border-top: 1px solid #ccc;
}

button {
    position: relative;
}

textarea {
    tab-size: 4;
    white-space: pre;
    word-wrap: normal;
}

textarea.success {
    border-color: #8b8 !important;
}

textarea.fail {
    border-color: #f00 !important;
    background-color: rgba(255, 0, 0, 0.05);
}

textarea,
input {
    outline: none;
}


/* osx */

.Panel {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    /* No support for these yet */
    -o-user-select: none;
    user-select: none;
}


/* CodeMirror */

.CodeMirror {
    position: absolute !important;
    top: 37px;
    width: 100% !important;
    height: calc(100% - 37px) !important;
}

.CodeMirror .errorLine {
    background: rgba(255, 0, 0, 0.25);
}

.CodeMirror .esprima-error {
    color: #f00;
    text-align: right;
    padding: 0 20px;
}


/* outliner */

#outliner .option {
    border: 1px solid transparent;
}

#outliner .option.drag {
    border: 1px dashed #999;
}

#outliner .option.dragTop {
    border-top: 1px dashed #999;
}

#outliner .option.dragBottom {
    border-bottom: 1px dashed #999;
}

#outliner .type {
    position: relative;
    top: -2px;
    padding: 0 2px;
    color: #ddd;
}

#outliner .type:after {
    content: '■';
}

#outliner .Scene {
    color: #ccccff;
}

#outliner .Object3D {
    color: #aaaaee;
}

#outliner .Mesh {
    color: #8888ee;
}

#outliner .Line {
    color: #88ee88;
}

#outliner .LineSegments {
    color: #88ee88;
}

#outliner .Points {
    color: #ee8888;
}


/* */

#outliner .PointLight {
    color: #dddd00;
}


/* */

#outliner .Geometry {
    color: #88ff88;
}

#outliner .BoxGeometry {
    color: #bbeebb;
}

#outliner .TorusGeometry {
    color: #aaeeaa;
}


/* */

#outliner .Material {
    color: #ff8888;
}

#outliner .MeshPhongMaterial {
    color: #ffaa88;
}


/* */

#outliner .Script:after {
    content: '{...}'/* ❮/❯ */
}