@media screen{
  body {
      font-family: sans-serif;
      text-align: center;
  }

  /* Definition einer maximalen Seitenbreite, die genutzt wird */
  #seite {
      width: 980px;
      text-align: left;
      margin: 0 auto;
  }


  /* das Hauptelement auf Startseite, hier nur Logo und Text drunter */
  #haupt {
      margin-left: 160px; /* Abstand zu Navigationsleiste links = Breite der Leiste */
      width: 500px;  /* Breite des Bildes logo.png */
      text-align: center;
      padding: 2px 10px;
  }
  
  /* Das Hauptelement, in dem der eigentliche Inhalt angezeigt wird */
  /* wird mit etwas Abstand von oben gezeigt wg. kleinem Logo links */
  #inhalt {
      margin-top: 150px; /* Abstand von oben = Höhe des kleinen Logos */
      padding: 2px 10px;
  }

  /* Navigationselemente/-menü per id definieren */
  #navigation {
      float: left;
      position: relative;
      height: 100%;
      width: 160px;
      top: 8px;
      overflow: auto;
  }
  /* Liste */
  #navigation ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      /*width: 160px;*/
      background-color: yellow;
  }
  /* Links in Listenelement */
  #navigation li a {
      display: block;
      padding: 8px 0px 8px 16px;
  }
  /* Links bei Mausberührung */
  #navigation li a:hover {
      background-color: green;
      color: yellow;
  }
  /* ausgewähltes = aktives Element */
  .active {
      background-color: green;
      color: yellow;
  }


  /* Fußzeile */
  #fusszeile {
      width: 100%
      color: #FF0000;
      padding: 10px;
      text-align: right;
/*      font-size: 75%;*/
  } 

  #imprint {
      font-size: 75%;
      
  }
  
  .fett {
      font-weight: bold;
  }
  
  p.links {
      text-align: left;
  }
}




/* --------------------------------------------------
Zur Erinnerung:
p.myClass = Klasse, global
#meineID = id, lokal, muss einmalig sein
-------------------------------------------------- */