/* ----------------------------------------------------------------------*/
/* ------ CSS - 2dim medien & gestaltung --------- ----------------------*/
/* Juli 2007 - Frank Kempf-Machtemes, 12045 Berlin (Germany)-------------*/
/* als  Layout auf CSS- und xhtml-Basis----------------------------------*/
/* erstellt, designed, graphische Bearbeitung:-------------------------- */
/* by Frank Kempf-Machtemes (Mediengestalter )---------------------------*/
/* Dateibezeichner: CHB_Style.css - 2007 - Alle Rechte vorbehalten------ */
/*-----------------------------------------------------------------------*/

/* ALLGEMEINE STYLES - GESAMTE WEBSITE*/

/* ------------FARBWERTABELLE--------------------------------------*/
/* Bezeichner               |   R     |    G   |    B   |  Hex     */
/*-----------------------------------------------------------------*/
/*rot                            |  255           |    55  |    32  |#FF3720   */
/*blau                          |   10          |    78  |   154  |#0A4E9A   */
/*hellblau                  |  132    |   166  |   204  |#84a6cc   */
/*orange                    |  255    |   115  |    59  |#FF733B   */
/*grau                                                |  109          |   109  |   109  |#A1A1A1   */
/*grau (schrift, Text)      |  101    |           99  |   101  |#656365   */
/*-------------Schriftarten----------------------------------------*/
/*Fliesstext         Helvetica,Verdana, sans-serif; 12pt 1em                           */
/*headlines                Helvetica,Verdana, sans-serif; 14pt 1,5em          */
/*-----------------------------------------------------------------*/
 /* Grundlegende Layout Definitionen*/
body {
         margin: 10px;
         padding:0px;
         width:885px;
         font: normal 10pt/10pt  "Trebuchet MS", serif ;
           color: #333333;/*#333399;*/
           text-align:center;
         }

p {
         font: normal 12px/15px  verdana, helvetica, sans-serif;
         color: #656365;
         text-align:left;
         }



h1 {
        color: #FF733B;
        font-size: 14px;
        font-family: Verdana, Helvetica, sans-serif;
        font-weight: bold;
         text-align:left;
         }

h2 {
         font: normal 1.3em verdana, sans-serif;
         color: #33A02C;
         text-align:left;
         }

h3 {
         font-family: Verdana, Helvetica, sans-serif;
         color: #0A4E9A;
         font-size:1.3em;
         text-indent: 75px;

         }
a:link {
                color: #0a4e9a;
         font-size: 12px;
         font-family: Verdana, Helvetica, san-serif;
         font-style: normal;
         font-weight: normal;
         text-decoration: none;
                }

a:hover, a:active {
        color: #e32e20;
         font-size: 12px;
         font-family: Verdana, Helvetica, san-serif;
         font-style: normal;
         font-weight: normal;
         text-decoration: underline;
        }




 /* Titel und Hervorhebungen */

.hinweise { color: #FF733B;
        font-size: 10px;
        font-family: Verdana, Helvetica, san-serif;
        font-weight: normal;
        }

.titel { color: #FF733B;
        font-size: 14px;
        font-family: Verdana, Helvetica, san-serif;
        font-weight: bold;
        }

/* Texte und darin eingeschlossene Textlinks*/


 /*die divs und ihre jeweiligen laypouts*/

 #container {
         background: url(/Assets/CHB_BG.gif) 0 0 no-repeat;
         position:absolute;
         width:800px;
         height:600;
         z-index:1;
         left: 100;
         top: 50px;
         /*border: 1px solid #84a6cc;*/
        }

#header{
        position:absolute;
        width:249px;
        height:60px;
        z-index:2;
        left: 410px;
        }


/*DIE NAVIGATIONS ELEMENTE*/
/*Das Horizontal Menue*/
#horizontal{
        position:absolute;
        width:493px;
        height:30px;
        z-index:3;
        left: 202px;
        top: 70px;
        }

#horizontal a  {
        color: #3050a1;
        font-size: 10px;
        font-family: Verdana, Helvetica, san-serif;
        font-style: normal;
        font-weight: normal;
        text-decoration: none;
        background-color: #ffffff;
        padding: 1px 10px;
        vertical-align: bottom;
        /*border: solid 1px #3050a1;*/
        }
#horizontal a:hover  { color: #ff733b;
        font-size: 10px;
        font-family: Verdana, Helvetica, san-serif;
        font-style: normal;
        font-weight: normal;
        text-decoration: none;
        background-color: #ffffff;
        padding: 1px 10px;
        vertical-align: bottom;
        /*border: solid 1px #ff733b;*/
        }

/* Quick information_bar rechts*/

#quicks{
        position:absolute;
        width:120px;
        height:600;
        z-index:1;
        left: 690px;
        top:0px;
        background-color: #84a6cc;
        list-style:none;
        }
/* Die einzelnen Bilder in der Quicklinks Spalte - Anfang---------->*/
/* Website-weit werden hier die jeweilige aktuellen Thumbs und Links eingestellt!*/

#quicks li{
        list-style: none;
        padding-top:2px;
        margin:3px;
        text-align:center;
        /*border: solid 1px #ffffff;*/
        }

#quicks li.bild1{
        position:relative;
        left:-30px;
        width: 100px;
        height: 66px;
        list-style: none;
        background: url(Assets/bild1.jpg) 0 0 no-repeat;
        }

#quicks li.bild2{
        position:relative;
        left:-30px;
        width: 100px;
        height: 66px;
        list-style: none;
        background: url(Assets/bild2.jpg) 0 0 no-repeat;
        }

#quicks li.bild3{
        position:relative;
        left:-30px;
        width: 100px;
        height: 66px;
        list-style: none;
        background: url(Assets/bild3.jpg) 0 0 no-repeat;
        }

#quicks li.bild4{
        position:relative;
        left:-30px;
        width: 100px;
        height: 66px;
        list-style: none;
        background: url(Assets/bild4.jpg) 0 0 no-repeat;
        }

#quicks li.bild5{
        position:relative;
        left:-30px;
        width: 100px;
        height: 66px;
        list-style: none;
        background: url(Assets/bild5.jpg) 0 0 no-repeat;
        }

#quicks li.bild6{
        position:relative;
        left:-30px;
        width: 100px;
        height: 66px;
        list-style: none;
        background: url(Assets/bild6.jpg) 0 0 no-repeat;
        }

/* Die einzelnen Bilder in der Quicklinks Spalte - Ende------------->*/
/* Die Bilder in der Quicks-Leiste werden als Hyperlinks verwendet.->*/

#quicks li a{
         position:relative;
         top:0px;
         left: -40px;
         margin-top:7px;
         padding: 3px;
         text-align:center;
         color: ffffff;
         font-size: 10px;
         font-family: Verdana, Helvetica, san-serif;
         font-style: normal;
         font-weight: bold;
         text-decoration: none;
         /*background-color: #ffffff;
         padding: 1px 10px; */
         vertical-align: bottom;
         list-style: none;
         }

#quicks li a:hover  {
        color: #ff733b;
        font-size: 10px;
        font-family: Verdana, Helvetica, san-serif;
        font-style: normal;
        font-weight: bold;
        text-decoration: none;
        /*background-color: #ffffff;*/
        /*padding: 1px 10px;*/
        vertical-align: bottom;
        list-style:none;
        }

/* Die Hauptnavigation*/

#navbar{
        position:absolute;
        width:117px;
        height:161px;
        z-index:7;
        left: 25px;
        top: 200px;
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 12px;
        color: #ffffff;
        }

#navbar ul {
        margin: 5px;
        padding: 5px;
        }

#navbar li {
        display:block;
        line-height: 1.2em;
        list-style-type: none;
        text-align:left;
        width: 150px;
        height: 15px;
        margin-left:-10px;
        padding: 5px 5px 5px 10px;
        /*border: solid 1px black;/*nur zu Layoutzwecken*/
        }
#navbar a:link, #navbar a:visited {
        display:block;
        width: 117px;
        margin-left: -10px;
        /*padding:10px;*/
        font: italic 12px/20px  verdana, sans-serif;
        color: #FFFFFF;
        text-decoration:none;
        /*background: url(Assets/navbar_arrow.gif) 100% 0% no-repeat;*/
        /* Anmerkung: die Hoehenangabe fuer IE, somit gesamte Flaeche des Links klickbar */
        height:1.5em;
        }

        /* Anmerkung: diese Angabe ist fuer fast alle anderen Browser, damit die Hoehe wieder aus den Angaben fuer
        Schriftgroesse, padding und border berechnet wird */

        html>body #navbar a:link, html>body #navbar a:visited  {
        height:auto;
        }
#navbar a span {
    display:none;
    }

#navbar a:hover {
        background-position: 0% 100%;
        color: #FF733B;
        background-color:transparent;
        }
#navbar a:hover span{
        display:block;
        position:absolute;
        top:250px;
        left:0;
        width:150px;
        /*padding: 5px;
        margin:10px;*/
        font: italic 12px/20px  verdana, sans-serif;
        color: #0A50A1;
        }

#links{
        position:absolute;
        width:250px;
        height:450px;
        z-index:4;
        left: 170px;
        top: 120px;
        }



#rechts{
        position:absolute;
        width:250px;
        height:450px;
        z-index:5;
        left: 440px;
        top: 105px;
        text-align:left;
        font-family: Verdana, Helvetica, san-serif;
        font-size: 12px;
        color: #656365;
        }#rechts table {
        border-collapse: collapse;
        /*border-spacing: 0;*/
        font-family:Verdana, Helvetica, sans-serif;
        font-size: 76%;
        /* background: #eee; */
        }

#rechts caption {
        caption-side: bottom;
        padding: 0.3em;
        font-weight: bold;
        text-transform: uppercase;
        text-align:right;
        }

#rechts td, th {
        padding: 0.4em 1em;
        background: #eee;
        border-bottom: 1px solid #aaa;
        }

#rechts th {
        border-top: 1px solid #aaa;
        background: #eee;
        }

#rechts tr.gerade td {
        background: #fff;
        }

#rechts table tr:hover td {
        background: #FF9A01;
        }

#rechts table tr td:hover {
        background: #FF6F02;
        font-weight: bold;
        color: #fff;
        }

/*Fuer Seiten die einen groeßeren Raum für den Inhalt benoetigen oder tabellarische
  Auflistungen beinhalten, wird alternative ein einzelliger Gestaltungsraum fesgelegt.*/

#inhalt{
        position: absolute;
        width: 500px;
        height:450px;
        left:200px;
        top:100px;
        z-index: 4;
        /*border: solid 1px black;/*nur zu Layoutzwecken*/
        }
/* Gestaltung der Tabellen mit wechselnden Zeilenhintergruenden fuer die Darstellung
   von Inhalten als Tabellenform. Speziell für den Layoutbereich'inhalt'*/
#inhalt table {
        border-collapse: collapse;
        /*border-spacing: 0;*/
        font-family:Verdana, Helvetica, sans-serif;
        font-size: 76%;
        /* background: #eee; */
        }

#inhalt caption {
        caption-side: bottom;
        padding: 0.3em;
        font-weight: bold;
        text-transform: uppercase;
        text-align:right;
        }

#inhalt td, th {
        padding: 0.4em 1em;
        background: #eee;
        border-bottom: 1px solid #aaa;
        }

#inhalt th {
        border-top: 1px solid #aaa;
        background: #eee;
        }

#inhalt tr.gerade td {
        background: #fff;
        }

#inhalt table tr:hover td {
        background: #FF9A01;
        }

#inhalt table tr td:hover {
        background: #FF6F02;
        font-weight: bold;
        color: #fff;
        }
/* Hyperlinks innerhalb der Tabelle */

#inhalt table td a:link {
        background: #eee;
        font: normal 8pt/11pt verdana, sans-serif;
        color: #333;
        }

#inhalt table td a:hover {
        background: #FF6F02;
        font-weight: bold;
        color: #fff;
        }

#inhalt tr.gerade td a:link{
        background: #fff;
        }

#inhalt tr.gerade td a:hover {
        background: #FF6F02;
        font-weight: bold;
        color: #fff;
        }

#footer {
        position:absolute;
        width:525px;
        height:42px;
        z-index:6;
        left: 171px;
        top: 568px;
        font: normal 8pt/12pt  verdana, sans-serif; color: #FF733B;
        }

#footer a:link, #footer a:visited {
        position:relative;
        margin-left: 20px;
        top: -10px;
        left:10px;
        font: italic 8pt verdana, sans-serif;
        color: #ff733b;
        background-color:transparent;
        text-align:left;
        text-decoration:none;
        }
#footer a:hover {
        color: #0A4E9A;
        background-color:transparent;
        text-decoration: underline;
        }


#footer1 {
        position:absolute;
        width:525px;
        height:42px;
        z-index:6;
        left: 25px;
        top: 568px;
        font: normal 8pt/12pt  verdana, sans-serif; color: #FF733B;
        }
/*dieser teil ist nur gueltig fuer die interpretierung bei formularen hier: kontakt*/


form  {
        width: 400px;
    left:200px;
    height:auto;
        font-size: 1em;
        line-height: 100%;
        margin: 10px;
        padding: 0px;
        }

fieldset {
        width: 350px;
    font-size: 1em;
        line-height: 120%;
        margin: 1em;
        height:auto;
        border: solid 1px black;
        border: solid 1px  #586685;
        background-color: #ffffff;
        padding: 10px;
}

/*legend {
        padding: 0.1em 0.4em;
        font-weight: bold;
        color: #8aa1d1;
        border: 3px double #ff0000;
        background-color: #ffffff;
}*/

input {
        display: block;
        left: 40px;
        float:left;
        width: 25em;
        border: 1px solid #ff0000;
        background-color: #ffffff;
        margin: 5px;
        padding: 2px;
        font-family: verdana;
        }

input:focus, input:hover, input:active {
    color: #333333;
    border:double 3px #333399;
    font-weight: normal;
    }

textarea{
   background-color:#ffffff;
   width: 25em;
   height: 10em;
   font: normal 10pt/13pt  verdana, sans-serif;
   text-align:left;
   border: solid 1px #333399;
   color: #0A50A1;
   }


.submit, .reset {
        width: 120px;
        background: #ffffff;
    color:#FF0000;
        border: 3px double #8aa1d1;
 }

label {
        width: 5em;
        margin: 5px;
        padding: 5px;
        float:left;
        text-align: right;
        font-weight: normal;
        color: #333399;
    background-color:transparent;
}
.pform {
        clear: left;
        float: left;
        width: 100%;
}