/*  ==========================================================================
  STYLESHEET "MOTORSPORTMESSE.AT NEU" FUER DEN BILDSCHIRM
  2-spaltiges Layout mit entgegengesetzten Floats
  Navi floatet nach links, Text floatet nach rechts 
  
  Vorteile: globaler Effekt clear faellt weg
            zwingende Reihenfolge Navi, dann Textbereich faellt weg

  Datei: bildschirm.css
  Datum: 11. Dezember 2008
  Autor: Katja Noschiel

  Aufbau:   1. Kalibrierung
            2. Allgemeine Styles
            3. Styles fuer Layoutbereiche
            4. Sonstige Styles

    ============================================================================== */

/*  ==============================================================================
            1. KALIBRIERUNG
    =============================================================================== */

    * { padding: 0; margin: 0; }  

    h1, h2, h3, h4, p { margin-top: 1em; }  /* Aussenabstand oben - em sinnvoll fuer Grundlegendes - waechst mit Schrift mit */    

    ul { margin: 10px 0; } /* Abstaende fuer verschachtelte Listenelemente auf null*/
    
    ol { margin: 10px 0; }

    li { margin-left: 2em; margin-bottom: 0.5em; }  /* Aussenabstand links fuer alle li- Elemente  */


/*  ==============================================================================
            2. ALLGEMEINE STYLES
    =============================================================================== */

  html { height: 101%; } /* damit bei Firefox Bildlaufleiste auch immer erhalten bleibt - sonst springt/zuckelt Bild bei kurzen Seiten */
  
  
  body {
      background-color: #7C40B7;
      color: #000; /* schwarzer Text*/
      /* hier grundsätzliches zur Schrift definieren --> wegen VERERBUNG gilt für alle Elemente im Body*/
      /* Verdana speziell für Bildschirm --> auch bei kleinem Fliesstext leicht lesbar */
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: small;    
  }

  
  h1 { font-size: 160%; } /* Prozentangabe bezieht sich auf oben im body gespeicherte Standardeinstellung */
  h2 { font-size: 140%; }
  h3 { font-size: 110%; }
  h4 { font-size: 100%; font-weight: normal; }


  
/*  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxx     HYPERLINKS         xxxx */

  a {
      text-decoration: none; /* entfernt alle Unterstreichungen bei Hyperlinks */
      outline: none; /* outline: wird nicht von allen Browsern interpretiert --> Umpunktung bei aktivem Link ausschalten */
  }
  
  a img { border: 0; }

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx     
   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx   PSEUDOKLASSEN   x */
   

  a:link { color: #BE81DE; }  
  a:visited { color: #BE81DE; }  
  a:hover, a:focus { color: white; background-color: #C8ADE2; border-bottom: 2px solid red; } 
  a:active {        
      background-color: #3B289E;
      color: white;
      font-size: 105%;
      font-weight: bold;
  }


 

/*  ==============================================================================
            3. STYLES FUER LAYOUTBEREICHE
    =============================================================================== */

   #wrapper {
      background-color: white; 
      color: black;
      width: 900px; /* fixe Breite von 900px */       
      margin: 30px auto; 
  }
  
  
   #kopfbereich { 
      background-color: white;   
      color: black;     
  }
    
         #kopfbereich #topnavi {
            text-align: right;
            background-color: #fff600;
            color: black;
            padding: 5px 20px 5px 10px;
            margin-top: 10px;
        }
  
  
                      #kopfbereich #topnavi li {
                          display: inline;
                          list-style-type: none;
                          margin-right: 20px;
                      }
                      
                      
                      #kopfbereich #topnavi a {
                          color: black;          
                      }
          
            
  

  #navibereich {
          float: left;
          width: 160px;  
          background-color: white;               
          padding-left: 20px;
          padding-top: 20px;
  }
          
          #navibereich ul {  
                  width: 11em;
                  border-top: 1px solid #5229B6; 
          }
          
          #navibereich li {
                  list-style-type: none;
                  border-left: 1px solid #fff600;
                  border-bottom: 1px solid #3B289E; 
                  margin: 0;   
          }
          
          #navibereich a,        
          #navibereich span {
                  display: block; /* a und span werden zu einem Element --> man kann auf einmal anklicken */   
                  text-decoration: none;
                  background-color: #fff600; 
                  color: black;
                  padding: 4px;
                  border-left: 3px solid #7629B7;  
          }
          
          #navibereich a:hover,
          #navibereich a:focus {
                  background-color: #7629B7; 
                  color: white;
                  border-left-color: #C092E6; 
                  border-bottom: none;              
          }
                    
          #startseite #navi01 span,
          #kontakt #navi02 span                    
          {  
                  background-color: #7629B7; 
                  color: white;
                  border-left-color: #C092E6; 
                  border-bottom: none;                    
          }
       
          

  /*  Korrektur fuer den IE 6 */
  
  * html #textbereich { width: 674px; }  /* "fuer alle Elemente, die HTML enthalten --> sowas gibt es nicht --> versteht 
                                                nur der IE 6  */
  
  #textbereich {
      float: right;  /* Float fuer Layout mit entgegengesetztem Float */
      width: 680px; 
      height: 300px;
      background-color: white; 
      color: #1b3767;     
      padding: 0 20px 20px 20px;  
      margin-top: 10px;     
  }

               
            #textbereich ul li { list-style-type: square; }  /* => betrifft nur Listenelemente in ulīs im Textberich */
  
  
/*  ==============================================================================
            4. SONSTIGE STYLES
    =============================================================================== */