/* Page Body */
body {
    margin: 0;
    background-color: white;
    background-image: url('media/clouds.png');
    background-repeat: repeat;
    font-size: 12px;
    font-family: Arial, Verdana, sans-serif;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@-ms-viewport { width: device-width; }

div, span, img, p, table, tr, td, th {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#splash {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background-image: url('media/clouds.png');
    background-repeat: repeat;
    text-align: center;
    color: #333333;
    font-size: 24px;
}

#splash img {
    margin: 5px;
}

#splash img.logo {
    width: 100%;
    max-width: 1124px;
    margin: 10px 0 10px 0;
}

#splash #message {
    width: 90%;
    max-width:1000px;
    border-top: 5px solid red;
    border-radius: 10px;
    background-color: white;
    padding: 10px;
    margin: 0 auto;
    box-shadow: 0 0 70px 10px #ffffff;
    text-align: center;
}

#splash .startup {
    position: relative;
    display: inline-block;
    width: 30%;
    height: 80px;
    line-height: 80px;
    margin: 50px auto;
    border-radius: 5px;
    background-color: white;
    text-align: left;
}

#splash .startup:hover { cursor: pointer; }
#splash .startup:active { background-color: rgba(255,255,255,0.4); }

#splash .startup_content {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 80px;
    line-height: 80px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

#splash .startup_progress {
    width: 0;
    background-color: lightblue;
}

/* Canvas Elements */
#canvases {
    position: absolute;
    left: 0;
    top: 0;
    width: 1200px;
    height: 700px;
    margin: 0 auto;
    padding: 0;
    border: 0;
}

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

/* Help Window */
#help {
    visibility: hidden;
    position: fixed;
    z-index: 101;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.75);
}

#helpbox {
    position: relative;
    width: 95%;
    max-width: 1000px;
    height: 93%;
    margin: 2% auto;
    background-color: #e1d8cf;
    border: 4px solid #800000;
    border-radius: 10px;
    border-bottom-right-radius: 0;
    box-shadow: 0px 0px 20px 10px #000000;
    font-family: Arial, Verdana, sans-serif;
    color: #333333;
}

#helpbox .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 75px;
    vertical-align: top;
    background: linear-gradient(rgba(189,189,189,1), rgba(238,238,238,0.7));
    box-shadow: 0px 0px 10px #333333;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

#helpbox .header_title, #helpbox .header_menu, #helpbox a.header_close {
    display: inline-block;
    height: 50px;
    margin: 12.5px 10px 12.5px 10px;
    vertical-align: top;
}

#helpbox .header_title {
    line-height: 50px;
    color: black;
    font-size: 28px;
    font-weight: bold;
}

#helpbox a.header_close {
    float: right;
    line-height: 50px;
    padding: 0 10px 0 10px;
    background-color: rgba(0,0,0,0.6);
    border-radius: 5px;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
}

#helpbox .header_menu {
    float: right;
    overflow: hidden;
    background-color: rgba(0,0,0,0.6);
    border-radius: 5px;
    color: white;
}

#helpbox .header_menu:hover {
    height: 400px;
    background-color: white;
    color: black;
}

#helpbox div.menu_item, #helpbox a.menu_item {
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 10px 0 10px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

#helpbox a.menu_item {
    color: black;
}

#helpbox a.menu_item:hover {
    background-color: gray;
    color: white;
}

#helpbox .helptext {
    position: absolute;
    top: 75px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 80px 10px 80px;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 14px;
}

#helpbox h1 {
    display: box;
    margin: 10px -40px 10px -40px;
    padding: 10px;
    background-color: rgba(51,51,51,0.8);
    border-radius: 5px;
    font-size: 20px;
    font-weight: bold;
    color: white;
}

#helpbox h2 {
    margin: 10px -20px 10px -20px;
    border-bottom: 3px solid #888888;
    font-size: 18px;
    font-weight: bold;
}

#helpbox span.label {
    font-weight: bold;
}

#helpbox table {
    margin: 0 auto;
    width: 90%;
    font-size: 14px;
}

#helpbox th {
    width: 20%;
    vertical-align: top;
    padding: 10px 0px 10px 0px;
    text-align: left;
    font-weight: bold;
}

#helpbox td {
    padding: 10px 5px 10px 5px;
    text-align: left;
}

#helpbox img {
    display: block;
    margin: 10px auto;
    border: 2px solid white;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 5px #3694c9;
}

#helpbox ul.labels {
    list-style-type: upper-alpha;
}

#helpbox li {
    margin: 20px 0px 20px 0px;
    padding: 0;
}

/* Status & Statistics Bar */
#stats {
    visibility: hidden;
    position: fixed;
    top: 10%;
    right: 20px;
}

#stats .box {
    width: 100%;
    margin-bottom: 10px;
    background-color: rgba(137,167,183,0.6);
    border: 3px solid black;
    border-radius: 10px;
    box-shadow: 0px 0px 5px #333333;
    text-align: center;
    font-weight: bold;
}

#stats .status_green, #stats .status_red, #stats .status_blue {
    margin: 5px;
    text-align: center;
    font-weight: bold;
}

#stats .status_green { color: green; }
#stats .status_red { color: red; }
#stats .status_blue { color: #236ed4; }

#stats .stat_large, #stats .stat_small {
    display: inline-block;
    position: relative;
    text-align: left;
    margin-bottom: 10px;
}

#stats .stat_large { width: 90%; }
#stats .stat_small { width: 44%; }

#stats .stat_bar {
    width: 100%;
    height: 25px;
    line-height: 25px;
    border-radius: 3px;
    background-color: rgba(204,204,204,1);
    font-weight: normal;
}

#stats .stat_bar_content {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 25px;
    line-height: 25px;
    border-radius: 3px;
    text-align: center;
}

#stats .stat_bar_progress { background-color: green; }
#stats .stat_bar_rating { background-color: #236ed4; }
#stats .stat_bar_value { text-align: center; }

#stats .titlebar {
    width: auto;
    padding: 5px;
    margin-bottom: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: rgba(131, 22, 22, 1);
    text-align: center;
    color: #ffffff;
    font-weight: bold;
}

#controls #tab0, #controls #tab1, #mobile_tabs #tab2, #mobile_tabs #tab3, #mobile_tabs #tab4, #mobile_tabs #stats_tab {
    display: inline-block;
    background-repeat: no-repeat;
    cursor: pointer;
}

#controls #tab0, #controls #tab1 {
    width: 65px;
    height: 65px;
    margin: 2px;
}

#mobile_tabs #tab2, #mobile_tabs #tab3, #mobile_tabs #tab4, #mobile_tabs #stats_tab {
    width: 90px;
    height: 90px;
    margin: 0 20px 0 20px;
}

#controls #tab0 { background-image: url('media/icon_small_settings.png'); }
#controls #tab1 { background-image: url('media/icon_small_concourses.png'); }
#mobile_tabs #tab2 { background-image: url('media/icon_settings.png'); }
#mobile_tabs #tab3 { background-image: url('media/icon_queue.png'); }
#mobile_tabs #tab4 { background-image: url('media/icon_concourses.png'); }
#mobile_tabs #stats_tab { background-image: url('media/icon_attraction.png'); }

#controls .tab_off { background-position: 0px 0px; }
#controls .tab_on { background-position: 0px -65px; }
#mobile_tabs .tab_off { background-position: 0px 0px; }
#mobile_tabs .tab_on { background-position: 0px -90px; }
#mobile_tabs .tab_off_msg { background-position: 0px -180px; }
#mobile_tabs .tab_on_msg { background-position: 0px -270px; }

/* Control Panel Container */
@media screen and (min-width: 1366px) {
    #stats {
        width: 12%;
        min-width: 160px;
        font-size: 12px;
    }

    #mobile_tabs { display: none; }

    #controls {
        display: block;
        position: fixed;
        visibility: hidden;
        bottom: 0;
        width: 100%;
        height: 140px;
        background: linear-gradient(rgba(238,238,238,0.7), rgba(189,189,189,1));
        box-shadow: 0px 0px 10px #333333;
        font-family: Arial, Verdana, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        vertical-align: top;
    }

    #controls .tabs {
        display: block;
        float: left;
        width: 67px;
        height: 100%;
    }

    #controls .titlebar {
        width: 100%;
        height: auto;
        padding: 5px 0 5px 0;
    }

    #controls .controls1, #controls .controls2, #controls .controls3 {
        display: none;
        height: 135px;
        vertical-align: top;
        text-align: left;
    }

    #controls .controls1 { width: 460px; }
    #controls .controls2 { width: 220px; }
    #controls .controls3 { width: 130px; }

    #controls .grid_item {
        display: inline-block;
        margin: 1px;
    }

    #controls .button, #controls .message {
        display: table-cell;
        width: 100px;
        height: 50px;
        vertical-align: middle;
        border: 0.3em solid transparent;
        border-radius: 25px;
        text-align: center;
        font-size: 10px;
    }

    #controls .state { font-style: italic; }
    #controls .disabled { background-color: gray; }
    #controls .locked { background-color: yellow; }

    #controls .on { background-color: green; }
    #controls .on:hover {
        box-shadow: 0px 0px 10px green;
        cursor: pointer;
    }

    #controls .off { background-color: red; }
    #controls .off:hover {
        box-shadow: 0px 0px 10px red;
        cursor: pointer;
    }

    #controls .message {
        border: 0.3em solid #000000;
        box-shadow: none;
    }

    #controls .message:hover {
        cursor: default;
        box-shadow: none;
    }
}

@media screen and (max-width: 1365px) {
    #stats {
        width: 250px;
        font-size: 18px;
    }

    #mobile_tabs {
        display: block;
        visibility: hidden;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 100px;
        padding-top: 5px;
        background: linear-gradient(rgba(238,238,238,0.7), rgba(189,189,189,1));
        box-shadow: 0px 0px 10px #333333;
        vertical-align: top;
        text-align: center;
    }

    #controls {
        display: block;
        visibility: hidden;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 120px;
        width: 90%;
        max-width: 600px;
        height: auto;
        max-height: 70%;
        padding: 10px 10px 10px 0px;
        margin: 0 auto;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: rgba(0,0,0,0.4);
        border: 5px solid black;
        border-radius: 20px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #000000;
    }

    #controls .tabs { display: none; }

    #controls .controls1, #controls .controls2, #controls .controls3, #controls .controls4, #controls .controls5 {
        display: none;
        width: 45%;
        height: auto;
        margin: 0 10px 0 10px;
        vertical-align: top;
    }

    #controls .titlebar {
        font-size: 25px;
        font-weight: bold;
        color: #eeeeee;
        text-shadow: 0 0 5px black;
    }

    #controls .grid_item {
        display: block;
        margin: 3px 0 3px 0;
    }

    #controls .button, #controls .message {
        display: block;
        width: 100%;
        height: 45px;
        line-height: 45px;
        vertical-align: middle;
        border: 5px solid transparent;
        border-radius: 5px;
    }

    #controls .state {
        display: inline;
        padding-left: 10px;
        font-style: italic;
    }

    #controls .disabled { background-color: rgba(211,211,211,0.8); }
    #controls .locked { background-color: rgba(255,255,0,0.8); }

    #controls .on { background-color: rgba(0,255,0,0.8); }
    #controls .on:hover {
        box-shadow: 0px 0px 10px green;
        cursor: pointer;
    }

    #controls .off { background-color: rgba(255,0,0,0.8); }
    #controls .off:hover {
        box-shadow: 0px 0px 10px red;
        cursor: pointer;
    }

    #controls .message {
        border: 5px solid #000000;
        box-shadow: none;
    }

    #controls .message:hover {
        cursor: default;
        box-shadow: none;
    }
}