/* CSS Reset by Eric Meyer http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; }

/* Farben ------------------------------------------------------------*/
/* Dunkelblau: #032761*/
/* Grau Schrift: #5d5c5d*/

/* ----------------Grundeinstellungen ----------------------------------------------- */
html {
    min-height: 100%;
    margin: 0 0 1px 0;
    border-bottom: 1px solid #fff;
    font-size: 100%;
}

* {
    list-style: none;
    margin: 0;
    padding: 0;
}

body {
    background: #FFF url(img/bg-body.jpg) repeat-x 0 40px;
    color: #5d5c5d;
    font: 75%/1.75 "Lucida Grande", Arial, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    padding-bottom:30px;
    text-align: center;
    min-height:100%;
    position: relative;
}

/* ---------------- Typographie --------------------------------------------------------*/

strong { font-weight: bold;}
em { font-style: italic;}
#referenzen em { font-style: italic; margin-left: 10px;}
sup { font-size: 60%; line-height: 0px;}


/* Ueberschriften */

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    clear: both;
}

h1 {
    color: #032761;
    font-size: 24px;
    margin: 14px 0 21px 0;
    line-height: 40px;
}


h2 {
    color: #032761;
    color: #0B377B;
    font-size: 16px;
    margin: 7px 0 14px 0;
    line-height: 20px;
}

p + h2, ul + h2 {
    margin-top: 26px;
}


h3 {
    font-size: 14px;
    line-height: 20px;
    margin: 14px 0 14px 0;
    color: #5d5c5d;
}

h3.kategorie {
    margin: 14px 0 0 0;
    font-size: 13px;
}

h4 {
    font-size: 13px;
    color: #5d5c5d;
    padding-left: 16px;
    background: transparent url('img/bullet-black.png') no-repeat 0 5px;
}


/* Absaetze */
p {
    margin: 0;
    margin-bottom: 20px;
}

p.mehr {
    clear: both;
    display: block;
    margin: .3em 0 0 0;
    padding: 0 0 0 10px;
    text-align: left;
    font-weight: bold;
    background: url(img/arrow.gif) no-repeat center left;
}


/*  Listen  */

#container ol li{
    list-style-position: inside;
    padding-left: 0;
    list-style: decimal-leading-zero;
    margin: 0 0 21px 30px;
}

#container ul {
    line-height: 20px;
    margin: 14px 0 20px 0;
}
    

#container ul li {
    padding: 0 0 0 18px;
    margin: 0 0 14px 0;
    background: transparent url(img/bullet-black.png) no-repeat 0 5px;
}

#container ul li ul li{ background: none; list-style: circle; margin-left: 18px; padding-left: 0;}

#container .nobullet li{
    list-style: none;
    background: none;
    padding-left: 0;
}

#container .ellipse li {
    background: transparent url(img/bullet-ellipse.png) no-repeat 0 4px;
}

#container .circle li {
    background: none;
    list-style: circle;
}

    
/*  Links  */    

a {
    text-decoration: none;
    color: #032761;
}

a:hover {
    text-decoration: underline;
}


/* Bilder --------------------------------------*/
img {
    border: 0;
}
/* Formular -------------------------------------*/
.info-box li {
    color: #CB6F3E;
}

#kontakt form {
    width: 450px;
    /*background: #E3EDF7;*/
    /*padding: 20px;*/
}

#kontakt fieldset {
    border: 3px solid #E4EEF8;
    padding: 5px;
    margin: 0 0 21px 0;
    overflow: hidden;
    height: 100%;
}

#kontakt legend {
    /*display: none;*/
    text-indent: -10000px;
}

#kontakt p {
    width: 100%;
    padding-bottom: 0;
    clear: both;
}

#kontakt label {
    width: 120px;
    margin: 0 15px 5px 0;
}

#kontakt .kontaktdaten label {
    display: block;
}

#kontakt label.hidden {
    visibility: hidden;
}

#kontakt input.text {
    width: 430px;
    height: 20px;
    padding: 5px 3px 3px 3px;
    margin-bottom:10px;
    border: none;
    background: #E4EEF8;
}

#kontakt input.submit {
    /*width: 89px;
        height: 22px;
        background: transparent;
        border: none;
        cursor: pointer;
        text-indent: -10000px;
        overflow: auto;
        clear: both;
        margin: 20px 25px 0 0;
        margin: 20px 25px 0 135px;*/
}

#kontakt textarea {
    width: 430px;
    font: 1em/1.5 "Lucida Grande","Lucida Sans Unicode", Helvetica,Arial,sans-serif;
    height: 120px;
    padding: 5px 3px 3px 3px;
    border: none;
    background: #E4EEF8;
}

#kontakt .error {
    color: #f33;
    margin: 5px 0 10px 0;
    clear: both;
    width: 430px;
}

#kontakt input.captcha {
    margin-left: 135px;
}

#kontakt span.captcha_text {
    display: block;
    padding: 0 0 10px 0;
}


/* ---------------------- Layout ------------------------------------------------------------*/
#wrapper {
    background: transparent; 
    margin: 0 auto;
    overflow: hidden;
    text-align: left;
    width: 980px;
    padding-bottom: 20px;
}

#searchbar {
    background-color: #fff;
    margin: 0 10px;
    height: 40px;
}

#searchbar ul {
    float: right;
    line-height: 40px;
    margin-right: 15px;
}

#searchbar li {
    display: inline;;
}

#searchbar form {
    float:right;
    height:26px;
    width: 190px;
    margin-top:7px;
}

#searchbar .text {
    background:#fff;
    border: 1px solid #5d5c5d;
    border-right: 1px solid #d5d5d5;
    border-bottom: 1px solid #d5d5d5;
    color:#5d5c5d;
    float:left;
    font-size:12px;
    padding:4px 2px;
    margin-right: 8px;
    width:150px;
    float: left;
}

#searchbar .submit {
    height: 22px;
    width: 22px;
    float: left;
}

/* Header ----------------------------- */

#header {
    background: transparent;
    float:left;
    height: 133px;
    width: 940px;
    margin: 0 20px 10px 20px;
    padding-top: 0;
    position: relative;
    z-index: 9000;
}

#logo {
    position: absolute;
    top: 50px;
    left: 0;
    width:143px;
    height: 67px;
}

/* Navigation -----------------------------*/
#navbar {
    background: transparent;
    float: right;
    margin-top: 73px;
    height: 60px;
}

#navbar ul {
    list-style: none;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    margin: 0;
    background: transparent url('img/nav_verlauf.png') repeat-x 0 0;
    text-align: center;
}

#navbar li {
    background: transparent url('img/bg-navtrenner.jpg') no-repeat center right;
    padding-right: 2px;
    float:left;
    height:60px;
}

#navbar li span.active, #navbar a.trail {
    display: block;
    height: 30px;
    color: #fff;
    display: block;
    height:60px;
    line-height:60px;
    padding: 0 15px;
    background: #032761 url('img/bg-navhilite.jpg') no-repeat center right;
    text-decoration: none;
}

#navbar a {
    display: block;
    height: 30px;
    color: #fff;
    display: block;
    height:60px;
    line-height:60px;
    padding: 0 15px;
}

#navbar a:hover {
    background: #032761;
    color: #fff;
    text-decoration: none;
}

#navbar ul li ul {
    position: absolute;
    background: #033075;
    border-top: 1px solid #fff;
    width: auto;
    left: -999em;
    z-index: 10000;
}

#navbar ul ul li { 
    float: none; 
    height:40px;
    line-height:40px;
    padding: 0px;
    text-align: left;
    border-bottom: 1px solid #fff;
    background: #011028;
    }

#navbar ul ul li a, #navbar ul ul li.active span  {
    height:40px;
    line-height:40px;
}

#navbar ul ul li a:hover {
    background: #032761;
}

#navbar ul ul li.active span {
    background: #032761;
}
    
#navbar ul li ul ul { margin: -60px 0 0 160px; }


#navbar ul li:hover ul, #navbar ul li ul li:hover ul,
#navbar ul li.sfhover ul, #navbar ul li ul li.sfhover ul {
    left: auto;
}

#navbar ul li:hover ul ul,
#navbar ul li.sfhover ul ul {
    left: -999em;
}


/* Startseite -------------------------------*/

#b-startseite #main {
    float: left;
    width: 980px;
    margin: 0;
}

#panel {
    clear: both;
    background: #eee;
    background: #fff url('img/bg-panel-s.jpg') no-repeat 0 0;
    margin: 10px 0;
    height: 360px;
    position: relative;
}

#keyvisual {
    float: left;
    width: 650px;
    height: 360px;
    position: relative;
    z-index: 1;
}

#keyvisual img {
    position: absolute;
    top: 0px;
    right: 26px;
}

#slogan {
    position: absolute;
    top: 50px;
    left: 40px;
    z-index: 10;
}

#slogan h2 { 
    text-indent: -10000px;
    width: 300px;
    height: 24px;
    background: transparent url('img/slogan-hl.png') no-repeat 0 0;
    }
    
#slogan p { 
    text-indent: -10000px;
    width: 300px;
    height: 200px;
    margin-top: 30px;
    background: transparent url('img/slogan-copy.png') no-repeat 0 0;
    }
    
#aktionsbutton {
    position: absolute;
    top: 210px;
    left: 40px;
    z-index: 20;
}

#keyproducts { 
    float: left;
    width: 310px;
    height: 360px;
    position: relative;
    }
    
#logos a {
    height: 44px;
    text-align: right;
}

#logos a:hover {
    left: 5px;
    background: #9B999A;
    width: 160px;
}

#logos img {
    border-left: 2px solid #fff;
}
    
.panel-logo-gs {
    position: absolute;
    top: 34px;
    left: 5px;
}

.panel-logo-tb {
    position: absolute;
    top: 90px;
    left: 5px;
}

.panel-logo-doe {
    position: absolute;
    top: 146px;
    left: 5px;
}

#keyproducts .teaser {
    position: absolute;
    top: 220px;
    left: 0px;
    border: 0;
    height: 120px;
    width: 270px;
}

#teaserblock {
    float: left;
    background: #fff;
    margin: 20px 10px 0 10px;
}

.teaser { 
    width: 295px;
    height: 100%;
    margin: 0 10px 10px 0;
    padding: 0 9px 21px 5px;
    border-right: 1px solid #d2d2d2;
    float: left;
    background: transparent;
    }
    
.lastteaser {
    margin-right: 0;
    padding-right:0;
    border-right: none;
}

    
.teaser h2 {
    margin: 0 0 7px 0;
}
    
.teaser h2 a{
    color: #032761;
    font-size: 13px;
    font-weight: bold;
    padding: 0 0 0 12px;
    background: transparent url('img/arrow.png') no-repeat center left;
}

.teaser h2 a:hover {
    color: #032761;
    font-size: 13px;
    font-weight: bold;
    padding: 0 3px 0 16px;
    background: #e4e2e5 url('img/arrow.png') no-repeat center left;
    text-decoration: none;
    margin-left: 4px;
}

.teaser img { 
    margin: 5px 15px 10px 0;
    border: 0;
    float: left;
    
    }
    
.teaser p {
    margin: 0;
}
    
.teaser-hr {
    clear: both;
    background: transparent url('img/teaser-hr.png') no-repeat 0 0;
    height: 1px;
    width: 940px;
    padding: 1px 0 10px 0;
}

#seminare .teaser-hr {
    border-top: 1px solid #ccc;
    background: none;
}

/* Unterseiten-Spalten ---------------------------------*/
#container {
    float: left;
    margin: 20px 20px 20px 20px;
}

#left {
    float: left;
    width: 140px;
    margin: 0 20px 0 0;
    padding-top: 120px;
}

#main {
    float: left;
    width: 460px;
    margin: 0 20px 0 0;
}

.us_2col #main {
    width: 740px;
}

#right {
    float: left;
    width: 280px;
    margin: 0 0 0 20px;
    padding-top: 75px;
}

/* Unterseiten-Elemente -----------------------------------*/
.video {
    margin: 0 0 21px 0;
}

.extern-link a{
    color: #032761;
    font-size: 13px;
    font-weight: bold;
    padding: 0 0 0 12px;
    background: transparent url('img/arrow.png') no-repeat center left;
}

/* Fußbereich mit blauem Abschlussbalken */
#footer {
    position:absolute;
    bottom:0;
    left: 0;
    width:100%;
    height:30px;   /* Height of the footer */
    background: #00f url('img/bg-footer.jpg') repeat-x 0 0;
    
}

#footer .inside {
    width: 940px;
    margin: 0 auto;
}

#legal {
    float: right;
}

#footer p {
    line-height: 30px;
    font-size: 11px;
    color: #fff;
    text-align: right;
    float: right;
    margin-bottom: 0;
}

#footer ul {
    margin-left: 10px;
    line-height: 30px;
    font-size: 11px;
    color: #fff;
    text-align: right;
}

#footer li {
    display: inline;
    border-left: 1px solid #fff;
    padding: 0 10px;
}

#footer a {
    color: #fff;
}

/* --------------Typolight/Cantao spezifisches ----------------------------------*/
/* Eventlist -----------*/

.mod_eventlist { }
.mod_eventlist h3 { margin-top: 7px;}
.header { margin-bottom: 14px; display: block; line-height: 21px;}

.image_container {
    margin: 0 10px 10px 0;
    float: left;
}

#left .image_container img, #right .image_container img{
    margin-bottom: 21px;
}

#main .image_container img {
    border: 3px solid #aaa;
}

#weitere-online-verzeichnisse .image_container img {
    border: none;
}

.gallery img { 
    border: 3px solid #aaa;
    }


.caption {
    padding-left: 22px;
    background: transparent url('../images/icon-zoom.png') no-repeat center left;
}

.team { 
    width: 360px;
    margin-right: 10px;
    float: left;
}


/* -------------- Classes -----------------------------------------------------------*/
.clear { clear: both; }
.clearleft { clear: left; }

.floatleft { float: left;}

.floatright { float: right;}

.floatright img { margin-left: 20px;}

.center { text-align: center;}

.halfcol { 
    width: 500px;
    margin-bottom: 21px;
    }

.box-shadow {
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: rgba(0,0,0,0.3) 5px 5px 5px;
}

#right .awesome {
    margin-top: 45px;
}

.awesome a, input.awesome {
    background: #02275E url(img/alert-overlay.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 2;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
    text-shadow: 0 -1px 1px #222;
    border-bottom: 1px solid #444;
    position: relative;
    cursor: pointer;
    margin-right: 15px;
    }
    
input.awesome {
    line-height: 1;
}