/* --------------------------------------- input field config ------------------------------------------------------- */
#name_panel form {
    text-align: center;
    position: relative;
}

#name_panel .validation-summary{
    font-size: 24px;
    margin-top: 4%;
    text-align: center;
}
/* ------------------------------------------------------------------------------------------------------------------ */

#pregame_screen {
    width: 100%;
    height: 100%;
    font-family: "AdvoCut";
}

#login_panel, #players_panel, #before_game_screen, #news_panel, #gender_panel, #name_panel {
    display: block;
    width: 268px;
    height: 168px;
    background: url('../img/1/newBigSpriteSheet.png');
    margin: auto;
    position: absolute;
    z-index: 180;
    top: -1500px;
    bottom: 0;
    left: 0;
    right: 0;
    transition: 1s linear;
}

#players_panel, #news_panel, #gender_panel, #name_panel {
    height: 484px;
    background-position: 0 -506px;
    pointer-events: auto;
}

#panel_title {
    text-align: center;
    margin-top: 1%;
    font-size: 24px;
    font-weight: bold;
    color: #693232;
}

#players_panel #cells {
    width: 69%;
    height: 100%;
    margin: auto;
}

#players_panel .arrow {
    cursor: pointer;
}

#players_panel .arrow {
    width: 6.3%;
    height: 51%;
    float: left;
    margin-left: 9%;
    margin-top: 4%;
    background: url('../img/1/newBigSpriteSheet.png') 94.39% -1326px;
}

#players_panel #right.arrow {
    float: right;
    margin-left: 0;
    margin-right: 7%;
    background-position: 98% -1326px;
}

#players_panel #char_select {
    width: 100%;
    height: 23%;
    margin: auto;
    margin-top: 2%;
}

#players_panel #char_cell {
    margin-left: 6px;
    width: 30px;
    height: 100%;
    float: left;
    cursor: pointer;
}

#players_panel #char_cell #main {
    display: block;
    width: 12.5%;
    margin-top: 1%;
    float: left;
    position: absolute;
    margin-left: -1px;
}

#players_panel #char_cell.empty #main {
    display: none;
}

#players_panel #border{
    display: none;
}

#players_panel #back {
    /*height: 91%;*/
    height: 102px;
    width: 90px;
    margin: auto;
    background: url('../img/1/newBigSpriteSheet.png') -1122px -990px;
    margin-top: 5%;
}

#players_panel #char_cell.empty #back {
    background-position: -1212px -1074px;
    width: 90px;
    height: 102px;
}

#players_panel #char_cell.chosen #border {
    display: block;
    width: 96px;
    height: 97%;
    float: left;
    margin-left: 2.1px;
    margin-top: 2%;
    background: url('../img/1/newBigSpriteSheet.png') 91.5% -927px;
}

.showed {
    top: 0 !important;
}

.hide {
    top: -1500px !important;
}

#news_panel #news {
    width: 86%;
    margin: 8% auto 0;
}

#news_panel #versions-info {
    height: 16em;
    overflow-y: auto;
    /*font-weight: bold;*/
}

#news_panel #back {
    margin-top: 4%;
}

#login_panel .button_with_back {
    margin-bottom: 4%;
}

.button_with_back {
    height: 8.7%;
}

.button_with_back:first-child {
    margin-top: 16%;
}

.button_with_back .main {
    height: 16px;
    width: 165px;
    margin: auto;
    position: relative;
    background: url('../img/1/newBigSpriteSheet.png') no-repeat 0 -1578px;
    cursor: pointer;
    /* background-position: 0 -1578px; */
}

.button_with_back .background {
    width: 83%;
    height: 100%;
    background: url('../img/1/newBigSpriteSheet.png') no-repeat 91% -1008px;
    margin: -5.5% auto;
}

/* #forum.button_with_back .main {
    background-position: 0 -4736px;
}

#register.button_with_back > div.main {
    background-position: 0 -4664px;
}

#guest_play.button_with_back > div.main {
    background-position: 0 -4208px;
}

#forum.button_with_back .main:hover {
    background-position: 52.4% -4736px;
}

#login.button_with_back .main:hover {
    background-position: 52.4% -4592px;
}

#register.button_with_back > div.main:hover {
    background-position: 52.4% -4664px;
}

#guest_play.button_with_back > div.main:hover {
    background-position: 52.4% -4208px;
}

#play.button_with_back > div.main {
    background-position: 0 -4160px;
}

#play.button_with_back > div.main:hover {
    background-position: 52.4% -4160px;
}

#back.button_with_back > div.main {
    background-position: 0 -4400px;
}

#back.button_with_back > div.main:hover {
    background-position: 52.4% -4400px;
}

#news.button_with_back > div.main {
    background-position: 0 -4448px;
}

#news.button_with_back > div.main:hover {
    background-position: 52.4% -4448px;
} */

#buttons {
    height: 30%;
}

.idnetmark {
    width: 10.6%;
    height: 5.2%;
    background: url('../img/1/newBigSpriteSheet.png') no-repeat 88.69% 0;
    margin-bottom: 1%;
    margin-top: 1%;
    margin-left: auto;
    margin-right: auto;
}

#players_panel .idnetmark {
    margin-top: 12%;
}

.pregame_button {
    height: 16px;
    width: 165px;
    margin: 2.5% auto;
    cursor: pointer;
    background: url('../img/1/newBigSpriteSheet.png') no-repeat;
}

.pregame_button:hover {
    background-position: -165px 0;
}

.divider {
    width: 55%;
    height: 1.5%;
    --background: url('../img/1/newBigSpriteSheet.png') 81.3% -302px;
    margin: 1.4% auto 1.4%;
}

#chosen_info {
    width: 100%;
}

#chosen_info #background_chosen {
    height: 100%;
    width: 53.2%;
    line-height: 150%;
    margin: 2% auto;
    font-size: 8px;
    background: url('../img/1/newBigSpriteSheet.png') -268px -317px;
    width: 142px;
    height: 13px;
    text-align: center;
    font-weight: bold;
    color: #693232;
}




.validation-summary{
    height: 12%;
}

/*------------------------------------------------------ SCALE 3 -----------------------------------------------------*/



/* BASE SCALE */

    #name_panel input {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;

        border-image-outset: 0 0 0 0;
        border-image-repeat: stretch stretch;
        border-image-slice: 100% 100% 100% 100%;
        border-image-source: none;
        border-image-width: 1 1 1 1;

        border-top-color: #b2af9b;
        border-top-style: dashed;
        border-left-color: #b2af9b;
        border-left-style: dashed;
        border-bottom-color: #b2af9b;
        border-bottom-style: dashed;
        border-right-color: #b2af9b;
        border-right-style: dashed;

        width: 50%;
        margin-top: 10%;
        padding-bottom: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 0;
        text-align: center;

        background-color: rgba(0, 0, 0, 0.5);
        color: #fbfbfb;

        height: 16px;
        font-size: 8px;

        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;

        border-top-width: 1px;
        border-left-width: 1px;
        border-bottom-width: 1px;
        border-right-width: 1px;
    }

    .validation-error{
        font-size: 8px;
    }

    .button_with_back .background {
    background: url('../img/1/newBigSpriteSheet.png') no-repeat 91% -1008px;
    }

    .button_with_back .main {
        background: url('../img/1/newBigSpriteSheet.png') no-repeat 0 -1530px;
    }

    #login.button_with_back.button_with_back .main:hover {
        background: url('../img/1/newBigSpriteSheet.png') no-repeat -165px -1530px;
    }

    #register.button_with_back > div.main {
        background-position: 0 -1554px;
    }

    #register.button_with_back:hover > div.main {
        background-position: -165px -1554px;
    }

    #forum.button_with_back .main {
        background-position: 0 -1578px;
    }
    #forum.button_with_back:hover .main {
        background-position: -165px -1578px;
    }

    #guest_play.button_with_back > div.main {
        background-position: 0 -1402px;
    }
    #guest_play.button_with_back:hover > div.main {
        background-position: -165px -1402px;
    }

    #play.button_with_back > div.main {
        background-position: 0 -1386px;
    }
    #play.button_with_back:hover > div.main {
        background-position: -165px -1386px;
    }

    #back.button_with_back > div.main {
        background-position: 0 -1466px;
    }
    #back.button_with_back:hover > div.main {
        background-position: -165px -1466px;
    }

    #news.button_with_back > div.main {
        background-position: 0 -1482px;
    }
    #news.button_with_back:hover > div.main {
        background-position: -165px -1482px;
    }

    #players_panel, #news_panel, #gender_panel, #name_panel {
        height: 161px;
        background-position: 0 -168px;
    }

    #panel_title {
        margin-top: 1.3%;
        font-size: 8px;
    }

    #players_panel #right.arrow {
        background-position: 98% -442px;
    }



    #players_panel #char_cell.empty #back {
        background-position: -404px -358px;
        width: 30px;
        height: 34px;
    }


    #players_panel #char_cell.chosen #border {
        height: 36px;
        width: 32px;
        margin-left: 0px;
        background: url('../img/1/newBigSpriteSheet.png') -410px -309px;
    }

    #players_panel #back {
        /*height: 92%;*/
        margin-left: 1px;
        height: 34px;
        width: 30px;
        background: url('../img/1/newBigSpriteSheet.png') -374px -330px;
    }

    #players_panel #char_cell {
        margin-left: 6px;
    }

    #players_panel .arrow {
        background: url('../img/1/newBigSpriteSheet.png') 94.5% -442px;
    }

    #news_panel #versions-info {
        height: 11em;
        font-size: 8px;
    }

    #logo {
        background-image: url("../img/common/pw_logo_2.png");
        --transform: scale(1);
        margin-left: -165px;
        /* top: 8%; */
        width: 330px;
        height: 85px;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        display:none;
    }

    #logo-splash {
        position: absolute;
        background-image: url("../img/common/pw_logo.png");
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 166px;
        height: 150px;
    }

    @media screen and (min-height:450px) {
        #logo-splash {
            transform: translateX(-50%) translateY(-50%) scale(1.5);
        }
    }

    @media screen and (min-height:800px) {
        #logo-splash {
            background-image: url("../img/common/pw_logo_hsv_noise.png");
            width: 498px;
            height: 450px;
            transform: translateX(-50%) translateY(-50%);
        }
    }

    .male_hover{
        background-image: url("../img/1/newBigSpriteSheet.png");
        background-position: -401px -23px;
        width: 75px;
        height: 65px;
        margin-top: 14%;
        margin-left: 14%;
        position: absolute;
        display: none;
        z-index: -1;
    }
    .male_sprite{
        background-image: url("../img/1/newBigSpriteSheet.png");
        background-position: -268px 0;
        width: 72px;
        height: 88px;
        margin-top: 8%;
        margin-left: 14%;
        display: inline-block;

    }
    .female_hover{
        background-image: url("../img/1/newBigSpriteSheet.png");
        background-position: -401px -23px;
        width: 75px;
        height: 65px;
        margin-top: 14%;
        margin-right: 14%;
        margin-left: 60%;
        position: absolute;
        display: none;
        z-index: -1;
    }
    .female_sprite{
        background-image: url("../img/1/newBigSpriteSheet.png");
        background-position: -340px -2px;
        width: 61px;
        height: 86px;
        margin-top: 9%;
        margin-right: 14%;
        display: inline-block;
        float: right;
    }


/* ------------------------------------------ button styles for scale 1 --------------------------------------------- */

    #continue.pregame_button {
        background-position: 0 -1498px;
    }
    #continue.pregame_button:hover {
        background-position: -165px -1498px;
    }

    #new_play.pregame_button {
        background-position: 0 -1418px;
    }
    #new_play.pregame_button:hover {
        background-position: -165px -1418px;
    }

    #delete.pregame_button {
        background-position: 0 -1434px;
    }
    #delete.pregame_button:hover {
        background-position: -165px -1434px;
    }

    #create_button.pregame_button {
        background-position: 0 -1370px;
    }
    #create_button.pregame_button:hover {
        background-position: -165px -1370px;
    }

    #cancel_button.pregame_button {
        background-position: 0 -1450px;
    }
    #cancel_button.pregame_button:hover {
        background-position: -165px -1450px;
    }