body { margin: 0px; padding: 0px; }
html, body { margin:0; padding:0; height:100%; }
body { font-family: 'Open Sans'; font-size: 14px; line-height: 20px; }

#container { min-height: 100%; position: relative; }
#container .wrap { width: 800px; margin: 0px auto; }

#logo { float: left; margin-right: 40px; }
#title { font-size: 30px; line-height: 35px; font-weight: bold; padding-top: 5px; }
#header { border-bottom: 2px solid #000; padding-bottom: 20px; margin-bottom: 30px; padding-top: 20px; }
#content { padding-bottom: 90px; }
#footer { position: absolute; bottom: 0; width: 100%; height: 55px; padding-top: 20px; background-color: #000; color: #fff; font-size: 12px; line-height: 17px; }
	#footer a { color: #fff; }

h1 { font-size: 25px; line-height: 30px; margin: 0px; padding: 0px; margin-bottom: 20px; }
h2 { font-size: 20px; line-height: 25px; margin: 0px; padding: 0px; margin-bottom: 15px; }
p { margin: 0px; padding: 0px; margin-bottom: 20px; }
a { color: #000; }
a img { border: none; }

#container .form { padding: 20px; background-color: #efefef; margin-bottom: 20px; }
	#container .form input[type=text],
	#container .form input[type=password],
	#container .form textarea,
	#container .form select { width: 100%; padding: 8px; font-family: Open Sans; font-size: 14px; line-height: 20px; box-sizing: border-box; border: 1px solid #aaa; border-radius: 0; -webkit-appearance: none; background-color: #fff; }
#container .form .field { margin-bottom: 15px; }
#container .form .field .label { margin-bottom: 5px; }
#container .form .submit { }
#container .form .errorstr { padding-bottom: 15px; color: #ff0000; display: none; }
#container .form .error { background-color: #feebe8 !important; border: 1px solid #ff0000 !important; }

#container .columns { }
	#container .columns .half { width: 50%; box-sizing: border-box; padding-right: 20px; float: left; }
	#container .columns .half.last { padding-right: 0px; padding-left: 20px; }

#container .button { background-color: #000; color: #fff; text-decoration: none; padding: 8px 20px; font-weight: 600; display: inline-block; }

#container .userinfo { }
	#container .userinfo .name { display: inline-block; margin-right: 20px; }
	#container .userinfo .logout { display: inline-block; position: relative; }
	
	.details { margin-bottom: 20px; }
		.details .detail { margin-bottom: 10px; }
		.details .label { text-transform: uppercase; width: 38%; float: left; font-weight: bold; font-size: 13px; box-sizing: border-box; padding-right: 5px; }
		.details .value { float: left; width: 62%; }

#container .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#container .clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
#container .clearfix { display: block; }

#steps { margin-bottom: 20px; }
	#steps .active { font-weight: bold; }
	
#exam.form { background-color: transparent; padding: 0px; }
	#exam .question { padding: 19px; border: 1px solid #efefef; background-color: #efefef; margin-bottom: 20px; }
	#exam .name { font-weight: bold; }
	#exam .question.incorrect { background-color: #feebe8 !important; border: 1px solid #ff0000 !important; }

/* iPhone - portrait/landscape */
@media only screen and (min-width : 320px) and (max-width : 767px){
	#container .wrap { width: 100%; box-sizing: border-box; padding: 0px 15px; margin: 0px; }
	#container .columns .half { width: 100%; float: none; padding: 0px; }
	#container .columns .half.last { padding: 0px; }
	#logo { margin-right: 20px; }
	#footer { font-size: 12px; padding-top: 10px; height: 50px; line-height: 16px; text-align: center; }
}