@charset "UTF-8";
/* CSS Document */

/* Add some margin to the page and set a default font and colour */
 
body {
  margin: 0px;
  font-family: Arial,Helevtica,Verdana,san-serif;
  line-height: 1.8em;
  color: #fff;
  overflow:hidden;
}
 
/* Give headings their own font */
 
h1, h2, h3, h4 {
  font-family: Arial,Helevtica,Verdana,san-serif;
}

h1{
	font-size:16px;
	color:#0463A5;
	}
 
/* Main content area */
 
#content {
	width: 825px;
	height: 482px;
	background-color:#E3E2E7;
  margin: 0px 0px;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

 
/* The initial pile of unsorted cards */

#cardSlots{
  float:left;
  background-image:url(mainbg.png);
  width: 675px;
  height: 482px;
}
#cardSlots.p2{
  float:left;
  background-image:url(mainbg2.png);
  width: 675px;
  height: 482px;
}

#cardPile {
	float:left;
  background: #E3E2E7;	
  width: 150	px !important;
  height: 482px;
}

 

 
/* stickies and slots */
 
#cardSlots div{
  float: left;
  padding: 0px;
  padding-top: 0px;
  padding-bottom: 0;
  margin: 0 0 0 0px;
  background: #fff;
}

#cardSlots div.ui-droppable{
	width: 172px;
    height: 160px !important;
	opacity:0;
	}

#cardPile div {
  float: left;
  padding: 0px;
  padding-top: 0px;
  padding-bottom: 0;
  margin: 0 0 0 0px;
  color: #fff;
}

#card1.ui-draggable{ background-image:url(fibre-140.png);}
#card2.ui-draggable{ background-image:url(pulp-140.png);}
#card3.ui-draggable{ background-image:url(squeeze-140.png);}
#card4.ui-draggable{ background-image:url(dry-140.png);}
#card5.ui-draggable{ background-image:url(roll-140.png);}

#card1.ui-draggable.p2{ background-image:url(fibrewords-140.png);}
#card2.ui-draggable.p2{ background-image:url(pulpwords-140.png);}
#card3.ui-draggable.p2{ background-image:url(squeezewords-140.png);}
#card4.ui-draggable.p2{ background-image:url(drywords-140.png);}
#card5.ui-draggable.p2{ background-image:url(rollwords-140.png);}
	
#cardPile div.ui-draggable{
	float:left;
	clear:both;
	width: 140px;
    height: 96px !important;
	font-size:0px;
	overflow:visible !important;
	}
	
#cardSlots div.hovered {
  background: #CA2427;
}

 /* drop slots */
#cardSlots div:nth-child(1) { position:absolute; top:170px; left: 8px;}
#cardSlots div:nth-child(2) { position:absolute; top:39px; left: 150px; }
#cardSlots div:nth-child(3) { position:absolute; top:42px; left: 366px; }
#cardSlots div:nth-child(4) { position:absolute; top:160px; left: 485px; }
#cardSlots div:nth-child(5) { position:absolute; top:290px; left: 366px; }

 
/* correct stickies - larger */
#card1.correct { background:url(fibre-172.png) no-repeat; width:172px !important; height:160px !important; font-size:0px;}
#card2.correct { background:url(pulp-172.png)  no-repeat; width:172px !important; height:160px !important;font-size:0px;}
#card3.correct { background:url(squeeze-172.png)  no-repeat; width:172px !important; height:160px !important; font-size:0px;}
#card4.correct { background:url(dry-172.png) no-repeat; width:172px !important; height:160px !important;font-size:0px;}
#card5.correct { background:url(roll-172.png) no-repeat; width:172px !important; height:160px !important; font-size:0px;}

#card1.correct.p2 { background:url(fibrewords-172.png) no-repeat; width:172px !important; height:160px !important; font-size:0px;}
#card2.correct.p2 { background:url(pulpwords-172.png)  no-repeat; width:172px !important; height:160px !important;font-size:0px;}
#card3.correct.p2 { background:url(squeezewords-172.png)  no-repeat; width:172px !important; height:160px !important; font-size:0px;}
#card4.correct.p2 { background:url(drywords-172.png) no-repeat; width:172px !important; height:160px !important;font-size:0px;}
#card5.correct.p2 { background:url(rollwords-172.png) no-repeat; width:172px !important; height:160px !important; font-size:0px;}

/* correct message */
#correctMessage {
  position: absolute;
  left: 165px;
  top: 160px;
  width: 333px;
  height: 135px;
  z-index: 100;
  background: #1064A3;
  border: 3px solid #fff;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  padding-top: 20px;
  color:#fff;
}
 
/* success message */
#successMessage {
  position: absolute;
  text-align:right;
  left: 20px;
  top: 20px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #1064A3;
  background-image:url(success2.png);
  background-repeat:no-repeat;
  background-position:center top;
  border: 3px solid #fff;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  padding-top: 20px;
  color:#fff;
}
#successMessagetwo {
  position: absolute;
  text-align:right;
  left: 20px;
  top: 20px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #1064A3;
  background-image:url(success2.png);
  background-repeat:no-repeat;
  background-position:center;
  border: 3px solid #fff;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  padding-top: 20px;
  color:#fff;
}

button{
	cursor:pointer;
	background-color:#E8E8E8;
	border: 2px solid #fff;
	-moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-top:70px;
  margin-right:50px;
	}