@font-face{font-family:'Otib';src:url('../img/otib-webfont.eot');src:url('../img/otib-webfont.eot?#iefix') format('embedded-opentype'),
url('../img/otib-webfont.woff') format('woff'),
url('../img/otib-webfont.ttf') format('truetype'),
url('../img/otib-webfont.svg#Otib') format('svg');font-weight:normal;font-style:normal;}

.QOverlay {
	background-color: #FFF;
	z-index: 9999;
}

.QLoader {
	background-color: #75338a;
	height: 5px;
}

.QAmt {
	color:#75338a;
	font-family: 'Otib', Arial; font-style: oblique; font-weight: normal; text-transform: uppercase;
	font-size:40px;
	line-height:50px;
	height:50px;
	width:100px;
	margin:-60px 0 0 -50px;
}

body { margin:0px;background-color: #FFF; color: #8f3fa9;text-align:center;}
#bgLeft { background: no-repeat 0px -110px url(../img/bgleft.png); width: 293px; height: 635px; left: 0px; top: 0px; position: absolute; z-index: 101; } 
#bgRight { background: no-repeat 0px -110px url(../img/bgright.png); width: 802px; height: 635px; right: 0px; top: 0px; position: absolute; z-index: 100; } 
#bgBottom { background: repeat-x url(../img/footer.png); width: 100%; height: 200px; left: 0px; top: 635px; position: absolute; z-index: 100; } 
#welcomeBox { width: 530px; height:245px; text-align:left;position:relative;top:205px;margin-left:auto;margin-right:auto; z-index: 190;} 
#btnBasis { cursor: hand; cursor: pointer; width: 247px; height: 245px; left: 0px; top: 0px; position: absolute; z-index: 200;}
#btnVoort { cursor: hand; cursor: pointer; width: 247px; height: 245px; left: 282px; top: 0px; position: absolute; z-index: 200;}
#btnBasisAct { cursor: hand; cursor: pointer; width: 247px; height: 245px; left: 0px; top: 0px; position: absolute; z-index: 205;}
#btnVoortAct { cursor: hand; cursor: pointer; width: 247px; height: 245px; left: 282px; top: 0px; position: absolute; z-index: 205;}
#btnBestel { cursor: hand; cursor: pointer; width: 521px; height: 117px; left: 0px; top: 280px; position: absolute; z-index: 205;}
#bestel { width: 501px; height: 97px; left: 10px; top: 290px; position: absolute; z-index: 210; background-color: #893aa6; font-family: 'Otib', Arial; font-size: 10pt; color: #FFF; text-align: center;} 
#bestel p { line-height: 12pt; }
	
#logo { width: 255px; height: 240px; left: 0px; top: 0px; position: absolute; cursor: hand; cursor: pointer; } 		
	
#otib { width: 52px; height: 52px; top: 33px; right: 27px; position: absolute; z-index: 700; cursor: hand; cursor: pointer;}	
	
#introBtnBasis, #introBtnVoortgezet { background: no-repeat url(../img/btnIntro.png); width: 104px; height: 100px; top: 130px; right: 10px; position: absolute; cursor: hand; cursor: pointer; z-index: 550;}	

#uitlegBtn { background: no-repeat url(../img/btnHandleiding.png); width: 104px; height: 100px; top: 255px; right: 10px; position: absolute; cursor: hand; cursor: pointer; z-index: 550;}	
#uitleg { border-top: 1px solid #cecfdb; border-left: 1px solid #cecfdb; border-right: 1px solid #cecfdb; width: 660px; height: 470px; left: 62px; top: 9px; position: absolute; background-color: #75338a; z-index: 600; color: #FFF; font-family: 'Otib', Arial; font-size: 9pt; overflow: auto;}
#uitleg h2, #uitleg p { margin: 15px 15px 0px 15px; }
a, a:visited { color: #FFF;}

#gameTypeToggle {width:381px;height:26px;text-align:left;position:relative;top:1px;margin-left:auto;margin-right:auto;z-index: 600;}
#gameTypeBasis {background: url(../img/topBasis.png); width:381px;height:26px;left: 0px; top: 0px; position: absolute; z-index: 601;}
#gameTypeVoortgezet {background: url(../img/topVoortgezet.png);width:381px;height:26px;left: 0px; top: 0px; position: absolute;z-index: 601;}
#gameToggleBasis {cursor: hand; cursor:pointer; width: 180px; height: 26px; left: 0px; top: 0px; position: absolute; z-index: 610;}
#gameToggleVoortgezet {cursor: hand; cursor:pointer; width: 180px; height: 26px; left: 201px; top: 0px; position: absolute; z-index: 610;}

#gameBox { z-index: 569;}
#gamePlayerBox { overflow: hidden; background: no-repeat url(../img/player.png); width: 828px; height: 580px; text-align:left;position:relative;top: 0px; margin-left:auto;margin-right:auto; z-index: 570;}
#gamePlayer { border-left: 1px solid #cecfdb; border-right: 1px solid #cecfdb; border-top: 1px solid #cecfdb; width: 660px; height: 370px; left: 62px; top: 9px; position: absolute; background-color: #75338a; z-index: 570;}
.gamePlayer { border-left: 1px solid #cecfdb; border-right: 1px solid #cecfdb; border-top: 1px solid #cecfdb; width: 660px; height: 370px; left: 62px; top: 9px; position: absolute; background-color: #75338a; z-index: 570;}
#gameControls { border-left: 1px solid #cecfdb; border-right: 1px solid #cecfdb;  border-bottom: 1px solid #cecfdb; background: url(../img/controls.png); width: 660px; height: 96px; left: 62px; top: 380px; position: absolute; background-color: #75338a; z-index: 570;}
#gameControlsNotactive { background-color: #75338a; width: 660px; height: 96px; left: 63px; top: 380px; position: absolute; background-color: #75338a; z-index: 570;}

#gamePlayer p { width: 660px; height: 300px; margin: 0px; padding: 0px; left: 0px; top: 202px; position: absolute; font-family: 'Otib', Arial; font-size: 9pt; color: #FFF; text-align: center;}

#gCplay { cursor: hand; cursor: pointer; width: 104px; height: 37px; left: 222px; top: 47px; position: absolute; z-index: 571;}
#gCplay:hover { background: no-repeat url(../img/cGplayAct.png);}
#gCstop { cursor: hand; cursor: pointer; width: 103px; height: 37px; left: 326px; top: 47px; position: absolute; z-index: 571;}
#gCstop:hover { background: no-repeat url(../img/cGstopAct.png);}
#gCfullscreenI { cursor: hand; cursor: pointer; width: 22px; height: 15px; left: 522px; top: 60px; position: absolute; z-index: 571;}
#gCfullscreenI:hover { background: no-repeat url(../img/cGfullscreenAct.png);}
#gCreplay { cursor: hand; cursor: pointer; width: 23px; height: 15px; left: 475px; top: 60px; position: absolute; z-index: 571;}
#gCreplay:hover { background: no-repeat url(../img/cGreplayAct.png);}
#gCmute { cursor: hand; cursor: pointer; width: 18px; height: 12px; left: 130px; top: 58px; position: absolute; z-index: 571;}
#gCvol { cursor: hand; cursor: pointer; width: 18px; height: 12px; left: 157px; top: 58px; position: absolute; z-index: 571;}
#gCposition { color: #fff; font-family: 'Otib', Arial; font-size: 8pt; width: 50px; height: 12px; left: 20px; top: 20px; position: absolute; z-index: 571;}
#gCtimeleft { color: #fff; font-family: 'Otib', Arial; font-size: 8pt; width: 50px; height: 12px; left: 610px; top: 20px; position: absolute; z-index: 571;}


#gameBack { cursor: hand; cursor: pointer; width: 61px; height: 82px; left: 0px; top: 214px; position: absolute; z-index: 575;}
#gameNext { cursor: hand; cursor: pointer; width: 60px; height: 82px; left: 723px; top: 214px; position: absolute; z-index: 575;}

#gameActiveQ { background: url(../img/activeQ.png); width: 129px; height: 128px; left: 20px; top: 376px; position: absolute; z-index: 560;}
#gameActiveNum { color: #FFF; font-family: Arial; font-size: 34pt; font-weight: bold; width: 100px; height: 60px; left: 13px; top: 44px; position: absolute; z-index: 561; overflow: hidden; text-align: center;}

#gameVragenVoorbeeld { cursor: hand; cursor: pointer; background: url(../img/btnVoorbeeld.png); width: 129px; height: 128px; left: 20px; top: 376px; position: absolute; z-index: 559;}

#gameVragenBtnLeft { cursor: hand; cursor: pointer; background: url(../img/btnLeft.png); width: 63px; height: 85px; top: 540px; left: 0px; position: absolute; z-index: 550;}  
#gameVragenBtnRight { cursor: hand; cursor: pointer; background: url(../img/btnRight.png); width: 63px; height: 85px; top: 540px; right: 0px; position: absolute; z-index: 550;} 

#gameVragenBasis, #gameVragenVoortgezet { width: 974px; height: 146px; top: -106px; text-align:left;position:relative;margin-left:auto;margin-right:auto; z-index: 1000;}

#qBasis1-12, #qVoortgezet1-12 { background: no-repeat url(../img/q1-12.png); width: 974px; height: 146px; left: 0px; top: 0px; position: absolute; z-index: 1001;}
#qBasis13-24, #qVoortgezet13-24 { background: no-repeat url(../img/q13-24.png); width: 974px; height: 146px; left: 0px; top: 0px; position: absolute; z-index: 1001;}
#qBasis25-36, #qVoortgezet25-36 { background: no-repeat url(../img/q25-36.png); width: 974px; height: 146px; left: 0px; top: 0px; position: absolute; z-index: 1001;}
#qBasis37-48, #qVoortgezet37-48 { background: no-repeat url(../img/q37-48.png); width: 974px; height: 146px; left: 0px; top: 0px; position: absolute; z-index: 1001;}
#qBasis49-60, #qVoortgezet49-60 { background: no-repeat url(../img/q49-60.png); width: 974px; height: 146px; left: 0px; top: 0px; position: absolute; z-index: 1001;}

.gameVraagPlek1 { cursor: hand; cursor: pointer; width: 82px; height: 86px; left: 7px; top: 30px; position: absolute; z-index: 1010; }
.gameVraagPlek2 { cursor: hand; cursor: pointer; width: 78px; height: 86px; left: 88px; top: 40px; position: absolute; z-index: 1010; }
.gameVraagPlek3 { cursor: hand; cursor: pointer; width: 78px; height: 86px; left: 166px; top: 47px; position: absolute; z-index: 1010; }
.gameVraagPlek4 { cursor: hand; cursor: pointer; width: 80px; height: 86px; left: 245px; top: 40px; position: absolute; z-index: 1010; }
.gameVraagPlek5 { cursor: hand; cursor: pointer; width: 78px; height: 86px; left: 325px; top: 30px; position: absolute; z-index: 1010; }
.gameVraagPlek6 { cursor: hand; cursor: pointer; width: 78px; height: 86px; left: 405px; top: 20px; position: absolute; z-index: 1010; }
.gameVraagPlek7 { cursor: hand; cursor: pointer; width: 76px; height: 86px; left: 484px; top: 10px; position: absolute; z-index: 1010; }
.gameVraagPlek8 { cursor: hand; cursor: pointer; width: 78px; height: 86px; left: 562px; top: 4px; position: absolute; z-index: 1010; }
.gameVraagPlek9 { cursor: hand; cursor: pointer; width: 78px; height: 86px; left: 642px; top: 10px; position: absolute; z-index: 1010; }
.gameVraagPlek10 { cursor: hand; cursor: pointer; width: 78px; height: 86px; left: 720px; top: 20px; position: absolute; z-index: 1010; }
.gameVraagPlek11 { cursor: hand; cursor: pointer; width: 78px; height: 86px; left: 799px; top: 30px; position: absolute; z-index: 1010; }
.gameVraagPlek12 { cursor: hand; cursor: pointer; width: 78px; height: 86px; left: 878px; top: 40px; position: absolute; z-index: 1010; }

.gameVraagPlek1:hover,.gameVraagPlek2:hover,.gameVraagPlek3:hover,.gameVraagPlek4:hover,.gameVraagPlek5:hover,.gameVraagPlek6:hover,.gameVraagPlek7:hover,.gameVraagPlek8:hover,.gameVraagPlek9:hover,.gameVraagPlek10:hover,.gameVraagPlek11:hover,.gameVraagPlek12:hover  { background: no-repeat 4px 7px url(../img/qBtnActive.png); cursor: pointer; cursor: hand;}

.gameVraagActive {background: no-repeat 4px 7px url(../img/qBtnActive.png);}