/* General layout */
body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000;
    color: #fff;
    image-rendering: pixelated;
}

header {
    /*height: 40px;*/
    margin-bottom: 20px;
    padding-left: 5px;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    margin: 2px 7px;
}

/* Loading screen */
.tilesetLoad {
    position: fixed;
    background-color: #888;
    width: 300px;
    height: 20px;
    top: calc(50% - 10px);
    left: calc(50% - 150px);
    z-index: 9999;
}

    .tilesetLoad div {
        background-color: #080;
        width: 0;
        height: 20px;
        margin: 0;
    }

/* Panels */
ul#tabs {
    text-align: center;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 120;
}

    ul#tabs li {
        position: relative;
        display: inline-block;
        height: 19px;
        list-style-type: none;
        margin: 0;
        padding: 3px 8px;
        cursor: pointer;
        border: 1px solid #666;
        color: #888;
    }

        ul#tabs li:hover {
            background-color: #244;
        }

        ul#tabs li.selected {
            border-bottom: 1px solid #000;
            color: #fff;
        }

div#tabContent div {
    border: 1px solid #666;
    padding: 0;
    margin: 0 auto;
    background-color: #000;
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    width: calc(100% - 414px);
    display: none;
    z-index: 110;
}

    div#tabContent div.show {
        display: block;
    }

.deathWindow {
    background-color: #333333;
    position: absolute;
    left: 500px;
    width: 500px;
    height: 400px;
    z-index: 100;
    border-style: inset;
    border-color: grey;
    border-width: 5px;
}

    .deathWindow a {
        color: #dddddd;
        text-decoration: none;
    }

        .deathWindow a:hover {
            color: #777777;
        }

.fullScreen {
    width: 100%;
    height: 100%;
}

/* Client UI */
.zUI {
    z-index: -1;
}

.uiIcon {
    width: 32px;
    height: 32px;
    display: block;
    background-color: #f24;
}

.txtYellow {
    color: #db2;
}

.crystalIcon {
    background-color: #db2;
}

.skillIcon {
    background-color: #fff;
}

.bgColorMob {
    background-color: #4C2A2A;
}

.bgColorHero {
    background-color: #2c3e50;
}

.characterBox {
    clear: left;
    float: left;
    border: 1px solid #666;
    border-radius: 0 5px;
    margin: 2px;
    padding: 3px;
}

    .characterBox div {
        float: left;
    }

        .characterBox div div {
            margin: 3px;
        }

            .characterBox div div div {
                float: none;
            }

    .characterBox .characterName {
        width: calc(100% - 56px);
        padding: 2px;
        border: 2px solid #000;
    }

        .characterBox .characterName div {
            text-align: center;
        }

    .characterBox .characterLife {
        position: relative;
        background-color: #888;
        height: 6px;
        width: calc(100% - 6px);
    }

        .characterBox .characterLife div {
            background-color: #d00;
            height: 6px;
            margin: 0;
        }

        .characterBox .characterLife .tooltip {
            background-color: #222;
            border: 1px solid #888;
            border-radius: 5px;
            padding: 2px;
            position: absolute;
            height: 16px;
            top: -8px;
            width: 40px;
            left: calc(50% - 23px);
            text-align: center;
            opacity: 0;
            pointer-events: none;
        }

        .characterBox .characterLife:hover .tooltip {
            opacity: 1;
        }

.newLine {
    clear: left;
}

/* Level editor UI */
#leftCharacters br {
    clear: left;
}

div.collapsible {
    cursor: pointer;
    padding-left: 30px;
}

div.collapsiblepanel {
    max-height: 0;
    overflow: hidden;
    /*transition: 0.5s ease-out;*/
}

    div.collapsiblepanel.show {
        max-height: 5000px;
    }

.uitcFrame {
    background-color: #000;
    width: calc(100% - 450px);
    height: 75px;
    margin: 10px auto 5px auto;
    padding: 5px;
}

.corridor {
    /*position: relative;
    width: calc(100% - 430px);
    height: calc(100vh - 150px);*/
    padding-left: 10px;
    padding-right: 15px;
}

.uitcMark {
    float: left;
}

.blinkingFog{
    animation: blinkingFrame 1.2s ease 0s infinite alternate;
}

@keyframes blinkingFrame{
    0% { opacity:0; }
    10% { opacity:0; }
    20% { opacity:1; }
    80% { opacity:1; }
    90% { opacity:0; }
    100% { opacity:0; }
}

.skipTutoButton {
    float: right;
}

.deathOverlay {
    width:100vw;
    height:100vh;
    background-color: #000;
    position:fixed;
    z-index:999999;
}

.deathScreen {
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em;
    margin-left: -15em;
    border: 1px solid #ccc;
    background-color: #522;
    position:fixed;
    text-align: center;
}

.startAgainButton {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: none;
}