/* CSS Document */

@charset "utf-8";
@import "Webfonts/opensans_regular/stylesheet.css";
@import "Webfonts/opensans_bold/stylesheet.css";


body {
	font-family:/*'Open Sans',*/ Tahoma, Verdana, Geneva, sans-serif;
	background-color:#DDD;
}

#itemcontainer {
	width:800px;
	height:600px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-300px 0 0 -400px;
	background:none;
	z-index:100;
	background-color:white;
	border:2px solid #CCC;
}

#errorarea {
	display:none;
	width: 540px;
	margin: 80px 0 0 100px;
	font-size: 20px;
	background-color: #ffd8dd;
	padding:2px 20px;
	border:3px solid #baa;
}

#itemarea {
	width:720px;
	height:510px;
	padding:40px 40px 30px 40px;
	font-size:20px;
	background:none;
}
#itemarea h1 {
	margin-top:0;
	font-size:32px;
}
#itemarea .med, #errorarea .med {
	font-size:20px;
	line-height:32px;
	margin-bottom:40px;
}
#itemarea pre {
	font-size:12px;
}

#itemarea .question {
}

#itemarea .registerform {
	position:absolute;
	top:428px;
	width:550px;
	border:2px solid #ccc;
	margin-left: -10px;
	padding:12px 0 7px 10px;
	background-color:#f8f8f8;
	font-size:22px;
	line-height:36px;
}
#itemarea .registerform input {
	position:absolute;
	left:190px;
	font-size:18px;
	padding:2px;
	max-width:340px;
}

#itemarea .submitbutton, #itemarea .resultbutton, #itemarea .backbutton {
	position:absolute;
	top:526px;
	left:625px;
	width:110px;
	background-color:#DDD;
	border:2px solid #999;
	padding:2px 10px;
	/*font-family:Arial, Helvetica, sans-serif;*/
	font-size:20px;
	font-weight:bold;
	color:#343434;
	text-align:center;
}
#itemarea .resultbutton {
	top:520px;
	left:520px;
	width:200px;
}
#itemarea .backbutton {
	display:none;
	text-decoration:none;
	top:520px;
	left:40px;
	width:400px;
}
#itemarea .submitbutton:hover, #itemarea .resultbutton:hover, #itemarea .backbutton:hover {
	cursor:pointer;
	background-color:white;
}

#itemarea .preload {
	display:none;
}


/* --- ITEMTYPE_IAR ---*/

#itemarea #choices {
	margin-top:120px;
	width:720px;
	text-align:center;
}
#itemarea #choices img {
	width:200px;
	height:200px;
	margin:0 40px;
	border:5px solid white;
	padding:10px;
}
#itemarea #choices img:hover {
	margin:0 40px;
	border-color:#DDD;
	cursor:pointer;
}
#itemarea #choices img.wide {
	width:300px;
	margin:0 10px;
}

/* --- ITEMTYPE_grid20x12: Grid 22x12 (017b) --- */

#itemarea .grid20x12 {
	margin-top:20px;
}
#itemarea .grid20x12 div {
	width:32px;
	height:32px;
	float:left;
	background-color:#ADD;
	border:2px solid white;
	margin:0px;
	cursor:pointer;
}
#itemarea .grid20x12 .reef {
	background-color:#DCA;
}
#itemarea .grid20x12 div:hover {
	border-color:#808000;
}


/* --- ITEMTYPE_TIMED --- */

#itemarea #banner {
	margin-top:30px;
	width:720px;
	text-align:center;
}
#itemarea #banner img {
	width:350px;
	height:350px;
	margin:50px 40px 0 40px;
	border:5px solid white;
	padding:10px;
}
#itemarea #banner img.wide {
	width:500px;
	height:420px;
	margin:10px 40px 0 40px;
	border:5px solid white;
	padding:10px;
}
#itemarea #banner #timer {
	position:absolute;
	top:30px;
	left:30px;
	width:200px;
	height:20px;
}
#itemarea #banner #timer div {
	float:left;
	width:10px;
	height:20px;
	margin-right:3px;
	background-color:#DDD;
}
#itemarea #backside {
	display:none;
}
#itemarea #backside #choices {
	margin-top:80px;
	width:680px;
	text-align:left;
	margin-left:160px;
}
#itemarea #backside #choices div {
	width:400px;
	height:36px;
	background-color:#F0F4F4;
	border:2px solid #F0F4F4;
	margin:34px 0;
	padding:10px 0 0 20px;
	cursor:pointer;
}
#itemarea #backside #choices div:hover {
	background-color:#EEE;
	border-color:#999;
}


/* --- ITEMTYPE_ANIMATED --- */

#itemarea #tablet
{
	width:720px;
	height:440px;
}
#itemarea #tablet .submitbutton {
	position:absolute;
	top:526px;
	left:625px;
}


/* --- ITEMTYPE_STATE5 --- */

#itemarea #stateselected
{
	margin-top:30px;
	width:720px;
	height:320px;
	text-align:center;
}
#itemarea #stateselected img
{
	width:450px;
	height:300px;
}
#itemarea #stateselected img.hidden
{
	width:10px;
	height:10px;
	display:none;
}

#itemarea #sliderarea
{
	position:absolute;
	top:500px;
	left:40px;
	width:580px;
	height:70px;
}


/* --- ITEMTYPE_SELECT5 --- */

#itemarea #objectselected
{
	position:absolute;
	top:150px;
	left:40px;
	width:720px;
	height:270px;
	text-align:center;
}
#itemarea #objectselected img
{
	width:270px;
	height:270px;
	display:none;
}
#itemarea #objectselected .submitbutton {
	position:absolute;
	top:120px;
	left:580px;
	display:none;
}


#itemarea #objectcatalog
{
	position:absolute;
	top:450px;
	left:40px;
	width:720px;
	height:135px;
}
#itemarea #objectcatalog img
{
	width:108px;
	height:108px;
	margin:4px 18px;
	opacity:.3;
	cursor:pointer;
}
#itemarea #objectcatalog img:hover
{
	border:4px solid #8BE;
	margin:0 14px;
}
#itemarea #objectcatalog img.selected
{
	opacity:.1;
	cursor:auto;
}



/* ----- Universal widgets ----- */


#footerarea {
	position:absolute;
	top:594px;
	width:780px;
	height:15px;
	/*padding:3px 10px 2px 10px;*/
}
#progress {
	width:799px;
	height:5px;
	border:1px solid #CCC; 
}
#progress div {
	height:5px;
	border:none;
	background-color:#AAA;
	border-top-right-radius:2px;
	border-bottom-right-radius:2px;
}

#debugcontainer {
	width:50px;
	height:600px;
	position:absolute;
	left:0;
	top:50%;
	margin-top:-300px;
	background:none;
	z-index:100;
	background-color:#FCC;
	border:2px solid #F66;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	line-height:18px;
}
#debugcontainer .sep {
	padding:2px 0;
	border-bottom:2px solid #F66;
	margin-bottom:3px;
}
#debugcontainer h2 {
	margin:0;
	padding:2px 0 5px 0;
	text-decoration:underline;
	font-size:12px;
}
#debugcontainer a {
	display:block;
	width:48px;
	margin:0 1px;
	padding:2px 0;
	text-decoration:none;
}
#debugcontainer a:hover {
	background-color:#F66;
	cursor:pointer;
}
#debugcontainer a.part {
	font-weight:bold;
}

#debugresult {
	position:absolute;
	width:100px;
	height:20px;
	left:10px;
	top:5px;
	font-size:12px;
	color:#F66;
}


/* --- Special device types ---*/

/* Smartphones (landscape) */
@media only screen 
and (max-height : 620px) {
	body {
		background-color:#ddd;
		width:1100px;
	}
	#itemcontainer {
		position:relative;
		top:0; margin-top:0;
	}
	#debugcontainer {
		top:10px; margin-top:0;
	}
}