/* Add some margin to the page and set a default font and colour */

body {

  font-family: "Georgia", serif;
  line-height: 1.8em;
  color: #333;
}

/* Give headings their own font */

h1, h2, h3, h4 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

/* Main content area */

#content {
	margin-left:auto;
	margin-right:auto;
	display:block;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  width:918px;
  height:650px;
}


/* The initial pile of unsorted cards */

#cardPile {
		display:block;
	float:left;
  background:#F2F2F2;
  	width: 918px;
	height: 150px;
	border: 1px solid #333;
	margin-bottom:10px;
}






/* Slots for final card positions */

#cardSlots {
display:block;
	float:left;
  	width: 918px;
	height: 456px;
	border: 1px solid #333;
}




/* Individual cards and slots */
#cardSlots div{
	text-align: left;
	padding-left: 103px;
		float: left;
	width: 201px;
	height: 150px;
	border: 1px solid #333;
	font-family: Quicksand;
	font-size: 14px;
	line-height: 20px;
	color: #1D1D1D;
	font-weight: bold;
}

#cardPile div {
  float: left;
  width: 100px;
  height: 150px;
  border: 1px solid #333;
}

#cardSlots div:first-child, #cardPile div:first-child {
  margin-left: 0;
}

#cardSlots div.hovered {
  background:#EEE
}

#cardSlots div {
  border-style: dashed;
}

#cardPile div  {
  color: #fff;
  font-size: 50px;
  text-shadow: 0 0 3px #000;
}

#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);
}

#card1 { background-image:url(../images/icons_-74.png);}
#card2 { background-image:url(../images/icons_-71.png);}
#card3 { background-image:url(../images/icons_-73.png);}
#card4 { background-image:url(../images/icons_-70.png);}
#card5 { background-image:url(../images/icons_-72.png);}
#card6 { background-image:url(../images/icons_-66.png);}
#card7 { background-image:url(../images/icons_-67.png);}
#card8 { background-image:url(../images/icons_-68.png);}
#card9 { background-image:url(../images/icons_-69.png);}
#card1:Hover, #card2:Hover, #card3:Hover, #card4:Hover, #card5:Hover, #card6:Hover, #card7:Hover, #card8:Hover, #card9:Hover{background-color:rgba(30, 144, 255,0.6)}

/* Individually coloured cards */
#card1.correct {background-color: #0AAF5E}
#card2.correct {background-color:#0AAF5E }
#card3.correct {background-color:#0AAF5E }
#card4.correct {background-color:#0AAF5E }
#card5.correct { background-color:#0AAF5E }
#card6.correct { background-color:#0AAF5E }
#card7.correct { background-color:#0AAF5E }
#card8.correct { background-color:#0AAF5E }
#card9.correct { background-color:#0AAF5E }
#card10.correct { background-color:#0AAF5E }


/* "You did it!" message */
#successMessage {
position: absolute;
  left: 200%;
  width: 0;
  height: 0;
  z-index: 100;
  background: #dfd;
  border: 1px solid #333;
  padding: 20px;
}