/*
	 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:125px; 
          }
 
          #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;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	line-height: normal;
	text-align:justify;
	display: block;
          }
		  .main-titel {
	color: #F5811E;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	display: block;
         }  
         .main-link {
	padding:10px;
	background-color:#F5811E;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: normal;
	display: block;
          }  
		  .textnav {
	font-size: 12px;
	color: #F5811E;
	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;
} 
.textnav:hover {
	font-size: 12px;
	color: #FFFDDB;
	font-weight: bold;
}  

.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%;
}

.but:hover {
   position: absolute;
   left: 1px;
   right: 1px;
   top: 1px;
   bottom: 1px;
   overflow: hidden;
   background-color:#F5811E;
}
.box {
   float: left;
   position: relative;
   width: 100%;
   padding-bottom: 100%;
   
   
}
.box2 {
   float: right;
   position: relative;
   width: 40%;
   padding-bottom: 40%;
   
}

.boxInner {
   position: absolute;
   left: 1px;
   right: 1px;
   top: 1px;
   bottom: 1px;
   overflow: hidden;
}
.boxInner video {
   width: 100%;
}

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

@media (min-width: 641px) and (max-width: 768px) {
            #banner { width:660px; }
            #banner img { max-width:660px; max-height:103px; }
            #main { width:660px; }            
            #main-content { width:620px; }
           .menue {width: 16%; padding-bottom: 6%; margin-right: 2%; margin-left: 2%}
           
          } 
		  
@media (min-width: 481px) and (max-width: 640px) {
            #banner { width:520px; }
            #banner img { max-width:520px; max-height:81px; }
            #main { width:520px; }            
            #main-content { width:500px; padding:10px }
			.menue {width: 18%; padding-bottom: 6%; margin-right: 1%; margin-left: 1%}
           
           
          } 
		  
@media (min-width: 421px) and (max-width: 480px) {
            #banner { width:450px; }
            #banner img { max-width:450px; max-height:70px; }
            #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: 80%; padding-bottom: 80%; margin-right: 10%; margin-left: 10%}
			.box2 { width: 80%; padding-bottom: 80%; margin-right: 10%; margin-left: 10%}
			
          }
		  
@media (min-width: 361px) and (max-width: 420px) {
            #banner { width:410px; }
            #banner img { max-width:410px; max-height:64px; }
            #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: 80%; padding-bottom: 80%; margin-right: 10%; margin-left: 10%}
			.box2 { width: 80%; padding-bottom: 80%; margin-right: 10%; margin-left: 10%}
			<video width:400px >
			
          }

 @media (min-width: 321px) and (max-width: 360px) {
            #banner { width:350px; }
            #banner img { max-width:350px; max-height:55px; }
            #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: 80%; padding-bottom: 80%; margin-right: 10%; margin-left: 10%}
			.box2 { width: 80%; padding-bottom: 80%; margin-right: 10%; margin-left: 10%}
          }

          @media (max-width: 320px) {
            #banner { width:320px; } /*{ display:none; } */
            #banner img { max-width:320px; max-height:50px; 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: 100%; padding-bottom: 100%; margin-right: 0%}
			.box2 { width: 100%; padding-bottom: 100%; margin-right: 0%}
			
			
          }


	    </style>