/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

@charset "utf-8";

        <style  type="text/css">
		body {
	background-color: #000000;
	
}

         #banner {
             margin-left:auto; 
             margin-right:auto; 
             width:800px; 
			  
          }

          #banner img { 
             max-width:800px; 
             max-height:100px; 
          }
 
          #main {
            margin-left:auto;
            margin-right:auto;
            width:800px; 
          }    

          #main-content {
            padding:20px;
            width:760px; 
            float:left;
          }  

           #widget-container {
            padding:1px;
            width:790px; 
            float:none;
          }  
		  #widget-container img {
            
            width:100px; 
           
          }    

          .widget-content {
             margin:0px; 
             padding:1px;
             width:100px;
             background-color: #161616; 
			  float:left;
          } 
		  .widget-content:hover {
             margin:0px; 
             padding:1px;
             width:100px;
             background-color:#FFCC00; 
			 
          }      

          .widget-title {
             font-weight:bold;
             padding:10px;
             background-color:#FFCC00;  
          }    

          .widget-text {
	padding:10px;
	background-color:#FCFCFC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
          } 
		  .main-text {
	padding:10px;
	background-color:#161616;
	background-image: url(../img_noflash/bg_phone.jpg);
	background-repeat: repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #F2DFBB;
	line-height: normal;
	text-align:justify;
	display: block;
          }
		  .main-titel {
	color: #A27900;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	display: block;
         }  
		 .sub-titel {
	color: #A27900;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	display: inline;
	margin-right: 5px;
	margin-left: 5px;
	background-color: #6E0C00;
         }  
         .main-link {
	padding:10px;
	background-color:#BE0400;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: normal;
	display: block;
          }  
		  .textnav {
	font-size: 12px;
	color: #BE0400;
	font-weight: bold;
		}
.textnav:hover {
	font-size: 12px;
	color: #A27900;
	font-weight: bold;
		}  
.gelb {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFD433;
	font-size: 11px;
	font-weight: bold;
	display: inline;
	margin-right: 10px;
} 
.braun {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #D2AA66;
	font-size: 11px;
	font-weight: bold;
	display: inline;
	margin-right: 10px;
} 
.menue {
   float: left;
   position: relative;
   width: 12%;
   padding-bottom: 4%;
   margin-right: 2%;
   margin-left: 2%;
   
}
.but {
   position: absolute;
   left: 1px;
   right: 1px;
   top: 1px;
   bottom: 1px;
   overflow: hidden;
}

.but img {
   width: 100%;
}

.wrap {
   overflow: hidden;
   margin: 10px;
}
.box {
   float: left;
   position: relative;
   width: 50%;
   padding-bottom: 50%;
}
.box2 {
   float: left;
   position: relative;
   width: 25%;
   padding-bottom: 25%;
}
.boxInner {
   position: absolute;
   left: 10px;
   right: 10px;
   top: 10px;
   bottom: 10px;
   overflow: hidden;
}
.boxInner img {
   width: 100%;
}
.boxInner .titleBox {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-bottom: -50px; /*auf z.B 0 setzen um die Titelbox gleich erscheinen zu lassen */
   background: #000;
   background: rgba(0, 0, 0, 0.5); /* für alpha darstellung - letzter wert */
   color: #FFF;
   padding: 10px;
   text-align: center;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
   margin-bottom: 0;
}

.boxStart {
   float: left;
   position: relative;
   width: 100%;
   padding-bottom: 100%;
   
   
}
.boxStartInner {
   position: absolute;
   left: 1px;
   right: 1px;
   top: 1px;
   bottom: 1px;
   overflow: hidden;
}

.boxStartInner img {
   width: 100%;
}

#footer {
             margin-left:auto; 
             margin-right:auto; 
             width:800px;  
          }

          #footer img { 
             max-width:800px; 
             max-height:50px; 
          }
   
 @media (min-width: 769px) and (max-width: 970px) {
            #banner { width:800px; }
            #banner img { max-width:800px; max-height:100px; }
            #main { width:800px; }            
            #main-content { width:760px; }
			#footer { width:800px; }
            #footer img { max-width:800px; max-height:50px; }
            
            
          } 

@media (min-width: 641px) and (max-width: 768px) {
            #banner { width:660px; }
            #banner img { max-width:660px; max-height:83px; }
            #main { width:660px; }            
            #main-content { width:620px; }
           .menue {width: 16%; padding-bottom: 6%; margin-right: 2%; margin-left: 2%}
		   #footer { width:660px; }
            #footer img { max-width:660px; max-height:41px; }
           
          } 
		  
@media (min-width: 481px) and (max-width: 640px) {
            #banner { width:520px; }
            #banner img { max-width:520px; max-height:65px; }
            #main { width:520px; }            
            #main-content { width:500px; padding:10px }
			.menue {width: 18%; padding-bottom: 6%; margin-right: 1%; margin-left: 1%}
			 #footer { width:520px; }
            #footer img { max-width:520px; max-height:33px; }
           
           
          } 
		  
@media (min-width: 421px) and (max-width: 480px) {
            #banner { width:450px; }
            #banner img { max-width:450px; max-height:56px; }
            #main { width:450px; }            
            #main-content { width:430px; padding:10px}
			.main-titel { font-size: 12px; font-weight: bold; display: left; }    
			
			.menue {width: 20%; padding-bottom: 6%; margin-right: 0%; margin-left: 0%}        
			
			.box { width: 50%; padding-bottom: 50%; margin-right: 10%; margin-left: 10%}
			.box2 { width: 50%; padding-bottom: 50%; margin-right: 10%; margin-left: 10%}
			.boxStart { width: 80%; padding-bottom: 80%; margin-right: 10%; margin-left: 10%}
			 #footer { width:450px; }
            #footer img { max-width:450px; max-height:28px; }
			
          }
		  
@media (min-width: 361px) and (max-width: 420px) {
            #banner { width:410px; }
            #banner img { max-width:410px; max-height:51px; }
            #main { width:410px; }            
            #main-content { width:400px; padding:5px}
			.main-titel { font-size: 12px; font-weight: bold; display: left; }    
			
			.menue {width: 20%; padding-bottom: 6%; margin-right: 0%; margin-left: 0%}        
			
			.box { width: 50%; padding-bottom: 50%; margin-right: 10%; margin-left: 10%}
			.box2 { width: 50%; padding-bottom: 50%; margin-right: 10%; margin-left: 10%}
			.boxStart { width: 80%; padding-bottom: 80%; margin-right: 10%; margin-left: 10%}
			 #footer { width:410px; }
            #footer img { max-width:410px; max-height:26px; }
			
          }

 @media (min-width: 321px) and (max-width: 360px) {
            #banner { width:350px; }
            #banner img { max-width:350px; max-height:44px; }
            #main { width:350px; }            
            #main-content { width:340px; padding:5px;}
			.main-titel { font-size: 12px; font-weight: bold; display: left; }
			
			.menue {width: 33%; padding-bottom: 12%; margin-right: 0%; margin-left: 0%}
			
			.box { width: 40%; padding-bottom: 40%; margin-right: 1%; margin-left: 1%}
			.box2 { width: 40%; padding-bottom: 40%; margin-right: 1%; margin-left: 1%}
			.boxStart { width: 80%; padding-bottom: 80%; margin-right: 10%; margin-left: 10%}
			 #footer { width:350px; }
            #footer img { max-width:350px; max-height:22px; }
          }

          @media (max-width: 320px) {
            #banner { width:320px; } /*{ display:none; } */
            #banner img { max-width:320px; max-height:40px; padding:2px;}
            #main { width:310px; }  
			#main-content { width:304px; padding:3px; margin:3px;} 
			.main-titel { font-size: 11px; font-weight: bold; display: left; } 
			
			.menue {width: 33%; padding-bottom: 12%; margin-right: 0%; margin-left: 0%}        
           
			.box { width: 50%; padding-bottom: 50%; margin-right: 0%}
			.box2 { width: 50%; padding-bottom: 50%; margin-right: 0%}
			.boxStart { width: 100%; padding-bottom: 100%; margin-right: 0%}
			 #footer { width:320px; }
            #footer img { max-width:320px; max-height:20px; }
			
			
          }


	    </style>