/*  ==========================================================================
  STYLESHEET "WERBE EXPRESS" FUER DEN BILDSCHIRM
  2-spaltiges Layout mit entgegengesetzten Floats
  Navi floatet nach links, Text floatet nach rechts 
  
  
  Datei: bildschirm.css
  Datum: 22. September 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: #50938a;     /* dunkleres gruen */
      color: #000; /* dunkles gruen */      
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: small;    
  }

  
  h1 { font-size: 160%; font-weight: bold; } /* Prozentangabe bezieht sich auf oben im body gespeicherte Standardeinstellung */
  h2 { font-size: 140%; font-weight: bold; }
  h3 { font-size: 110%; font-weight: bold; }
  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 */
   
/*Reihenfolge link, visited,... unbedingt einhalten */

  a:link { color: #df0245; font-weight: bold; }  /* dunkles Rot aus Kopflogo */
  a:visited { color: #4ea03a; font-weight: bold; }  /* etwas helleres gruen */
  a:hover, a:focus {  font-weight: bold; text-decoration: underline;  } /* dunkles Rot aus Kopflogo */
  a:active { background-color: #df0245; color: white; font-weight: bold; }  /* Hyperlink im Moment des Anklickens */


 

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

   #wrapper {
      background-color: white;
      color: #50938a;     /* dunkleres gruen */
      width: 900px; /* fixe Breite von 900px */       
      margin: 30px auto;      
  }
  
  
   #kopfbereich { 
      background-color: white;   
      color: #50938a;     /* dunkleres gruen */    
  }
    
         #kopfbereich #topnavi {
            text-align: right;
            font-weight: bold;
            background-color: #f8db53;     /* dunkles gelb */
            color: #50938a;     /* dunkleres gruen */
            padding: 5px 20px 5px 10px;     
        }
  
  
                      #kopfbereich #topnavi li {
                          display: inline;
                          list-style-type: none;
                          margin-right: 20px;
                      }
                      
                      
                      #kopfbereich #topnavi a {
                          color: #50938a;     /* dunkleres gruen */  
                          font-weight: bold;  
                      }
                      
                   
            
  

  #navibereich {
          float: left;
          width: 160px;  
          background-color: white;               
          padding-left: 20px;
          padding-top: 20px;
  }
          
          #navibereich ul {  
                  width: 11em;
                  border-top: 1px solid #50938a;     /* dunkleres gruen */        
          }
          
          #navibereich li {
                  list-style-type: none;
                  border-left: 1px solid #50938a;     /* dunkleres gruen */
                  border-bottom: 1px solid #50938a;     /* dunkleres gruen */
                  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: #f8db53; /* dunkles gelb */
                  color: #50938a;     /* dunkleres gruen */
                  font-weight: bold;
                  padding: 4px;
                  border-left: 3px solid #50938a;     /* dunkleres gruen */       
          }
          
          #navibereich a:hover,
          #navibereich a:focus {
                  background-color: #50938a;     /* dunkleres gruen */
                  color: white;
                  font-weight: bold;
                  border-left-color: #f8db53; /* dunkles gelb */
                  border-bottom: none; 
          }
                    
          #startseite #navi01 span,
          #kugelschreiber #navi02 span,                                    
          #feuerzeuge #navi03 span, 
          #werbezuender #navi04 span,
          #drucksorten #navi05 span,
          #briefpapier #navi0501 span,  
          #visitenkarten #navi0502 span,
          #flyer #navi0503 span,
          #plakate #navi0504 span,                                  
          #aussenwerbung #navi06 span,
          #flaggen #navi0601 span, 
          #banner #navi0602 span,
          #klebefolien #navi0603 span,
          #beschriftungen #navi0604 span,
          #textilien #navi07 span,
          #shirts #navi0701 span,
          #polos #navi0702 span,
          #sweater #navi0703 span,
          #hemden #navi0704 span,
          #westen #navi0705 span,
          #jacken #navi0706 span,
          #kappen #navi0707 span,
          #regenschirme #navi08 span,                                    
          #taschen #navi09 span, 
          #schluesselanhaenger #navi10 span,
          #gastronomie #navi11 span,                                    
          #suesses #navi12 span,
          #werbebonbons #navi1201 span,
          #gummibaerli #navi1202 span,
          #mintboxes #navi1203 span,
          #kosmetik #navi13 span,
          #werkzeuge #navi14 span,                                    
          #diedas #navi15 span, 
          #webdesign #navi16 span,
          #event #navi17 span,                                    
          #newsletter #navi18 span,
          #kontakt #navi19 span, 
          #agb #navi20 span,
          #elektronik #navi21 span,
		  #papiertaschen #navi22 span
          {  
                  background-color: #50938a;     /* dunkleres gruen */
                  color: white;
                  border-left-color: #f8db53; /* dunkles 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: #50938a;     /* dunkleres gruen */    
      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
    =============================================================================== */
    
  .red { color: #df0245; }
  
  .redfett { color: #df0245; font-weight: bold; }
  
 
  
  .redlinks {
      color: #df0245;
      text-align: right;
  }
  
  .fett { font-weight: bold; }  
  
  .normalschrift {font-weight: normal; }
    
    
    
    /* xxxxxxxxxxxxxxxxxx     DRUCKDATEN und DRUCKSORTEN xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */
    
    
    #textdruckdaten {
      width: 90%;
      background-color: white; 
      color: #50938a;     /* dunkleres gruen */    
      padding: 10px 20px 20px 20px;  
            
    }
    
    
    .drucksorten td {
      text-align: center;
      padding-right: 30px;  
     }
    
   

  /*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx   PRODUKTPALETTEN xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
    
        
    td {
       text-align: left;
       padding-right: 10px;       
       font-weight: bold;
    }

    .absatzzeile {
        padding-top: 15px;
     }
     
    div.produkte { 
       overflow: hidden; 
       width: 620px;    
       background-color: #eef6f8; /* helles blau */
       color: #1b3767;     /* dunkleres gruen */
       padding: 20px; 
       padding-top: 25px; 
       border: 3px solid #1b3767; /* blau aus Navigation*/
       margin: 15px 3px 3px 0; 
     }
    
    div.produkte img { 
       float: left;       
       margin-right: 25px;        
    }    
  
    div.produkte h2 {
        margin-bottom: 20px;
        margin-top: 0px;
        font-weight: bold;
    }
    
    
    .clearing {
       clear: both;
    }
    
  .tabrechts {
      float: left;
  }
  
  .tabrechtslanyard td {      
       text-align: center;
       padding-right: 25px;       
       font-weight: bold;    
  }
  
  .tabrechtswerkzeug td {   
       padding-right: 25px;       
       font-weight: bold;    
  }
  
  .tabrechtsusb td {
        padding-right: 15px;
        font-weight: bold;
        text-align: center;
  }
  
  .tabrechtextraknapp td {
        padding-right: 10px;
        font-weight: bold;
        text-align: center;
  }
  
  .tabrechtultraextraknapp td {
        padding-right: 5px;
        font-weight: bold;
        text-align: center;
  }
  
 
  
  .fussnote {
      font-size: smaller;
      font-style: italic;
  }
  
  .smaller {
    font-size: smaller;
    margin-top: 0px;
  }
  
  
  
  
  
  
  /* xxxxxxxxxxxxxxxxxxxxxxxxxxx NEWSLETTER xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
  
  form {
      background-color: #50938a;     /* dunkleres gruen */
      color: white;
      width: 90%;
      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: 70%;      
      margin-bottom: 1em;      
  }
  
  textarea { 
      height: 7em; 
      width: 100%; 
      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: #f8db53; /* dunkles gelb */
      color: #50938a;     /* dunkleres gruen */
      font-weight: bold;
  }
  
  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  */
  
    
  
  #antwortchefnewsletter {      
      padding: 20px;       
  }
  
  #fehlerchefnewsletter {      
      padding: 20px;       
  }