/*
 * Table of Contents:
 * 
 * 1. MACRO -> Layout
 * 2. MACRO -> Typographie
 * 3. MACRO -> Tables
 * 4. MACRO -> Forms
 * 5. MACRO -> Helper
 * 6. MACRO -> Images
 * 7. micro -> Layout
 * 8. micro -> Templates
 *
 */

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Layout */

* {
font-family: sans-serif;
}

html {

border-top: 345px solid #3da8d7;
}

body {
position: relative;
width: 900px;
margin: 0 auto;
font: 16px/23px "Trebuchet MS";
}

h2 {
width: 899px;
height: 127px;
margin: -200px 0 110px;
font-size: 37px;
line-height: 48px;
text-indent: -9999px;
color: #fff;
background: url(../media/images/layout/text_manchmal_sollte_man.png)
}

h1 {
width: 315px;
height: 62px;
margin-bottom: 25px;
font-size: 37px;
font-weight: bold;
text-indent: -9999px;
color: #3da8d7;
background: url(../media/images/layout/logo.png);
}

h1 small {
display: block;
margin-top: 5px;
text-transform: uppercase;
font-size: 20px;
color: #000;
}

p {
width: 515px;
margin-bottom: 12px;
}

address#kontakt {
position: absolute;
right: 0;
top: 330px;
width: 305px;
height: 66px;
text-align: center;
color: #3da8d7;
}

address#kontakt a {
display: block;
width: 305px;
height: 66px;
margin-bottom: 5px;
-moz-border-radius: 6px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 18px;
line-height: 66px;
text-decoration: none;
text-transform: uppercase;
text-indent: -9999px;
color: #fff;
background: #3da8d7 url(../media/images/layout/button_mail.png);
}

address#kontakt a {
display: block;
}

address#kontakt a:hover {
background: #000 url(../media/images/layout/button_mail.png) bottom;
}

address#kontakt strong {
color: #000;
}

#footer {
margin-top: 75px;
margin-bottom: 20px;
padding-top: 20px;
background: url(../media/images/layout/bg_footer.png) no-repeat;
}

#footer h3 {
display: inline;
float: right;
}

#footer address strong {
color: #30a9d8;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Helper */

/* >>>>>>>>>>>>>> Helper > Horizontal Lists */

.hl li {
float: left;
}

/* >>>>>>>>>>>>>> Helper > Clearfix */

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

/* >>>>>>>>>>>>>> Helper > Invisibility */

.invis {
position: absolute;
left: -9999px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Images */

/* >>>>>>>>>>>>>> Images > Icons */
.icon {}

/* >>>>>>>>>>>>>> Images > Replaced */
.replaced {
display: block;
text-indent: -9999px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> micro -> Layout */



/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> micro -> Templates */