@charset "utf-8";

/**
------------------------------------------------------
Regeln für allgemeine Elemente
------------------------------------------------------ */
/** Abstände Voreinstellungen */
  /* Alle kritischen Werte instanziieren. */

   * {
     margin: 0;
     padding: 0;
     vertical-align: top;  /*sorgt dafür, dass alle Inline-Elemente bündig mit der Oberkante ihrer
                            Zeilenboxen beziehungsweise Tabellenzellen ausgerichtet sind*/
     }

/* Farben und Hintergrund setzen */
   body {
     color: #5D5D5D;
     background: #9B9D97 url(../images/bg.bmp)top left repeat;
     }

/* Schriftgröße kontrollieren */
   body, td, th {
     font: normal 80% Verdana, sans-serif;
     }
     td, th {
       f\ont-size: 100%
       }
         /* Ein weiterer, sehr ärgerlicher Fehler in vielen veralteten Browsern, vor allem im
         Quirks Mode des Internet Explorers (siehe den Abschnitt Doctype Switching). In diesem Darstellungsmodus
         werden Schriftgrößendeklarationen nicht in Tabellenzellen hinein vererbt; darin enthaltene Schrift
         würde folglich deutlich größer wirken als auf dem Rest der Webseite. Um dieses Problem zu beheben:

         1. Zunächst deklarieren Sie die gewünschte Schriftgröße neben body auch für die Elemente td (Datenzellen)
         und th (Kopfzellen). Standardkonforme Browser würden Schrift in Tabellenzellen nun zu klein darstellen,
         nämlich in 64 Prozent der Standardschriftgröße (80 Prozent von 80 Prozent). Für diese gilt es also, die
         Schrift wieder hochzusetzen.
         2. Dafür machen Sie sich im zweiten Schritt zunutze, dass alle Browser, die den Darstellungsfehler
         aufweisen, keine Maskierung verstehen und die zweite Regel daher ignorieren; so setzen Sie die
         Schriftgröße für standardkonforme Browser wieder auf 100 Prozent der vererbten Größe und erreichen,
         dass die Schrift in allen Browsern innerhalb und außerhalb von Tabellenzellen die gewünschten 80 Prozent
         der Standardschriftgröße erreicht. */

/* Links und Anker */
   a:link {
     color: #0092E7;
     background-color: transparent;
     }
   a:visited {
     color: #0092E7;
     background-color: transparent;
     }
   a:hover,
   a:focus {
     color: #0071C6;
     background-color: #CECFCE;
     }
   a:active {
     color: #0092E7;
     background-color: #A4B5B2;
     }
     /*Mit folgender Regel entfernen wir den Rahmen, der standardmäßig um verlinkte Bilder gezogen wird.
       Eigentlich reicht die Deklaration für a img, jedoch zeichnen einige ältere Opera-Browser dann
       noch immer einen Rahmen.*/
   a:link img, a:visited img,
   a:hover img, a:focus img, a:active img {
     border: 0;
     }

/* Überschriften */
   h1, h2, h3, h4, h5, h6 {
     color: #FF6C0A;
     background-color: transparent;
     }
   h1 {
     font-size: 1.5em;
     margin: 0 0 1.5em 0;
     }

/* Absätze */
   p {
     margin: .8em 0;
     }

/* Bilder */

   img {
     vertical-align: bottom;
     }                      /*damit Bilder richtig in der Zeilenbox liegen und keine unerwünschten Abstände
                              nach unten entstehen*/



/**
------------------------------------------------------
Regeln für besondere Bereiche
------------------------------------------------------ */

/* Standardmäßig nicht sichtbare Inhalte zur Erleichterung der Orientierung mit assistiven Technologien */
   .invisible {
     position: absolute;
     left: -9999px;
     } /* Überschrift 'Hauptmenue' wird unsichtbar */


/** Hauptbereich
------------------------------------------------------ */
/** Hauptbereich horizontal zentrieren
------------------------------------------------------ */

   div#top {
     color: #5D5D5D;
     background: #F4F2EB url(../images/bg_top.bmp) top right repeat-y; /* Platz für irgendwas*/
     border: 1px solid #606060;  /* Rahmen um den Hauptbereich*/
     border-top: 0;
     width: 921px;
     margin: 25px auto; /* Reicht eigentlich */
     }
  /* Für kaputte Browser */
     body {
       /* Alle Inhalte horizontal zentrieren */
       text-align: center;
       }
     body * {
       /* Textausrichtung korrigieren */
       text-align: left;
       }

/** globale Navigation
------------------------------------------------------ */

   #head ul,
   #head li {
     float: left;
     list-style: none; /* entfernt die Listenelementmarkierungen */
     }

   #head ul a,
   #head ul strong {
     color: #5D5D5D;
     background-color: transparent;
     text-decoration: none;
     padding: 0 1em;  /* damit die Links 'luftiger wirken'*/
     }
   #head ul a:hover,
   #head ul a:focus {
     text-decoration: underline;
     }

/** Logo
------------------------------------------------------ */
         /* Die Eigenschaft text-align können wir dafür verwenden, das Logo an der richtigen
         Stelle zu platzieren. Damit schaffen wir auch den Platz für den oberen Teil der
         Dekorationsgrafik, die wir als Hintergrundbild für h1#logo deklarieren. Es ist ein
         üblicher Trick, Grafiken, die sich nicht rechteckig schneiden lassen oder die
         offensichtlich mehrere voneinander unabhängige Seitenbereiche umfassen, in mehrere
         Teile zu schneiden. Der zweite Teil ist der background bei 'sidebar'.*/
   h1#logo {
     color: #5D5D5D;
     background: #EBE9DF url(../images/bg_logo.bmp) left bottom no-repeat;
     text-align: right;
     margin: 0;  /* weil für die Überschriften h1 ein äußerer Abstand nach unten deklariertt ist,
                den wir für das Logo nicht wollen */
     }

/** Seitenspalte
------------------------------------------------------ */
/* Die Sidebar lassen wir links floatieren und beschränken sie auf eine Breite von 200 Pixeln. */
   #sidebar {
     float: left;
     width: 200px;
     margin: 0 0 195px 0;
     background: url(../images/bg_sidebar.bmp) top left no-repeat;
     }

/** Navigation
------------------------------------------------------ */

   ul#nav {
     margin: 54px 0 0 0;
     list-style: none;  /* entfernt die Listenelementmarkierungen */
     }

     /*Da die Seite, auf der wir uns gerade befinden, nicht verlinkt, der aktuelle Navigationspunkt also nicht mit a
      ausgezeichnet werden soll, sondern mit strong, haben wir es hier mit zwei Elementtypen zu tun, die wir
      gestalten müssen. Ein genauer Blick auf den Entwurf verrät uns aber, dass die Darstellungen von a und strong
      nahezu identisch sind. Die Farbgebung von strong entspricht der von a:hover, a:focus beziehungsweise a:active.
      Das erleichtert uns die Arbeit erheblich. Zunächst legen wir die Vorder- und Hintergrundfarbe fest.
      Die Eigenschaft display: block; bewirkt, dass die Navigationspunkte die volle zur Verfügung stehende Breite
      in Anspruch nehmen, und ermöglicht uns die Deklaration der entsprechenden Paddingbereiche. Die weiße Linie
      unterhalb der Navigationspunkte erreichen wir über die Deklaration von border-bottom. Wichtig ist, an dieser
      Stelle die Zeilenhöhe auf den Normalwert zu setzen, um Probleme in Gecko-Browsern zu vermeiden, die sonst dazu
      neigen, den Rahmen hin und wieder nicht anzuzeigen. Anschließend deklarieren wir die Farben der dynamischen
      Pseudoklassen für a und somit gleichzeitig die Darstellung des aktuellen Navigationspunkts (strong). */

   #nav a,
   #nav strong {
     color: white;
     background-color: #5D5D5D;
     display: block;
     padding: 5px 10px 7px 10px;
     text-align: right;
     border-bottom: 1px solid white;
     line-height: normal;
         /* Breitenangabe notwendig, um den IE-Leerraum-Bug bei Listen zu umgehen */
     width: 195px;
     wid\th: 180px;
     }

   #nav a:hover,
   #nav a:focus,
   #nav a:active,
   #nav strong {
     color: #5D5D5D;
     background-color: #CCCAC2;
     }

/** Kontaktfeld
------------------------------------------------------ */
  /* Das Kontaktfeld ist weiß hinterlegt. Anders als die Standardfarbe von Überschriften,
  soll die Überschrift zweiter Ordnung hier die gleiche Farbe haben wie gewöhnlicher Fließtext.

  An dieser Stelle machen wir Gebrauch von kontextabhängigen Selektoren;
  der Selektor #contact h2 spricht alle Elemente vom Typ h2 an, die sich innerhalb eines
  Elements mit der ID contact befinden. */

   div#contact {
     color: #5D5D5D;
     background-color: white;
     padding: 10px;
     border-top: 50px solid #EBE9DF;
     }
     #contact h2 {
       color: #5D5D5D;
       background-color: white;
       font-size: 1.3em;
       text-align: right;   /*rechtsbündig*/
       text-transform: uppercase;   /*Grossbuchstaben*/
       }
     #contact p.name {
       text-align: right;
       margin: 0;
       }
     #contact p.tel {
       font-size: 1.3em;
       font-weight: bold;
       text-align: right;
       margin: 0;
       }
     #contact p.adress {
       text-align: right;
       margin: 0;
       }

/** Inhaltsbereich
------------------------------------------------------ */
   div#main {
     background: url(../images/bottom.bmp) left bottom no-repeat;
     }
     /*  Damit es stets sichtbar ist und nicht durch die darüber stehenden Elemente der
         Sidebar überdeckt werden kann, deklarieren wir für die Sidebar einen unteren Marginbereich in Höhe des Bildes.

         Die Sidebar nutzen wir dazu, die Dekorationsgrafik oben links zu vervollständigen. Das fehlende Stück setzen wir
         als Hintergrund der Sidebar und verwenden das Hauptmenü (ul#nav), das stets das erste Element der Sidebar ist,
         für denselben Trick wie oben: Wir deklarieren einen Abstand in Höhe des Bildes, der den benötigten Platz
         freihält, damit das Bild stets vollständig zu sehen ist.*/

   /* die richtigen Abstände des Contentbereichs festlegen.

   1. Zunächst setzen wir den rechten und linken Marginbereich so, dass der Contentbereich genau zwischen
      den beiden durch das Hintergrundbild von div#top realisierten »virtuellen« Spalten liegt.
   2. Anschließend deklarieren wir die inneren Abstände über die Eigenschaft padding.

   Diese Vorgehensweise ist nicht unbedingt notwendig, jedoch ist es sauberer, zunächst ein lückenloses
   Spaltenlayout zu formulieren und zusätzliche Abstände über weitere Deklarationen oder Regeln zu realisieren.
   So halten wir uns die Möglichkeit offen, später einmal – falls gefordert – auch für den Contentbereich einen
   Hintergrund zu deklarieren, der die gesamte mittlere Spalte ausfüllt. */

/** Content
------------------------------------------------------ */
   div#content {
     margin: 0 132px 0 200px;
     padding: 54px 20px 40px 60px;
     height: 1%;  /* Behebt den 3px-Textsprung-Bug und andere im IE 6 */
     }

/** Fußzeile
------------------------------------------------------ */
p#footer {
  color: #5D5D5D;
  background-color: #CECFCE;
  font-size: .9em;
  text-align: center;
  padding: 5px 20px;
  margin: 0;
  clear: both; /* damit die Fußzeile unter allen anderen Elementen steht und einen visuellen Abschluss bildet */
  }
  #footer a {
    color: #5D5D5D;
    background-color: #CECFCE;
    }
  #footer a:hover,
  #footer a:focus {
    color: white;
    background-color: #9C9E9C;
    }