/*-----   Teil 1: Allgemeine Seiteneinstellungen und Titelbereich  --------*/
  /* Einstellungen von allgemeinem Schrifttyp, Breite des Seitenbereichs     */
  /* sowie Hintergrundfarben von Inhalts- und body-Bereich.                  */
  /* Weiterhin alle Festlegungen für das Erscheinungsbild des Titelbereiches */
  /*-------------------------------------------------------------------------*/

  body {  /* Voreinstellung für alle Inhalte im body-Bereich */
    margin: 0 auto;                
    background-color: darkblue; /* Hintergrund neben dem Seitenbereich */     
    font-size: 1em; 
    font-family: Arial, sans-serif;    /* Schriftart Arial */
    color: black;
    font-weight: normal;         

  }

  div#seite {           /* Einstellungen für die gesamte Seite */
    width: 800px;       /* Breite des Seitenbereiches */
    height: auto;     
    text-align: left;   /* Inhalte links ausrichten */
    margin: 0 auto;     /* standardkonforme horizontale Zentrierung */
    background-color: white;
  }

  div#titel {   /* alle Einstellungen für den Titelbereich */
    height: 50px; 
    background-color: yellow;
    text-align: center; 
    font-size: 2.0em; 
    font-family: Comic Sans MS; 
    font-weight: bold;
    letter-spacing: 0.1em;
    color: blue;
    border-bottom: 1px solid darkgrey;
  }

 /*-----------------  Teil 2:  Navigationsbereich   -----------------------*/
 /*  "floatend" links am Seitenrand, der Inhaltsbereich "umfliesst" die    */
 /*  Navigation auf der rechten Seite des Seitenbereiches                  */
 /*------------------------------------------------------------------------*/
  
  ul#navigation {    
    float: left;    /* Liste für die Navigation links am Seitenrand */
    width: 10em;    /* die Breite des Navigationsbereiches ist 10em */
    height: auto;   /* Höhe automatisch bestimmen lassen            */    
      
    border: 1px solid darkgrey;  /* Rahmen um die Navigationsliste  */
    border-radius: 5px;          /* abgerundete Ecken               */
    margin: 20px 10px 6px 6px;   /* Außenabstände der Liste         */
    padding: 12px 3px 12px 6px;  /* Innenabstand vom Rahmen         */
  }
  
  ul#navigation li {
    list-style: none;   /* keine Listenpunkte (bullets) anzeigen    */
    padding: 0.2em;     /* Innenabstände im List-Item               */
  }
  
  ul#navigation a {
    display: block;       /* unabhängig von der Textlänge den umgebenden li-Block füllen */
  }  

  ul#navigation a:link, 
  ul#navigation a:visited {
    text-decoration: none;  /* links ohne Unterstrich                     */
    color: #0000CD;         /* links in Mittelblau, auch bereits besuchte */
  }

  ul#navigation a:hover, /* Aussehen für mouse-over und ausgewählten link */  
  ul#navigation a:focus,
  ul#navigation a:active {        
    color: white;            /* weisse Schrift            */
    background-color: red;   /* dunkelroter Hintergrund   */ 
    border: none;            /* kein Rand                 */              
    border-radius: 2px;      /* abgerundete Ecken         */
  } 


 /*--------------------  Teil 3:  Inhaltsbereich   -------------------------*/
 /*  Der Inhaltsbereich "umfliesst" rechts die Navigation. Damit unterhalb  */
 /*  des Rahmens der Navigation der Bereich frei bleibt, ist der linke Rand */
 /*  auf die Breite des Navigationsbereiches (s.o.) eingestellt.            */
 /*-------------------------------------------------------------------------*/
  
  div#inhalt {
    padding: 0 0.4em 0 0.4em;  /* Innenabstände rechts und links             */
    
    min-height: 300px;     /* cross-browser Minimalhöhe des Inhaltsbereiches */
    height: auto !important;
    height: 300px;    
    max-height: 520px; /* Maximalhöhe, ab der ein Scrollbalken verwendet wird */
    overflow: auto;    /* blendet bei Bedarf automatisch Scrollbalken ein     */
  }
  


  
 /*----------------------   Teil 4:  Fußzeile   ----------------------------*/
 /*  Die floats aus Navigations- und Inhaltsbereich wieder zusammenführen.  */
 /*  Trennlinie zum Inhaltsbereich anteigen.  Schrifttyp und -farbe für die */
 /*  Fußzeile sowie Innenabstände einstellen.                               */
 /*-------------------------------------------------------------------------*/ 
  div#fusszeile {
    clear: both;       /*  floats wieder zusammenführen */    
    
    font-size: 1.2em; 
    color: red;    
    border-top: 1px solid darkgrey;
    padding: 3px 0 3px 0;    
  }


  /*--------------------  Teil 5:  Allgemeine Designklassen  ---------------*/
  
  .tmy {
    background-color:yellow;     /*  Textmarker yellow für Hervorhebungen  */
  } 
  
  pre {
    background-color: LightSteelBlue;    
    font-family:Fixedsys,Courier,monospace;     
    font-size: 0.84em; 
    font-weight: bold; 
    padding:10px;   
  }
  
  .auftrag {
           color: darkblue;
           border-color: darkred;
           border-top-style: solid;
           border-left-style: solid;
           border-left-width: 20px;
           border-top-width: 2px
           margin-top: 20px;
           margin-bottom: 40px;
           padding-top: 6px;
           padding-left: 6px;
   } 
   
  .newItem {                       /* Formatierung des "new"-tag */
    margin-left: 10px;
    color: red; 
    font-family: Comic Sans MS;  
    font-size: 18px; 
    font-weight: bold;
    text-shadow: 5px  7px 3px grey; 
  
  }