#gameContainer
{
	width: 100%;
	margin: 0 auto;
	float: left;
}
#rightColumn, #leftColumn
{
	width:55%;
	float:left;
	height:100%;
	margin-top:-1%;
        text-align: center;
}
#leftColumn
{
	width:45%;
}
#gameTitle
{
	font-size: 1.5em;
	text-align: center;
	padding: 0 0 .5em 0;
}
#instructions
{
	font-size: 1em;
	margin: 0;
	padding: 1em;
	text-align: center;
}
.droppable-block span
{
	width:100%;
	position:absolute;
	left:0px;
	display:none;
	top:2%;
	text-align:center;
}
.droppable-block em
{
	color:#ffffff;
	text-indent:-999px;
}
.droppable-block
{
	padding: 6% 35%;
        position: relative;
        z-index: 2;
        background-color: #FFF;
        border: 3px solid;
        border-color: #000000;
        border-radius: 10px;
        clear: both;
        max-width: 12%;
        float: none;
        margin: 1% auto;
}

.draggable
{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto auto;
	cursor: move;
	display: block;
	float: left;
	margin: 2px 2px;
	float: left;
        padding: 4% 18%;
      
	z-index: 3;
        font-size: 165%;
}

.draggable em{
    text-indent: 0px;
    font-size: 135%;
    color: #ffffff;
    float: left;
    margin-top: 0px;
	font-style:normal;
        font-weight: 800;
}

.draggable.item1
{
	background-image: url("../images/game/item-blue-square.png");
}
.draggable.item2
{
	background-image: url("../images/game/item-orange-square.png");
}
.draggable.item3
{
	background-image: url("../images/game/item-red-rectangle.png");
    background-size: 100% 84%;	
}
.draggable.item4
{
	background-image: url("../images/game/item-green-rectangle.png");
    background-size: 100% 84%;	
}
.draggable.item5
{
	background-image: url("../images/game/item-yellow-triangle.png");
        background-size: auto 95%;
}

.draggable.small
{
	background-size: 59% 53%;
}
#items
{
}
#results
{
	text-align: center;
	padding-bottom:20%;
	width:50%;
	clear: both;
}
#correctResult
{
	display: none;
	color: Green;
}
#incorrectResult
{
	display: none;
	color: Red;
}
 @media only screen and (max-width : 960px) {
 .draggable {
 border-width: 1px;
 border-radius:2px;
}
.droppable-block {
 border-width: 1px;
 border-radius:2px;

}	
.draggable {
    background-size: 70% 84%!important;	

}
}

@media only screen and (max-width : 1400px){
    
   .draggable.item1,
    .draggable.item2{
        background-size: 40% auto !important;
    } 
    
}
