/* unvisited link */

	a:link {
	  color: black;
	  font-family: sans-serif;
	}

	/* visited link */
	a:visited {
	  color: black;
	}

	/* mouse over link */
	a:hover {
	  color: #333333;
	}

	/* selected link */
	a:active {
	  color: #333333;
	}
	
	body {
	background: url(jugend.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: sans-serif;
	font-size: 1.2em;

	}
 	
	#logo
 	{
 	    width: 350px;
 	    height: 350px;
 	    position: absolute;
 	    left: 50%;
 	    top: 50%;
 	    margin-left: -175px;
 	    margin-top: -175px;
 	 }
	 
	DIV.startseitediv_xxxxxx {
	position:relative;
	 }
 	

 	#content_xxxx
 	{
     display: flex;
	 height: 100%;
	 background-color:green;
 	 }

   #middle
   {
    margin: auto;
	width: 750px;
    height: 950px;   
	background-color:white;
	padding:15px;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    margin-left: -375px;
	    margin-top: -475px;
	overflow: hidden;
	overflow-y: scroll;
   }


@media only screen and (max-width: 1920px) {
		 	   #middle
		 	   {
		 	    margin: auto;
		 		width: 850px;
		 	    height: 750px;   
		 		background-color:white;
		 		padding:15px;
		  	    position: absolute;
		  	    left: 50%;
		  	    top: 50%;
		  	    margin-left: -425px;
		  	    margin-top: -375px;
		 		overflow: hidden;
		 		overflow-y: scroll;
		 	   }

		 	}


@media only screen and (max-width: 1600px) {
	 	   #middle
	 	   {
	 	    margin: auto;
	 		width: 750px;
	 	    height: 550px;   
	 		background-color:white;
	 		padding:15px;
	  	    position: absolute;
	  	    left: 50%;
	  	    top: 50%;
	  	    margin-left: -375px;
	  	    margin-top: -285px;
	 		overflow: hidden;
	 		overflow-y: scroll;
	 	   }

	 	}

@media only screen and (max-width: 1280px) {
			   #middle
			   {
			    margin: auto;
				width: 750px;
			    height: 450px;   
				background-color:white;
				padding:15px;
		 	    position: absolute;
		 	    left: 50%;
		 	    top: 50%;
		 	    margin-left: -375px;
		 	    margin-top: -225px;
				overflow: hidden;
				overflow-y: scroll;
			   }

			}
			
			
@media only screen and (max-width: 1024px) {
	   #middle
	   {
	    margin: auto;
		width: 730px;
	    height: 450px;   
		background-color:white;
		padding:15px;
 	    position: absolute;
 	    left: 50%;
 	    top: 50%;
 	    margin-left: -375px;
 	    margin-top: -225px;
		overflow: hidden;
		overflow-y: scroll;
	   }

	}

@media only screen and (max-width: 800px) {
		#middle
		{
		    margin: auto;
			width: 600px;
		    height: 400px;   
			background-color:white;
			padding:15px;
	 	    position: absolute;
	 	    left: 50%;
	 	    top: 50%;
	 	    margin-left: -310px;
	 	    margin-top: -210px;
			overflow: hidden;
			overflow-y: scroll;
		 }
	   }

@media only screen and (max-width: 650px) {
	
	body {
	font-size: 1.0em;
	}
	
	#middle
	{
	    margin: auto;
		width: 370px;
	    height: 450px;   
		background-color:white;
		padding:15px;
 	    position: absolute;
 	    left: 50%;
 	    top: 50%;
 	    margin-left: -185px;
 	    margin-top: -225px;
		overflow: hidden;
		overflow-y: scroll;
	 }
   }

@media only screen and (max-width: 400px) {
	body {
	font-size: 1.0em;
	}
   
   	#middle
   	{
   	    margin: auto;
   		width: 320px;
   	    height: 450px;   
   		background-color:white;
   		padding:15px;
    	    position: absolute;
    	    left: 50%;
    	    top: 50%;
    	    margin-left: -170px;
    	    margin-top: -225px;
   		overflow: hidden;
   		overflow-y: scroll;
   	 }
      } 
	 
	 	 
 	#link 
 	{
	width:100%;
	text-align: center;
	padding-top:10px;
	padding-bottom:10px;
	background-color:#ffcc00;
	min-height:45px;
 	 }
	 
	 #fussbereich {
	     padding-top:20px;
		 padding-top:10px;
		 position:absolute;
	     bottom: 0;
	     width: 100%;
	     background-color: #ffcc00;
		 text-align: center;
		 min-height:45px;
	 }
	 
    table { margin:auto; }