/* Styles shared by all sections */

    body {
        font: normal 13px Verdana, Geneva, sans-serif;
        color:            white;
        background-color: #88a1bb;
        border:           0px;
        margin:           0px;
        padding:          0px;
        max-width:        100%;
        overflow-x:       hidden;
        box-sizing:       border-box; /* Most logical application of padding */
    }
    h1 {
        font: 4em normal Georgia, 'Times New Roman', Times, serif;
        padding: 20px;
        margin: 0;
        text-align:center;
    }
    h1 small{
        font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
        text-transform:uppercase; letter-spacing: 0.5em; line-height: 2em;
        display: block;
    }
    h2 {
        font: normal 2em Georgia, "Times New Roman", Times, serif;
        margin: 0;
        padding: 0;
    }
    a, a:visited {
        color:              #026;
        text-decoration:    underline;
    }
    a:hover {
        color:              #26c;
    }

    select, select:enabled,
    input, input:enabled,
    textarea, textarea:enabled,
    output, output:enabled
    {
        /*-webkit-appearance: none;*/
        margin: 2px;
        background-color: #151515;
        border: 1px #444444 solid;
        color: #CCCCCC;
        padding: 0.2em 0.5em;
        text-align: center;
    }

    input:enabled:hover,
    textarea:enabled:hover,
    select:enabled:hover
    {
        background-color: #003147;
        border-color: #0B93D5;
    }

    input:focus,
    textarea:focus,
    select:focus
    {
        background-color: #151515;
        border-color: #0B93D5;
        color: #FFFFFF;
    }

    button, button:enabled
    {
        -webkit-appearance: none;
        background-color: #222222;
        background-image: linear-gradient(to bottom, #4A4A4A, #222222 60%);
        color: #CCCCCC;
        border-radius: 6px;
        border: 1px #444444 solid;
        padding: 0.4em 1em;
        text-align: center;
        font-size: 1.1em;
        cursor: pointer;
        vertical-align: middle;
        white-space: nowrap;
    }

    button:hover, button:focus
    {
        background-color: #003147;
        background-image: linear-gradient(to bottom, #225369, #003147 60%);
        border-color: #0B93D5;
    }

    button:focus
    {
        color: #FFFFFF;
    }

    button:active
    {
        background-color: #0B93D5;
        background-image: linear-gradient(to bottom, #2DB5F7, #0B93D5 60%);
        border-color: #0B93D5;
    }

    input[type=checkbox]
    {
        -webkit-appearance: checkbox;
        width: 25px;
        height: 25px;
        color: #0B93D5;
    }

    .bold {
        font-weight:        bold;
    }

    p.setting_paragraph
    {
        padding:            0px 0px 10px 0px;
    }

    .setting_select, .setting_input
    {
        float: left;
    }

    .setting_label
    {
        width: 100%;
        float: left;
        clear: left;
    }

    table
    {
        font: normal 13px Verdana, Geneva, sans-serif;
        width:100%;
    }

    table td
    {
        font-weight: normal !important;
        padding: .2em;
        border: 10px #FFFFFF;
    }

    table th
    {
        border: 10px #FFFFFF;
        text-align: center;
        padding: .2em .2em;
    }

    table tr.alt td
    {
        border: 10px #FFFFFF;
        background-color:#2D2D2D;
    }

    table td.invisible
    {
        display:none;
    }

    table th.invisible
    {
        display:none;
    }

    #header_status {
        position:           fixed;
        bottom:             30px;
        left:               100px;
        right:              100px;
        height:             38px;
        z-index:            2000;
        padding:            6px 200px 0 200px;
    }

    #header_error {
        position:           fixed;
        bottom:             80px;
        left:               100px;
        right:              100px;
        height:             38px;
        z-index:            2000;
        padding:            6px 200px 0 200px;
    }

    #header {
        background-color:   #000000;
        background-image:   linear-gradient(to bottom, #222222, #000000 60%);
        position:           fixed;
        top:                0px;
        right:              0px;
        left:               0px;
        height:             34px;
        border-bottom:      4px solid #004570;
        z-index:            90;
    }

    #header_text {
        color:              #cdcccc;
        padding-left:       190px;
        line-height:        2.75em;
        font-weight:        bold;
    }

    #header_logo {
        position:           absolute;
        display:            inline;
        left:               4px;
        top:                100%;
        height:             64px;
        margin-top:         -29px;
        z-index:            99;
    }

    #header_logo img {
        border:             none;
    }

    #header_end {
        background-repeat:  repeat-x;
        margin-top:         36px;
        height:             36px;
    }

    #header_login {
        float: right;
        margin-right: 10px;
        margin-top: 9px;
    }

    #session_username {
        font-weight: bold;
    }

    #session_logout {
        font-size: 0.9em;
        color: #FFFFFF;
    }

    #session_logout A {
        text-decoration: none;
        color: #FFFFFF;
    }

    #session_logout A:hover {
        text-decoration: underline;
        color: #FFFFFF;
    }

    #session_logout A:visited {
        color: #FFFFFF;
    }

    #content {
        position:           absolute;
        top:                36px;
        right:              0px;
        left:               27px;
        width:              calc(100% - 27px); /* left */
        height:             calc(100% - 36px); /* top */
        background-color:   transparent;
        border:             0px none transparent;
        padding:            0px;
        box-sizing:         border-box;
    }

    #hostname {
        font-size:          12px;
        font-family:        sans-serif;
        position:           fixed;
        top:                70px;
        left:               5px;
        width:              170px;
        color:              #26c;
        text-align:         center;
    }

    #menu-tab {
        position:           fixed;
        top:                36px;
        left:               0px;
        width:              25px;
        height:             100%;
        /* The radial gradient backgrounds had a significant impact on the performance of transition animations */
/*        background-color:   #000000;
        background-image:   radial-gradient(circle, #151515 2px, transparent 2px),
                            radial-gradient(circle, #151515 2px, transparent 2px);
        background-size:    6px 6px;
        background-position: 0 0, 3px 3px;*/
        background:         #000000 url(/3rdParty/jquery/jqueryUI/css/images/ui-bg_hexagon_10_000000_12x10.png) 50% 50% repeat;
        border-right:       2px #444444 solid;

        text-align:         center;
        vertical-align:     middle;
        z-index:            5;
    }

    #menu-tab DIV {
        top:                50%;
        position:           relative;
        transform:          rotate(-90deg);
        -webkit-transform:  rotate(-90deg);
        white-space:        nowrap;
    }

    #menu-tab DIV SPAN {
        margin-left:        30px;
        margin-right:       30px;
        font-weight:        bold;
    }

    #menu-bg {
        position:           fixed;
        top:                36px;
        width:              187px;
        height:             100%;
        /* The radial gradient backgrounds had a significant impact on the performance of transition animations */
/*        background-color:   #000000;
        background-image:   radial-gradient(circle, #151515 2px, transparent 2px),
                            radial-gradient(circle, #151515 2px, transparent 2px);
        background-size:    6px 6px;
        background-position: 0 0, 3px 3px;*/
        background:         #000000 url(/3rdParty/jquery/jqueryUI/css/images/ui-bg_hexagon_10_000000_12x10.png) 50% 50% repeat;
        z-index:            75;
        /*transform:          translate3d(0,0,0);*/
        transition:         all 300ms linear;
    }

    .menu-visible {
        transform: translate3d(0, 0, 0);
    }

    .menu-hidden {
        transform: translate3d(-100%, 0, 0);
    }

/*    @media (max-width: 480px),(max-device-width: 480px) {
        body {
            width: 100%;
        }

        #menu-bg {
            width: 100%;
            font-size: 15pt;
        }

        .menu-hidden {
            left: -100%;
        }
    }*/

    .menu-visible {
        left: 0px;
    }

    #menu a, a:visited {
        color:              #26c;
    }

    #menu {
        position:           relative;
        top:                54px;
        /*left:               7px;*/
        padding:            0px 0.5em;
        width:              calc(100% - 1em);
        color:              #E4D6CD;
        text-align:         center;
        z-index:            15;
    }

    #menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    #menu li ul li
    {
        padding-left: 1em;
    }

    #menu li a {
        voice-family: "\"}\""; 
        voice-family: inherit;
        height: 1.8em;
        text-decoration: none;
        background-color: #333333;
        border: 1px #444444 solid;
        color: #FFFFFF;
        background-image: linear-gradient(to bottom, #4A4A4A, #222222 60%);
        padding: 0.5em 0 0 1em; /* Top Right Bottom Left */
    }

    #menu li a:link, #menu li a:visited {
        display: block;
    }

    #menu li a:hover {
        background-color: #003147;
        background-image: linear-gradient(to bottom, #225369, #003147 60%);
        border-color: #0B93D5;
    }

    #menu li a:active, #menu li a:focus {
        outline: none;
        background-color: #0B93D5;
        background-image: linear-gradient(to bottom, #2DB5F7, #0B93D5 60%);
        border-color: #0B93D5;
    }

    #busyPopup {
        background: rgba(26, 26, 26, 0.8);
        position: absolute;
        width: 300px;
        height: 100px;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -150px;
        border-radius: 10px;
        display: none;
        z-index: 99;
    }

    #busyPopup p {
        line-height: 100px;
        margin: auto;
        font-size: 2em;
        font-weight: bold;
        text-align: center;
    }

    #debug {
        background: rgba(26, 26, 26, 0.6);
        position: absolute;
        width: 400px;
        height: 400px;
        top: 50%;
        left: 50%;
        margin-top: -200px;
        margin-left: -200px;
        border-radius: 10px;
        display: none;
        z-index: 99;
        overflow: scroll;
    }

    .config {
        display: none;
    }

    .expert {
        display: none;
    }

/*    input, textarea
    {
        border: solid 1px #85b1de;
        background: linear-gradient(to top,  #888,  #FFF);
        background-repeat: repeat-x;
        background-position: top;
    }

    input:focus, textarea:focus
    {
        background-image: none;
        background-color: #FFFFFF;
        color: #000000;
        border: solid 1px #33677F;
    }*/

    .form_error
    {
        color:    red;
    }