/*Allgemeines */
html, body {margin:0px; padding:0px; height:100%;}
html {overflow-y: scroll;}
body {background-color:#FFFFFF;}

* {outline:none; font-family: 'Open Sans', sans-serif;}
a {text-decoration:none;}
img {border:0px; display:block; margin:0px; padding:0px;}
form {margin:0px; padding:0px;}
header, nav, section, footer {display:block;}

.clear {width:0; height:0; padding:0; margin:0; line-height:0; display:block; clear:both;}
.wrapper {margin: auto auto; width:720px; box-sizing:border-box;}

/* Header */
header {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f8f9+0,e5ebee+50,d7dee3+51,f5f7f9+100;White+Gloss */
	background: #f6f8f9; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	-webkit-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.2);
	box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.2);}
header .wrapper {padding:10px 20px 10px 20px;}
header #nav {float:right; width:50px; height:50px; font-size: 50px; line-height:50px; color:#ffffff; text-align:center;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cb60b3+0,c146a1+50,a80077+51,db36a4+100;Pink+Gloss */
	background: #cb60b3; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	-webkit-box-shadow: inset 2px 2px 1px 1px rgba(255,255,255,0.5);
	-moz-box-shadow: inset 2px 2px 1px 1px rgba(255,255,255,0.5);
	box-shadow: inset 2px 2px 1px 1px rgba(255,255,255,0.5);}
header #nav:hover {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcecfc+0,fba6e1+50,fd89d7+51,ff7cd8+100;Pink+Gloss+%232 */
	background: #fcecfc; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #fcecfc 0%,#fba6e1 50%,#fd89d7 51%,#ff7cd8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
	
header .nav {float:right; width:50px; height:50px; font-size: 20px; line-height:50px; color:#ffffff; text-align:center; margin-right:30px;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cccccc+0,bebebe+50,969696+52,cccccc+100 */
	background: #cccccc; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #cccccc 0%, #bebebe 50%, #969696 52%, #cccccc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #cccccc 0%,#bebebe 50%,#969696 52%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #cccccc 0%,#bebebe 50%,#969696 52%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	-webkit-box-shadow: inset 2px 2px 1px 1px rgba(255,255,255,0.5);
	-moz-box-shadow: inset 2px 2px 1px 1px rgba(255,255,255,0.5);
	box-shadow: inset 2px 2px 1px 1px rgba(255,255,255,0.5);}
header .nav:hover {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcecfc+0,fba6e1+50,fd89d7+51,ff7cd8+100;Pink+Gloss+%232 */
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bfbfbf+0,878787+50,6d6d6d+52,bcbcbc+100 */
	background: #bfbfbf; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #bfbfbf 0%, #878787 50%, #6d6d6d 52%, #bcbcbc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #bfbfbf 0%,#878787 50%,#6d6d6d 52%,#bcbcbc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #bfbfbf 0%,#878787 50%,#6d6d6d 52%,#bcbcbc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfbfbf', endColorstr='#bcbcbc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

nav {display:none; position:absolute; top:70px; background-color:rgba(255,255,255,0.9); width:100%; padding: 25px 0px 25px 0px;
	-webkit-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.2);
	box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.2);}

nav ul {margin:0px; padding:0px;}
nav ul li {margin:0px; padding:0px; list-style:none;}
nav ul li:not(:first-of-type) {padding-top:15px;}
nav ul li:not(:last-of-type) {padding-bottom:15px;}
nav ul li a {display:block; text-align:right; font-size:24px; line-height:30px; color:#999999; font-weight:bold; padding:0px 15px 0px 15px;}
nav ul li a span {margin-left:10px; font-weight:400;}
nav ul li a:hover {color:#ff7cd8;}
nav ul li.aktiv a {color:#ff7cd8;}

h1 {margin:0px;padding:0px; font-size: 40px; line-height:50px; font-weight:400; color:#ff7cd8; text-shadow: 2px 2px 3px rgba(200, 70, 150, 0.35);}
h1 span {margin-left:15px; font-size:28px;}

/* Inhalt */
article {float:left;width:60%;box-sizing:border-box; padding: 25px 20px 20px 20px; overflow:hidden;}
h2{margin:0px;padding:0px; font-size: 20px; line-height:25px; font-weight:bold; color:#777777;}
h2 .r{float:right;}
	#timer{margin-left:45px;font-weight:normal;}
h4{margin:0px;padding:20px 0px 0px 0px; font-size: 60px; line-height:100px; height:100px; font-weight:400; color:#333333; text-align:center; text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.35);}
h4.klein {font-size:60px;}
h4.hinweis {color:#ff7cd8;}
h4.vorschlag {color:#999999;}
h4.fehler {color:#FF0000;}
h4.ok {color:#009900;}

.indexnav {margin:25px 0px 0px 0px; padding:0px;}
.indexnav li {margin:0px; padding:0px; list-style: none; }
.indexnav li:not(:first-of-type) {margin-top:15px;}
.indexnav li a {margin:0px; padding:0px; display:block; font-size: 20px; line-height:50px; color:#ffffff; text-align:center; font-weight:bold;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cccccc+0,bebebe+50,969696+52,cccccc+100 */
	background: #cccccc; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #cccccc 0%, #bebebe 50%, #969696 52%, #cccccc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #cccccc 0%,#bebebe 50%,#969696 52%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #cccccc 0%,#bebebe 50%,#969696 52%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	-webkit-box-shadow: inset 2px 2px 1px 1px rgba(255,255,255,0.5);
	-moz-box-shadow: inset 2px 2px 1px 1px rgba(255,255,255,0.5);
	box-shadow: inset 2px 2px 1px 1px rgba(255,255,255,0.5);
}
.indexnav li a:hover {background: #bfbfbf; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #bfbfbf 0%, #878787 50%, #6d6d6d 52%, #bcbcbc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #bfbfbf 0%,#878787 50%,#6d6d6d 52%,#bcbcbc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #bfbfbf 0%,#878787 50%,#6d6d6d 52%,#bcbcbc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfbfbf', endColorstr='#bcbcbc',GradientType=1 ); 
}	
.indexnav li a span {margin-left:15px; font-weight:400;}

/*Rechner */
aside {float:right;width:40%; box-sizing:border-box; padding: 25px 20px 20px 20px;}
	#rechner {box-sizing:border-box; width:100%; padding:5%; border:1px solid #000000; 
		-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
		background: #45484d; /* Old browsers */
		background: -moz-linear-gradient(-45deg, #45484d 0%, #000000 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(-45deg, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(135deg, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */		
		-webkit-box-shadow: 5px 5px 9px 3px rgba(0,0,0,0.5);
		-moz-box-shadow: 5px 5px 9px 3px rgba(0,0,0,0.5);
		box-shadow: 5px 5px 9px 3px rgba(0,0,0,0.5);
		-webkit-box-shadow: inset 2px 2px 1px 1px rgba(255,255,255,0.5);
		-moz-box-shadow: inset 2px 2px 1px 1px rgba(255,255,255,0.5);
		box-shadow: inset 2px 2px 1px 1px rgba(255,255,255,0.5);}

#rechner h3 {box-sizing:border-box; background-color:#FFFFFF; margin:0px; padding:5px 10px 5px 10px; font-size:30px; line-height:36px; height:50px; text-align:center; border:2px solid #FFFFFF; color:#454545; 
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ebefc9+0,e5ef94+100 */
	background: #ebefc9; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #ebefc9 0%, #e5ef94 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #ebefc9 0%,#e5ef94 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #ebefc9 0%,#e5ef94 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebefc9', endColorstr='#e5ef94',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	-webkit-box-shadow: inset 2px 2px 1px 1px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 2px 2px 1px 1px rgba(0,0,0,0.5);
	box-shadow: inset 2px 2px 1px 1px rgba(0,0,0,0.5);}
	
#rechner a {display: block; box-sizing:border-box; cursor:pointer; width:30%; text-align:center; font-size:20px; line-height:30px; height:40px; padding:5px; font-weight:300; float:left; margin:5% 5% 0px 0px; color:#F0F0F0; border:1px solid #444444; 
		-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
		background: #45484d; /* Old browsers */
		background: -moz-linear-gradient(-45deg, #45484d 0%, #000000 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(-45deg, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(135deg, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		-webkit-box-shadow: inset 2px 2px 10px 1px rgba(255,255,255,0.2);
		-moz-box-shadow: inset 2px 2px 10px 1px rgba(255,255,255,0.2);
		box-shadow: inset 2px 2px 10px 1px rgba(255,255,255,0.2);}
	#rechner a:nth-of-type(3n+0) {margin-right:0px;}
	#rechner a:hover {color:#BBBBBB; border:1px solid #222222; 
		padding-top:2px;
		padding-left:2px;
		-webkit-box-shadow: inset -2px -2px 10px 1px rgba(255,255,255,0.2);
		-moz-box-shadow: inset -2px -2px 10px 1px rgba(255,255,255,0.2);
		box-shadow: inset -2px -2px 10px 1px rgba(255,255,255,0.2);}
	#rechner a.back {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0000+0,770000+100 */
		background: #cc0000; /* Old browsers */
		background: -moz-linear-gradient(-45deg,  #cc0000 0%, #770000 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(-45deg,  #cc0000 0%,#770000 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(135deg,  #cc0000 0%,#770000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#770000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
	#rechner a.enter {font-size:40px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#627d4d+0,1f3b08+100;Olive+3D */
		background: #627d4d; /* Old browsers */
		background: -moz-linear-gradient(-45deg,  #627d4d 0%, #1f3b08 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(-45deg,  #627d4d 0%,#1f3b08 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(135deg,  #627d4d 0%,#1f3b08 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
	
	#ergebnisse {float:left;width:60%;box-sizing:border-box; padding:30px 0px 0px 0px; margin:0px; position:relative;}
	#ergebnisse li {margin:0px; padding:0px 0px 5px 0px; list-style:none; float:left; text-align:center; width:33%; color:#333333; font-size:15px; line-height:20px;}
	#ergebnisse li:nth-child(3n+1) {clear:both;}
	#ergebnisse li.fehler {color:#DD9900;}
	#ergebnisse li.fehlermax {color:#FF0000;}
	#ergebnisse li span {display:inline-block; font-size:10px; margin-left:6px; width:20px; height:20px; color:#FFFFFF; background-color:#DD9900; text-align:center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
	#ergebnisse li.fehlermax span {background-color:#FF0000;}
	
	p.disclaimer {margin:0px; padding:20px 20px 40px 20px; font-size:11px; line-height:16px; color:#888888;}
	
	#ergebnissliste table {border:0px; border-spacing:0px; margin:30px 0px 30px 0px; width:100%;}
	#ergebnissliste table th {text-align:left;font-size:14px; line-height:18px; font-weight:bold; color:#333333; padding:2px 5px 2px 5px;border-bottom:1px solid #999999;}
	#ergebnissliste table td {text-align:left;font-size:12px; line-height:16px; font-weight:400; color:#333333; padding:2px 5px 2px 5px;border-bottom:1px solid #cccccc;}
	#ergebnissliste table .c {text-align:center;}
	#ergebnissliste table .r {text-align:right;}
	#ergebnissliste table .name {word-wrap: word-break; overflow:hidden;}
	
/* Mobile Portrait */
@media only screen and (max-width:710px){
	.wrapper {max-width:480px;}
	article {width:100%; float:none; padding-top:20px;}
	aside {width:100%; float:none; padding-top:0px;}
	#rechner {width:80%; margin:auto auto;}
	#rechner a {font-size:24px; line-height:45px; height:55px;}
	#ergebnisse {width:100%; float:none;}
	#timer{margin-left:55px;}
}