/*

  main.css (ueberarbeitet AJ am 11.11.2009)

*/

html, body {
      color: #000000;               /* Vordergrundfarbe */
      background-color: #FFFFFF;    /* Hintergrundfarbe */
      font-size: 0.85em;            /* Schriftgröße: 85% von Standard (100%) */
      font-family: "Century Gothic", Arial, Helvetica, sans-serif;
      font-weight: 100;             /* wie fett wird eine Schrift dargestellt: Werte: 100,200 usw. */
      line-height: 1.5em;           /* legt Zeilenhöhe fest (größer als font-size!!) */
      height: 100%;                 /* für Elemente innerhalb sollten html und body immer 100% sein */
      margin: 0;                    /* Erzeugt transparenten Abstand zu einem anderen Element */
      padding: 0;                   /* Erzeugt transparenten Abstand zw. Inhalt und Rändern,
                                       als Hintergrundfarbe für diesen Bereich wird die des Inhalts genommen! */
}

/* **** CONTAINER **** */

/* # steht für entsprechendes id-attribut */
/* den Bezeichner zusammenschreiben, nur dann funktionierts!!!!! */
div#container {
      position: relative;
      width: 770px; /*640*/
      padding: 0 0px 0 20px;  /*erster Wert: links; zweiter Wert: rechts*/
      position: relative;
      margin: auto auto;
      /* min-height: 100%;  nicht verwenden, da dieses nicht alle Browser kennen!!! */
      min-height: 100%;/*1200px;*/
      /* height: auto !important;
      height: 100%; */
      /* Den Background erst weis machen und dann das Hintergrundbild einfügen,
         wenn anders herum, dann wird das Hintergrundbild überschrieben!!!! */
      background: #FFFFFF;
      background: url(../images/border.gif) top center repeat-y;

}

/*Info zum Verbreitern der Seite:
-width von container ändern
-eintrag bei buttons1 hinzufügen
-eintrag bei buttons2 hinzufügen
-bei buttons2 auch width ändern...
*/


/* * steht für universal (also alles) */
* html #container {
     /* \ */
     height: 100%;
     /* IE6 */
}

/* das div "header" beinhaltet das div "logo"!!
   "header" beinhaltet ausserdem das image Header_Wappen.png */
#header {
     position: relative;
     top: 0;
     width: 820px; /*680*/
     height: 186px;
     left: -90px;
     background: url(../images/Header_Wappen.png) top center no-repeat;
}

/* das div "logo" beinhaltet die Animation!! */
#logo {
     position: absolute;
     top: 200;
     left: 455px;
}



/* **** tabs (erste Buttonreihe!!!) **** */

/*Mit tabs wird Buttonreihe1 nur formatiert... noch nicht horizontal... */
#tabs {
     font: normal 11px/11px "Century Gothic", Arial, Helvetica, sans-serif;
     font-weight: bold;
     /*position: relative;  */
     margin: 1px 0px 0px 1px;
     height: 30px;
     /*width: 641px; */
}

#tabs ul {
     list-style: none; /* keine Aufzählungszeichen!! */
     display: inline;  /* wenn inline, dann kann Elementen keine Breite zugewiesen werden und
                          die Elemente sind dann jeweils so breit wie ihr Text! falls anders gewünscht dann float!!
                          JA: none, block, inline und inline-block */
     margin: 0;
     padding: 0px 0px 0px 0px;
}

#tabs li {
    /*position: relative;  */
    font: normal 16px/16px "Century Gothic", Arial, Helvetica, sans-serif;
    background-color: #5167AA;    /* Die Farbe!!!! */
    color: #FFFFFF;
    float: left;                  /* Ein mit float formatiertes Element wird in ein Block-Element gewandelt!! und
                                     links (oder auch rechts) von den Elementen plaziert, die es umfließen!!    */
    /* Achtung mit float := left wird das Menü horizonzal!!!!!!!!!!!!!!!!!!!!!! */
    text-align: center;
    margin-right: 1px;
}

/* den last block mal weg... */

#tabs a:link,
#tabs a:active,
#tabs a:visited {
    font-weight: bold;
    /*display: block;  */    /* ?!?!?!?!?!?! hat keine Auswirkung falls weggelassen.... */
    text-decoration: none;
    background: none;
    background-color: #5167AA;
    color: #FFFFFF;
    /*height: 11px;     */
    padding: 10px 17px;
    float: left;            /* ?!?!?!?!?!?! hat Auswirkung, dass vertikal schmaler werden ?!!?!?!?! */
}

#tabs a:hover {
    text-decoration: none;
    background-color: #DFE7FF;
    color: #5167AA;
}



/* **** pathbar (zweite Buttonreihe!!!) **** */

#pathbar {
    font: normal 14px/14px "Century Gothic", Arial, Helvetica, sans-serif;
    /*font-weight: bold;*/
    width: 739px;/*608px;*/
    /*width: 700px;*/
    /*padding: 2px 15px 2px 15px; */
    padding: 3px 10px 3px 15px;
    /* ==> Wert1: Innenabstand oben, Wert2: rechts, Wert3: unten, Wert4: links */
    /*margin-top: 5px;  */
    margin: 7px 0px 0px 1px;
    /* ==> margin: Außenabstände!! */
    background-color: #DFE7FF;
    color: #000000;
    clear: both;   /*clear beendet den Umfluss. both steht für beide Seiten!!!
                     Element hier weglassen, hat keine Auswirkungen!!!!     */
}

#pathbar a {
    font: normal 11px/11px "Century Gothic", Arial, Helvetica, sans-serif;
    font-weight: bold;
    background: 0;
    padding: 0;
}

#content-main {
   font-family: "Century Gothic", Arial, Helvetica, sans-serif;
   float: left;
   width: 710px;
   padding: 2em 15px 4em 15px;
   padding-bottom: 40px;
}

#content-help {
   /*font-family: "Century Gothic", Arial, Helvetica, sans-serif;
   float: left;
   width: 600px;
   padding: 2em 15px 4em 15px;*/

   float: left;
   width: 600px;
}

#content-variabel {
   font-family: "Century Gothic", Arial, Helvetica, sans-serif;
   width: 210px;
   height: 120px;
   /*font-weight: bold;*/
   /*background-color: #DFE7FF;*/
   position: relative;
   float: right;
   padding: 0em 0 2em 0;
   padding-left: 1.7em;
   margin: 0 0 5em 5em
}



/* Formatierung zu den Schriftarten - allgemein... */

/* ACHTUNG: Allgemeine Schriftformatierungen vor allg. Linkformatierungen setzen
   sonst wird Hintergrund in pathbar weiß bzw es wird die Linkformatierung
   überschrieben durch die Schriftformatierung... gilt für Firefox!!!!!!!!! */

h1,h2,h3,h4,h5,h6 {
   font-family: "Century Gothic", Arial, Helvetica, sans-serif;
   line-height: 1.25em;
}

h1 {
   font-size: 1.5em;
   /* font-weight: bold; 100 */
   color: #5167AA;
   margin: 0 0 1em 0;
}

h2 {
   font-size: 1.3em;
   /* font-weight: bold; 100 */
   color: #000000;
   margin: 0 0 1em 0;
}

h3 {
   font-size: 1.1em;
   /* font-weight: bold; 100 */
   color: #000000;
   margin: 0 0 1em 0;
}



/* Links: Formatierung allgemein und für pathbar!!! */

a:link, a:active, a:visited,
a.extern:link, a.extern:active, a.extern:visited,
a.email:link, a.email:active, a.email:visited {
   color: #5167AA;
   /*background: url(../images/link-intern.gif) 0 4px no-repeat;  */
   /*padding-left: 1.2em;*/
   text-decoration: none;
}

a:hover,a.extern:hover, a.email:hover {
   text-decoration: underline;
}


#footer {
   font: normal 10px/14px "Century Gothic", Arial, Helvetica, sans-serif;
   font-weight: bold;
   position: absolute;
   width: 715px;
   bottom: 0; /*!important;
   bottom: -1px;
   height: 16px; */
   left: 22px;
   /*margin-bottom: 0.5em;*/
   padding: 2px 15px 2px 15px;
   background-color: #DFE7FD;
   color: #000000;
   text-align: right;
}


#footer ul {
   list-style-type: none;
   display: inline;
   margin: 0;
   padding: 0;
}

#footer ul li {
   float: left;
   margin-right: 1.2em;
}