.quiz .preloader{
	padding:20px 0;
	text-align:center;
	background:url(../img/quiz/preloader.gif) no-repeat top center;
}
/*###############################################################################*/
/* Toets formulier 																 */
/*###############################################################################*/
#quizForm, .quizLoginForm{
	padding:10px 0;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
}
/*###############################################################################*/
/* Login scherm toets 															 */
/*###############################################################################*/
.quizLoginForm .dbFormFields{
	padding:0 0 15px 0;
}
.quizLoginForm .formInputRow{
	clear:both;
}
.quizLoginForm .formLabel{
	padding:0 0 0 0;
	width:20%;
	float:left;
	clear:left;

}
.quizLoginForm .formInput{
	padding:0 0 10px 0;
	text-align:left;
	width:80%;
	float:right;
	clear:right;

}
.quizLoginForm input.text,
.quizLoginForm textarea,
.quizLoginForm select{
	width:250px;
}
/*###############################################################################*/
/* Bronnen 																		 */
/*###############################################################################*/
#questionSourceButtons{
	padding:1em 0 1.5em 0;
}
#questionSourceButtons .active{
	font-weight:bold;
	color:#FFF;
}
#questionSourceButtons a{
	margin:0 0.3em 0 0;
	padding:0.3em;
	display:block;
	float:left;
	width:1em;
	height:1em;
	color:#FFF;
	background:#CCC;
	text-align:center;
}
#questionSourceButtons a:hover{
	text-decoration:none;
}
#questionImgPreviewArea{
	width:100%;
	padding:0;
	margin:1em 0;
	clear:both;
}
div.quiz h3{
	margin:5px 0;
	padding:2px 0;
	color:#000;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
}
.preview{
	background:#FFF;
	width:96px;
	height:96px;
	text-align:center;
	vertical-align:middle;
}
.question{
	padding:10px 0 0 0;
}
.questionNumberArea{
	padding:10px;
	width:7%;
	text-align:center;
	background:#CCC;
	border-right:5px solid #FFF;
}
.questionNumber{
	font-weight:bold;
}
.questionTools{
	padding:10px 0 0 0;
}
.questionTools a img{
	border:none;
}
.questionTitle {
	margin:0 0 10px 0;
	padding:10px;
	border:1px solid #CCC;
	font-weight:bold;
}
.questionText {
	padding:0 0 5px 0;
}
.questionArea {
	margin:0;
	padding:10px;
	font-weight:normal;
	border:1px solid #CCC;
}
.questionText input,
.questionText select,
.questionText textarea{
	font-weight:normal;
}
.multiplechoiceAnswerRow{
	padding:0 0 5px 0;
}
/*###############################################################################*/
/* Matchinglist 																 */
/*###############################################################################*/
ul.matchingColumnLeft,
ul.matchingColumnRight{
	display:block;
	padding:0;
	margin:0;
}
ul.matchingColumnLeft li,
ul.matchingColumnRight li{
	list-style:none;
	height:50px;
	overflow:auto;
	display:block;
	padding:2px;
	border:1px solid #000;
	margin:4px;
}
ul.matchingColumnRight li{
	cursor:move;
}
/*###############################################################################*/
/* Opties onder toetsvraag (memo) 												 */
/*###############################################################################*/

/* quizOptions div is container div voor de opties */
#questionOptions{
	padding:15px 0 0 0;
}
.questionOptionHeading{
	background:#CCC;
	padding:5px;
}
.questionOptionHeading a:link,
.questionOptionHeading a:visited{
	display:block;
	font-weight:bold;
	color:#000;
}
.questionOption{
	border:1px solid #000;
	padding:10px;
}
/* EINDE opties onder toetsvraag */
.quizFooter{
	clear:both;
	width:100%;
}
.quizFooter .quizFooterBtn{
	float:left;
	padding:0 5px 0 0;
}
.quizFooter .quizFooterBtn input{
	width:100px;
}
.quizFooterText{
	font-weight:bold;
	color:#CCC;
	float:right;
}

/*###############################################################################*/
/* Tips en commentaar 															 */
/*###############################################################################*/
#modalContainer{
	background-color:transparent;
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:10000;
	background-image:url(fake.png); /* required by IE to prevent actions on lower z-index elements */
}

#alertBox{
	position:absolute;
	width:350px;
	margin:50px 0 0 0;
	border:1px solid #000;
	background:#FFF;
}
#alertBox h1 {
	text-align:center;
	top:auto;
	margin:0;
	font-size:1em;
	font-weight:bold;
	background-color:#CCC;
	color:#000;
	padding:2px 0 2px 5px;
}

#alertBox p {
	font-size:1em;
	padding:5px;
	text-align:left;
}

#alertBox #closeBtn {
	display:block;
	position:relative;
	margin:5px auto;
	padding:3px;
	border:1px solid #000;
	width:70px;
	text-transform:uppercase;
	text-align:center;
	color:#000;
	font-weight:bold;
	background-color:#CCC;
	text-decoration:none;
}
/*###############################################################################*/
/* Disabled inputs ect. 														 */
/*###############################################################################*/
input[disabled],
select[disabled],
textarea[disabled]{
	color:#CCC;
	background:#FFF;
}
ul.matchingColumnRight_disabled{
	display:block;
	padding:0;
	margin:0;
}
ul.matchingColumnRight_disabled li{
	list-style:none;
	height:50px;
	overflow:auto;
	display:block;
	padding:2px;
	border:1px solid #CCC;
	color:#CCC;
	margin:4px;
}
