/*  ==========================================================================
  STYLESHEET "MAENNERMESSE.AT" 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: 21. April 2009
  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: #0b1c38;
      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: #e1031a; }  /* Rot aus Kopflogo */
  a:visited { color: #e1031a; }  /* Rot aus Kopflogo*/
  a:hover, a:focus { color: white; background-color: #e1031a;  } /* Hintergrund = rot */
  a:active {        /* Hyperlink im Moment des Anklickens */
      background-color: #d90000;
      color: white;
      font-size: 95%;
      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: #009de0; /* tuerkis*/
            color: #feed01; /*gelb*/
            padding: 5px 20px 5px 10px;
            margin-top: 10px;
        }
  
  
                      #kopfbereich #topnavi li {
                          display: inline;
                          list-style-type: none;
                          margin-right: 20px;
                      }
                      
                      
                      #kopfbereich #topnavi a {
                          color: #feed01; /*gelb*/          
                      }
          
            
  

  #navibereich {
          float: left;
          width: 160px;  
          background-color: white;                   
          padding-left: 20px;
          padding-top: 20px;
  }
          
          #navibereich ul {  
                  width: 11em;
                  border-top: 1px solid #009de0; /* tuerkis */         
          }
          
          #navibereich li {
                  list-style-type: none;
                  border-left: 1px solid #009de0; /* tuerkis */
                  border-bottom: 1px solid #009de0; /* tuerkis */
                  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: #feed01; /*gelb*/
                  color: #e1031a; /*rot*/
                  padding: 4px;
                  border-left: 3px solid #009de0; /* tuerkis */       
          }
          
          #navibereich a:hover,
          #navibereich a:focus {
                  background-color: #e1031a; /*rot*/
                  color: #feed01; /*gelb*/
                  border-left-color: #feed01; /*gelb*/
                  border-bottom: none;              
          }
                    
          #startseite #navi01 span,
          #besucher #navi02 span,                                    
          #aussteller #navi03 span, 
          #presse #navi04 span,
          #ausverz09 #navi05 span, 
          #kontakt #navi07 span,          
          #vortraege #navi10 span,
          #links #navi11 span,
          #newsletter #navi12 span           
          {  
                  background-color: #e1031a; /*rot*/
                  color: #feed01; /*gelb*/
                  border-left-color: #feed01; /*gelb*/
                  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: #009de0;  /*schwarz aus sakko*/     
      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 #4e6b8d;  /* blau aus Navigation*/ /* graublau aus Kopf*/
       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: #e1031a; } /*rot*/ 
    div.ausstellereintrag a:visited { color: #009de0; }/* TUERKIS*/ 
    div.ausstellereintrag a:hover, a:focus { 
                    color: black; 
                    background-color: #feed01; /*gelb*/
                    border-bottom: 1px 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;
    }
    
    
  /* 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: 0; }
  
  .ausstellerinfos ul {  
                  border-top: 1px solid #009de0; /* tuerkis */         
          }
          
          .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: #feed01; /*gelb*/
                  color: #e1031a; /*rot*/
                  padding: 4px;
                  border-top: 2px solid #009de0; /* tuerkis */
                  border-bottom: 2px solid #009de0; /* tuerkis */
                  border-left: 5px solid #009de0; /* tuerkis */                                       
          }
          
          .ausstellerinfos a:visited { color: #e1031a; } /*rot*/
          
          .ausstellerinfos a:hover,
          .ausstellerinfos a:focus {
                  background-color: #e1031a; /*rot*/
                  color: #feed01; /*gelb*/
                  border-left-color: #feed01; /*gelb*/
                  border-bottom: none;              
          }
          
         
          
          
 
  
  
  
  /* 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 VORTRAGSTABELLE xxxxxxxxxxxxxxxxxxxxxxxxxx */
   
   .vortrag {
      margin-top: 1em;
   }
   
   table {
      width: 95%;     
      background: white;
      border: 1px solid #009de0;  /*tuerkis*/        
   }
   
   caption {
      font-size: 120%;
      font-weight: bold;
      background-color: #009de0; /*tuerkis*/
      color: #feed01; /*gelb*/
      text-align: left;
      padding: 0.5em;
      padding-left: 0;
      border: 1px solid #009de0;  /*tuerkis*/ 
      padding: 0.5em;
      
   }
   
   th, td {
      padding: 0.5em;
      text-align: left;
      vertical-align: top;
   }
   
   th {
      font-size: 110%;
      letter-spacing: 2px;      
   }
   
   td {
      border: 1px solid #009de0;  /*tuerkis*/
   }
   
   thead {      
      background-color: #feed01; /*gelb*/
      border-bottom: 1px solid #009de0;  /*tuerkis*/       
   }