body {



	height: 100%;

	width: 100%;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

	margin-left: 0px;
	background-color: beige;
	font-size:100%;

}

@font-face {
  font-family: "UbuntuTitling-Bold-webfont";
  src: url("type/UbuntuTitling-Bold-webfont.eot");
  src: local("?"),
    url("type/UbuntuTitling-Bold-webfont.woff") format("woff"),
    url("type/UbuntuTitling-Bold-webfont.otf") format("opentype"),
    url("type/UbuntuTitling-Bold-webfont.svg#UbuntuTitling-Bold-webfont") format("svg");
  }





a:link, a:visited {
  font-family:"UbuntuTitling-Bold-webfont","Helvetica","Arial",sans-serif;
  font-size: 20px;
  text-decoration: none;
  line-height: 1.4;
  color: #E06506;
  }



}



#gesamt {
	position: absolute;  /* hier lag des problemes lösung! Ohne diese Zeile verrutscht #box nach rechts, auch wenn der hintergrund eine min width hat. */

	height: 100%;

	width: 100%;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

	margin-left: 0px;
	min-width:800px;
	background-color:;

}



#bg1 {

	background-image: url(./images/saule4.png); 	

	background-size: 100%;	

	width: 25%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;

	top: 1%;

	left: -35px;

	z-index: 4;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;
	min-width:250px;

}



#bg3 {

	background-image: url(./images/zeiten6.png); 	

	background-size: 100%;	

	width: 27%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;

	top: 70%;   /* DETEKTIVARBEIT GESCHAFFT! Der dusselige abstand nach unten kam daher, daß die handler des bildes oben liegen! top: 88%, Margin-top 12% */

	Margin-top:-2%;
	right: -5%;

	z-index: 13;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;
	min-width:250px;



}



#bg2 {

	background-image: url(./images/malen3.png); 	

	background-size: 100%;	

	width: 27%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 72%;   

	Margin-top:-2%;
	min-width:280px;
	left: -5%;

	z-index:10;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;


}

#bg2b {

	background-image: url(./images/baum.png); 	

	background-size: 100%;	

	width: 20%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 51%;   /* hat sehr gut ausgesehn mit top: 36%, margin-top:-4%, left:-5, width: 22% , oder mit top: 55%, margin-top:-4%, left:-1%, width: 18%*/

	Margin-top:-4%;
	left: -109px;

	z-index:11;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;
	min-width:220px;

}


#bg2c {

	background-image: url(./images/ball.png); 	

	background-size: 100%;	

	width: 9%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 58%;   /* left: 8%; top: 53%; width: 10%; */

	left: 6%;

	z-index:1;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;
	min-width:90px;

}



#bg2e {

	background-image: url(./images/Masken.png); 	

	background-size: 100%;	

	width: 10%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	bottom: -42%;   /* war -55%, liegt daran, daß das bild einen unsichtbaren rand hat. Bilder von Nun an OHNE RAND MACHEN! */

	left: 10%;

	z-index:5;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;
	min-width:100px;

}




#bg2d {

	background-image: url(./images/tischtennis2.png); 	

	background-size: 100%;	

	width: 11%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top:51%;   /* war -55%, liegt daran, daß das bild einen unsichtbaren rand hat. Bilder von Nun an OHNE RAND MACHEN! */

	right: 4%;

	z-index:8;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;
	min-width:80px;

}


#bg2f {

	background-image: url(./images/vier-gewinnt2.png); 	

	background-size: 100%;	

	width: 10%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 65%;   /* war -55%, liegt daran, daß das bild einen unsichtbaren rand hat. Bilder von Nun an OHNE RAND MACHEN! */

	right: 8%;

	z-index:2;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;
	min-width:100px;

}


#bg2g {

	background-image: url(./images/impressum2.png); 	

	background-size: 100%;	

	width: 9%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 89%;   /* war -55%, liegt daran, daß das bild einen unsichtbaren rand hat. Bilder von Nun an OHNE RAND MACHEN! */

	right: -0%;

	z-index:16;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;
	min-width:80px;

}


#bg2h {

	background-image: url(./images/quader1c.png); 	

	background-size: 100%;	

	width: 16%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 45%;   /* war -55%, liegt daran, daß das bild einen unsichtbaren rand hat. Bilder von Nun an OHNE RAND MACHEN! */

	right: -4%;

	z-index:9;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;
	min-width:150px;

}


#box1 {
	background-color:;
	position: absolute;

	top: 13%;
	height: auto;

	left: 29%;

	z-index: 2;

	width: 67%; 
	min-width:480px;



}



	#platzhalter1 {
		background-color:;
		float: right;
		width: 20%
	}		


	#textfeld {
		background-color:;
		float: left;
		width: 68%;



	}		



#box2 {
	background-color:;
	position: fixed;

	top: 10%;
	height: auto;

	left:9%;

	z-index: 15;

	width: 88%; 
	min-width:710px;



}



	#navigation {
		background-color:;
		float: right;
		width: 22%;
	}		


	#platzhalter2 {
		background-color:;
		float: left;
		width: 64%

	}		






#bg2k {

	background-image: url(./images/topfern2.png); 	

	background-size: 100%;	

	width: 9%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 85%;   

	Margin-top:-1%;
	left: 27%;

	z-index:6;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;
	min-width:100px;

}


#bg2l {

	background-image: url(./images/topf.png); 	

	background-size: 100%;	

	width: 14%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 84%;   

	Margin-top:-1%;
	min-width:120px;
	left: 34%;

	z-index:8;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;


}

#bg2m {

	background-image: url(./images/kurbis.png); 	

	background-size: 100%;	

	width: 13%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 87%;   

	Margin-top:-2%;
	min-width:120px;
	left: 45%;

	z-index:6;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;


}

#bg2n {

	background-image: url(./images/tamburin.png); 	

	background-size: 100%;	

	width: 7%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 77%;   

	Margin-top:-0%;

	left: 66%;

	z-index:4;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;
	min-width:60px;

}



#bg2o {

	background-image: url(./images/trommel.png); 	

	background-size: 100%;	

	width: 13%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 81%;   

	Margin-top:-3%;
	min-width:110px;
	left: 68%;

	z-index:5;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;


}

#bg2p {

	background-image: url(./images/quader2b.png); 	

	background-size: 100%;	

	width: 15%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 90%;   

	Margin-top:-3%;
	min-width:150px;
	left: 18%;

	z-index:12;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;


}

#bg2q {

	background-image: url(./images/quader3.png); 	

	background-size: 100%;	

	width: 8%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 65%;   

	Margin-top:-3%;
	min-width:100px;
	left: 12%;

	z-index:2;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;


}

#bg2r {

	background-image: url(./images/Bucher2.png); 	

	background-size: 100%;	

	width: 11%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 90%;   

	Margin-top:-3%;
	min-width:100px;
	left: 70%;

	z-index:2;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;


}

#bg2s {

	background-image: url(./images/bastel.png); 	

	background-size: 100%;	

	width: 5%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 43%;   

	Margin-top:-3%;
	min-width:40px;
	left: 95%;

	z-index:4;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;


}

#bg2t {

	background-image: url(./images/quader4.png); 	

	background-size: 100%;	

	width: 20%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 86%;   /* war -55%, liegt daran, daß das bild einen unsichtbaren rand hat. Bilder von Nun an OHNE RAND MACHEN! */

	left: 50%;

	z-index:3;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;
	min-width:70px;
}

#bg2u {

	background-image: url(./images/quader4.png); 	

	background-size: 100%;	

	width: 20%;			

	height: 100%;			

	background-repeat: no-repeat; 	/* kein repeat des hintergrunds */

	position: fixed;    

	top: 86%;   /* war -55%, liegt daran, daß das bild einen unsichtbaren rand hat. Bilder von Nun an OHNE RAND MACHEN! */

	left: 76%;

	z-index:3;
	-webkit-user-select: none;

	-khtml-user-select: none;

	-moz-user-select: none;

	-o-user-select: none;

	user-select: none;
	min-width:70px;
}