/**
#id, .class {
    <floats>
    <display>
    <width>
    <margin, padding>
    <font>
    <text>
    <color, bg>
    <border>
    <border radius>
    <shadow>
}
 */
body, h1, h2, h3, h4, h5, h6 {
    font-family: Myriad Pro, Segoe UI, Verdana;
}
body {
    background: #665d6f;
}
h1 { font-size: 3em; }
h2 { font-size: 2.4em; }
h3 { font-size: 2.0em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
h6 { font-size: 1.2em; }
.clear_float { clear: both; }

/* -------------------------------------------------------------------------- */

.bg {
    /* To fix ie, which does not support margin: auto; */
    text-align: center; /* @1 */
}
.container {
    width: 960px; /* @3 */
    margin: auto;
    /* To counter the ie fix above */
    text-align: left; /* ^1 */
}

/* -------------------------------------------------------------------------- */
#header {
    padding: 2em 0 2em 0;
}
    #header .logo {
        width: 142px;
        height: 59px;
    }
    #header .description {
        margin-left: 0.25em;
        width: 275px;
        height: 59px;
    }

.main {
}
    .configuration_pane {
        float: left;
        width: 420px;
    }
        .tab_header {
            margin-bottom: 0.5em;
            text-align: center;

            /* Prevent user selecting
            -moz-user-select: none;
            -khtml-user-select: none; */
        }
            .tab_header .tab {
                cursor: pointer;
            }
            .tab_header .general_tab {
                display: inline-block;
                width: 107px;
                height: 36px;
            }
                .tab_header .general_tab:hover {
                    background-position: 0px -36px;
                }
            .tab_header .advanced_tab {
                display: inline-block;
                width: 117px;
                height: 36px;
            }
                .tab_header .advanced_tab:hover {
                    background-position: 0px -36px;
                }
            .tab_header .help_tab {
                display: inline-block;
                width: 93px;
                height: 36px;
            }
                .tab_header .help_tab:hover {
                    background-position: 0px -36px;
                }
        .group_name {
            padding: 0.6em 0 0.4em 0;
            letter-spacing: 0.1em;
            color: #efefef;
        }
        .group_divider {
            line-height: 0.75em;
        }
        .option {
            color: #e6e6e6;
        }
            .option td {
                padding: 0.1em 1em;
            }
            .option input {
                margin-right: 0.5em;
            }
            /*
            .option input:checked {
                border: 1px solid red;
                padding: 0.5em;
            }
            .option input[type=text], .option select {
                padding: 0.25em 0.25em;
                background: transparent;
                border: 0;
                border-bottom: 1px solid #4b4452; 
                outline: none;
                -moz-appearance: none;
                -moz-border-radius: 0px;
                -webkit-appearance:none;
                -webkit-border-radius: 0px;
                -o-appearance:none;
                border-radius: 0px;
            }
            */
            .option input[type=text] {
                padding: 0.2em;
                background: #746c7c;
                border: 1px solid #524a59;
                outline: none;
            }
            .option input, .option label, .option select {
                cursor: pointer;
            }
        .help {
            text-align: center;
            line-height: 1.25em;
            color: #e6e6e6;
        }
            .help img {
                padding: 1em;
            }
            .help a {
                color: #fff;
                font-weight: bold;
                text-decoration: none;
            }
            .help a:hover {
                text-decoration: underline;
            }
    .output_pane {
        float: right;
        width: 520px;
    }
        .header {
            color: #efefef;
            font-size: 1.15em;
            line-height: 1.5em;
        }
            .header .title {
                display: inline;
            }
            .header .share {
                float: right;
            }
                .share .share_link {
                    border: 1px solid black;
                }
        .output {
            height: 600px;
            padding: 0.5em 0.75em;
            margin-top: 0.25em;
            background-color: #746c7c;
            border: 1px solid #524a59;
            line-height: 1.2em;
            font-size: 0.75em;
            font-family: Menlo, Consolas, "Courier New";
            overflow-x: scroll;
        }
            .output table {
                width: 900px !important;
                width: auto;
                padding-bottom: 5em;
            }
                .output .value {
                    width: 260px;
                    vertical-align: top;
                    word-wrap: break-word;
                    color: #efefef;
                }
                .output .pane_comment {
                    padding: 0.25em 0;
                    color: #54b6e9;
                }
                .output .comment {
                    vertical-align: top;
                    color: #84dd24;
                }
                .output .footer_comment {
                    color: #938b9b;
                }
        .howto {
            padding: 0.5em 0;
            font-size: 0.9em;
            color: #3b363d;
        }
            .howto .title {
                font-weight: bold;
            }