
/* General
------------------------------------------------------------ */

p {
    margin: 0;
}

p + p {
    margin-top: 10px;
}

.note {
    color: #666;
    font-style: italic;
    margin-left: 25px;
}

.note a:hover {
    color: #09f;
}

label {
    margin-top: 5px;
    display: block;
    -webkit-user-select: none;
}

label:hover {
    cursor: pointer;
    text-decoration: underline;
}


.page ul:not(.bullets) li {
    list-style-type: none;
}

/* Structure
------------------------------------------------------------ */

body {
    background: url("/img/bg.png") repeat-x #222;
}

    #container {
        display: -webkit-flex;
        -webkit-flex-flow: row nowrap;
        min-height: 100%;
    }

        nav {
            overflow: auto;
            left: 0;
            min-height: 100%;
            position: fixed;
            text-align: right;
            top: 0;
            -webkit-user-select: none;
            width: 210px;
            z-index: 0;
        }

        nav::-webkit-scrollbar {
            width: 0;
        }

            #logo {
                text-decoration: none;
            }

            #logo > h1 {
                color: #fff;
                margin: 10px 20px 10px 0;
                text-shadow: 0 0 1px rgba(255,255,255,.25);
                -webkit-transition-property: text-shadow;
            }

            #logo > h1:hover {
                text-shadow:
                    0 0 1px rgba(255,255,255,.25),
                    1px 1px 1px rgba(0,0,0,.65),
                    0 0 5px rgba(71,135,237,1),
                    0 0 10px rgba(71,135,237,1)
                ;
            }

            #logo > h1:active {
                text-shadow:
                    0 0 1px rgba(255,255,255,.25),
                    1px 1px 1px rgba(0,0,0,.65),
                    0 0 5px rgba(255,255,255,1),
                    0 0 10px rgba(255,255,255,1)
                ;
            }

            nav ul {
                list-style: none;
                padding: 0;
            }

                nav li a,
                nav li a:link,
                nav li a:visited {
                    color: #fff;
                    display: block;
                    padding: 8px 20px 8px 0;
                    text-decoration: none;
                    -webkit-transition-property: background;
                }

                    nav a div[class*="icon-"].pull-right {
                        line-height: 20px;
                        margin: 0 -10px 0 10px;
                    }

                nav li a:hover,
                nav li a:focus {
                    background: rgba(200,200,200,.25);
                    outline: none;
                }

                nav li a:active {
                    background: rgb(71,135,237);
                }

                nav li a.current {
                    background: rgba(71,135,237,.75);
                    text-shadow: 1px 1px 1px rgba(0,0,0,.65);
                }

        .page {
            background: #f1f1f1;
            box-shadow:
                -11px -30px 11px -11px rgba(0,0,0,.5),
                -16px -30px 16px -16px rgba(0,0,0,.5),
                -23px -30px 23px -23px rgba(0,0,0,.5),
                -32px -30px 32px -32px rgba(0,0,0,.5)
            ;
            display: none;
            -webkit-flex: 1;
            margin-left: 210px;
            min-height: 100%;
            padding: 10px 20px;
            position: relative;
            min-width: 700px;
            z-index: -1;
        }

        .page.current {
            display: block;
            z-index: 2;
        }

        .page.loading {
            display: block;
            visibility: hidden;
        }

        #page-loading {
            background: url(/img/loadingLarge.gif) no-repeat center center #f1f1f1;
        }

            .page h1 {
                color: #000;
                margin: 0;
                text-shadow: 0 0 1px rgba(255,255,255,.25);
            }

            section {
                border-top: 1px solid #ccc;
                display: -webkit-flex;
                -webkit-flex-flow: row nowrap;
                padding: 20px 0;
            }

            section.hidden {
                display: none;
            }

                section h3 {
                    color: #000;
                    font-family: "Roboto Condensed", sans-serif;
                    font-size: 14px;
                    margin: 0;
                    -webkit-order: 1;
                    padding: 0 20px 0 0;
                    width: 120px;
                }

                .installed-modules {
                    padding-top: 20px;
                }

                section > div,
                .editor-row > div {
                    min-width: 380px;
                    overflow: hidden;
                    -webkit-order: 2;
                }

            .editor-row {
                display: -webkit-flex;
                -webkit-flex-flow: row nowrap;
            }

                .editor-row > label {
                    color: #aaa;
                    border-right: 1px solid #ccc;
                    font-family: "Roboto Condensed", sans-serif;
                    margin: 0 10px;
                    -webkit-order: 1;
                    text-align: right;
                    padding: 5px 10px 10px 0;
                    width: 60px;
                }

                .editor-row > label:hover {
                    text-decoration: none;
                }

                label[for="moduleName"],
                label[for="optionDescription"] {
                    line-height: 24px;
                }

                /*#editors .editor-row label,
                label[for="editor-about"] {
                    height: 220px;
                }*/

                .CodeMirror {
                    background: #f1f1f1;
                    box-shadow: inset 0 0 5px rgba(0,0,0,.5);
                    height: 300px;
                    margin: 10px 0;
                    min-width: 300px;
                    width: 100%;
                }

                    .CodeMirror-gutters {
                        min-height: 200px;
                    }

                    .CodeMirror-scroll {
                        padding: 0;
                    }

                    /* wat? */
                    .CodeMirror div[style^="position: absolute; height: 30px;"] {
                        display: none;
                    }

                ul:not(.bullets) {
                    -webkit-padding-start: 0;
                }

                .indev {
                    opacity: .25;
                }

/* Dashboard
------------------------------------------------------------ */

#module-list li {
    border-left: 1px solid #ccc;
    margin-top: 20px;
    padding-left: 10px;
}

    #module-list li.disabled h2,
    #module-list li.disabled h4,
    #module-list li.disabled .button:not(.moduleToggle):not(:hover) {
        -webkit-transition-property: opacity;
        opacity: .5;
    }

    #module-list li.disabled .moduleToggle {
        border-right-width: 1px;
    }

    #module-list li.disabled .moduleToggle + .button {
        border-left-width: 0;
    }

    #page-dashboard h2 {
        color: #444;
        margin: 0 0 0 5px;
        font-size: 18px;
        font-weight: normal;
    }

    #update-notice h2 {
        margin: 0 0 10px;
    }

        #page-dashboard h2 strong {
            font-family: "Roboto Condensed", sans-serif;
        }

    #module-list .disabled h2:after {
        color: #444;
        content: " (disabled)";
        margin-bottom: 5px;
        font-size: 18px;
        font-weight: normal;
    }

    .module-control .button.group,
    #optionPreview .button.group {
        margin: 0;
    }

    #module-list h4 {
        -webkit-margin-before: 0;
        -webkit-margina-after: 0;
        color: #999;
        font-weight: normal;
        font-style: italic;
        margin-bottom: 20px;
    }

    h4 + div {
        overflow: hidden;
    }

/* Options
------------------------------------------------------------ */

header {
    overflow: hidden;
    padding: 10px 0 20px;
}

    .page header h1 {
        display: block;
        float: left;
        line-height: 40px;
        margin: 0 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 370px
    }

    header .button {
        float: left;
    }

    header #save-edits {
        clear: right;
    }

.tab {
    display: none;
}

.tab.current {
    display: block;
}


#options-tab-about {
    border-top: 1px solid #ccc;
    padding-top: 20px;
}

#options-nav {
    margin: 0;
}

    #options-nav li {
        background: #dfdfdf;
        color: #666;
        cursor: pointer;
        display: inline-block;
        font-family: "Roboto Condensed", sans-serif;
        font-size: 14px;
        font-weight: bold;
        margin-right: 1px;
        padding: 5px 20px;
        -webkit-transition-property: background, color;
        -webkit-user-select: none;
    }

    #options-nav li:first-child {
        border-top-left-radius: 2px;
    }

    #options-nav li:last-child {
        border-top-right-radius: 2px;
    }

    #options-nav li:hover {
        background: #d1d1d1;
    }

    #options-nav li:active {
        background: rgb(71,135,237);
        color: #fff;
    }

    #options-nav .current {
        background: #ccc;
        color: #222;
    }

#hoverPreview {
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    background: #fff;
    display: none;
    position: absolute;
    padding: 15px;
    z-index: 999;
}

    #hoverPreview img {
        border: 1px solid #000;
    }

.field label {
    margin-left: 27px;
}

    .field input {
        margin-left: 5px;
    }

    .color {
        width: 135px;
    }

#ColorPickerDlg {
    border-radius: 2px;
    box-shadow: 1px 1px 10px rgba(0,0,0,.5);
}

/* Edit
------------------------------------------------------------ */

#editor-wrapper {
    min-height: 100%;
    overflow: hidden;
}

    #editor-wrapper-sub {
        background: #e8e8e8;
        border: 1px solid #ccc;
        border-radius: 2px;
        margin-left: 149px;
        min-height: 100%;
        padding: 20px;
    }

        #options-tree {
            -webkit-margin-before: 0;
            font-weight: bold;
            float: left;
            min-height: 100%;
            -webkit-user-select: none;
            width: 150px;
        }

        .edit-tab,
        .edit-section {
            font-family: "Roboto Condensed", sans-serif;
            font-weight: bold;
            -webkit-user-select: none;
            padding-left: 15px;
            position: relative;
            text-decoration: none;
        }

        .edit-tab:before,
        .edit-section:before {
            color: #999;
            content: "\f0d7";
            font-family: FontAwesome;
            font-size: 14px;
            left: 2px;
            position: absolute;
            top: 3px;
        }

        li.collapsed > .edit-tab:before,
        li.collapsed > .edit-section:before {
            content: "\f0da";
        }

            #options-tree ul {
                -webkit-transition-property: all;
                margin-left: 15px;
            }

            .collapsed ul {
                opacity: 0;
                display: none;
            }

                #metadata {
                    border: 1px solid transparent;
                    border-bottom-left-radius: 2px;
                    border-top-left-radius: 2px;
                    border-right-width: 0;
                    color: #2f5bb7;
                    cursor: pointer;
                    font-family: "Roboto Condensed", sans-serif;
                    margin-top: 0;
                    padding: 5px 0 5px 5px;
                }

                #metadata:hover {
                    text-decoration: underline;
                }

                #options-tree .edit-option {
                    border: 1px solid transparent;
                    border-right: none;
                    border-radius: 2px 0 0 2px;
                    font-size: 11px;
                    margin-top: 0;
                    padding: 4px 0 4px 4px;
                }

                #options-tree .edit-option:hover {
                    cursor: pointer;
                    text-decoration: underline;
                }

                #options-tree .current,
                #options-tree .current:hover {
                    background: #e8e8e8;
                    border-color: #ccc;
                    text-decoration: none;
                }

                    #options-tree span {
                        cursor: pointer;
                        display: block;
                        font-weight: normal;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    #options-tree .current span {
                        cursor: default;
                    }

                    #options-tree .edit-option span {
                        width: 110px;
                    }

                    #option-new {
                        margin-top: 10px;
                        width: 130px;
                    }

#editor-wrapper .hidden {
    display: none;
}

    #editor-css,
    #editor-js,
    #editor-about {
        min-height: 400px;
        position: relative;
    }

    #optionPreview {
        border: 1px solid #222;
        box-shadow: 0 0 20px rgba(0,0,0,.5);
        display: none;
        max-height: 200px;
        max-width: 100%;
    }

    #optionPreview[src] {
        display: block;
    }

    #optionPreview ~ #deleteScreen {
        display: none;
    }

    #optionPreview[src] ~ #deleteScreen {
        display: block;
    }

    .field-row input[type="text"] {
        height: 20px;
        margin-left: 1px;
    }

    .field-row label {
        display: inline-block;
        margin: 0 5px 0 25px;
    }

    .field-description {
        width: 150px;
    }

    .field-variable,
    .field-default {
        margin-left: 6px;
        width: 75px;
    }

    label[for^="isColor"] {
        margin: 0 10px;
    }

    #uploadScreen {
        position: absolute;
        top: 2px;
        left: 0;
        opacity: 0;
    }

/* Export
------------------------------------------------------------ */

#page-data form {
    overflow: hidden;
}

#page-data .hidden {
    display: none;
}

    #checkAllWrap {
        font-weight: bold;
    }

    #dataField {
        font-family: monospace;
        font-size: 9px;
        width: calc(100% - 2px);
    }

    .export-controls {
        float: right;
        padding: 10px 5px;
    }
