/*  Style for 7 and 10 item v2 winning List, based on YUI 3 

    slot = drop zone
    player = draggable item
*/
.instructionsArea {
    background-size: 100% !important;
}

.resetPlayers , .quickPick {
    margin-top:8px;
}

.slot {
    /*border: 0;*/
    background-color: #005785e0;
    text-align: center;
    position: absolute;
    float: left;
    width: 250px;
    height: 50px;
    z-index: 0;
}
#dropZone1 {top:15px; left:14px;}
#dropZone2 {top:69px; left:14px;}
#dropZone3 {top:123px; left:14px;}
#dropZone4 {top:177px; left:14px;}
#dropZone5 {top:231px; left:14px;}
#dropZone6 {top:285px; left:14px;}
#dropZone7 {top:339px; left:14px;}
#dropZone8 {top:393px; left:14px;}
#dropZone9 {top:447px; left:14px;}
#dropZone10 {top:501px; left:14px;}


.player {
    border: 0;
    color: #fff;
    position: absolute;
    width: 250px;
    height: 50px;
    z-index: 1;
    cursor: move;
    background-color: transparent;
}
.player img {
    width: 250px;
    height: 50px;
}

.dragItemA {top:15px; left:282px;}
.dragItemB {top:69px; left:282px;}
.dragItemC {top:123px; left:282px;}
.dragItemD {top:177px; left:282px;}
.dragItemE {top:231px; left:282px;}
.dragItemF {top:285px; left:282px;}
.dragItemG {top:339px; left:282px;}
.dragItemH {top:393px; left:282px;}
.dragItemI {top:447px; left:282px;}
.dragItemJ {top:501px; left:282px;}


#workarea {
    position: relative;
    height: 566px;
    width: 550px;
    margin-top:5px;
}
#workarea .yui3-dd-drop-active-valid {
    border: 0px solid green;
}
#workarea .yui3-dd-drop-over {
    background-color: transparent;
    border: 1px solid #cdcdcd;
}
#workarea .yui3-dd-drop-active-invalid {
    border: 0px solid red;
}

.resetPlayers {
    cursor:pointer;
    top:0px; 
    left:0px;
}    
.quickPick {
    cursor:pointer;
    top:0px; 
    left:200px;
}
.stop-scrolling {
    height: 100%;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

@media screen and (max-width: 557px) {
    .stop-scrolling {
    height: 100%;
    overflow: hidden;
    }
    .slot {
        z-index: 0;
        box-sizing:border-box;
    }
    #workarea {
        position: relative;
        height: 100vw;
        width: 95vw;
        margin-top:3vw;
        margin-left:0px;
        border:0px solid red;
        box-sizing:border-box;
    }

    .slot , .player {
        width: 48%;
        height: 9.25%;
        position: absolute;
    }

    .player {
        border: 0;
        color: #fff;
        z-index: 1;
        cursor: move;
    }
    .player img {
        height: 100%;
        width: 100%;
    }

    #dropZone1, #dropZone2, #dropZone3, #dropZone4, #dropZone5, #dropZone6, #dropZone7, #dropZone8, #dropZone9, #dropZone10 {
        left:2vw;
    }

    .dragItemA, .dragItemB, .dragItemC, .dragItemD, .dragItemE, .dragItemF, .dragItemG, .dragItemH, .dragItemI, .dragItemJ {
        right:0vw;
        left:auto;
        padding-top: 0.5vw;
    }

    #dropZone1, .dragItemA {top:0vw;}
    #dropZone2, .dragItemB {top:9.8vw;}
    #dropZone3, .dragItemC {top:19.45vw;}
    #dropZone4, .dragItemD {top:29.2vw;}
    #dropZone5, .dragItemE {top:39.1vw;}
    #dropZone6, .dragItemF {top:49.05vw;}
    #dropZone7, .dragItemG {top:58.75vw;}
    #dropZone8, .dragItemH {top:68.65vw;}
    #dropZone9, .dragItemI {top:78.5vw;}
    #dropZone10, .dragItemJ {top:88.4vw;}


    .resetPlayers, .quickPick {
        width: 29vw;
        font-size: 3.5vw;
        margin-top: 1vw;
    }

    .resetPlayers {
        cursor:pointer;
        top:0px; 
        left:-40px;
    }    
    .quickPick {
        cursor:pointer;
        top:0px; 
        left:120px;
    }
    .zoneTitle {
        width: 44vw;
        font-size: 3.5vw;
        padding: 1em 0.1em;
        margin: 0.3em;
    }

    .spotNumber {
        margin: 9px;
        font-size: 0.75em;
    }
}