body {
	background: #fff;

	font-family: 'Lucida Grande', Arial, Helvetica;
	color: #000;
	font-size: 12px;
}


.iqWrapper {
	position: absolute;
	left: 140px;
	top: 40px;
	overflow: visible;
	background-color: #FF0000;
	z-index: 1;
}

select {
	margin: 1px;
}

.question_main, .popup_main, .question_embed_main {
	position: absolute;
	width: 500px;
	height: 500px;
	border: 1px solid #2a2a2f;

	background: #ffffff;
	left: 0px;
	top: 0px;

	padding: 10px 10px 32px 10px;
	overflow: hidden;
}

.question_embed_main {
	position: relative;
	display: block;
	border: 1px solid #2a2a2f;
	padding: 10px 10px 0px 10px;
	border-bottom: 0px;
}

.answer_main, .feedback_main, .answer_embed_main, .feedback_embed_main {
	position: absolute;
	width: 500px;
	height: 500px;
	border: 1px solid #2a2a2f;
	border-top: 0px;

	background: #ffffff;
	left: 0px;

	padding: 10px 10px 32px 10px;
	overflow: hidden;
}

.answer_embed_main, .feedback_embed_main {
	position: relative;
	display: block;
	border: 1px solid #2a2a2f;
	border-top: 0px;
	padding: 10px 10px 32px 10px;
}

.answer_main, .feedback_main {
	margin-top: -29px;
}

.popup_main {
	left: 100px;
	top: 100px;
	margin-top: -1px;
	cursor: pointer;
	padding: 26px 10px 32px 10px;
	z-index: 999;
}

.popup_drag {
	height: 16px;
	width: 100%;
	cursor: move;
	position: absolute;
	top: 0px;
	left: 0px;
	background: #dddddd;
}

.popup_drag_close {
	height: 16px;
	width: 16px;	
	cursor: hand;
	position: absolute;
	right: 0px;
	top: 0px;
	line-height: 16px;
	text-align: center !important;
	font-size: 12px;
	color: #2a2a2f;
}

.question_text, .answer_text, .feedback_text, .popup_text,
.question_embed_text, .answer_embed_text, .feedback_embed_text {
	overflow: auto;
	position: relative;

	font-family: Lucida Grande, Arial, Helvetica;
	color: #000000;
	font-size: 12px;
	display: block;
}


.question_text  ol, .answer_text ol, .feedback_text ol, .popup_text ol,
.question_embed_text ol, .answer_embed_text ol, .feedback_embed_text ol { 
	list-style-type: decimal; 
	list-style-position: outside;
}

.question_text ul, .answer_text ul, .feedback_text ul, .popup_text ul,
.question_embed_text ul, .answer_embed_text ul, .feedback_embed_text ul { 
	list-style-type: disc;
	list-style-position: outside;
} 

.question_text  a, .answer_text a, .feedback_text a, .popup_text a,
.question_embed_text a, .answer_embed_text a, .feedback_embed_text a { 
	text-decoration: underline;
	cursor: pointer;
}


.question_button, .answer_button, .feedback_button, .popup_button {
	position: relative;
	width: 100%;

	color: #000000;
	font-size: 12px;
	margin-top: 4px;
        clear: both;
}

.button_left {
	float: left;
	height: 18px;
}

.button_ok {
	float: right;

	border: 1px solid #dddddd;
	background: #FFFFFF;
	background-image: url(transparant.gif);
	text-align: center !important;;
	height: 16px;
	width: 100px;
	cursor: pointer;
	margin-left: 4px;
}
.button_ok:hover {
	border: 1px solid #18181b;
	background: #dddddd;
}

.button_stop {
	float: right;

	border: 1px solid #dddddd;
	background: #FFFFFF;
	background-image: url(transparant.gif);
	text-align: center !important;
	height: 16px;
	width: 100px;
	cursor: pointer;
	margin-left: 4px;
}
.button_stop:hover {
	border: 1px solid #18181b;
	background: #dddddd;
}

.form_check, .form_check_selected {
	position: absolute;
	left: 6px;
	top: 6px;

	background-color: #ffffff;
	border: 1px solid #18181b;
	height: 8px;
	width: 8px;

	font-size: 1px;
	line-height: 1px;
}

.form_radio, .form_radio_selected {
	position: absolute;
	left: 6px;
	top: 6px;
	height: 10px;
	width: 10px;

	font-size: 1px;
	line-height: 1px;
	background-image: url(radio.gif);
}

.form_check_selected {
	background-color: #000000;
	border: 1px solid #18181b;
}

.form_radio_selected {
	background-position: 10px 0px;
}

.form_radio {
	background-position: 0px 0px;
}

.form_rows {
	position: relative;
	display: block;
}
.form_row {
	position: relative;
/*	line-height: 22px;*/
	display: block;
	overflow: visible;

	font-size: 12px;
	text-align: left !important;

	cursor: pointer;

	background: #ffffff;
	color: #444444;
}

.form_row_text {
	position: relative;
	padding: 0px;
	padding-left: 26px;
	padding-top: 2px;
	padding-bottom: 2px;
/*	line-height: 22px;*/
	text-align: left !important;
	font-size: 12px;
}

.form_row_over {
	position: relative;
	display: block;
	overflow: visible;

	cursor: pointer;

	background: #dddddd;
	color: #000000;
}

.form_row_ok {
	position: relative;
	display: block;
	overflow: visible;

	cursor: pointer;

	color: #000000;
	background: #88ff88;
}
.form_row_false {
	position: relative;
	display: block;
	overflow: visible;

	cursor: pointer;

	color: #000000;
	background: #ff8888;
}


.form_field {
	background: #FFFFFF;
	border: 1px solid #18181b;
}
.form_field_ok {
	background: #DDFFDD;
}
.form_field_false {
	background: #FFDDDD;
}

.feedback_ok {
	background: #DDFFDD;
}

.feedback_false {
	background: #FFDDDD;
}

.feedback_feedback {
	margin-left: 16px;
}

.disabled_div {
	background-image: url(transparant.gif);
	left:0px;
	top:0px;
}

/* progress bar */


.progress_empty, .progress_done, .progress_current {
	margin-right: 1px;
	float: left;
	height: 8px;
	line-height: 8px;
	margin-top: 6px;
}

.progress_empty {
	background: #666;
}

.progress_done {
	background: #bbb;
	cursor: pointer;
}

.progress_current {
	background: #fff;
	cursor: pointer;
}


/* match specifiek */

.match_container {

	text-align: center !important;
/*	width: 480px; 
	height: 100px; */
	position: relative;
}



.match_left {

	margin: 2px;
/*	width: 156px;*/

	left: 0px;
	top: 0px;

	height: 100%;
	position: absolute;
	text-align: center !important;
}



.match_drop {

	margin: 2px;
	background-color: #CCCCCC;
	
/*	width: 156px;
	left: 160px; */

	top: 0px;

	height: 100%;
	position: absolute;
}



.match_right {
	margin: 2px;
/*	width: 156px;
	left: 320px;*/

	top: 0px;
	height: 100%;
	position: absolute;
	text-align: center !important;
}

.leftOption {
	margin: 2px;
	background-color: #FFF;
	border: 1px solid black;
	text-align: center !important;	
}

.drag {
	cursor: move;
	background-color: #FFF;
	border: 1px solid black;
	position: absolute;
	text-align: center !important;
}

.droppable {
	background-color: #CCC;
	border: 1px solid  #CCC;

	margin: 2px;
}

.match_drop .over {
	background-color: #EEE;
}

.match_container .false {
	background-color: #F88;
}

.match_container .correct {
	background-color: #8F8;
}

.scorebar {
	position: relative;
	left: 40px;
	width: 500px;
	display: block;
	height: 14px;
}
.scorebar_none, .scorebar_active, .scorebar_correct, .scorebar_sufficient, .scorebar_wrong {
	float: left;
	width: 48px;
	height: 12px;

	border: 1px solid #888;
	background-color: #FFF;
}

.scorebar_active {
	border: 1px solid #FFF;
	background-color: #AAA;
}
.scorebar_correct {
	border: 1px solid #888;
	background-color: #AFA;
}
.scorebar_sufficient {
	border: 1px solid #888;
	background-color: #FFA;
}

.scorebar_wrong {
	border: 1px solid #888;
	background-color: #FAA;
}

/* tbv zoomImage */
.totalContainer {
	width: 750px;
	height: 500px;
	display: block;
	position: relative;
	top: 0;
	left: 0;
}

.bigFrame {
	position: absolute;
	width: 500px;
	height: 375px;
	border: solid 1px black;
	z-index: 5;
	overflow: hidden;
}

.smallFrame {
	position: absolute;
	left: 520px;
	top: 0px;
	border: solid 1px #000000;
	padding: 0px;
	z-index: 5;
	width: 200px;
	overflow: hidden;
}

.zoomImage {
	z-index: -10;
}

.imageContainer {
	z-index: 1;
	position: absolute;

	padding: 0px;
	margin: 0px;
}

.canvasContainer {
	z-index: 10;
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: url(transparant.gif);
}

.smallImage{
	width: 200px;
}

.dragFrame {
	position: absolute;
	top: 20px;
	left: 40px;
	width: 120px;
	height: 100px;
	border: solid 1px #FF0000;
	cursor: pointer;
}

div.slider {
	position: relative;
	top: 170px;
	left: 522px;
	background: #CCCCCC none repeat scroll 0% 0%;
	height: 16px;
	width: 200px;
	cursor: pointer;
}

div.knob {
	background: #444444 none repeat scroll 0% 0%;
	height: 16px;
	width: 10px;
}

.overlay {
	position: absolute;
	width: 400px;
	padding: 10px;
	z-index: 100;
}

.overlay_text {
	position: relative;
	color: #fff;
	display: inline;
}

.overlay_background {
	background-color: #000;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
}

.clickarea {
	background-image: url(transparant.gif);
}

.hotspot:hover {
	border: dotted 1px white;
}

.clickpointgrey {
	cursor: default;
	background-image: url(pointclick.gif);
	text-align: center;
	width: 16px;
	height: 16px;
	background-position: 0px 0px;
	z-index: 15;
}

.clickpointgreen {
	cursor: default;
	background-image: url(pointclick.gif);
	text-align: center;
	width: 16px;
	height: 16px;
	background-position: 48px 0px;
}

.clickpointred {
	cursor: default;
	background-image: url(pointclick.gif);
	text-align: center;
	width: 16px;
	height: 16px;
	background-position: 32px 0px;
	z-index: 15;
}

.sortListVertical_container {
	overflow: hidden;
}

.sortListVertical {
	overflow: hidden;
	margin-bottom: 5px;
	position: relative;
	cursor: move;
	overflow: hidden;
	margin: 5px;
	background-color: #FFF;
	padding: 4px;
	border: solid 1px #888;
}

.sortListHorizontal_container {
	overflow: hidden;
	display: block;
	position: relative;
}

.sortListHorizontal {
	overflow: hidden;
	position: relative;
	float: left;
	cursor: move;
	top: 0px;
	margin: 5px;
	background-color: #FFF;
	padding: 4px;
	border: solid 1px #888;
	text-align: center !important;
}


.lichtbakPreview {
	width: 98%;
	height: 250px;
	border: solid 1px black;
	text-align: center;
}

.lichtbakPreview div{
	margin: auto;
}

.lichtbakPreview img{
	cursor: pointer;
}

.lichtbakPreviewText {
	text-align: left;
	overflow: auto;
}

.lichtbakMiniaturen {
	width: 98%;
	overflow-x: scroll;
	overflow-y: hidden;
	border: solid 1px black;
	white-space: nowrap;
}

.miniatuur-tabel {
	border-spacing: 5pt;
	text-align: center;
}

.miniatuur {
	border: solid 2px #888;
	margin: 5px;
	white-space:normal;
	background-color: #FFF;
}

.miniatuur:hover {
	cursor: pointer;
	border: solid 1px black;
}

.miniatuurSelected, .miniatuurSelected:hover {
	border: solid 1px blue;
}

.miniatuur div {
	margin: 0 auto;
	background-color: #FFF;
}

.miniatuurSelected, .miniatuurSelected div {
	background-color: #DDF;
}

.tool-tip {
	z-index: 13000;
	background-color: #fff;
	border: solid 1px black;
}

.tip-title {
	font-weight: bold;
	font-size: 11px;
	margin: 5px;
	padding: 8px 8px 4px;
}

.tip-text {
	font-size: 11px;
	padding: 4px 8px 8px;
}

.targetContainer {
	overflow: hidden;
	display: block;
	position: relative;
}

.targetHorizontal {
	position: relative;
	float: left;
	top: 0px;
	left: 0px;
	margin-right: 5px;
	border: solid 1px black;
	overflow: hidden;
	display: block;
}

.stackCardhorizontal, .stackCard, .stackCardvertical {
	margin-right: 5px;
	margin-top: 5px;
	overflow: hidden;
	border: solid 1px black;
	background-color: #FFF;
	padding: 2px;
	cursor: move;
	display: block;
	height: 400;
	text-align: center !important;
}

.stackCardhorizontal {
	float: left;
}
.stackCard {
	position: absolute;
	top: 0;
	left: 0;
}

.stackCardvertical {
	clear: right;
}


.stackCardSpread {
	position: relative;
	margin: 2px;
	float: left;
	top: 0;
	left: 0;
	overflow: hidden;
	border: solid 1px black;
	background-color: #FFF;
	padding: 2px;
	cursor: move;
}

.stackCard image {

}

.targetContainer, .targetHorizontal, .stackCardhorizontal, .stackCard, .stackCardvertical,
.drag, .droppable, .stackCardSpread,
.match_container, .match_left, .match_drop, .match_right, 
.question_main, .answer_main, .feedback_main, .popup_main,
.question_text, .answer_text, .feedback_text, .popup_text,
.question_button, .answer_button, .feedback_button, .popup_button {
	BOX-SIZING: content-box; 
	-moz-box-sizing: content-box; 
	-webkit-box-sizing: content-box;
}