
#content {
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Slots for final card positions */

#cardSlots {

}

/* The initial pile of unsorted cards */

#cardPile {
  margin: 0 auto;
}

#cardSlots, #cardPile {
  width: 50%;
  float:left;
  text-align:center;

}

/* Individual cards and slots */

#cardSlots div, #cardPile div {
	float:left;
	display:inline-block;
	padding: 9% 23%;
	margin:0.5%;
	background-color:#FFFFFF;
	position:relative;
  	
}
#cardSlots div img{
	display:none;
}
#cardSlots div span, #cardPile div span{
	position:absolute;
	left:0%;
	bottom:27%;
	text-align:center;
	width:100%;
}
#cardSlots div.ui-droppable-disabled span{
}

#cardSlots div em, #cardPile  div em{

	display:none;
}
#cardSlots div:first-child, #cardPile div:first-child {
 
}

#cardSlots div.hovered {
  background: #dff2f9;
}

#cardSlots div {
	border: medium dashed #def2f9;
	border-radius:10px;
}

#cardPile div {
	border: medium dashed #00aeef;
	border-radius:10px;
}


	

#cardPile div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

/* Individually coloured cards */




 

#cardPile div.correct{border-color:#8bd310; }
#cardPile div{
	 background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 75%;
	cursor:move;	
}
#content{
	position:relative;
}
#cardSlots.big, #cardPile.big{
	width:100%;
	position:absolute;
	left:0px;
	top:0px;
}
#cardSlots.big div, #cardPile.big div {
	padding: 9%;
	padding-left:11.5%;
	padding-right:11.5%;
	margin:0.5%;
	left:0 !important;
	top:0 !important; 	
}





@media only screen 
and (max-width : 600px) { 
	#cardSlots div {
		border: 1px dashed #2fa6de;
		border-radius:5px;
	}
	
	#cardPile div {
		border: 1px dashed #def2f9;
		border-radius:5px;
	}
	
}	
