#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% 12%;
        position: relative;
        z-index: 2;
        background-color: #FFF;
        border: 3px dashed;
        border-color: rgb(123, 229, 255);
        border-radius: 10px;
        clear: both;
        max-width: 12%;
        float: none;
        margin: 0.5% auto;
}

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

.draggable em{
    text-indent: 0px;
    font-size: 65%;
    color: #ffffff;
    float: left;
    margin-top: 0px;
}

.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");
}
.draggable.item4
{
	background-image: url("../images/game/item-green-rectangle.png");
}
.draggable.item5
{
	background-image: url("../images/game/item-yellow-triangle.png");
        background-size: auto 95%;
}
.draggable.item6
{
	background-image: url("../images/game/item-purple-rectangle.png");
}
.draggable.item7
{
	background-image: url("../images/game/item-lemon-rectangle.png");
}
.draggable.item8
{
	background-image: url("../images/game/item-grand-triangle.png");
        background-size: auto 95%;
}
.draggable.item9
{
	background-image: url("../images/game/item-pink-circle.png");
        background-size: auto 95%;
}
.draggable.item10
{
	background-image: url("../images/game/item-sky-square.png");
}
.draggable.item11
{
	background-image: url("../images/game/item-swampy-circle.png");
        background-size: auto 95%;
}
.draggable.item12
{
	background-image: url("../images/game/item-yellow-square.png");
}

.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 : 600px) {
 .draggable {
 border-width: 1px;
 border-radius:2px;
}
}

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