/* Add some margin to the page and set a default font and colour */
 
body {
  margin: 30px 0 0;
  font-family: "Georgia", serif;
  line-height: 1.8em;
  color: #333;
  background: #f4f4f4;
}
 
/* Give headings their own font */
 
h1, h2, h3, h4 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
 
/* Main content area */
#wrapper {
	width: 1060px;
	margin: 0 auto;
	position: relative;	
} 
.content {
	margin: 0;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
#right{
	float: left;
	width: 251px;
}  
#left {
	float: left;
	width: 759px;
}
#main {
	background: url(graphics/main.png) no-repeat;
	width: 759px;
	height: 512px;
	z-index: 2;
	position: absolute;	
}  
#footer {
	width: 100%;
	height: 60px;
	padding-top: 6px;	
}
#footerLeft {
	background: url(graphics/footer.png) no-repeat;
	width: 457px;
	height: 51px;
	float: left;	
}
#footerRight {
	width: 457px;
	height: 51px;
	float: right;	
}
.linkFooter {
	background: url(graphics/footer-home.png) no-repeat;
	display: block;
	width: 138px;
	height: 51px;
	float: right;
	margin-right: 8px;
}
.linkFooter:hover {
	background: url(graphics/footer-home-ac.png) no-repeat;
}
/* puzzel menu */
.puzzel {
	float: left;
	width: 127px;
	height: 114px;	
	margin-left: 16px;	
	margin-top: 38px;
}
/* in-active puzzel */
#puzzeltje1 { background: url('graphics/thumb-1-ina.png') no-repeat; }
#puzzeltje2 { background: url('graphics/thumb-2-ina.png') no-repeat; }
#puzzeltje3 { background: url('graphics/thumb-3-ina.png') no-repeat; }
#puzzeltje4 { background: url('graphics/thumb-4-ina.png') no-repeat; }
#puzzeltje5 { background: url('graphics/thumb-5-ina.png') no-repeat; }

/* geselecteerde puzzel */
#puzzeltje1.active { background: url('graphics/thumb-1-act.png') no-repeat; }
#puzzeltje2.active { background: url('graphics/thumb-2-act.png') no-repeat; }
#puzzeltje3.active { background: url('graphics/thumb-3-act.png') no-repeat; }
#puzzeltje4.active { background: url('graphics/thumb-4-act.png') no-repeat; }
#puzzeltje5.active { background: url('graphics/thumb-5-act.png') no-repeat; }

/* puzzel af */
#puzzeltje1.klaar { background: url('graphics/thumb-1-sel.png') no-repeat; }
#puzzeltje2.klaar { background: url('graphics/thumb-2-sel.png') no-repeat; }
#puzzeltje3.klaar { background: url('graphics/thumb-3-sel.png') no-repeat; }
#puzzeltje4.klaar { background: url('graphics/thumb-4-sel.png') no-repeat; }
#puzzeltje5.klaar { background: url('graphics/thumb-5-sel.png') no-repeat; }


#puzzels  {
	background: url(graphics/header.png) no-repeat;
	display: block;
	height: 181px;
	width: 739px;
	padding-left: 20px;
}

/* Header/footer boxes */
 
.wideBox {
  clear: both;
  text-align: center;
  margin: 70px;
  padding: 10px;
  background: #ebedf2;
  border: 1px solid #333;
}
 
.wideBox h1 {
  font-weight: bold;
  margin: 20px;
  color: #666;
  font-size: 1.5em;
}
 

 
/* The initial pile of unsorted cards */
 
#cardPile {
	background: url(graphics/sidebar.png) no-repeat;
	width: 283px;
	height: 645px;
	padding: 40px 8px 10px;
}

/* Slots for final card positions */

.puzzelImage {
	position: relative;
	top: 0;
	left: 4px;
	z-index: 2;
}

#cardSlots {
	z-index: 1;	
}

/* 5 puzzels */
#puzzel_puzzeltje1 #cardSlots {	background: url('graphics/puzzel1.begin.jpg') no-repeat; width: 753px; 	height: 506px; }
#puzzel_puzzeltje2 #cardSlots { background: url('graphics/puzzel2.begin.jpg') no-repeat; width: 753px; 	height: 506px; }   
#puzzel_puzzeltje3 #cardSlots { background: url('graphics/puzzel3.begin.jpg') no-repeat; width: 753px; height: 506px; }
#puzzel_puzzeltje4 #cardSlots { background: url('graphics/puzzel4.begin.jpg') no-repeat; width: 753px; 	height: 506px; }   
#puzzel_puzzeltje5 #cardSlots { background: url('graphics/puzzel5.begin.jpg') no-repeat; width: 753px; height: 506px; }


/* 5 puzzels finshid */

.imgFinished {
	display: none;
	position: absolute;	
	top: 181px;
	left: 4px 
}

#puzzel_puzzeltje1 #puzzelFinished { background: url('graphics/puzzel1.finish.jpg') no-repeat; width: 753px; height: 506px; z-index: 1; }
#puzzel_puzzeltje2 #puzzelFinished { background: url('graphics/puzzel2.finish.jpg') no-repeat; width: 753px; height: 506px; z-index: 1; }
#puzzel_puzzeltje3 #puzzelFinished { background: url('graphics/puzzel3.finish.jpg') no-repeat; width: 753px; height: 506px; z-index: 1; }
#puzzel_puzzeltje4 #puzzelFinished { background: url('graphics/puzzel4.finish.jpg') no-repeat; width: 753px; height: 506px; z-index: 1; }
#puzzel_puzzeltje5 #puzzelFinished { background: url('graphics/puzzel5.finish.jpg') no-repeat; width: 753px; height: 506px; z-index: 1; }

/* Individual cards and slots */
.card {
	cursor: move;
	xposition: relative;
	float: left;
}  
 
 
#cardPile div { 
  font-size: 50px;
  text-shadow: 0 0 3px #000;
}
 
#cardPile div.ui-draggable-dragging {
  
}
 
/* Individually coloured cards */
 
#puzzel_puzzeltje1 #card1.correct { background: url('graphics/puzzel-1/vlak-1-ok.png') no-repeat; position: relative; top:0; left:0;}
#puzzel_puzzeltje1 #card2.correct { background: url('graphics/puzzel-1/vlak-2-ok.png') no-repeat; }
#puzzel_puzzeltje1 #card3.correct { background: url('graphics/puzzel-1/vlak-3-ok.png') no-repeat; }
#puzzel_puzzeltje1 #card4.correct { background: url('graphics/puzzel-1/vlak-4-ok.png') no-repeat; }
#puzzel_puzzeltje1 #card5.correct { background: url('graphics/puzzel-1/vlak-5-ok.png') no-repeat; }
 
#puzzel_puzzeltje1 #card1 { background: url('graphics/puzzel-1/vlak-1.png') no-repeat; 	width: 115px; 	height: 100px;	}
#puzzel_puzzeltje1 #card2 { background: url("graphics/puzzel-1/vlak-2.png") no-repeat scroll 0 0 transparent;   height: 178px;   width: 111px; }
#puzzel_puzzeltje1 #card3 { background: url('graphics/puzzel-1/vlak-3.png') no-repeat; 	width: 88px; height: 200px; }
#puzzel_puzzeltje1 #card4 { background: url("graphics/puzzel-1/vlak-4.png") no-repeat scroll 0 0 transparent; height: 192px; width: 102px; }
#puzzel_puzzeltje1 #card5 { background: url('graphics/puzzel-1/vlak-5.png') no-repeat; width: 135px; height: 188px;} 
 
#puzzel_puzzeltje2 #card1.correct { background: url('graphics/puzzel-2/vlak-1-ok.png') no-repeat; }
#puzzel_puzzeltje2 #card2.correct { background: url('graphics/puzzel-2/vlak-2-ok.png') no-repeat; }
#puzzel_puzzeltje2 #card3.correct { background: url('graphics/puzzel-2/vlak-3-ok.png') no-repeat; }
#puzzel_puzzeltje2 #card4.correct { background: url('graphics/puzzel-2/vlak-4-ok.png') no-repeat; }
#puzzel_puzzeltje2 #card5.correct { background: url('graphics/puzzel-2/vlak-5-ok.png') no-repeat; }
 
#puzzel_puzzeltje2 #card1 { background: url('graphics/puzzel-2/vlak-1.png') no-repeat; width: 113px; height: 106px; }
#puzzel_puzzeltje2 #card2 { background: url('graphics/puzzel-2/vlak-2.png') no-repeat; width: 130px; height: 116px;}
#puzzel_puzzeltje2 #card3 { background: url('graphics/puzzel-2/vlak-3.png') no-repeat; width: 100px; height: 148px;}
#puzzel_puzzeltje2 #card4 { background: url('graphics/puzzel-2/vlak-4.png') no-repeat; width: 123px; height: 100px;}
#puzzel_puzzeltje2 #card5 { background: url('graphics/puzzel-2/vlak-5.png') no-repeat; width: 162px; height: 90px;} 

#puzzel_puzzeltje3 #card1.correct { background: url('graphics/puzzel-3/vlak-1-ok.png') no-repeat; }
#puzzel_puzzeltje3 #card2.correct { background: url('graphics/puzzel-3/vlak-2-ok.png') no-repeat; }
#puzzel_puzzeltje3 #card3.correct { background: url('graphics/puzzel-3/vlak-3-ok.png') no-repeat; }
#puzzel_puzzeltje3 #card4.correct { background: url('graphics/puzzel-3/vlak-4-ok.png') no-repeat; }
#puzzel_puzzeltje3 #card5.correct { background: url('graphics/puzzel-3/vlak-5-ok.png') no-repeat; }
 
#puzzel_puzzeltje3 #card1 { background: url('graphics/puzzel-3/vlak-1.png') no-repeat; width: 123px; height: 119px; }
#puzzel_puzzeltje3 #card2 { background: url('graphics/puzzel-3/vlak-2.png') no-repeat; width: 153px; height: 209px;}
#puzzel_puzzeltje3 #card3 { background: url('graphics/puzzel-3/vlak-3.png') no-repeat; width: 71px; height: 75px;}
#puzzel_puzzeltje3 #card4 { background: url('graphics/puzzel-3/vlak-4.png') no-repeat; width: 117px; height: 128px;}
#puzzel_puzzeltje3 #card5 { background: url('graphics/puzzel-3/vlak-5.png') no-repeat; width: 178px; height: 155px;} 

#puzzel_puzzeltje4 #card1.correct { background: url('graphics/puzzel-4/vlak-1-ok.png') no-repeat; }
#puzzel_puzzeltje4 #card2.correct { background: url('graphics/puzzel-4/vlak-2-ok.png') no-repeat; }
#puzzel_puzzeltje4 #card3.correct { background: url('graphics/puzzel-4/vlak-3-ok.png') no-repeat; }
#puzzel_puzzeltje4 #card4.correct { background: url('graphics/puzzel-4/vlak-4-ok.png') no-repeat; }
#puzzel_puzzeltje4 #card5.correct { background: url('graphics/puzzel-4/vlak-5-ok.png') no-repeat; }
 
#puzzel_puzzeltje4 #card1 { background: url('graphics/puzzel-4/vlak-1.png') no-repeat; width: 56px; height: 303px; }
#puzzel_puzzeltje4 #card2 { background: url('graphics/puzzel-4/vlak-2.png') no-repeat; width: 118px; height: 94px;}
#puzzel_puzzeltje4 #card3 { background: url('graphics/puzzel-4/vlak-3.png') no-repeat; width: 97px; height: 87px;}
#puzzel_puzzeltje4 #card4 { background: url('graphics/puzzel-4/vlak-4.png') no-repeat; width: 137px; height: 103px;}
#puzzel_puzzeltje4 #card5 { background: url('graphics/puzzel-4/vlak-5.png') no-repeat; width: 120px; height: 149px;} 

#puzzel_puzzeltje5 #card1.correct { background: url('graphics/puzzel-5/vlak-1-ok.png') no-repeat; }
#puzzel_puzzeltje5 #card2.correct { background: url('graphics/puzzel-5/vlak-2-ok.png') no-repeat; }
#puzzel_puzzeltje5 #card3.correct { background: url('graphics/puzzel-5/vlak-3-ok.png') no-repeat; }
#puzzel_puzzeltje5 #card4.correct { background: url('graphics/puzzel-5/vlak-4-ok.png') no-repeat; }
#puzzel_puzzeltje5 #card5.correct { background: url('graphics/puzzel-5/vlak-5-ok.png') no-repeat; }
 
#puzzel_puzzeltje5 #card1 { background: url('graphics/puzzel-5/vlak-1.png') no-repeat; width: 161px; height: 179px; }
#puzzel_puzzeltje5 #card2 { background: url('graphics/puzzel-5/vlak-2.png') no-repeat; width: 104px; height: 200px;}
#puzzel_puzzeltje5 #card3 { background: url('graphics/puzzel-5/vlak-3.png') no-repeat; width: 77px; height: 163px;}
#puzzel_puzzeltje5 #card4 { background: url('graphics/puzzel-5/vlak-4.png') no-repeat; width: 103px; height: 212px;}
#puzzel_puzzeltje5 #card5 { background: url('graphics/puzzel-5/vlak-5.png') no-repeat; width: 153px; height: 85px;}  

 
#puzzel1Finished .ui-state-disabled,
#puzzel2Finished .ui-state-disabled,
#puzzel3Finished .ui-state-disabled,
#puzzel4Finished .ui-state-disabled,
#puzzel5Finished .ui-state-disabled {
	display: none;	
}

/* puzzel 1 */ 
 
#puzzel_puzzeltje1 #slot_1 {
    height: 97px;
    left: 71px;
    position: absolute;
    top: 275px;
    width: 100px;
    z-index: 5;
} 
#puzzel_puzzeltje1 #slot_2 {
    height: 173px;
    left: 162px;
    position: absolute;
    top: 110px;
    width: 123px;
    z-index: 5;
}
#puzzel_puzzeltje1 #slot_3 {
	height: 208px;
    left: 269px;
    position: absolute;
    top: 176px;
    width: 87px;
    z-index: 5;
}
#puzzel_puzzeltje1 #slot_4 {
    height: 211px;
    left: 421px;
    position: absolute;
    top: 176px;
    width: 100px;
    z-index: 5;
}
#puzzel_puzzeltje1 #slot_5 {
    height: 200px;
    left: 537px;
    position: absolute;
    top: 230px;
    width: 140px;
    z-index: 5;
}   

/* puzzel 2 */
	
#puzzel_puzzeltje2 #slot_1 {
    height: 97px;
    left: 58px;
    position: absolute;
    top: 205px;
    width: 100px;
    z-index: 5;
}
#puzzel_puzzeltje2 #slot_2 {
    height: 112px;
    left: 174px;
    position: absolute;
    top: 164px;
    width: 123px;
    z-index: 5;
}
#puzzel_puzzeltje2 #slot_3 {
    height: 140px;
    left: 330px;
    position: absolute;
    top: 222px;
    width: 64px;
    z-index: 5;
}
#puzzel_puzzeltje2 #slot_4 {
    height: 100px;
    left: 545px;
    position: absolute;
    top: 352px;
    width: 123px;
    z-index: 5;
}
#puzzel_puzzeltje2 #slot_5 {
    height: 82px;
    left: 534px;
    position: absolute;
    top: 223px;
    width: 154px;
    z-index: 5;
}   	

/* puzzel 3 */

#puzzel_puzzeltje3 #slot_1 {
    height: 97px;
    left: 36px;
    position: absolute;
    top: 185px;
    width: 118px;
    z-index: 5;
}
#puzzel_puzzeltje3 #slot_2 {
    height: 202px;
    left: 146px;
    position: absolute;
    top: 264px;
    width: 144px;
    z-index: 5;
} 
#puzzel_puzzeltje3 #slot_3 {
    height: 67px;
    left: 458px;
    position: absolute;
    top: 182px;
    width: 51px;
    z-index: 5;
}  
#puzzel_puzzeltje3 #slot_4 {
    height: 125px;
    left: 552px;
    position: absolute;
    top: 95px;
    width: 110px;
    z-index: 5;
} 
#puzzel_puzzeltje3 #slot_5 {
    height: 149px;
    left: 503px;
    position: absolute;
    top: 269px;
    width: 163px;
    z-index: 5;
}  

/* puzzel 4 */ 	 

#puzzel_puzzeltje4 #slot_1 {
	height: 303px;
    left: 9px;
    position: absolute;
    top: 51px;
    width: 56px;
    z-index: 5;
}
#puzzel_puzzeltje4 #slot_2 {
	height: 94px;	
    left: 122px;
    position: absolute;
    top: 150px;
    width: 118px;
    z-index: 5;
}

#puzzel_puzzeltje4 #slot_3 { height: 87px; left: 205px; position: absolute; top:
366px; width: 97px; z-index: 5; } #puzzel_puzzeltje4 #slot_4 { height: 103px;
left: 421px; position: absolute; top: 22px; width: 137px; z-index: 5; }
#puzzel_puzzeltje4 #slot_5 { height: 149px; left: 419px; position: absolute;
top: 207px; width: 120px; z-index: 5; }

/* puzzel 5 */ 	 

#puzzel_puzzeltje5 #slot_1 {
	height: 179px;
    left: 14px;
    position: absolute;
    top: 248px;
    width: 161px;
    z-index: 5;
} 	

#puzzel_puzzeltje5 #slot_2 {
	height: 200px;
    left: 317px;
    position: absolute;
    top: 221px;
    width: 104px;
    z-index: 5;
} 	

#puzzel_puzzeltje5 #slot_3 {
	height: 163px;
    left: 422px;
    position: absolute;
    top: 239px;
    width: 77px;
    z-index: 5;
}   
 
#puzzel_puzzeltje5 #slot_4 {
	height: 212px;
    left: 505px;
    position: absolute;
    top: 200px;
    width: 103px;
    z-index: 5;
}   
 
#puzzel_puzzeltje5 #slot_5 {
	height: 85px;
    left: 380px;
    position: absolute;
    top: 96px;
    width: 153px;
    z-index: 5;
}  

/* volgende puzzel */
#doorgaanButton {
	background: url(graphics/button-nogmaals.png) no-repeat;
	height: 67px;
	width: 207px;
   	display: none;
   	position: absolute;
   	top: 585px;
   	left: 805px;
   	cursor: pointer;
   	text-indent: -9999px;
   	-webkit-transition-property: background;   
	-webkit-transition-duration: 1s;   
	-webkit-transition-timing-function: ease-in;   
}
#doorgaanButton:hover {
	background: url(graphics/button-nogmaals-ac.png) no-repeat;	
}

/* =============================================================================
   Clearfix
   ========================================================================== */

.clear:before, .clear:after { content: ""; display: table; }
.clear:after { clear: both; }
.clear { *zoom: 1; }