*{
	margin:0;
	padding:0;
	}
a img {
   border:0;
}
	
body{
	background: #f2f2f2;
	//background: white;
	}

p{
	float: left;
	font: 10px Helvetica;
	}
	
h1{
	font: 30px/0.8em Helvetica-Bold, Arial;
	font-weight: bold;
	//margin: -2px;
	//padding: 4px;
	//background-color: hsl(0,100%,40%);
	color: black;
	position: relative;
	z-index: 3;
	}
	
h2{
	font: 10px/1em Helvetica, Arial;
	margin-left: -3px;
	margin-top: -2px;
	//background-color: hsl(0,100%,40%);
	color: black;
	padding: 5px;
	position: relative;
	z-index: 3;
	//display: inline;
	}

#blackgrid{
	width: 150px;
	height: 380vh;
	background: #bbb;
	position: absolute;
	z-index: 1;
	left: 50%;
	margin-left: -75px;
	margin-top: 35px;
	}	
	
#mainul {
	//overflow: auto;
	margin: 120px auto;
	width: 208px;
	}

#mainul li{
	list-style: none;
	}

#mainul li > div {
	background: white;
	//overflow: hidden;
	width: 184px;
	height: 184px;
	float: left;
	margin: 0 8px 20px 8px;
	padding: 4px;
	position: relative;
	z-index: 3;
	//-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
	//-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
	//box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
	//border-radius: 20px;
	
	-webkit-transition: all 0.3s ease-in-out;
  	-moz-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
	}

.triangle{
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 120px 80px 0 0;
	border-color: hsl(0,100%,40%) transparent transparent transparent;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	}

.t_new{
	border-color: hsl(0,100%,40%) transparent transparent transparent;
	}
.t_easy{
	border-color: #00cd00 transparent transparent transparent;
	}
.t_mid{
	border-color: #fdce03 transparent transparent transparent;
	}
.t_hard{
	border-color: #fa6f12 transparent transparent transparent;
	}
.t_blue{
	border-color: #8093d1 transparent transparent transparent;
	}

.h_new{
	background: hsl(0,100%,40%);
	}
.h_easy{
	background: #00cd00;
	}
.h_mid{
	background: #fdce03;
	}
.h_hard{
	background: #fa6f12;
	}
.h_blue{
	background: #8093d1;
	}

.h1bg{
	position: absolute;
	left: 0px;
	width: 80px;
	z-index: 2;
	}


 
	
#mainul li div img{
	//display: block;
	position: absolute;
	display: block;
	bottom: 10px;
	//margin-top: -50px;
	//margin-left: 0px;
	//width: 100px;
	z-index: 1;
	}
	
#mainul li div:hover{
	//width: 210px;
	//height: 210px;
	//left: -5px;
	//top: -5px;
	//z-index: 1000;
	//-webkit-transform: scale(1.1);
	}


.a100{
	width: 100px;
	left: 48px;
	}
.a110{
	width: 110px;
	left: 43px;
	}
.a120{
	width: 120px;
	left: 38px;
	}
.a130{
	width: 130px;
	left: 33px;
	}
.a140{
	width: 140px;
	left: 28px;
	}
.a150{
	width: 150px;
	left: 23px;
	}
.a160{
	width: 160px;
	left: 18px;
	}
.a170{
	width: 170px;
	left: 13px;
	}
.a180{
	width: 180px;
	left: 8px;
	}
	
		
	#header p { display: none;}

@media only screen and (min-width : 506px) {
	#mainul { width: 416px;	}
	}
	
@media only screen and (min-width : 724px) {
	#mainul { width: 624px;	}
	#header p { display: block;}
	}
	
@media only screen and (min-width : 932px) {
	#mainul { width: 832px;	}
	}
	
	
	
/* kduia */

#header{
	position: fixed;
	overflow: hidden;
	left: 0px;
	z-index: 10;
	top:0px;
	background: rgba(255,255,255,0.95);
	width: 100%;
	height: 150px;
	-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
	box-shadow: 0px -3px 10px #000;
	zoom: 0.5;
	}

h3 {
	position: absolute;
	margin-left: 34px;
	margin-top: 126px;
	color: #696969;
	font: 8pt Helvetica, Arial; 	
}

#spektrum{
	position: absolute; 
    margin-left:104px;
    margin-top: 30px;
	}

#logo{
	position: absolute;
	margin: 27px 30px;
	margin-left: 34px;
}
#kamibox_de {display:none}
#logo:hover #kamibox_de{
	display:block;
	position: fixed;
	margin-left: -34px;
	margin-top: -130px;
	}
#logo:active #kamibox_de{
	display:block;
	position: fixed;
	margin-left: -34px;
	margin-top: -130px;
	}

#facebook h1{
	margin-top:32px;
	margin-left:-364px;
	z-index:5;}
	
#donate h1{
	margin-top:-3px;
	margin-left:-364px;
	z-index:5;}

#about{display:none;}
#ios{display:none;}
#iosb{	position:absolute; 
	margin-top:160px; 
	left: 50%; 
	margin-left: 10px;
	display:block;}
#you{display:none;}
#download{display:none;}
#a:hover #about{
	display:block;
	}
#i:hover #ios{
	display:block;
	}
#u:hover #you{
	display:block;
	}
#d:hover #download{
	display:block;
	}
#a:active #about{
	display:block;
	}
#i:active #ios{
	display:block;
	}
#u:active #you{
	display:block;
	}
#d:active #download{
	display:block;
	}
#spenden:hover #donate{
	display:block;
}
#spenden:active #donate{
	display:block;
}
#fb:hover #facebook{
	display:block;
}
#fb:active #facebook{
	display:block;
}

#iosa:hover #iosb{
	display:none;
}
#iosa:active #iosb{
	display:none;
}

.a  { 
 	position: absolute; 
    margin-top: 27px;
    margin-left: 246px;
	z-index: 2;
    background-image:url(../bilder/header_a_h3.png);
    width:69px;
    height:104px;
}      

#blocker_a {
	position: absolute; 
    margin-top: 29px;
    margin-left: 244px;
	z-index: 1;
    width:66px;
    height:98px;
	display:block;
	}
	
#a:hover #blocker_a {
    display:none;
	}  
#a:active #blocker_a {
    display:none;
	} 
 
 	
.i  { 
 	position: absolute; 
    margin-top: 27px;
    margin-left: 253px;
	z-index: 2;
    background-image:url(../bilder/header_i_h3.png);
    width:51px;
    height:104px;
}   

#blocker_i {
	position: absolute; 
    margin-top: 29px;
    margin-left: 253px;
	z-index: 1;
    width:52px;
    height:98px;
	display:block;
	}
	
#i:hover #blocker_i {
    display:none;
	}   
#i:active #blocker_i {
    display:none;
	}   

 	
.u  { 
 	position: absolute; 
    margin-top: 27px;
    margin-left: 172px;
	z-index: 2;
    background-image:url(../bilder/header_u_h3.png);
    width:81px;
    height:104px;
}

#blocker_u {
	position: absolute; 
    margin-top: 29px;
    margin-left: 172px;
	z-index: 1;
    width:82px;
    height:98px;
	display:block;
	}
	
#u:hover #blocker_u {
    display:none;
	}
#u:active #blocker_u {
    display:none;
	}
		
	
.d  { 
 	position: absolute; 
    margin-top: 27px;
    margin-left: 99px;
	z-index: 2;
    background-image:url(../bilder/header_d_h3.png);
    width:75px;
    height:104px;
}

#blocker_d {
	position: absolute; 
    margin-top: 29px;
    margin-left: 99px;
	z-index: 1;
    width:76px;
    height:98px;
	display:block;
	}
	
#d:hover #blocker_d {
    display:none;
	}
#d:active #blocker_d {
    display:none;
	}

#header p {
	position: absolute;
	text-align: right;
	right: -50px;
	padding: 40px 100px;
	}