/*  ==========================================================================
  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: #1b3767;
      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; }
  
  
  .red { color: #c12e24; }


  
/*  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 */
   
/*Reihenfolge link, visited,... unbedingt einhalten */
  a:link { color: #fc1d20; }  /* dunkles Rot aus Kopflogo */
  a:visited { color: #fc1d20; }  /* dunkles Rot aus Kopflogo*/
  a:hover, a:focus { color: white; background-color: #1b3767; border-bottom: 2px solid white; } /* Hintergrund = dunkles Blau aus Helm */
  a:active {        /* Hyperlink im Moment des Anklickens */
      background-color: #d90000;
      color: white;
      font-size: 100%;
      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: #c12e24; /* dunkles rot aus Kopflogo*/
            color: white;
            padding: 5px 20px 5px 10px;
            margin-top: 10px;
        }
  
  
                      #kopfbereich #topnavi li {
                          display: inline;
                          list-style-type: none;
                          margin-right: 20px;
                      }
                      
                      
                      #kopfbereich #topnavi a {
                          color: white;          
                      }
          
            
  

  #navibereich {
          float: left;
          width: 160px;  
          background-color: white;  
          padding-left: 20px;
          padding-top: 20px;
  }
          
          #navibereich ul {  
                  width: 11em;
                  border-top: 1px solid #1b3767; /* dunkles Blau aus Helm*/         
          }
          
          #navibereich li {
                  list-style-type: none;
                  border-left: 1px solid #1b3767; /* dunkles Blau aus Helm*/ 
                  border-bottom: 1px solid #1b3767; /* dunkles Blau aus Helm*/ 
                  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: #c12e24; /* dunkles Rot aus Kopflogo */
                  color: white;
                  padding: 4px;
                  border-left: 3px solid #d05f57; /* helles Rot aus Kopf*/        
          }
          
          #navibereich a:hover,
          #navibereich a:focus {
                  background-color: #1b3767; /* dunkles Blau aus Helm */
                  color: white;
                  border-left-color: #c12e24; /* dunkles Rot aus Kopf*/
                  border-bottom: none;              
          }
                    
          #startseite #navi01 span,
          #besucher #navi02 span,                                    
          #aussteller #navi03 span, 
          #presse #navi04 span,
          #ausverz09 #navi05 span,                                    
          #rueckblick #navi06 span,
          #kontakt #navi07 span,
          #ausverz08 #navi08 span,
          #presse08 #navi09 span,
          #vortraege09 #navi10 span,
          #links #navi11 span,
          #rueckblick2009 #navi12 span,
          #ausverz10 #navi13 span,
          #vortraege10 #navi14 span,
          #rueckblick2010 #navi15 span,
          #ausverz11 #navi16 span        
          {  
                  background-color: #1b3767; /* dunkles Blau aus Helm */
                  color: white;
                  border-left-color: #c12e24; /* dunkles Rot aus Kopf*/
                  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; 
      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
    =============================================================================== */


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx   AUSSTELLERVERZEICHNIS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/


    div.ausstellereintrag { 
       overflow: hidden; 
       width: 620px;    
       background-color: #E0E0E0; /* helles grau */
       color: #000;
       padding: 20px; 
       padding-top: 25px; 
       border: 3px solid #1b3767; /* blau aus Navigation*/
       margin: 15px 3px 3px 0; 
     }
    
    div.ausstellereintrag img { 
       float: left;       
       margin-right: 15px; 
       margin-bottom: 15px;  
    }
    
    div.ausstellereintrag p {
        margin: 0 10px 10px 0;
    }
    
    div.ausstellereintrag h3 {
        margin-bottom: 10px;
    }
    
    div.ausstellereintrag a:link { color: #fc1d20; } /* dunkles Rot aus Kopflogo */
    div.ausstellereintrag a:visited { color: #fc1d20; } /* helles Rot aus Kopflogo*/
    div.ausstellereintrag a:hover, a:focus { 
                    color: white; 
                    background-color: #1b3767; 
                    border-bottom: 2px solid white; } /* Hintergrund = dunkles Blau aus Helm */
    div.ausstellereintrag a:active {        /* Hyperlink im Moment des Anklickens */
      background-color: #d90000;
      color: white;
      font-size: 80%;
      font-weight: bold;
  }
    
    
   
    .clearing {
       clear: both;
    }
    
    
    div.werbungwx {
       overflow: hidden; 
       width: 645px;        
       color: #50938a;     /* dunkleres gruen */
       padding: 10px; 
       background: #eff7f9;
       margin-top: 10px;
    }
 
    div.werbungwx img {
       float: left;       
       margin-right: 15px; 
       margin-bottom: 15px;
       border: 1px solid #50938a;        
    }
 
    div.werbungwx p {
        margin: 5px 10px 10px 0;       
    }
 
    div.werbungwx h2 {
        margin-bottom: 10px;
        margin-top: 0;
    }
    
    div.werbungwx h3 {
        margin-top: 0;        
    }
    
    
 
 
    
  /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxx  STYLES FUER AUSSTELLERINFOS - PDF´s xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
  
  
  #wrappausinfos h3 { margin-top: 1px; }
  #wrappausinfos ol { margin-top: 1px; }
  #wrappausinfos ul { margin-top: 1px; margin-bottom: 0; }
  #wrappausinfos li { margin: 20px 0; }
  #wrappausinfos p { margin: 10px 0; }
  
  .ausstellerinfos ul {  
                  border-top: 1px solid #1b3767; /* dunkles Blau aus Helm*/         
          }
          
          .ausstellerinfos li {
                  display: block;
                  list-style-type: none;                            
          }
          
          .ausstellerinfos a {
                  display: block; /* a und span werden zu einem Element --> man kann auf einmal anklicken */   
                  text-decoration: none;
                  background-color: #c12e24; /* dunkles Rot aus Kopflogo */
                  color: white;
                  padding: 4px;
                  border-top: 2px solid #1b3767;
                  border-bottom: 2px solid #1b3767; /* dunkles Blau aus Helm*/
                  border-left: 5px solid #d05f57; /* helles Rot aus Kopf*/                                      
          }
          
          .ausstellerinfos a:visited { color: white; }
          
          .ausstellerinfos a:hover,
          .ausstellerinfos a:focus {
                  background-color: #1b3767; /* dunkles Blau aus Helm */
                  color: white;
                  border-left-color: #c12e24; /* dunkles Rot aus Kopf*/
                  border-top: 2px solid #1b3767;
                  border-bottom: 2px solid #1b3767; /* dunkles Blau aus Helm*/              
          }
          
         
          
          
  /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxx  STYLES FUER RUECKBLICK AUF 2008  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/  
  
  
  #fotos08 img {
      margin: 5px;
  }
  
  #fotos08 a:hover,
  #fotos08 a:focus {      
      background-color: #c12e24;
      border: 0;
  }
  
  
  
  
  /* xxxxxxxxxxxxxxxxxxxxxxxxxxx PRESSEFORMULAR xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
  
  form {
      background-color: #1b3767;
      color: white;
      width: 530px;
      padding: 20px;
      border: 1px solid #8c8c8c;
      margin: 10px 0 10px 0;
  }

  label {
      display: block;  /* alle Elemente bekommen eigene Zeile  */  
      cursor: pointer; /*  Hand kommt --> signalisiert: hier koennen sie klicken --> feld aktivieren  */
  }
  
  input#vorname,
  input#nachname,
  input#mailadresse,
  input#medium {  
      width: 510px;      
      margin-bottom: 1em;      
  }
  
  textarea { 
      height: 7em; 
      width: 510px; 
      margin-bottom: 1em;
  }
  
  input#vorname:focus,
  input#nachname:focus,
  input#mailadresse:focus,
  input#medium:focus,  /* wenn felder durch Maus, doer tastatur aktiviert werden --> andere Optik ; verstehen nicht alle Browser */
  textarea:focus {
      background-color: #c12e24;/*#d9d9d9;*/
      color: white;
  }
  
  input.auswahl {
      margin: 0.5em;
      vertical-align: middle;
  }
  
  input#buttonabschicken,
  input#button {      
      margin-top: 1em;
      margin-right: 10px;
  }
  
  
  
  /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  STYLES FUER ANTWORTCHEF xxxxxxxxxxxxxxxxxxxxxxxxxx */
  
  * html #antwortchef { width: 894px; }  /* "fuer alle Elemente, die HTML enthalten --> sowas gibt es nicht --> versteht 
                                                nur der IE 6  */
  
    
  
  #antwortchef {      
      padding: 20px;       
  }
  
  
  /* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  STYLES FUER "WERBEFLAECHEN"  xxxxxxxxxxxxxxxxxxxxxxxxxx */
  
  #werbung h2,
  #werbung span {      
      color: #fc1d20;
  }
  
  #werbung span {
      font-weight: bold;
  }
  
  div#werbung {
      margin-bottom: 40px;
  }
  
  div#werbung a:link { color: #fc1d20; } /* dunkles Rot aus Kopflogo */
  div#werbung a:visited { color: #fc1d20; } /* helles Rot aus Kopflogo*/
  div#werbung a:hover, a:focus { 
                    color: white; 
                    background-color: #1b3767; 
                    border-bottom: 2px solid white; } /* Hintergrund = dunkles Blau aus Helm */
  div#werbung a:active {        /* Hyperlink im Moment des Anklickens */
      background-color: #d90000;
      color: white;
      font-size: 80%;
      font-weight: bold;
      }
      
      
 
 
 /* xxxxxxxxxxxxxxx  BILDER - Graphiken xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */