@charset "UTF-8";
/* CSS Document */
/*html, body { height:100%; background-color:#600;}*/
html, body { height:100%; background-color:#600;}

body { margin:0; padding:0; 
	/*overflow:hidden;*/
	font-family:Verdana, Geneva, sans-serif;
	font-style:normal;
	color:#000;
	font-size: 2em;
	overflow:hidden;
}



/* high score anzeige */
#high_score{
	font-size: 1em;
	display:none;
	position:absolute;
	z-index: 10;
	top:0;
	left:0;
	width:100%;
	min-height:130%;
	overflow:hidden;
	background-color:#CC6600;
}

#btn_highscore_zurueck{
	position: fixed;
	z-index: 20;
	top:0;
	left:0;
	background-color:#F90;
	text-align:center;
	width:100%;
	cursor:pointer;
}

#btn_highscore_zurueck:hover {
    background-color:red;
}

#btn_highscore_zurueck:active {
    color:red;
}

#high_score h1{
	text-align:center;
	margin-top:100px;
}

#schwierigkeit_bestenliste, #high_score ol{
	width: 600px;
	margin:auto;
	vertical-align:top;
}

.schwierigkeits_btn{
	display:inline-block;
	background-color:#F90;
	float:left;
	width:30%;
	text-align:center;
	margin: 0px 0px 30px 3%;
	cursor:pointer;
}

#anzeigen_leicht{
	background-color:#FC0;
}

#high_score ol{
	list-style-position: inside;	
	list-style:decimal;
}

#high_score li{
	display: list-item;
	list-style-position: inside;	
	list-style:decimal;
	background-color:#CCC;
	margin-bottom:5px;
	margin: 0px;
	padding: 0px 10px 0px 10px;
	
	margin-bottom:10px;
	float:left;
}

#high_score .spieler_name, #high_score .score{
	overflow:hidden;
	margin: 0px;
	padding: 0px;
}

#high_score .spieler_name{
	float:left;
	width:350px;
}

#high_score .score{
	text-align:right;
	float:right;
	width:200px;
}




#canvas{
	z-index: 4;
}

.wrapper_class{
	display:block;
	position:absolute;
	top:0;
	left: 0;
	pointer-events: none;
}

#wrapper{
	display:none;
	z-index: 3;
}

#scalebox{
	left:24%;
	top:1%;
	width: 1000px;
	height:1000px;
}

.scalebox_class {
	position: relative;
	top:0;
	transform-origin: left top;
	
	-moz-box-align: center;
	-moz-box-pack: center;
	display: -moz-box;
	
	-webkit-box-pack: center;
	-webkit-box-align:center;
	display: -webkit-box;
	
}


#fragen, #highscoreeintragen{
	position: absolute;
	display:none;
	width: 800px;
	background-color:#FF0;
	padding:5%;
	border: 5px solid #900;
	pointer-events: auto;
	padding-top:100px;
	top:15%;
	left:5%;
}

#punktestand {
	position: absolute;
	width:200px;
	height:40px;
	background-color:#FC0;
	top:0;
	left:1%;
	margin:30px;
	display:none;
	color:#fff;
	padding:3px;
	padding-right:6px;
	text-align:right;
	border: 3px solid black;
	letter-spacing: 3px;
	font-weight:bold;
}

#fragen{
	display:block;
}

#fragen div, #fragen p{
	padding:2%;
	margin:1%;
}

#frage{
	position: relative;
	top:0;
	background-color:#FC0;
}

#fragen .btn{
	position: relative;
	width:94%;
}


.antwort_gr{
	font-size: 1.5em;
}

.antwort_gr, .antwort {
	 
}

.btn {
	cursor:pointer;
	background-color:#FFC;
}

.btn:hover{
	background-color:#FFf;
}

/*
Formular
*/

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	border: 2px solid red;
    border-radius: 4px;
	background-color: #FFC;
	font-size: 1em;
	
}

input[type=text]:focus {
   background-color: #FFF;
}

input[type=button], input[type=submit], input[type=reset] {
	font-size: 1em;
	 background-color: #F90;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

#impressum {
	text-align:right;
	font-size:0.7em;
	width:100%;
}

#impressum a.hover, #impressum a.focus {
	text-decoration:none;
	color:#C00;
}

#impressum a.visited, #impressum a, #impressum a.active{
	text-decoration:none;
	color:#000;
}

/* musik btn */

#musik_btn{
	display:none;
	position:absolute;
	position: fixed;
	pointer-events: auto;
	background-image:url(images/musik_on_off_0001.png);
	background-repeat:no-repeat;
	width:40px;
	height:40px;
	top:0;
	right:0;
	margin-top:30px;
	z-index: 40;
	cursor:pointer;
}

@media only screen and (max-width:599px) {
	
	#musik_btn{
		margin-top:5px;
	}
	
	#btn_highscore_zurueck{
		height:2em;
	}
	
	#high_score{
		font-size: 0.7em;
	}
	
	#high_score h1{
		margin-top:50px;
		font-size: 1.5em;
	}
	
	#high_score ol{
		width: 100%;
		padding-left:15%;
		padding-right:15%;
	}
	
	#schwierigkeit_bestenliste{
		width: 80%;
		padding-left:10%;
		padding-right:10%;
	}
	
	
	
	#high_score li{
		width:70%;
		margin-bottom:5px;
		margin: 0px;
		padding: 0px 10px 0px 10px;
		margin-bottom:3px;
	}
	
	
	
	#high_score .spieler_name{
		width:50%;
	}
	
	#high_score .score{
		width:35%;
	}

}

@media	only screen and (-webkit-min-device-pixel-ratio: 1.3),
	only screen and (-o-min-device-pixel-ratio: 13/10),
	only screen and (min-resolution: 120dpi)
	{
		/* Your code to swap higher DPI images */
		#wrapper{
		font-size: 1.5em;
	}
	
	#fragen, #highscoreeintragen{
		width: 1000px;
		padding:2%;
		border: 10px solid #900;
		pointer-events: auto;
		padding-top:100px;
		top:5%;
		left:0;
	}
	
	#punktestand {
		width:300px;
		height:60px;
		left:1%;
		border: 5px solid black;
		letter-spacing: 5px;
	}
	
	#fragen div, #fragen p{
		padding:1%;
		margin:0.5%;
	}

	#fragen .btn{
		position: relative;
		width:96%;
	}

}



/* caching images with css: */

@media screen {
	div#preloader {
		position: absolute;
		left: -9999px;
		top:  -9999px;
		}
	div#preloader img {
		display: block;
		}
	}
@media print {
	div#preloader, 
	div#preloader img {
		visibility: hidden;
		display: none;
		}
	}