body{
    background: transparent url(../img/bg/bg_body.jpg) no-repeat fixed 0 0/cover;
    font-family: "Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif		
}

aside, #links, #rechts { margin: 0; }
#links{  width: 200px; float: left; }
#rechts{ width: 200px; float: right; }
#main, main{ width: 920px; margin: 25px auto 20px auto; padding: 0; border:0; }
article{ width: 480px; margin: 0px 220px 10px 220px; padding: 5px 0px 5px 0px;}

h1, h2, h3, h4, h5, p{ margin-top:0; }
a{ font-size: 12px;}
#main, main{
    background-color: white; opacity: 0.85;
    box-shadow: 0 0 5px 2px rgba(0,0,0,.15); moz-box-shadow: 0 0 5px 2px rgba(0,0,0,.15); webkit-box-shadow: 0 0 5px 2px rgba(0,0,0,.15);
}
header{ 
    height: 130px; background: transparent url(../img/bg/bg_header.jpg) no-repeat 0 0;
    margin: 0px 0px 10px 0px;
}
article{ background-color: #ecf1fc; opacity: 0.85; }
footer{ height:20px; clear:both; }

#links img, #rechts img{ width: 99%; }
#links img.pro80, #rechts img.pro80{ width: 80%; margin: 0 10% 0 10%; }
#links img.pro50, #rechts img.pro50{ width: 49%; margin: 0;padding:0; }


/* kleiner 930px */
@media only screen and (min-width: 480px) and (max-width: 930px){header{background-position:-12px;}}
@media only screen and (min-width: 768px) and (max-width: 930px){
    #main, main{ width: 720px; }
    #links, #rechts{ position: static;}
    aside{ width: 200px; float: left; }
    article{ margin: 0px 0px 10px 210px; padding: 5px 5px 5px 10px;}
}		
@media only screen and ( min-width: 600px) and ( max-width: 767px ){
    #main, main{ width: 600px; font-size: 0.85em;}
    #links, #rechts{ position: static;width: 160px;}
    aside{ width: 160px; float: left; }
    article{ width: 410px; margin: 0px 0px 10px 170px; padding: 5px 5px 5px 5px; }
}

/* kleiner 600px */
@media only screen and ( min-width: 0px) and ( max-width: 599px ){ 
	article{ position: static;} 
	#main, main{ box-shadow:none; moz-box-shadow:none; webkit-box-shadow:none;} 
	aside{position: absolute;}
}
@media only screen and ( min-width: 480px) and ( max-width: 599px ) {
    #main, main, aside { width: 480px; }
    article{ width: 460px; margin: 0; padding: 5px 10px 5px 10px; }
    #links, #rechts{ position: static; width:230px; }
}
@media only screen and ( min-width: 0px) and ( max-width: 479px ){
    #main, main, #hw-logo, aside{ width: 100%; font-size: 0.84em; }
    #hw-logo{ margin: 5% 0px 0px 0px;} 
    header{ background: none; height:100%}
    article{ width: 98%; margin: 0;padding: 5px 0.99% 5px 0.99%; }
    #links, #rechts{ width: 47%;}
    #rechts{ float: left; margin-left: 1%}
}