/******************************************************************************
        
        CSS-Datei       BH29.de
        
        (C) 2013 a-concept internet.studio
        
******************************************************************************/


/*  HELPFUL CLASSES
******************************************************************************/
.clear {
    clear:              both;
}
.invisible {
    display:            none;
}



span.bh, span.n29, span.punktde {
	font-family:        Verdana;
    
}
span.bh, span.n29 {
	position:           relative;
	top:                1px;
	font-weight:        bold;
	font-size:          120%;
}
span.bh, span.n29, span.punktde {
    color:              black;
}
span.n29 {
	color:              red;
}
span.punktde {
	font-size:          70%;
}



/*  PAGE
******************************************************************************/
html {
    overflow-y:         scroll;
}

body {
    width:              100%;
    font-family:        "Trebuchet MS",Arial,sans-serif;
    font-weight:        normal;
    color:              #000;
    font-size:          1.0em;
    line-height:        100%;
    background-color:   #eee;
    min-height:         100%;
}




/*  CONTAINERS
******************************************************************************/
#wrapper {
    position:           relative;
    width:              900px;
    height:             100%;
    margin:             0 auto;
    
    background:         url(bg_portrait0.jpg) #fff center top no-repeat;
    
    -moz-box-shadow:    6px 0px 20px -7px #888, -6px 0px 20px -7px #888;
    -webkit-box-shadow: 6px 0px 20px -7px #888, -6px 0px 20px -7px #888;
    box-shadow:         6px 0px 20px -7px #888, -6px 0px 20px -7px #888;
}

#header {
    position:           relative;
    height:             300px;
    background:         url(bg_header.jpg) center top no-repeat;
}
#logo {
    position:           absolute;
    bottom:             50px;
    right:              50px;
}
#logo h6 {
    font-size:          26px;
    line-height:        100%;
    text-align:         center;
    
}
#logo h6 a {
    width:              345px;
    height:             100px;
    background:         url(logo.png) left top no-repeat;
    display:            block;
    
    text-indent:        -1000em;
}

#content {
    position:           relative;
    padding:            50px 50px 75px 50px;
}

#col1 { /*   Main Col   */

}

#footer {
    position:           absolute;
    bottom:             0;
    width:              100%;
    height:             75px;   /* Height of the footer */
    z-index:            5;
    overflow:           hidden;
}



/*  STYLING DES CONTENTS
******************************************************************************/
#content h1 {
    color:              #f00;
    font-size:          250%;
    text-decoration:    none;
    line-height:        110%;
    font-weight:        bold;
    margin-bottom:      25px;
}

#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
    color:              #f00;
    font-size:          160%;
    font-weight:        bold;
    line-height:        110%;
    margin-bottom:      15px;
}

#content p,
#content ul,
#content ol {
    letter-spacing:     1px;
    margin-bottom:      15px;
    line-height:        145%;
}
#content ul,
#content ol {
    margin-left:        20px !important;
}

#content a {
    color:              #f00;
    text-decoration:    underline;
    font-weight:        normal;
}
#content a:hover {
    color:              #000;
}

#footer ul {
    position:           absolute;
    left:               0;
    top:                40px;
    padding:            0 50px;
    font-size:          130%;
}
#footer ul li {
    float:              left;
    list-style-type:    none;
    margin:             0;
}
#footer ul li a {
    color:              #f00;
    text-decoration:    none;
}



/*  NAVIGATIONSMENUS
******************************************************************************/
#navi {
    z-index:            5;
    position:           relative;
    height:             50px;
    padding:            0 0 0 25px;
    background-color:   #f00;
}
#navi ul {
    color:              #fff;
}
#navi ul li {
    list-style-type:    none;
    text-transform:     uppercase;
    float:              left;
    border-left:        1px solid #fff;
}
#navi ul li:first-child {
    border-left:        0px;
}
#navi a {
    display:            block;
    height:             33px;       /*  +padding-top = 50px  */
    padding:            17px 25px 0 25px;
    
    color:              #fff;
    font-size:          125%;
    font-weight:        bold;
    text-decoration:    none;
}
#navi a.rex-active,
#navi a.rex-current {
    color:              #000;
}
#navi a:hover {
    color:              #000;
}
#navi ul li ul {
    display:            none; 
    width:              142px;
}
#navi ul li:hover ul, #navi ul li.hover ul {
    display:            block;
    position:           absolute;
    margin:             0;
    padding:            0;
    background-color:   #f00;
}
#navi ul li:hover li, #navi ul li.hover li {
    float:              none;
    border:             none;
    border-top:         1px solid #fff;
}
#navi ul li:hover li a, #navi ul li.hover li a {
    border:             none;
    font-size:          80%;
    color:              #fff;
    text-decoration:    none;
    text-transform:     none;
    letter-spacing:     0;
    display:            block;
}
#navi ul li li a:hover,
#navi ul li li a.rex-active,
#navi ul li li a.rex-current {
	color:              #000;
}



/*  IMAGES
******************************************************************************/
img.img_left,
img.img_right {
    margin-bottom:10px;
}
img.img_right {
    float:right;
    clear:right;
    margin-left:20px;
}
img.img_left {
    float:left;
    clear:left;
    margin-right:20px;
}

div.multipleImage img, 
#content img.contentimage, 
div.image {
    width:160px;
    float:left;
    clear:left;
    margin-right:20px;
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:1px solid #096;
}
#content p.contentimage {
    width:160px;
    margin-right:20px;
    float:left;
    clear:left;
    text-align:center;
}
div.multipleImage {
    float:left;
    width:160px;
    margin-right:47px;
    margin-bottom:20px;
}
div.image,
div.multipleImage p {
    text-align:center;
}