body
{
	margin: 0;
	padding: 0;
	font-family: Arial, 'arial rounded MT bold', Helvetica, sans-serif;
	background-color: #ffffff;
	color: #ffffff;
}

#maincontainer
{
	position: relative;
	margin: 0 auto;
	min-height: 600px;
	width: 1000px;
	background-color: #0099cc;
	background-image: url(../images/dots.png);
	background-position: center bottom;
	background-repeat: no-repeat;
}

#maincontainermobile
{
	position: relative;
	margin: auto;
	min-height: 300px;
	height:100%;
	width: 100%;
	/*max-width: 400px;*/
	background-color: #0099cc;
}

#loginform
{
	position: absolute;
	left: 350px;
	top: 30px;
	color: #000000;
}

#maincontainermobile .input
{
	margin: 5px 0;
	background: white;
	float: left;
	clear: both;
}
#maincontainermobile .input span
{
	position: absolute;
	padding: 5px;
	margin-left: 3px;
	color: #888;
}
#maincontainermobile .input input, #maincontainermobile .input textarea, #maincontainermobile .input select
{
	position: relative;
	margin: 0;
	border-width: 1px;
	padding: 5px;
	background: transparent;
	font: inherit;
	width: 240px;
}
/* remove Safari's extra padding */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #maincontainermobile .input input, #maincontainermobile .input textarea, #maincontainermobile .input select { padding: 4px; }
}

#maincontainermobile form .submit
{
	background: none;
	background-image: url(../images/button-arrow.png);
	background-position: left top;
	background-repeat: no-repeat;
	width: 33px;
	height: 33px;
	cursor:pointer;
	text-indent: -999em;
	border:none;
	position: absolute; bottom:13px;
	margin-left: 5px;
}
#maincontainermobile form .submit:hover
{
	background-position: left bottom;
}


#maincontainermobile form
{
	color: #ffffff;
	padding: 10px;
	position:relative;
}

#maincontainermobile #registersubmit
{
	background: none;
	background-image: url(../images/knop_registreer.png);
	background-position: left top;
	background-repeat: no-repeat;
	width: 105px;
	height: 31px;
	cursor:pointer;
	text-indent: -999em;
	border:none;
}


#loginmessage
{
	color: #d00;
}
#bigheader,#bigheadermobile
{
	position: relative;
	padding: 0;
	margin: 0;
	clear: both;
	background-color: #ffffff;
}
#bigheader
{
	width: 1000px;
	height: 85px;
}
#bigheadermobile
{
	width: 100%;
	height: 40px;
}
#bigheader #banner
{
	position: absolute;
	left: 0px;
	top: 0px;
	height: 85px;
	background-color: #0099cc;
}
#bigheader .textlogo
{
	font-family: 'arial rounded MT bold',arial;
	font-size: 34px;
	color: #000;
	text-decoration: none;
	display: inline-block;
	margin-top: 15px;
	margin-left: 10px;
}

#bigheadermobile #bannermobile
{
	width:50%;
	max-width:257px;
	margin-top:0px;
	margin-left:5px;
}
#bigheader #bar
{
	position: absolute;
	left: 0px;
	top: 85px;
}
#bigheader a
{
	margin-left: 0px;
}

#bigheader #produced-by {
    height: 85px;
    position: absolute;
    top: 0;
    right: 10px;
    line-height: 85px;
    color: #003366;
}

#bigheader #produced-by img {
    vertical-align: top;
    margin-left: 10px;
}

#navigationbar
{
	position: relative;
	width: 1000px;
	height: 30px;
	background-color: #333;
	padding: 0;
	margin: 0;
	clear: both;
}

#timer, #timerdial
{
	position: absolute;
	top: 0;
	padding: 0;
	margin: 0;
}

#timer
{
	color: #fff;
	line-height: 32px; /* same height as points-image */
	left: 515px;
	width: 50px;
	text-align: center;
	display: none;
}
.time_elapsed
{
	color: red;
	font-weight: bold;
}

#timerdial
{
	left: 480px;
	width: 30px;
	height: 30px;
}

#timeoutmessage
{
	display:none;
	position:absolute;
	left: 300px;
	top: 30px;
	width: auto;
	padding:10px;
	background-color: #333;
	color: white;
}
#timeoutlink
{
	text-decoration:underline;
	cursor:pointer;
}

.headerbarmobile
{
	height:30px;
	background-color:#1f3664;
	font-weight:bold;
	color: #0099cc;
	overflow: hidden;
	font-size: 0.90em;
}
.headerbarmobile span
{
	color: #ffffff;
}
.headerbarmobile,.headerbarmobile2
{
	padding-left: 10px;
	padding-right: 10px;
}

.headerbarmobile2
{
	color: #1f3664;
	font-size: 1.5em;
	font-weight: bold;
	height: 30px;
}

#category
{
	position: absolute;
	left: 0px;
	top: 125px;
	width: 265px;
	height: 39px;
}
#coach, #coachlarge
{
	position: absolute;
	left: 0px;
	top: 175px;
	width: 269px;
}
#coach
{
	height: 87px;
	background: #0099cc url(../images/coach.png) no-repeat left top;
}
#coachlarge
{
	height: 117px;
	background: #0099cc url(../images/coachlarge.png) no-repeat left top;
}
#coach p,#coachlarge p
{
	margin-top: 10px;
	margin-left: 10px;
	color: #ffffff;
}

#coach p span,#coachlarge p span
{
	width: 100px;
	color: #0099cc;
}

#maincontainer #caption
{
	position: absolute;
	left: 300px;
	top: 125px;
}
h1
{
	margin-top: 0;
	color: #1f3664;
	font-size: 1.5em;
}


#closebutton
{
	position: absolute;
	top: 4px;
	right: 10px;
	height: 30px;
	width: 94px;
	background: #fff url(../images/knop_stop.png) no-repeat;
	padding: 0;
	margin: 0;
	text-transform: capitalize;
	cursor: pointer;
	
	border: 0;
	text-indent: -9999px;
}


#logout-button, #logout-button:visited, #helpdesk-button, #helpdesk-button:visited {
    background: url("../images/button-long.png") no-repeat scroll left top transparent;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: bold;
    width: 98px;
    height: 23px;
    line-height: 18px;
    position: absolute;
    left: 10px;
    top: 46px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

}
#logout-button:hover, #helpdesk-button:hover {
    background-position: left bottom;
}
#helpdesk-button
{
	top: 84px;
}

a#helpdesk
{
	color: #fff;
	font-size: 0.8em;
	margin-left: 10px;
}
a#helpdesk div {
    background: none repeat scroll 0 0 #35A9D9;
    float: left;
    height: 20px;
    margin-right: 3px;
    width: 20px;
}


#stopbutton
{
	position: absolute;
	top: 4px;
	right: 10px;
	width: 98px;
	height: 22px;
	padding: 0;
	margin: 0;
	text-transform: capitalize;
	cursor: pointer;
	
	border: 0;
	text-indent: -9999px;
	background: #333 url(../images/bttn_stoppen_on.png) no-repeat;
}
#stopbutton:hover
{
	background-image: url(../images/bttn_stoppen_hl.png);
}
body.english #stopbutton
{
	background-image: url(/public/images/exams/bttn_stoppen_engels_on.png);
	width: 70px;
}
body.english #stopbutton:hover
{
	background-image: url(/public/images/exams/bttn_stoppen_engels_hl.png);
}

#stopbutton.result
{
	background-image: url(../images/bttn_verder_on.png);
}
#stopbutton.result:hover
{
	background-image: url(../images/bttn_verder_hl.png);
}