body,html{ 
  font-family: Arial, sans-serif;
  font-size: 16px; 
  height: 100%;
  min-width: 960px;
  max-width: 1180px;
  width: 100%;
}
h1{
  font-size: 30px;
  line-height: 34px;
  padding-bottom: 6px;
}

p.bodytext{ line-height: 19px;  }

/* Hauptcontainer =================
=================================== */
#main { 
  float: left; 
  min-width: 960px;
  max-width: 1180px;
  width: 100%; 
  min-height: 100%;
  height: auto!important;
  height: 100%;
  }

  /* TOP ===================================
     #top > Contentbereich links, Logo rechts
  ========================================== */
  #top { width: 100%; height: 213px; float: left;  margin-bottom: 256px;}
    
    #header { padding: 77px 0 0 6.4%; /*width: 639px;*/ width: 63.6%; float: left; }
    #header p.bodytext{ line-height: 19px;  }

    #logo{ width: 30%; text-align: right; padding-top: 70px; padding-bottom: 0px; float: left; }

  /* MIDDLE =================================================================
     #middle > umschließender Container für Produktteaser, Navigation, Content
  =========================================================================== */
  #middle{ float: left; width: 100%; }
    
    /* Produkteaser ===============================
       #productTeaserWrap > umschließender Container
    =============================================== */
    #productTeaserWrap { 
      position: absolute;
      top: 213px;
      left: 0;  
      background: #fff; 
      width: 831px;
      max-width: 1180px;
      float: left;
      z-index: 9999; 
      height: 177px;
    }
      /* Produkteaser ===============================
         #productTeaserMain > enthält Teaser-Inhalte
      =============================================== */
      #productTeaserMain { 
        height: 145px; 
        width: 821px;  
        float: left;
        padding: 10px 16px 10px 16px;  
        font-size: 11px; 
      }
      
      #productTeaserMain a{ text-decoration: none; color: #143e6d; }

      #productTeaserMain dd{ padding-top: 2px; }

  
      #productTeaserMain dl{ width: 104px; float: left; /*margin-right:27px;*/ padding-right: 27px; }
      #productTeaserMain dl a{ /*font-weight: bold;*/  }

      /* SLIDER ==================================================
         #productTeaserMain dl.teaser > dd,dl,dt für Slider-Elemente
      ============================================================ */
      #productTeaserMain dl.teaser{ width: 280px; }
      #productTeaserMain dl.teaser dt{ float: left; padding-right: 10px; height: 141px; }
      #productTeaserMain dl.teaser dd .title{ 
        font-size: 16px;
        padding-bottom: 6px!important;
        display: block; 
      }
      #productTeaserMain dl.teaser dd .subtitle{
        display: block;
        line-height: 13px;
        font-weight: normal!important;
      }
        /* SLIDER ===================
           #productTeaserMain > DIV-Container für Slider sowie Buttons
        ============================= */
        #productTeaserMain #slider {
            width: 100%;
            min-width: 940px;
            margin: 0 auto;
            height: 145px;
            position: relative;  
            float: left;
        }

        #productTeaserMain .scroll {
            width: 89%;
            height: 145px;
            overflow: auto;
            overflow-x: hidden;
            position: relative;
            float: left!important;            
        }
        .scrollButtons { float: left; }
        
        .scrollContainer > div dl dt {}
        .scrollContainer > div{
          width: 29.2%; 
          padding-left: 40px;  
          height: 145px;
        }

        .scrollButtons.left {padding-right: 2.2%; padding-left: 1%; padding-top: 58px; }
        .scrollButtons.right { text-align: right; padding-left: 1.7%; padding-top: 58px; }    


  /* HAUPTNAVIGATION ==============
  ================================= */
  #navigationLeft{ padding: 0 0 0 6%; float: left; /*width: 350px;*/width: 30%;  }
    #navigationLeft li { padding: 2px 0 2px 0;}
    #navigationLeft li a{  cursor: pointer;  }
    #navigationLeft ul li ul { margin-left: 15px; }

  /* CONTENT ================================================================
     #contentWrap > umschließender Container für Produktbild, Hauptinhalt etc.
  =========================================================================== */
  #contentWrap { float: left; width: 64%; }
 
    #contentMain{ width: 100%; float: left; position: relative; }      
      #contentMain div.csc-default { width: 53.5%;  }
      #contentMain h2{
        text-transform: uppercase;
        margin: 3px 0 15px 0;
        font-size: 14px;
      }
    
    /* PRODUKTBILD =================================================================
    Container für großes, absolut positioniertes Produktbild links neben dem Content
      .produktbildWrap > umschließender Container
      .produktbild > Enhält Inhalt
    ================================================================================ */
    
    .csc-produktbild {
      position: absolute;
      width: 400px;
      height: 100%;
      right: 0;
      top: 0;
      margin-top: -45px;
      float: left;
      
    }
      .csc-produktbild .csc-default{ width: 100%!important;}
      .produktbildWrap {} 
        
        .produktbild{
          position: absolute;
          right: 0;
          top: -213px;
          float: left;     
        }
      
    /* PRODUKTINFORMATIONEN ===========================================================================
    Container für erweiterte Produktinformationen (Link zum Shop, weiterempfehlen, Zubereitung etc.)
       .produktinfos > umschließender Container mit UL der Links und Icons
    ================================================================================================ */  
    .produktWrap{
        background: url(../img/dotted.png) repeat-x bottom left;
        float: left;
    }    
    .produktinfos{
        background: url(../img/dotted.png) repeat-x 0 0;
        margin-top: 13px;
        padding-top: 9px;
        font-size: 12px;
        color: #ffffff;
        float: left;
        width: 100%;
        clear: left;
      }
        .produktinfos ul{ }
        .produktinfos a{ color: #fff; text-decoration: none; }
        .produktinfos ul.tooltips{ text-align:right; float: left;}
        .produktinfos ul li{ float: left; }
          .produktinfos li.shopLink{ position: relative; padding-left: 6%; padding-right: 2px; padding-top: 6px; padding-bottom: 10px; float: right;}
          .produktinfos li.tip { /*width: 246px;*/ padding-right: 6%; padding-top: 6px; padding-bottom: 10px; }
          .produktinfos li.time { padding-top: 6px; }
          .produktinfos li.teaBag { padding-right: 13px; padding-top: 6px; }
          
          .produktinfos li.teaTime {  font-weight: bold;  }
            .produktinfos li.teaTime img { padding-right: 10px;}
          
          /* TOOLTIP Layer */    
          .qtip { z-index: 99999!important; }

/* FOOTER ========================
   #bottom > enthält Footer-Inhalte
================================== */    
#bottom{
  float: right;
  position: relative;
  width: 40%;
  text-align: right;
  margin-top: -58px;
}
  #bottom .plus{
    display: block;
    width: 40px;
    float: right;
  }
  #bottom #footer{ float: left; bottom: 0; width: 100%; }
  #bottom ul { float:right; padding-right: 5px; }
  #bottom ul li{ float:left; padding-left: 5px; }
  
  .csc-sitemap ul li a{
    color: #fff;
    font-size: 12px;   
    text-decoration: none; 
  }
  .csc-sitemap li{ padding: 5px; }
  .csc-sitemap ul{ padding-left: 10px; list-style: disc; }
  .csc-sitemap .f{ color: #d74319; }
  

  

.overlay {
	display:none;
	z-index:9997;
	background-color:#333;
	border:1px solid #242424;
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

.overlay .close {
	background-image:url(../img/close.png);
	position:absolute;
	right: 0px;
	top: -30px;
	cursor:pointer;
	height:28px;
	width:28px;
	z-index:9999!important;
}

#player, #player_api{
  position: relative;
  z-index: 9998!important;
}
#exposeMask {
  z-index: 9996!important;
}