/*-----------------------------------------------------------------*/
/*    Allgemeine Definitionen                                                    */
/*-----------------------------------------------------------------*/

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #EEEEE9;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 11px;
  color: #666666;
}

h1 {
  line-height: 24px;
  font-size: 15px;
  font-weight: bolder;
  text-transform: uppercase;
  color: #223867;
}

h2 {
  font-size: 11px;
  font-weight: bold;
  color: #223867;
}

h3 {
  font-size: 11px;
  font-weight: bold;
  color: #223867;
  margin-bottom: 5px;
}

h4 {
  line-height: 15px;
  font-size: 11px;
  font-weight: bold;
  color: #223867;
}
  
h5  {
  font-size: 11px;
  font-weight: bold;
  color: #223867;
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 3px;
}

form {
  border: 0px solid #999999;
  padding: 0px 0px 0px 0px;
  }

/*-----------------------------------------------------------------*/
/*    Hyperlinks                                                                          */
/*-----------------------------------------------------------------*/

a:link, 
a:focus, 
a:visited {
  text-decoration: none;
  color: #999999;
}

#footer_text a:link, 
#footer_text a:focus, 
#footer_text a:visited {
  text-decoration: none; 
  color: #DDDDDD;
}

a:hover,
#footer_text a:hover {
  color: #FF6600;
}
  
a img {
  border: 0px solid #FFFFFF;
}

/*-----------------------------------------------------------------*/
/*    Grobe Strukturierung der Page                                        */
/*-----------------------------------------------------------------*/

#center_frame {     /* Hauptframe, umfasst alles */
  position: relative;
  top: 0px;
  left: 0px;
  width: 1000px; 
  height: 1150px;
  margin: 0 auto;
}
  
#white_space  {     /* Weißer Bereich, umfasst alles außer den Footer */
  position: relative;
  top: 0px;
  left: 0px;
  width: 1000px;
  height: 1070px; /* = Höhe von "center_frame" minus 80px (für Footer) */
  background-color: #FFFFFF;
}



/*-----------------------------------------------------------------*/
/*    INHALTSBEREICH für Bilder und Text                        */
/*-----------------------------------------------------------------*/  

#content  {             
  position: relative;
  width: 625px;
  height: 804px; /* Höhe = Höhe v. center_frame minus 346 */
  top: 140px;
  left: 351px;
  background-image: url(/pics/bg_allgemein.jpg);
  background-repeat: no-repeat;
}

/*-----------------------------------------------------------------*/
/*    Inhaltsbereich - untergrliedert                              */
/*-----------------------------------------------------------------*/
  
#content_text_oben {             /* Textbereich, wenn der Text oben bündig zum Hintergrundbild beginnt */
  position: relative;
  top: 87px;
  left: 65px;
  width: 410px;
  /*height: 250px;*/
  line-height: 18px;
}

#content_text_unten {             /* Textbereich, wenn über dem Text noch ein Bild erscheint => Text nach unten gerückt */
  position: relative;
  top: 230px;
  left: 65px;
  width: 410px;
  /*height: 250px;*/
  line-height: 18px;
}

#content_bilder_oben{                 /* Container für alle Bilder unter dem Text, wenn der Text hoch gesetzt ist */
  position: relative;
  top: 141px;
  left: 65px;
  width:410px;
  height: 370px;
}

#content_bilder_unten{                 /* Container für alle Bilder unter dem Text, wenn der Text tiefer gesetzt ist*/
  position: relative;
  top: 284px;
  left: 65px;
  width:410px;
  height: 370px;  
}

#bild_unterschrift {             /* Formatierte Bildunterschrift */
  position: absolute;
  top: 380px;
  left: 0px;
  line-height: 15px;
  font-size: 11px;
  font-weight: normal;
  color: #223867;
}

#content_text_oben ul {
  list-style: square inside;
  margin-left: 20px;
}
/*-----------------------------------------------------------------*/
/*        BILDER-FRAMES                                                           */  
/*----------------------------------------------------------------*/
            /*------oben = über dem Text------------------------------*/
            /*------unten_1 = unter dem Text, 1. Zeile---------------*/
            /*------unten_2 = unter dem Text, 2. Zeile--------------*/
            /*------_1_links = 1. Zeile, linkes Bild--------------------*/
            /*------_2_rechts = 2. Zeile, rechtes Bild---------------*/
            /*-----gross = 2 "Einheiten", nur 1 pro Zeile-------------*/
            /*-----klein = 1 "Einheit", 2 Bilder nebeneinander mögl.--*/

#bild_oben_gross {  
  position: absolute;
  top: 30px;
  left: 65px;  
  width: 410px;
  height: 180px;
  line-height: 15px;
  font-weight: normal;
  color: #223867;
}

#bild_unten_1_gross {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 410px;
  height: 180px;  
  line-height: 15px;
  font-weight: normal;
  color: #223867;
}

#bild_unten_2_gross {
  position: absolute;
  top: 190px;
  left: 0px;
  width: 410px;
  height: 180px;    
  line-height: 15px;
  font-weight: normal;
  color: #223867;
}

#bild_unten_1_klein_links {
  position: absolute;
  top: 0px;
  left: 0px; 
  width: 200px;
  height: 180px;    
  line-height: 15px;
  font-weight: normal;
  color: #223867;
  
}

#bild_unten_1_klein_rechts {
  position: absolute;
  top: 0px;
  left: 210px;
  width: 200px;
  height: 180px;    
  line-height: 15px;
  font-weight: normal;
  color: #223867;
}

#bild_unten_2_klein_links {
  position: absolute;
  top: 190px;
  left: 0px;
  width: 200px;
  height: 180px;    
  line-height: 15px;
  font-weight: normal;
  color: #223867;
}

#bild_unten_2_klein_rechts {
  position: absolute;
  top: 190px;
  left: 210px; 
  width: 200px;
  height: 180px;    
  line-height: 15px;
  font-weight: normal;
  color: #223867;
}

#bild_mitte_gross {
  position: absolute;
  top: 254px;
  left: 90px;  
  width: 410px;
  height: 370px;
  line-height: 15px;
  font-weight: normal;
  color: #223867;
}

/*-----------------------------------------------------------------*/
/*        Kontakt-FRAMES für "Das sind wir"                          */  
/*----------------------------------------------------------------*/

#kontakt_1_links {
  position: absolute;
  top: 87px;
  left: 0px;  
  width: 200px;
  height: 260px;
  font-size: 10px;
  color: #223867;
}

#kontakt_1_rechts {
  position: absolute;
  top: 87px;
  left: 210px;  
  width: 200px;
  height: 260px;
  font-size: 10px;
  color: #223867;
}

#kontakt_2_links {
  position: absolute;
  top: 380px;
  left: 0px;  
  width: 200px;
  height: 260px;
  font-size: 10px;
  color: #223867;
}

#kontakt_2_rechts {
  position: absolute;
  top: 380px;
  left: 210px;  
  width: 200px;
  height: 260px;
  font-size: 10px;
  color: #223867;
}

#kontakt_3_links {
  position: absolute;
  top: 673px;
  left: 0px;  
  width: 200px;
  height: 260px;
  font-size: 10px;
  color: #223867;
}

#kontakt_3_rechts {
  position: absolute;
  top: 673px;
  left: 210px;  
  width: 200px;
  height: 260px;
  font-size: 10px;
  color: #223867;
}

#kontakt_4_links {
  position: absolute;
  top: 966px;
  left: 0px;  
  width: 200px;
  height: 260px;
  font-size: 10px;
  color: #223867;
}

#kontakt_4_rechts {
  position: absolute;
  top: 966px;
  left: 210px;  
  width: 200px;
  height: 260px;
  font-size: 10px;
  color: #223867;
}

/*-----------------------------------------------------------------*/
/*    Elemente => Navigation                                                     */
/*-----------------------------------------------------------------*/    

#navigation {         /* Navigationsbereich, umfasst alle Bereiche für die Navigationspunkte */
  position: relative;
  top: 40px;
  left: 350px;
  width: 300px;
  background-color: #000000;
}

#navi_1 {             /* Hauptnavigationsbutton 1 > index/Startseite*/
  position: absolute;
  top: 0px;
  left: 0px;  
  width: 80px;
  height: 24px;
}

#navi_2 {             /* Hauptnavigationsbutton 2 > Unsere Vorteile */
  position: absolute;
  top: 0px;
  left: 90px;
  width: 120px;
  height: 24px;
}

#navi_3 {             /* Hauptnavigationsbutton 3 > Kontakt*/
  position: absolute;
  top: 0px;
  left: 215px;
  width: 70px;
  height: 24px;
}

#navi_4 {             /* Hauptnavigationsbutton 4 > Jobs*/
  position: absolute;
  top: 0px;
  left: 290px;
  width: 50px;
  height: 24px;
}

#navi_5 {             /* Hauptnavigationsbutton 5 > Impressum*/
  position: absolute;
  top: 0px;
  left: 345px;
  width: 90px;
  height: 24px;
}

/*-----------------------------------------------------------------*/
/*    Elemente: Subnavigation                                                   */
/*-----------------------------------------------------------------*/

#sub_navi {             /* Allgemeine Mini-Navigation, mitte links */
  position: absolute;
  top: 370px;
  left: 40px;
  width: 310px;
  height: 328px;
  line-height: 15px;
  font-size: 11px;
  background-image: url(/pics/sub_navi.jpg);
  background-repeat: no-repeat;
}

#sub_navi ul  {             /* Auflistung aller Unternavigationspunkte */
  list-style: square;
  list-style-image: url(/pics/pfeil.gif);
  margin: 10px 35px 0px 65px;
}

#sub_navi img {             /* Positionierung der Trennlinien (als Bild) zwischen den einzelnen Subnavigationspunkten */
  margin: 11px 0px 1px 45px;
}

/*-----------------------------------------------------------------*/
/*    Gestaltungselement: Infobox unten links                       */
/*-----------------------------------------------------------------*/

#left_info {             
  position: absolute;
  top: 700px;
  left: 50px;
  width: 280px;
  height: 300px;
  font-size: 11px;
}
  
#left_info img {             
  margin-left: 10px;
  margin-top: 15px;
  }  
  


/*-----------------------------------------------------------------*/
/*    Gestaltungselement: Firmenlogo, über Subnavigation   */
/*-----------------------------------------------------------------*/

#logo {             
  position: absolute;
  top: 249px;
  left: 64px;
  width: 230px;
  height: 85px;
  background-image: url(/pics/logo.jpg);
  background-repeat: no-repeat;
  }  
  
/*-----------------------------------------------------------------*/
/*    Gestaltungselement: Fußzeile der Page mit Credits       */
/*-----------------------------------------------------------------*/

#footer {             /* Allgemeiner Fußbereich mit Hintergrundbild */
  position: relative;
  top: 5px;
  left: 0px;
  width: 998px;
  height: 53px;
  border: 1px solid #3A4766;
  background-image: url(/pics/footer.jpg);
  background-repeat: repeat-x;
}
  
#footer_text {             /* Inhaltsbereich der Fußzeile */
  position: absolute;
  width: 998px;
  height: 53px;
  text-align: center;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
  color: #DDDDDD;
  margin: 18px 0px 0px 0px;
}
  
#kontakt_formular {
  position: absolute;
  width: 380px;
  height: 340px;
  top: 0px;
  left: 0px;
  margin: 23px 0px 0px 30px;
}

/*-----------------------------------------------------------------*/
/*    Elemente => Kopfbereich                                                   */
/*-----------------------------------------------------------------*/
  
#head_bereich {     /* Kopf-Bereich, umfasst oberen Bereich bis inkl. Bild unter Navigation */
  position: relative;
  top: 0px;
  left: 5px; 
  width: 988px;
  height: 63px;
  background-image: url(/pics/bg_head.jpg);
  background-repeat: repeat-x;
  border: 1px solid #BDBDBD;
}

#head_line {        /* Gestaltungselement im Kopfbereich, dünne rote Linie */
  position: relative;
  top: 64px;
  left: -1px;
  width: 988px;
  height: 3px;
  background-image: url(/pics/headline.jpg);
  background-repeat: repeat-x;
  line-height: 0px;
  font-size: 0px;
  border: 1px solid #BB2D00;
}
  
#head_pic {         /* Gestaltungselement im Kopfbereich, breites Bild */
  position: relative;
  top: 64px;
  left: -1px;  
  width: 990px;
  height: 125px;
  background-image: url(/pics/header.jpg);
  background-repeat: no-repeat;
}
