/* undo */
* { padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, pre, code { font-weight: normal; margin: 0; padding: 0; }
ul, ol, li, body, html, p { margin: 0; padding: 0; }
img, a img, :link img, :visited img { border: none; }
img { margin: 0; padding: 0; vertical-align: bottom; }

/* --- Vertikalen Scrollbalken immer einblenden --- */ 
html, body { height: 100%; }
html { overflow: scroll; overflow-x: auto;  }

/* --- Fuer responsive Webseiten --- */ 
img, object { max-width: 100%; height: auto; }

/* ----------------------------------------------------------------------------------
 Clearfix, um das Floating innerhalb der Container aufzuheben fuer Firefox, IE8, Opera, Safari, etc.
---------------------------------------------------------------------------------- */ 
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; line-height: 0; }
* + html .clearfix { display: inline-block; } /* fuer IE7 */
* html .clearfix { height: 1%; } /* fuer IE6 */

html, body { 
font-family: Arial, Helvetica, sans-serif; font-size: 20px; line-height: 30px; color: #555;
background-color: #FFF;
}


a { text-decoration: none; color: #0063a3; }
a:hover { text-decoration: none; color: #555; }
a:active, a:focus { outline: 0; }
a:hover img { opacity: 0.8; }

ul { margin: 0 0 20px 0; padding: 0; }
ul li { list-style-type: disc; list-style-position: outside; margin: 0 0 10px 18px; padding: 0; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; font-style: normal; font-size: 14px; line-height: 20px; margin: 0 0 20px 0; color: #625d57; }
h1 { font-size: 35px; line-height: 45px; } 
h2 { font-size: 30px; line-height: 40px; } 
h3 { font-size: 25px; line-height: 35px; } 

p { margin: 0 0 20px 0; padding: 0;}


#page{
clear: both;
display: block; 
position: relative; 
top: 0; left: 0; width: 100%; height: auto; min-height: 100%; 
margin: 0; padding: 0;
z-index: 1;
background-color: #FFF; 
}


#logo { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 110px; margin: 0; padding: 23px 0 0 0; z-index: 10; text-align: right; }


#content { clear: left; display: block; width: 1200px; height: auto; margin: 0 auto; padding: 180px 0; }

#footer_bg { display: block; position: absolute; top: auto; bottom: 0; left: 0; width: 100%; height: 142px; margin: 0; padding: 0; z-index: 10; background-image: url(footer_bg.png); background-repeat: repeat-x; background-position: center top; overflow: hidden; }
#footer { display: block; position: relative; top: 0; left: 0; width: 1600px; height: 40px; margin: 56px auto 0 auto; padding: 0; color: #FFF; font-size: 25px; line-height: 40px; }

#footer_logo { position: absolute; display: block; top: -56px; left: 0; width: 220px; height: 142px; margin: 0; padding: 0; z-index: 10; }

#footer a { text-decoration: none; color: #FFF; }
#footer a:hover { text-decoration: none; color: #777370; }

#footer_left { display: block; width: auto; height: auto; margin: 0 0 0 240px; padding: 0; }
#footer_left span { display: inline-block; margin: 0 12px; }

#footer_right { display: block; position: absolute; top: 0; left: auto; right: 15px; width: 200px; height: auto; margin: 0; padding: 0; font-size: 16px; line-height: 40px; text-align: right; }




#page_index #content { text-align: center; }

#page_index #webseite_im_aufbau { font-size: 40px; line-height: 50px; } 


/* ----------------------------------------------------------------------------------
   Responsive Webdesign
----------------------------------------------------------------------------------  */
@media all and (min-width:1px) {
#page { width: 100%; min-width: 300px; overflow: hidden; }
}

@media all and (max-width:1600px) {
#page { width: auto; min-width: 300px; height: auto; margin: 0; padding: 0; }

#footer { display: block; position: relative; top: 0; left: 0; width: 100%; height: 40px; margin: 56px auto 0 auto; padding: 0; color: #FFF; font-size: 25px; line-height: 40px; }

#footer_logo { left: -80px; }
#footer_left { margin: 0 0 0 160px; }

}


@media all and (max-width:1250px) {
#logo { position: relative; top: 0; left: 0; width: auto; height: auto; padding: 23px 0 0 15px; }
#content { clear: left; display: block; width: auto; height: auto; margin: 0 auto; padding: 45px 15px; }

#footer_bg { position: relative; top: 0; bottom: auto; }

#footer_left span { margin: 0 8px; font-size: 24px; }
}

@media all and (max-width:1024px) {
html, body { font-size: 18px; line-height: 25px; }

h1 { font-size: 30px; line-height: 40px; } 
h2 { font-size: 25px; line-height: 35px; } 
h3 { font-size: 20px; line-height: 30px; } 
	
#logo { padding: 10px 0 0 15px; }
#logo img { max-width: 320px; }
	
#content { clear: left; display: block; width: auto; height: auto; margin: 0 auto; padding: 30px 15px; }
	
#footer_bg { height: auto; min-height: 142px; }
#footer { height: auto; }

#footer_left span { margin: 0 6px; font-size: 20px; line-height: 40px; }
	
#footer_right { display: block; position: relative; top: 0; left: 0; right: auto; width: auto; padding: 5px 15px; }
#footer_right a { text-decoration: none; color: #0063a3; }
#footer_right a:hover { text-decoration: none; color: #555; }

#page_index h1 { margin: 50px 0 30px 0; }
}

@media all and (max-width:768px) {


#footer_bg { background-image: none; border-top: 10px solid #555; padding: 30px 0 0 0; }
#footer { height: auto; margin: 0; }

#footer_logo { top: 0; left: -120px; }

#footer_left { margin: 0 0 0 120px; color: #555; }
#footer_left span { display: block; margin: 0; font-size: 20px; line-height: 30px; }




}