* {
    margin:     0;
    padding:    0;
    font-family:"Verdana", sans-serif;
}

body {
    background: url(../images/bg_body.png);
    text-align: center;
    padding-bottom:10px;
}

/* The hide class is used for html blocks which get replaced by images through
 * JavaScript.
 */
.hide { display:    none; }


.einwort { white-space:nowrap; }

a img { border:0; }

#behaelter {
    width:      780px;
    background: #FFFFFF;
    text-align: left;
    margin:     auto;
}

#kober {
    background: url(../images/bg_kober.png) repeat-x;
}

#logo {
    padding-top:15px;
    padding-left:15px;
    padding-bottom:10px;
    border-bottom:1px solid red;
}

#logo a img {
    float:      left;
}

#logo p {
    padding-top: 10px;
    margin-left: 92px;
    text-align: center;
    width:      300px;
    color:      #666666;
}

#adresse {
    color:      #666666;
    font-size:  70%;
    line-height:140%;
    margin:     2px;
}
#adresse ul { list-style-type:none; }
#adresse ul li {
    float:      left;
    margin-bottom:5px;
    text-align: center;
    width:      220px;
}
#adresse ul li.telefon {
    width:      300px;
}
#adresse ul li a { 
    text-decoration:none; 
    color:      #666666;
}
#adresse ul li a:hover { color:#000000; }

#navigation {
    clear:      both;
    background: url(../images/bg_nav.png) no-repeat;
    height:     41px;
    padding-left:70px;
    text-align: center;
}

#navigation ul { list-style-type:none; }

#navigation ul li {
    float:      left;
    text-transform:uppercase;
    line-height:30px;
    font-size:  12px;
    margin-right:30px;
}

#navigation ul li a {
    height:     41px;
    display:    block;
}
#navigation ul li.nav_unternehmen a { width:131px; }
#navigation ul li.nav_aktuell a { width:118px; }
#navigation ul li.nav_referenzen a { width:113px; }
#navigation ul li.nav_links a { width:54px; }
#navigation ul li.nav_lageplan a { width:91px; }
#navigation ul li.nav_impressum a { width:105px; }
#navigation ul li a:hover {
    background: url(../images/bg_navihov.png); 
}

#unternehmen #navigation ul li.nav_unternehmen { 
    background: url(../images/bg_navisel.png); 
}
#aktuell #navigation ul li.nav_aktuell { 
    background: url(../images/bg_navisel.png); 
}
#referenzen #navigation ul li.nav_referenzen { 
    background: url(../images/bg_navisel.png); 
}
#links #navigation ul li.nav_links { 
    background: url(../images/bg_navisel.png); 
}
#lageplan #navigation ul li.nav_lageplan { 
    background: url(../images/bg_navisel.png); 
}
#impressum #navigation ul li.nav_impressum { 
    background: url(../images/bg_navisel.png); 
}

#navigation ul li a { color:#FFFFFF; }
#navigation ul li a:hover { text-decoration:none; }

#fuber { 
    background:     url(../images/bg_fuber.png) repeat-y;
    clear:          both; 
    color:          #666666;
}
#fuber p {
    text-transform: uppercase;
    text-align:     center;
    font-size:      x-large;
    letter-spacing: 0.3em;
}
#fuber p img {
    padding-top:    5px;
    padding-bottom: 5px;
}
#fuber p#slogan {
    color:          #FFFFFF;
    border-bottom:  1px solid #FFFFFF;
    background:     url(../images/bg_fuberslo.png) repeat-y;
    letter-spacing: 0.7em;
}

#haube {
    background:     url(../images/bg_haube.png) repeat-y;
    padding-right:  30px;
}

#fotos {
    xbackground:     url(../images/bg_fotos.png) repeat-y;
    float:          left;
    width:          457px;
    width:          465px;
    border-top:     1px solid #FFFFFF;
}

#haube #text {
    border:         1px solid #FFFFFF;
    padding:        5px;
    background:     url(../images/hellgrau.png);
}

#haube #text div.lockmittel {
    margin-top:     20px;
    margin-bottom:  20px;
}

#haube #text div.lockmittel_leicht {
    background:     url(../images/bg_lomi.png) repeat-y;
    padding-top:    5px;
    padding-bottom: 3px;
    padding-left:   15px;
    margin-bottom:  5px;
    color:          #990000;
    font-weight:    bold;
}
#haube #text div.lockmittel_leicht p { color:#990000;}

#haube #text h1 {
    color:          #CC0000;
    font-size:      80%;
    text-transform: uppercase;
    margin-top:     10px;
    margin-bottom:  15px;
}

#haube #text h3 {
    color:          #990033;
    font-size:      90%;
    margin-top:     15px;
    margin-bottom:  7px;
    background:     url(../images/bg_h3.png) center left no-repeat;
    padding-left:   25px;
}

#haube #text h5 {
    font-size:      70%;
    color:          #666666;
}

#haube #text h6 {
    color:          #666666;
}

#haube #text p {
    font-size:      70%;
    line-height:    150%;
    color:          #666666;
    margin-bottom:  10px;
    text-align:     left;
    position:       relative;
}

#haube #text p a {
    color:          #666666;
    font-weight:    bold;
    text-transform: uppercase;
    background:     url(../images/bg_link_0.png) center left no-repeat;
    padding-left:   10px;
}
#haube #text p a:hover {
    background:     url(../images/bg_link_1.png) center left no-repeat;
    background-color:#CC0000;
    color:          #FFFFFF;
}

#fotos ul { 
    /* The width of the ul are set so the border at the bottom won't overlap the
     * background image of the fotos container.
     */
    width:          456px;
    list-style-type:none; 
    height:         195px;
    xborder-bottom:  1px solid #FFFFFF;
    /* The images get vertically centered by setting the padding-top
     * instruction. but since this would leave a white space of 8 pixels beneath
     * the ul, a negative margin is set as the next instruction:
     */
    xpadding-top:    8px;
    margin-bottom:  -8px;
}
#fotos ul.fotos1 { background:url(../images/bg_fotos1.png) no-repeat; }
#fotos ul.fotos2 { background:url(../images/bg_fotos2.png) no-repeat; }
#fotos ul.fotos3 { background:url(../images/bg_fotos3.png) no-repeat; }
#fotos ul.fotos4 { background:url(../images/bg_fotos4.png) no-repeat; }
#fotos ul.fotosfuss1, #fotos ul.fotosfuss2, #fotos ul.fotosfuss3 { 
    height:         213px;
    background:url(../images/bg_fotosf1.png) no-repeat; 
    /* Here at the footer section the bottom border is disabled, because it will
     * cause problems in Firefox. Setting a border in the main #fotos container
     * would too cause a problem because this border would overlap the
     * background image. So to still get a sort of border at the bottom, the
     * bottom margin is set to -7 instead of -8!
     */
    border-bottom:  none;
    xmargin-bottom:  -7px;
    margin-bottom:  5px;
}
#fotos ul.fotosfuss2 { height:158px; }
#fotos ul.fotosfuss3 { 
    height:         195px; 
    background:     url(../images/bg_fotos1.png) no-repeat; 
}
#fotos ul li {
    display:        inline;
    margin-left:    30px;
    margin-right:   2px;
    margin-right:   -6px;
}

#fotos ul li a img { border:1px solid #666666; }
#fotos ul li a:hover img { border:1px solid #FFFFFF; }

#webdesign {
    float:          right;
    font-size:      x-small;
    padding-right:  5px;
}

#webdesign a img {
    border:         none;
    position:       relative;
    left:           20px;
}

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

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}