/*  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: transparent;
    color: #666;
    text-align: center;
    position: absolute;
    float: left;
    width: 250px;
    height: 50px;
    z-index: 0;
}
#dropZone1 {top:57px; left:14px;}
#dropZone2 {top:111px; left:14px;}
#dropZone3 {top:165px; left:14px;}
#dropZone4 {top:219px; left:14px;}
#dropZone5 {top:273px; left:14px;}
#dropZone6 {top:327px; left:14px;}
#dropZone7 {top:381px; left:14px;}
#dropZone8 {top:435px; left:14px;}
#dropZone9 {top:489px; left:14px;}
#dropZone10 {top:543px; 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:57px; left:282px;}
.dragItemB {top:111px; left:282px;}
.dragItemC {top:165px; left:282px;}
.dragItemD {top:219px; left:282px;}
.dragItemE {top:273px; left:282px;}
.dragItemF {top:327px; left:282px;}
.dragItemG {top:381px; left:282px;}
.dragItemH {top:435px; left:282px;}
.dragItemI {top:489px; left:282px;}
.dragItemJ {top:543px; left:282px;}


#workarea {
    position: relative;
    height: 607px;
    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:10vw;
    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:0vw;
}

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

#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: 27vw;
    height: 8vw;
    margin-top: 1vw;
}

.resetPlayers {
    cursor:pointer;
    top:0px; 
    left:-40px;
}    
.quickPick {
    cursor:pointer;
    top:0px; 
    left:120px;
}
}