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

#cardSlots div, #cardPile div {
	float:left;
	display:inline-block;
	padding: 9% 23%;
	margin:0.5%;
	font-weight:bold;
	background-color:#FFFFFF;
	position:relative;
  	
}

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

}
#cardPile div{
	padding: 2.5% 11.6%;
	margin:0.5%;
	text-align:left;
	background-color: #fbcc0f;
}
#cardSlots div{
	padding: 3% 23.2%;
}
/* Individual cards and slots */


#cardSlots div img{
	display:none;
}

#cardSlots div span, #cardPile div span{
	position:absolute;
	left:0%;
	bottom:27%;
	text-align:center;
	width:100%;
}
#cardSlots div span{
	text-align:left;
}
#cardSlots div span b{
	display:none;
}
#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-radius:0px;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: solid;
	border-left-style: dotted;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #F3F3F3;
	border-left-color: #FFFFFF;
}

#cardPile div {
	border: 1px solid #000000;
	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{
	background-color:transparent;
	z-index:-2 !important;
}
#cardSlots .ui-droppable-disabled span b{
	display:inline;
	
}
#cardSlots div.ui-droppable-disabled{
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #0f8241;
}
#cardSlots .ui-droppable-disabled span{
	color:#0f8241;
}
#cardPile div.correct span{
	display:none;
}
#cardPile div{
	 background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 75%;
	cursor:move;	
}
#content{
	position:relative;
}





@media only screen 
and (max-width : 1100px) { 
	
	#cardSlots div {
		border-width: 1px;
		margin:0.2%;
	}
	
	#cardPile div {
		border-width: 2px;
		border-radius:5px;
	}
	
}	

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