#maincontainer #caption, #points
{
	position: absolute;
	top: 0;
	padding: 0;
	margin: 0;
}
#navigationbar #caption
{
	left: 10px;
	line-height: 32px; /* same height as points-image */
}
#points
{
	left: 400px;
}
#containernormal, #containercase
{
	position: relative;
	width: 1000px;
}
#containermobile
{
	position: relative;
}

#container #examcategory,
#containernormal #examcategory,
#containercase #examcategory
{
	position: absolute;
	left: 28px;
	top: 0px;
	font-family: "arial rounded MT bold",Arial,Helvetica,sans-serif;

}
#containermobile #examcategory
{
	display:none
}


#container #questionanswers,
#containernormal #questionanswers,
#containercase #questionanswers
{
	position:absolute;
	left: 515px;
	top:38px;
}

#containernormal.ggm #questionanswers,
#containernormal.hotspot #questionanswers,
#containernormal.zoomhotspot #questionanswers
{
	left: 625px;
}

#question
{
	position: relative;
	left: 0px;
	background-color: #333;
	padding: 10px 10px 10px 15px;
}
#question.highlight
{
	color: #ff3;
	color: #A3CEFF;
}
#container #question,
#containernormal #question,
#containercase #question
{
	width: 460px;
}
#containernormal.ggm #question,
#containernormal.hotspot #question,
#containernormal.zoomhotspot #question
{
	width: 350px;
}
#containermobile #question
{
	width: 295px;
	font-size: 95%;
	background-color: #0099CC;
}

#question p
{
	margin: 5px 10px 5px 10px;
}
#question, div.answeralt
{
	font-size: 16px;
}


#images
{
	position: relative;
	left: 28px;
	top: 38px;
	width: 442px;
	height: 323px;
	text-align: center;
}

#images.question
{
	text-align: left;
	color:white;
	background-color:black;
	padding: 10px;
	height:auto;
}

#imagescase
{
	position: absolute;
	left: 280px;
	top: 38px;
	width: 225px;
	text-align: center;
}

#containernormal.ggm #images,
#containernormal.hotspot #images
{
	width: 560px;
}
#containernormal.hotspot #images
{
	height: auto;
	max-height: 371px;
	text-align: left;
}
#containernormal #images img
{
	max-width: 442px;
}
#containernormal.ggm #images img
{
	width: 560px;
	max-width: 560px;
}
#containernormal.hotspot #images img
{
	max-width: 560px;
}

#containernormal.uitvergroot #images img
{
	max-width: 442px;
	max-height: 323px;
}
#containernormal.uitvergroot #zoomer,
#containernormal.uitvergroot #images img:first-child
{
	cursor: pointer;
}
#fullscreenoverlay
{
	background-color: rgba(0,0,0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: none;
	overflow: auto;
/*	justify-content: center;
	align-items: center;
*/}
#fullscreenoverlay #fullscreenimage
{
	margin: 0 auto;
	cursor: zoom-out;
}

#fullscreenoverlay.fitimage #fullscreenimage
{
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: zoom-in;
}

#closefullscreenoverlay
{
	position: absolute;
	right: 10px;
	top: 10px;
	width: 32px;
	height: 32px;
	background: #fff url(/basiskwalificatieexamens/images/bttn_close_on.png) no-repeat center center;
	border-radius: 6px;
	cursor: pointer;
}
#closefullscreenoverlay:hover,
#closefullscreenoverlay:focus
{
	background-image:  url(/basiskwalificatieexamens/images/bttn_close_hl.png);
}


#casetext
{
	position:relative;
	left:28px;
	top:40px;
	width:460px;
	height: 335px;
	overflow-x:hidden;
    overflow-y:visible;
	padding: 5px;
	color: black;
	background-color: white;
}
#casetext img
{
	margin-left: 10px;
	max-width: 443px;
}

.zoomhotspot #casetext
{
	left: 33px;
	top: 38px;
	width: 547px;
	height: 356px;
	display: none;
}

#containermobile #images,#containermobile #imagescase
{
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 166px;
	padding-top: 4px;
	text-align: left;
	background-color: #fff;
}

#containermobile #images > img
{
	height: 162px;
	position: relative;
	left: 49px;
}

#containermobile #imagescase img
{
	width: 274px;
	height: 162px;
	position: relative;
	left: 24px;
}


#signs
{
	position: relative;
	text-align: center;
	margin: auto;
}
#signs table
{
	margin: auto;
}

#containermobile #images #signs
{
	text-align: center;
	width: 310px;
	margin: inherit;
	margin-left: 5px;
}

#containermobile #images #signs td
{
	color: #000;
	text-align: center;
}

#containermobile #images #signs td img
{
	width: 75%;
	min-width: 70px;
	max-width: 100%;
	max-height: 100%;
}

#largephoto
{
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 99;
	cursor: pointer;
	display: none;
	border: 20px solid #888;
}
#timeoutcontainer
{
	position: absolute;
}

#timeoutcontainer
{
	left: 534px;
	top: 0px;
	width: 90px;
	height: 323px;
	background-color: #00aadd;
	background-image: url(../images/time_on.png);
	background-repeat: no-repeat;
	background-position: 36px 0px;
}
#timeoutcontainer.ggm
{
	top: 38px;
	left: 597px;
	height: 312px;
}
#containernormal.hotspot #timeoutcontainer
{
	top: 38px;
	left: 597px;
	height: 369px;
}

#timeoutbar
{
	position: absolute;
	left: 36px;
	top: 0px;
	width: 18px;
	height: 323px;
	display: none;
}

#answers, #openanswer
{
	position:relative;
	left: 0px;
	width: 485px;
}
#containermobile #answers
{
	width: 320px;
}
#containernormal.ggm #answers,
#containernormal.hotspot #answers,
#containernormal.zoomhotspot #answers
{
	width: 375px;
}

#openanswer
{
	background-color: #fff;
	color: #1f3664;
	height: 70px;
}
#openanswer p
{
	margin: 0 0 0 10px;
}
#answers
{
	text-align: right;
	min-height: 150px;
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
}
#containernormal.ggm #answers,
#containernormal.hotspot #answers
{
	width: 365px;
	text-align: left;
	max-height: none;
	overflow-y: unset;
	overflow-x: unset;
}
#answers td
{
	text-align: left;
	vertical-align: middle;
}
#answerfield
{
	margin-top: 10px;
	margin-bottom: 10px;
	height: 1.5em;
	font-size: 1.2em;
}
#fb_youranswer, #fb_correct
{
	margin: 0;
	padding: 2px 0 2px 0;
}
#fb_youranswer
{
	position: absolute;
	left: 15px;
	display: none;
}
#openanswer #fb_youranswer
{
	position: relative;
	left: 0px;
}
#fb_correct
{
	position:relative;
	visibility:hidden;
	padding-right:11px;
}
#button0, #button1, #button2, #button3, #button4, #button5
{
	position: relative;
	background-color: #fff;
	cursor: pointer;
	color: #1f3664;
	border: 0;
	padding: 0;
	margin: 0;
}
#answers #button0,#answers #button1,#answers #button2,#answers #button3,#answers #button4,#answers #button5
{
	width: 484px;
	border-bottom: 1px solid #1f3664;
	vertical-align: middle;
}
#containermobile #answers #button0,#containermobile #answers #button1,#containermobile #answers #button2,#containermobile #answers #button3,#containermobile #answers #button4,#containermobile #answers #button5
{
	width: 320px;
	border-bottom: 1px solid #1f3664;
	vertical-align: middle;
	font-size:95%;
}
#button0 table, #button1 table, #button2 table, #button3 table, #button4 table, #button5 table
{
	width: 100%;
	height:100%;
	border-collapse: collapse;
}

div.answerchar
{
	position:absolute;
	left: 8px;
}
td.answerchar
{
	padding-left: 10px;
	height: 45px;
}
#containermobile td.answerchar
{
	padding-left: 10px;
	height: 40px;
}

td.answerchar,td.td_answeralt
{
	color: #1f3664;
	vertical-align: middle;
}
.sortable td.td_answeralt
{
	padding: 8px 0 8px 8px;
	cursor: ns-resize;
}
.answerchar
{
	font-size: 2em;
	font-weight: bold;
}
#answers div.answerchar
{
	top: 10px;
}

.answeralt
{
	position: relative;
	margin: auto 50px;
	width: 490px;
	text-align: left;
	color: #1f3664;
}
#answers .highlight
{
	color: #4A81EE;
}

#answers .bullet
{
	position:absolute;
	top: 16px;
	left: 28px;
}

#answers .correctanswer
{
	position:absolute;
	top: 0px;
	right: 0px;
	width: 32px;
	height: 100%;
}

#answers .answeredcorrect
{
	margin-right: 3px;
}


#answers .multiselected .answerchar
{
	color: #0099cc;
}
#answers td.answerchar
{
	text-align: center;
}
#answers td.answerchar span
{
	position: absolute;
	top: 3px;
	left: 5px;
	min-width: 34px;
	height: 34px;
	border: 3px solid transparent;
	border-radius: 20px;
	line-height: 100%;
}
body.bkpractice #answers td.answerchar span
{
	line-height: 120%;
}
#answers .correct .answerchar span
{
	border-color: green;
}
#answers .wrong .answerchar span
{
	border-color: red;
}

#openanswer #confirmopenanswer,
#confirmggmanswer,
#confirmzoomanswer,
#confirmmultiresponse,
#confirmsortanswer
{
	background:#000;
	color:#fff;
	padding:10px;
	font-weight:bold;
	border: none;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
}
#confirmggmanswer,
#confirmzoomanswer,
#confirmmultiresponse,
#confirmsortanswer
{
	font-size: 15px;

	/* klassikale tablet examens */
	width: auto;
	height: auto;
}
#confirmggmanswer,
#confirmzoomanswer
{
	margin-top: 20px;
	position: absolute;
	left: 0;
	top: 80px;
	display: none;
}
#confirmzoomanswer
{
	left: 15px;
	top: 80px;
	margin-top: 10px;
}
#confirmmultiresponse
{
	margin: 10px 3px 0 0;
}
#confirmsortanswer
{
	margin: 3px 3px 0 0;
}
.matrix #confirmggmanswer
{
	top: 275px;
}
#containermobile #confirmggmanswer,
#containermobile #confirmzoomanswer,
#containermobile #confirmmultiresponse
{
	top: 40px;
}

#footer
{
	position: relative;
	width: 1000px;
	height: 30px;
	margin: 0;
	clear: both;
}
#footer #firstbutton, #footer #backbutton, #footer #continuebutton, #footer #homebutton, #footer #prevbutton, #footer #nextbutton, #footer #continueexambutton
{
	position: absolute;
	top: 40px;
	padding: 0;
	margin: 0;
	width: 137px;
	height: 30px;
	text-transform: capitalize;
	cursor: pointer;
	background-repeat: no-repeat;
}
#footer #firstbutton, #footer #backbutton, #footer #continuebutton, #footer #homebutton, #footer #prevbutton, #footer #__nextbutton, #footer #continueexambutton
{
	border: 0;
	text-indent: -9999px;
}
#footer #firstbutton
{
	left: 30px;
	background-image: url(../images/bttn_first.png)
}
#footer #firstbutton:hover
{
	background-image: url(../images/bttn_first_hl.png)
}
#footer #firstbutton.dis
{
	cursor: default;
	background-image: url(../images/bttn_first_dis.png)
}
#footer #backbutton
{
	left: 180px;
	background-image: url(../images/bttn_back.png)
}
#footer #backbutton:hover
{
	background-image: url(../images/bttn_back_hl.png)
}
#footer #backbutton.dis
{
	cursor: default;
	background-image: url(../images/bttn_back_dis.png)
}
#footer #prevbutton
{
	width: 180px;
	left: 180px;
	background-image: url(../images/bttn_previous.png)
}
#footer #prevbutton:hover
{
	background-image: url(../images/bttn_previous_hl.png)
}
#footer #prevbutton.dis
{
	cursor: default;
	background-image: url(../images/bttn_previous_dis.png)
}
#footer #nextbutton
{
	width: 169px;
	right: 30px;
}
#footer #__nextbutton
{
	width: 169px;
	right: 30px;
	background-image: url(../images/bttn_next.png)
}
#footer #__nextbutton:hover
{
	background-image: url(../images/bttn_next_hl.png)
}
#footer #nextbutton.dis
{
	cursor: default;
	background-image: url(../images/bttn_next_dis.png)
}
#footer #continuebutton
{
	right: 30px;
	background-image: url(../images/bttn_continue.png)
}
#footer #continuebutton:hover
{
	background-image: url(../images/bttn_continue_hl.png)
}
#footer #continuebutton.dis
{
	cursor: default;
	background-image: url(../images/bttn_continue_dis.png)
}
#footer #homebutton
{
	left: 30px;
	background-image: url(../images/bttn_mainmenu.png)
}
#footer #homebutton:hover
{
	background-image: url(../images/bttn_mainmenu_hl.png)
}

#footer #continueexambutton
{
	right: 30px;
	width: 120px;
	background-image: url(../images/bttn_continueexam_on.png);
}
#footer #continueexambutton:hover
{
	background-image: url(../images/bttn_continueexam_hl.png)
}
#footer #continueexambutton.dis
{
	cursor: default;
	background-image: url(../images/bttn_continueexam_dis.png)
}

#container #nextbutton,
#containernormal #nextbutton,
#containercase #nextbutton
{
	position: relative;
	margin-left: 150px;
	width: 142px;
	height: 30px;
	text-transform: capitalize;
	cursor: pointer;
}

#motivationbutton
{
	position: absolute;
	left: 27px;
	top: 500px;
	width: 210px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 0;
	cursor: pointer;
	display: none;
	text-indent: -9999px;
	background: #0099cc url(../images/motivation_on.png) no-repeat left top;
}
#motivationbutton:hover
{
	background-image: url(../images/motivation_hl.png)
}
body.english #motivationbutton
{
	background: #0099cc url(/exams/images/motivation_english_on.png) no-repeat left top;
}
body.english #motivationbutton:hover
{
	background-image: url(/exams/images/motivation_english_hl.png)
}
#container #motivationbutton,
#containernormal #motivationbutton,
#containercase #motivationbutton
{
	top: 378px;
}


#motivationbutton.practice
{
	top: 330px;
}

#motivationbutton.hotspot
{
	left: 640px;
	top: 330px;
}


#motivation
{
	display: none;
	z-index: 5;
	position: absolute;
	left: 28px;
	bottom: 20px;
	width: 490px;
	padding: 6px 20px 6px 10px;
	background-color: #eee;
	color: #000;
	border: 1px solid #444;
	cursor: pointer;
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
#motivation.practice
{
	bottom:0;
}
#motivation.hotspot
{
	left: auto;
	bottom: 30px;
	right: 10px;
}

#motivationclose
{
	position:absolute;
	top:2px;
	right:3px;
	padding:0 4px 2px 4px;
	border:1px solid #aaa;
	color:#666;
}


#mainbutton
{
	position: absolute;
	top: 0px;
	right: 80px;
	width: 137px;
	height: 30px;
	padding: 0;
	margin: 0;
	border: 0;
	text-indent: -9999px;
	text-transform: capitalize;
	cursor: pointer;
	background-image: url(../images/bttn_mainmenu.png);
	background-repeat:  no-repeat;
}
#mainbutton:hover
{
	background-image: url(../images/bttn__mainmenu_hl.png)
}

#continuebutton
{
	position: absolute;
	top: 480px;
	right: 10px;
	padding: 0;
	margin: 0;
	cursor: pointer;

	background: none;
	background-image: url(../images/button-arrow-right-filled.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	text-align:left;
	text-indent:15px;
	width: 110px;
	height: 33px;
	cursor:pointer;
	border:none;
	color: white;
	font-weight:bold;
	font-size:16px;

    background: url("/public/images/exams/fwd_on.png") no-repeat scroll right top rgba(0, 0, 0, 0);
    color: #1f3664;
    font: bold 14px/1.231 sans-serif;
    height: 40px;
    width: 120px;
}
#continuebutton:hover
{
	/*
	background-position: right top;
	color: #ddd;
    */
	background-image: url("/public/images/exams/fwd_hl.png");
}

#debug
{
	position: fixed;
	top: 0;
	left: 0;
	width: 800px;
	color: #000;
}
#qlinks
{
	height: 30px;
	clear: both;
	margin-left: 20px;
	margin-top: 10px;
}
.qdone, .qactive, .qtodo
{
	width: 59px;
	height: 30px;
	margin-left: 5px;
	margin-bottom: 4px;
	padding: 0;
	font-size: 16px;
	line-height: 30px;
	float: left;
	text-align: center;
}

.qclear
{
	clear: left;
}

.qdone
{
	color: #aaa;
	background: #000 url(../images/bttn_done.png) no-repeat;
	cursor: pointer;
}

.qactive
{
	color: #009AD3;
	background: #ddd url(../images/bttn_act.png) no-repeat;
	font-weight: bold;
}

.qtodo
{
	color: #000;
	background-color: #eee;
	background: #eee url(../images/bttn_on.png) no-repeat;
	cursor: pointer;
}

#jp_container_1
{
	width: 40px;
	height: 40px;
	color: black;
	border: 1px solid green;
}
#jplayerinspector { color: black }

#startaudio
{
	display: none;
	position: absolute;
	left: 575px;
	top: 88px;

}
#debug
{
	position: absolute;
	left: 690px;
	top: 110px;
	width: 300px;
	height: 490px;
	font-size: 9px;
	background-color: white;
	color:black;
	overflow: scroll;
	display:none;
}

#navigationbarbottom
{
	position:absolute;
	bottom:0;
	width:100%;
	height:40px;
	background-color: #333333;
}

#navigationbarbottom #prevexamquestion,
#navigationbarbottom #nextexamquestion,
#navigationbarbottom #caption
{
	position:absolute;
}
#navigationbarbottom #prevexamquestion,
#navigationbarbottom #nextexamquestion
{
	background: none;
	background-position: left bottom;
	background-repeat: no-repeat;
	width: 133px;
	height: 33px;
	top: 5px;
	cursor:pointer;
	text-indent: -999em;
	border:none;
	color: white;
	font-weight:bold;
	font-size:14px;
}
#navigationbarbottom #prevexamquestion
{
	left:10px;
	background-image: url(../images/button-arrow-left.png);
	text-align:left;
	text-indent:35px;
}
#navigationbarbottom #nextexamquestion
{
	right:10px;
	background-image: url(../images/button-arrow-right.png);
	background-position: right bottom;
	text-align:left;
	text-indent:15px;
}
#navigationbarbottom #prevexamquestion:hover
{
	background-position: left top;
	color: #ddd;
}
#navigationbarbottom #nextexamquestion:hover
{
	background-position: right top;
	color: #ddd;
}
#navigationbarbottom #caption
{
	top:2px;
	left:200px;
	width:600px;
	text-align:center;
}

#reviewnextbutton,#reviewnextwrongbutton,#calculatorbutton,#markbutton
{
	position:absolute;
	display:none;
	top: 5px;
	width:auto;
	height:20px;
	background:#666;
	color:#eeeeee;
	line-height:14px;;
	padding: 1px 10px;
	font-weight:normal;
	border: none;
	-webkit-border-radius: 9px;
    -moz-border-radius: 9px;
	border-radius: 9px;
	cursor: pointer;
}
#reviewnextbutton
{
	left:26px;
}
#reviewnextwrongbutton
{
	left:515px;
}
#calculatorbutton
{
	left:655px;
	font-size:14px;
}
#reviewnextbutton:hover,#reviewnextwrongbutton:hover,#calculatorbutton:hover
{
	color:#666;
	background-color:#fff;
}

#markbutton
{
	left:26px;
	padding: 1px 25px 1px 10px;
	background-image: url(../images/iconUncheck.gif);
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-position-x: 90%; background-position-y: 4px; /* safari */
}
#markbutton.marked
{
	background-image: url(../images/iconCheck.gif);
}

#soundonoff
{
	position: absolute;
	top: 0px;
	right: 140px;
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 0;
	text-transform: capitalize;
	cursor: pointer;
	
	border: 0;
	text-indent: -9999px;
	background: #333 url(../images/sound_off.jpg) no-repeat;
}
#soundonoff.on
{
	background-image: url(../images/sound_on.jpg);
}
#soundonoff.off
{
	background-image: url(../images/sound_off.jpg);
}

#calculator
{
	position:absolute;
	display:none;
	left:200px;
	top:300px;
	width:300px;
	height:280px;
	background-color:#555;
	padding:10px 0px 0px 10px;
	border:2px solid #888;
	border-radius:5px;
}

#startupmessage
{
	position:relative;
	width:480px;
	height:200px;
	margin:auto;
	margin-top:90px;
	background:#fff url(/exams/images/bg_popup.png) no-repeat;
	background-size: cover;
	color:#000;
	padding:40px 20px 0 40px;
}

#startupmessage #bttn_close
{
	background:#fff url(/exams/images/bttn_close_on.png) no-repeat;
	position:absolute;
	width: 32px;
	height:32px;
	top:10px;
	right:8px;
	padding: 0;
	margin: 0;
	text-transform: capitalize;
	cursor: pointer;
	border: 0;
	text-indent: -9999px;
}
#startupmessage #bttn_close:hover {
	background-image:url(/exams/images/bttn_close_hl.png);
}



img.alternate
{
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
}



.ggm_button, .ggm_hotspot
{
	width: 64px;
	height: 64px;
	border-radius: 35px;
	margin: 0;
	display: inline-block;
	border-width: 3px;
	border-style: solid;
}
.ggm_button
{
	background-color: #ffffff;
	text-align: center;
	cursor: pointer;
	margin: 20px 0 0 14px;
}
.matrix .ggm_button
{
	position: absolute;
	left: 0px;
	margin: 0 0 0 10px;
}
.matrix .matrix_text
{
	position: absolute;
	left: 90px;
	width: 285px;
	vertical-align: middle;
	text-align: left;
	height: 70px;
}
.matrix .matrix_text:before
{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.matrix .matrix_text > span
{
	display: inline-block;
	width: 240px;
	vertical-align: middle;
	padding: 5px;
	background-color: #ffffff;
	border-width: 2px;
	border-style: solid;
    padding-left: 20px;
    text-indent: -15px;
}

.matrix #ggm_button0,.matrix #matrix_text0
{
	top: 5px;
}
.matrix #ggm_button1,.matrix #matrix_text1
{
	top: 80px;
}
.matrix #ggm_button2,.matrix #matrix_text2
{
	top: 155px;
}
.matrix #ggm_button3,.matrix #matrix_text3
{
	top: 230px;
}

#containermobile .ggm_button,
#containermobile .ggm_hotspot
{
	width: 32px;
	height: 32px;
}
#containermobile .ggm_button
{
	margin: 0px 22px 20px 0;
}


#answers .ggm_button:first-child
{
	margin-left: 0;
}

.ggm_button,.ggm_hotspot.ggm_highlight
{
	border-width: 3px;
	border-style: solid;
}
.ggm_button span.ggm_number,
.ggm_hotspot span.ggm_number
{
	font-size: 30px;
	line-height: 64px; /* to center */
}
.ggm_button.ggm1 span.ggm_number,
.ggm_hotspot.ggm_review span.ggm_number
{
	font-size: 40px;
	line-height: 64px;
}

#containermobile .ggm_button span.ggm_number,
#containermobile .ggm_hotspot span.ggm_number
{
	font-size: 20px;
	line-height: 32px; /* to center */
}
.ggm_button.ggm_review span,
.ggm_hotspot.ggm_review span
{
	display: block;
}
.ggm_button.ggm_review span.ggm_number
{
	font-size: 30px;
	line-height: 40px;
}
.ggm_hotspot.ggm_review span.ggm_feedback
{
	margin-left: -4px;
	margin-top: -22px;
}
#containermobile .ggm_hotspot.ggm_review span.ggm_feedback
{
	margin-left: -24px;
	margin-top: -19px;
}
#containermobile .ggm_hotspot.ggm_ok span.ggm_number
{
	margin-left: 7px;
}

.ggm_button.ggm_review span.ggm_feedback,
.ggm_hotspot.ggm_review span.ggm_feedback
{
	font-size: 18px;
	line-height: 18px;
	font-weight: bold;
}
#containermobile .ggm_button span.ggm_feedback,
#containermobile .ggm_hotspot span.ggm_feedback
{
	font-size: 15px;
	line-height: 20px;
}

.ggm_button.ggm_ok span.ggm_feedback,
.ggm_hotspot.ggm_ok.answered_ok span.ggm_feedback
{
	background: transparent url(/exams/images/right_small.png) no-repeat 40px center;
}
.ggm_button.ggm_wrong span.ggm_feedback,
.ggm_hotspot.ggm_wrong span.ggm_feedback
{
	background: transparent url(/exams/images/wrong_small.png) no-repeat 40px center;
}
.ggm_button span.ggm_feedback.empty,
.ggm_hotspot span.ggm_feedback.empty
{
	background-position: center center;
}

#answers.ggm_ok
{
	background: transparent url(/exams/images/right.png) no-repeat 15px 20px;
	min-height: 60px;
	overflow: hidden;
}
#answers.ggm_wrong
{
	background: transparent url(/exams/images/wrong.png) no-repeat 15px 20px;
	min-height: 60px;
	overflow: hidden;
}

.ggm_hotspot
{
	opacity: 0;
	position: absolute;
}
.ggm_hotspot.visible
{
	opacity: 1;
}

.ggm_button.ggm_hidden,
.sortable.hidden
{
	opacity: 0;
}
.ggm_button.ggm_blue,
.matrix_text.ggm_blue > span
{
	border-color: #001a77;
	color: #001a77;
}

.ggm_button.ggm_orange
{
	border-color: #ff6000;
	color: #ff6000;
}
.matrix_text.ggm_orange > span
{
	border-color: #ff6000;
	color: #000;
}
.matrix_text.ggm_orange span span.number
{
	color: #ff6000;
}

.ggm_button.ggm_review span.ggm_number
{
	color: #33cc33;
}
.ggm_button.ggm_ok,
.ggm_hotspot.ggm_ok
{
	color: #33cc33;
	border-color: #33cc33;
}

.ggm_hotspot .ggm_number
{
	font-weight: bold;
}

.ggm_button.ggm_wrong,
.ggm_hotspot.ggm_wrong
{
	color: #e0070a;
	border-color: #e0070a;
}


.ggm_blue.dropped,
.ggm_orange.dropped,
.ggm_review
{
	cursor: default;
	text-shadow: 1px 2px 1px rgba(0,0,0,0.5);
	background-color: rgba(255,255, 255, 0.7); /*#ffffff;*/
	box-shadow: 0px 6px 7.44px 0.56px rgba(0,0,0,0.5);
}
.ggm_blue.dropped,
.ggm_orange.dropped,
.ggm_hotspot.dropped
{
	border-color: #ffffff;
}

.ggm_button.dragger
{
	z-index: 100;
}
.ggm_button.dropped
{
	margin: 0;
}

.ggm_hotspot.ggm_blue.ggm_highlight,
.ggm_button.ggm_blue.ggm_highlight,
.ggm_button.ggm_blue.dragger
{
	border-color: #001a77;
	background-color: rgba(0,153,204, 0.7); /*#0099cc;*/
}

.ggm_hotspot.ggm_orange.ggm_highlight,
.ggm_button.ggm_orange.ggm_highlight,
.ggm_button.ggm_orange.dragger
{
	border-color: #ff6000;
	background-color: rgba(255,221,0, 0.7); /*#ffdd00;*/
}

.ggm_hotspot.ggm_blue
{
	background-color: rgba(0,26,119, 0.5); /*#001a77;*/
	border-color: rgba(0,26,119, 0.0); /*#001a77;*/
}

.ggm_hotspot.ggm_orange
{
	background-color: rgba(255,96,0, 0.5); /*#ff6000;*/
	border-color: rgba(255,96,0, 0.0); /*#ff6000;*/
}

#containernormal.ggm #fb_youranswer
{
	left: 0px;
	top: 70px;
}

#ggminfo
{
	margin-top: 20px;
	font-size: 15px;
	position: absolute;
	left: 15px;
	top: 90px;
}

#containermobile #ggminfo
{
	top: 50px;
}

#images .hotspot
{
	position: absolute;
	cursor: pointer;
	border: 5px solid transparent;
	border-radius: 5px;
}

#images .hotspot.highlight,#images .xhotspot:hover,#images .hotspot.hovered
{
	background-color: rgba(255,96,0, 0.2); /*#ff6000;*/
	border-color: #ff6000;
}
#images .hotspot.selected
{
	background-color: rgba(255,96,0, 0.4); /*#ff6000;*/
	border-color: #ff6000;
}
#images .hotspot.done
{
	cursor: default;
}
#images .hotspot.done:hover
{
	background-color: transparent;
	border-color: transparent;
}
#hotspotinfo
{
	position: absolute;
	left: 15px;
	top: 60px;
	color: #fff;
	font-size: 16px;
}

#images .hotspot.correct,#images .hotspot.correct:hover
{
	border-color: #33cc33;
}
#images .hotspot.wrong,#images .hotspot.wrong:hover
{
	border-color: #cc3333;
}

#images .hotspot.zoom0
{
	border-width: 25px;
	transform-origin: 0 0;
	transform: translate(-13px, -13px);
}
#images .hotspot.zoom1
{
	border-width: 20px;
	transform-origin: 0 0;
	transform: translate(-10px, -10px);
}
#images .hotspot.zoom2
{
	border-width: 15px;
	transform-origin: 0 0;
	transform: translate(-8px, -8px);
}
#images .hotspot.zoom3
{
	border-width: 10px;
	transform: translate(-5px, -5px);
}

.hotspotfeedback
{
	position: absolute;
	text-align: left;
	padding-left: 5px;
	height: 20px;
	color: #000;
	font-size: 18px;
	line-height: 20px;
	font-weight: bold;
}

.hotspotfeedback.correct
{
	background: transparent url(/exams/images/right.png) no-repeat center center;
	background-size: 20px;
}
.hotspotfeedback.wrong
{
	background: transparent url(/exams/images/wrong.png) no-repeat center center;
	background-size: 20px;
}

#containernormal.zoomhotspot
{
	min-height: 350px;
}
#containernormal.zoomhotspot #imagezoom
{
	position: absolute;
	left: 33px;
	top: 38px;
	width: 557px;
	height: 366px;
	overflow: hidden;
	background: #fff;
}
#containernormal.zoomhotspot #innerzoom.hidden,
#containernormal.zoomhotspot #innerzoom.invisible
{
	opacity: 0.01;
}

#containernormal.zoomhotspot #imagezoom #innerzoom
{
	transform: scale(0.15,0.15);
	transform-origin: 0 0;
	width: fit-content;
	height: fit-content;
}

#containernormal.zoomhotspot #imagezoom #images
{
	position: relative;
	left: auto;
	top: auto;
	width: fit-content;
	height: fit-content;
}

#containernormal.zoomhotspot #imagezoom #images img
{
	max-width: none;

/*	image-rendering: -moz-optimize-quality;
	image-rendering:   -o-optimize-quality;
	image-rendering: -webkit-optimize-quality;
	image-rendering: optimizeQuality;
*/	-ms-interpolation-mode: nearest-neighbor;
}

#containernormal.zoomhotspot > button,
#zoom_icon
{
	position: absolute;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	border: none;
}
#containernormal.zoomhotspot button
{
	cursor: pointer;
}
#containernormal.zoomhotspot button.disabled,
#confirmggmanswer.dis,
#confirmmultiresponse.dis,
#confirmsortanswer.dis
{
	cursor: default;
	opacity: 0.5;
}
#zoom_nav_up, #zoom_nav_down
{
	width: 41px;
	height: 20px;
}
#zoom_nav_left, #zoom_nav_right
{
	width: 20px;
	height: 41px;
}

#zoom_icon,
#zoom_in,
#zoom_out
{
	width: 41px;
	height: 41px;
}

#zoom_nav_up, #zoom_nav_up.disabled:hover
{
	left: 290px;
	top: 10px;
	background-image: url(../images/zoom/bttn_navigate_up_on.png);
}
#zoom_nav_down, #zoom_nav_down.disabled:hover
{
	left: 290px;
	top: 412px;
	background-image: url(../images/zoom/bttn_navigate_down_on.png);
}
#zoom_nav_left, #zoom_nav_left.disabled:hover
{
	left: 5px;
	top: 200px;
	background-image: url(../images/zoom/bttn_navigate_left_on.png);
}
#zoom_nav_right, #zoom_nav_right.disabled:hover
{
	left: 600px;
	top: 200px;
	background-image: url(../images/zoom/bttn_navigate_right_on.png);
}
#zoom_icon
{
	left: 600px;
	top: 278px;
	background-image: url(../images/zoom/zoom_icon.png);
}
#zoom_in, #zoom_in.disabled:hover
{
	left: 600px;
	top: 322px;
	background-image: url(../images/zoom/bttn_zoom_in_on.png);
}
#zoom_out, #zoom_out.disabled:hover
{
	left: 600px;
	top: 366px;
	background-image: url(../images/zoom/bttn_zoom_out_on.png);
}

#zoom_nav_up:hover
{
	background-image: url(../images/zoom/bttn_navigate_up_hl.png);
}
#zoom_nav_down:hover
{
	background-image: url(../images/zoom/bttn_navigate_down_hl.png);
}
#zoom_nav_left:hover
{
	background-image: url(../images/zoom/bttn_navigate_left_hl.png);
}
#zoom_nav_right:hover
{
	background-image: url(../images/zoom/bttn_navigate_right_hl.png);
}
#zoom_in:hover
{
	background-image: url(../images/zoom/bttn_zoom_in_hl.png);
}
#zoom_out:hover
{
	background-image: url(../images/zoom/bttn_zoom_out_hl.png);
}

#casetoggle
{
	cursor: pointer;
	position: absolute;
	left: 33px;
	top: 411px;
	position: absolute;
	background-color: #036;
	padding: 5px 10px;
	border-radius: 4px;
}

.sortable
{
	padding-top: 10px;
	padding-bottom: 10px;
}
.sortable.feedback
{
	padding: 0;
}
.sortable #button0,.sortable #button1, .sortable #button2, .sortable #button3, .sortable #button4, .sortable #button5
{
}

#answers td.sortcorrect
{
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
	font-size: 110%;
}
.sortcorrect.correct
{
	color: #33cc33;
}
.sortcorrect.wrong
{
	color: #cc3333;
}


/* responsive for small screens */
@media screen and (max-width: 999px) {
	#bigheader,
	#bigheader #banner,
	#maincontainer,
	#breadcrumbs,
	#navigationbar,
	#timeoutmessage,
	#container,
	#containernormal,
	#containerdanger,
	#containercase,
	#imagesdanger,
	#images,
	#image_intermezzo,
	#image_intermezzo img,
	#imagesdanger img,
	#images img,
	#containernormal #images img,
	#containernormal.ggm #images img,
	#containernormal.hotspot #images img,
	#container #questionanswers,
	#containernormal #questionanswers,
	#containercase #questionanswers,
	#answersdanger,
	#answers,
	#timeoutcontainerdanger,
	#answers #button0,
	#answers #button1,
	#answers #button2,
	#answers #button3,
	#answers #button4,
	#answers #button5,
	#navigationbarbottom
	{
		max-width: 100%;
	}
	#container
	{
		width: 100%;
	}
	#motivation
	{
		max-width: calc(100% - 40px);
	}
	#containernormal #question,
	#containercase #question
	{
		max-width: calc(100% - 25px);
	}
	#containernormal.zoomhotspot #imagezoom
	{
		max-width: calc(100% - 40px);
	}
	#timeoutmessage
	{
		width: auto;
	}
	#containerdanger #question
	{
		max-width: calc(100% - 11px);
	}

	#bigheader,
	#breadcrumbs
	{
		height: auto;
	}
	#navigationbar
	{
		height: auto;
		min-height: 30px;
	}
	.navigationbar
	{
		 height: auto !important;
	}
	#breadcrumbs
	{
		margin: 0;
	}
	#maincontainer
	{
		min-height: auto;
		background-image: none;
	}

	#bigheader #banner,
	#image_intermezzo,
	#container #examcategory,
	#containerdanger #examcategory,
	#containerdanger #question,
	#containernormal #examcategory,
	#containernormal #question,
	#containercase #examcategory,
	#containercase #question,
	#containercase #casetext,
	.zoomhotspot #casetext,
	#images,
	#containernormal.zoomhotspot #imagezoom,
	#container #questionanswers,
	#containernormal #questionanswers,
	#containernormal.ggm #questionanswers,
	#containernormal.hotspot #questionanswers,
	#containernormal.zoomhotspot #questionanswers,
	#containercase #questionanswers,
	#answersdanger,
	#answers,
	#openanswer,
	#timeoutcontainerdanger,
	#timer,
	#timerdial,
	#reviewnextbutton,
	#reviewnextwrongbutton,
	#reviewnextwrongbutton.danger,
	#calculatorbutton,
	#calculatorbutton.danger
	#startaudio,
	#markbutton,
	#soundonoff,
	#stopbutton,
	#timeoutmessage,
	#motivationbutton,
	#motivationbutton.hotspot,
	#container #motivationbutton,
	#containernormal #motivationbutton,
	#motivation,
	#navigationbarbottom,
	#navigationbarbottom #caption,
	#navigationbarbottom #prevexamquestion,
	#navigationbarbottom #nextexamquestion,
	#practicenextbutton,
	#practicedonebutton,
	#ggminfo,
	#confirmggmanswer,
	#confirmzoomanswer,
	#hotspotinfo,
	#casetoggle,
	#containernormal.zoomhotspot #zoom_in,
	#containernormal.zoomhotspot #zoom_out,
	#zoom_icon
	{
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
	}
	#practicenextbutton,
	#practicedonebutton
	{
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
	}

	#container #examcategory,
	#containerdanger #examcategory,
	#containernormal #examcategory,
	#containercase #examcategory
	{
		width: fit-content;
	}

	#ggminfo
	{
		display: block;
		margin-left: 1em;
	}
	#navigationbar,
	#navigationbarbottom
	{
		display: flex;
		align-items: center;
	}
	#navigationbar
	{
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#navigationbarbottom
	{
		justify-content: space-evenly;
	}
	#markbutton
	{
		order: 0;
	}
	#timerdial
	{
		display: none;
		order: 1;
		flex: 0 0 30px;
	}
	#timer
	{
		order: 2;
		flex: 0 0 50px;
	}
	#calculatorbutton
	{
		order: 3;
	}
	#soundonoff
	{
		order: 4;
	}
	#reviewnextbutton,
	#reviewnextwrongbutton
	{
		order: 5;
	}
	#stopbutton
	{
		order: 6;
	}

	#image_intermezzo
	{
		margin: 0 auto 1em auto;
	}
	#bigheader #banner
	{
		height: auto;
		max-height: 50px;
	}
	#containernormal > *
	{
		margin: 0 auto;
	}
	#containernormal.zoomhotspot > *
	{
		margin: inherit;
	}
	#images
	{
		height: auto;
		max-height: 323px;
	}
	#containernormal.hotspot #images
	{
		height: auto;
		max-height: 371px;
	}
	#examquestion
	{
		display: flex;
	}
	#imagesdanger
	{
		height: auto;
	}

	#containernormal #questionanswers,
	#containercase #questionanswers,
	#openanswer
	{
		width: 442px;
	}
	#containernormal.ggm #questionanswers,
	#containernormal.hotspot #questionanswers,
	#containernormal.ggm #question,
	#containernormal.hotspot #question,
	#containernormal.ggm #answers,
	#containernormal.hotspot #answers
	{
		width: 560px;
	}
	#containernormal.ggm #answers,
	#containernormal.hotspot #answers
	{
		margin-bottom: 1em;
	}

	#hotspotinfo
	{
		background-color: #555;
		padding: 10px 10px 10px 15px;
	}
	#navigationbarbottom
	{
		height: auto;
		min-height: 40px;
		margin-top: 1em;
	}

	#navigationbarbottom #questionnumber
	{
		left: 3px !important;
		top: 42px !important;
	}
	#navigationbarbottom #caption
	{
		width: auto;
	}
	#navigationbarbottom #prevexamquestion,
	#navigationbarbottom #nextexamquestion
	{
		width: auto;
		position: absolute;
	}
	#navigationbarbottom #prevexamquestion
	{
		left: 0;
	}
	#navigationbarbottom #nextexamquestion
	{
		right: 0;
		padding-right: 40px;
	}

	#reviewnextbutton,
	#reviewnextwrongbutton
	{
		height: auto;
		min-height: 20px;
		margin-bottom: 2px;
	}

	#containercase #casetext
	{
		height: auto;
		max-height: 335px;
		width: 432px;
		max-width: calc(100% - 10px);
	}
	#containernormal.zoomhotspot #casetoggle
	{
		width: fit-content;
		margin: 0.25em 0;
	}
	#zoom_icon
	{
		display: inline-block;
	}
	#zoom_nav_up, #zoom_nav_up.disabled:hover
	{
		left: 0;
		top: 30px;
	}
	#zoom_nav_down, #zoom_nav_down.disabled:hover
	{
		left: 0;
		top: 60px;
	}
	#zoom_nav_left, #zoom_nav_left.disabled:hover
	{
		left: 10px;
		top: 90px;
	}
	#zoom_nav_right, #zoom_nav_right.disabled:hover
	{
		left: 10px;
		top: 120px;
	}
	#containernormal.zoomhotspot #imagezoom
	{
		margin-left: 40px;
	}
	#zoom_icon
	{
		margin-left: 1em;
	}

	#containernormal.zoomhotspot #answers
	{
		min-height: auto;
		text-align: left;
	}
	#containernormal.zoomhotspot #hotspotinfo
	{
		display: inline-block;
	}
	#containernormal.zoomhotspot #confirmzoomanswer
	{
		float: right;
		margin-top: 4px;
		padding: 8px;
	}

	#practicenextbutton,#practicedonebutton
	{
		display: block;
    	margin: 0.25em auto;
		max-width: 100%;
	}

	#containernormal.ggm.matrix #answers
	{
		height: 320px;
		max-width: 100%;
	}
	#containernormal.ggm.matrix #images
	{
		max-height: none;
	}
	#containernormal.matrix .matrix_text
	{
		max-width: calc(100% - 90px);
	}
	#containernormal.matrix .matrix_text span
	{
		max-width: calc(100% - 40px);
	}

	#containernormal.hotspot #answers.ggm_ok,
	#containernormal.hotspot #answers.ggm_wrong
	{
		background-position: 15px 40px;
		padding-bottom: 15px;
		margin-bottom: 0.5em;
	}
	#signs
	{
		top: auto !important;
	}
	#bigheader #produced-by
	{
		position: relative;
		max-height: 50px;
		text-align: right;
	}
	#bigheader #produced-by img {
		max-width: 100%;
		height: auto;
		max-height: 50px;
	}
}

@media screen and (max-width: 500px) {
	#timeoutmessage,
	#question,
	#answers,
	#maincontainer #caption,
	#hotspotinfo,
	.hotspotfeedback,
	#casetext,
	#casetoggle,
	#confirmzoomanswer
	{
		font-size: 14px;
	}
	.hotspotfeedback
	{
		line-height: 1;
	}
	.answerchar
	{
		/*font-size: 1.5em;*/
	}
}

@media screen and (max-width: 440px) {
	#containernormal.uitvergroot #images img
	{
		max-width: 100%;
	}
}

@media screen and (max-width: 400px) {
	#navigationbarbottom #prevexamquestion,
	#navigationbarbottom #nextexamquestion
	{
		width: 35px;
		max-width: 35px;
		text-indent: -99999px;
	}

	#timeoutmessage,
	#question,
	#answers,
	#maincontainer #caption,
	#hotspotinfo,
	.hotspotfeedback,
	#casetext,
	#casetoggle,
	#confirmzoomanswer
	{
		font-size: 13px;
	}
}