html {
  background-color: black
}
body {
  margin-top: 0;
  padding: 0;
  font-family: Tahoma, Helvetica, Arial, sans-serif;
  background-color: black
}
img {
  border: none
}

/* DIV "main" gruppiert den gesamten Content, absolut positioniert wg. vertikaler Zentrierung */
  div#main {
    position: absolute;
    width: 880px;
    height: 560px;
    top: 50%;
    left: 50%;
    margin-left: -440px;
    margin-top: -280px
  }

/* MUTOL-Logo und Navigation werden in einer horizontalen Liste notiert ("Bitte, bitte lass mich eine Liste sein!") */
    ul#headline {
      margin-left: 0;
      padding: 0
    }
    ul#headline li {
      list-style: none;
      margin: 0;
      padding-left: 25px;
      font-size: 14px;
      display: inline;
      color: #fff
    }
    ul#headline li.first {
      padding-left: 10px
    }

/* Formatierung für die Links mit Hilfe der entspr. Pseudo-Klassen: Hier werden alle Links in Abschnitten und in Listen gleich formatiert */    
    p a, ul#headline li a, ul#footline-text li a {
      color: white;
      text-decoration: none
    }
    p a:link, ul#headline li a:link, ul#footline-text li a:link {
      color: #767676
    }
    p a:visited, ul#headline li a:visited, ul#footline-text li a:visited {
      color: #767676
    }
    p a:hover, ul#headline li a:hover, ul#footline-text li a:hover {
      color: white
    }
    p a:active, ul#headline li a:active, ul#footline-text li a:active {
      color: white
    }

/* Formatierungen für das Login-Formular */
    p#login { font-size: 14px }
    div#form {
      width: 200px;
      margin-top: 18px;
      margin-left: 640px
    }
    form { font-size: 11px; color: white }
    input {
      width:70px;
      font-size:11px
    }
    input#name {
      margin-left: 30px
    }
    input#password {
      margin-left: 12px;
      margin-top: 2px
    }
    span#submit {
       cursor: pointer;
       margin-left: 100px;
       font-weight: bold
    }

/* Mit einem inhaltsleerem Abschnitt wird das Floaten aufgehoben (Eigenschaft "clear") */
    p#cleaner {
      clear:both
    }

/* Formatierung des "linken Bereichs" (LOTUM-Laptop-Bild) */    
    div#leftpanel {
      width: 605px;
      background-color: white;
      padding: 10px;
      line-height: 0;
      float: left;
      margin-right: 15px
    }

/* Formatierungen des "rechten Bereichs" (die zwei Teaser) */
    div#rightpanel1 {
      width: 200px;
      padding: 5px;
      background: url(bg_box_medium.png) 0px 0px repeat;
      margin-left: 640px;
      font-size: 11px;
      line-height: 16px
    }
  
    div#rightpanel2 {
      width: 200px;
      margin-top: 15px;
      padding: 5px;
      background: url(bg_box_small.png) 0px 0px repeat;
      margin-left: 640px;
      font-size: 11px;
      line-height: 16px
    }
  
    div#rightpanel1 h1 {
      font-size: 15px
    }
    div#rightpanel2 h2 {
      font-size: 11px;
      font-weight: bold
    }
 
/* Formatierungen für die Fußzeile (Copyright-Hinweis, Impressum-Link = eine Liste, die zum Portfolio verlinkten fünf Grafiken = eine andere Liste - "Bitte, bitte, lass mich eine Liste sein") */ 	
    ul#footline-text {
      position: relative;
      top: 20px;
      margin-left: 15px;
      padding: 0;
      color: silver
    }
    ul#footline-text li {
      list-style: none;
      margin-left: 0;
      margin-right: 0;
      padding: 20px;
      font-size: 14px;
      display: inline;
      color: #fff
    }
    ul#footline-text li.first {
      padding: 10px
    }
    ul#footline-images {
      position: relative;
      width: 250px;
      top: -18px;
      left: 380px;
      padding: 0
    }
    ul#footline-images li {
      list-style: none;
      margin-left: 0;
      margin-right: 0;
      padding: 0;
      display: inline
    }