/** 
 * CMS
 * 
 * @media     screen
 *
 * @author    Andreas Naumann
 * @section   css/section/cms.css
 * @language   DE, FR, UK, ES
 *
 */


/* Standards ueberschreiben
----------------------------------------------------------------------*/
body
{
  background:#bbbbbb url('../img/ms-body-bg.png') repeat-x 0 0 !important;
}
#Header .header
{
  background:none;
  padding:0;
}
#Content h1, #Content h2, #Content h3
{
  font-family:'TradeGothicCondensed', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-weight:normal;
}
  #Content h1
  {
    font-size:40px;
    line-height:40px;
  }
  #Content h3
  {
    font-size:24px;
    line-height:24px;
  }
#NewsletterOnsiteIFrame { top:-15px; }
label
{
  font-weight:normal !important;
  color:#444444 !important;
}
#CMS
{
  position:relative;
}
#Bottom
{
  clear:both;
}



/* Sprite ( icons-infobox.png ) einmal laden
----------------------------------------------------------------------*/
.tmplthree .box ol li,
.tmplthree .box ol li.check,
.tmplthree .shipment,
.tmplthree #Bottom .benefits li div,
.tmplone ol li,
.tmplfour ul li
{
  background:url('../img/symlinks/icons-infobox.png') 0 0 no-repeat;
}




/* Content
----------------------------------------------------------------------*/
#Content        { padding-bottom:20px; }
.msie6 #Content { padding-bottom:0; }




/* Farbanpassungen
----------------------------------------------------------------------*/
h1.red, h2.red, h3.red, h4.red, p.red, .bubble.red, .benefits li.red { color:rgb(151,20,29); }

h1.mediumgrey, h2.mediumgrey, h3.mediumgrey, h4.mediumgrey, p.mediumgrey, .bubble.mediumgrey, .benefits li.mediumgrey { color:rgb(147,147,147); }

h1.darkgrey, h2.darkgrey, h3.darkgrey, h4.darkgrey, p.darkgrey, .bubble.darkgrey, .benefits li.darkgrey { color:rgb(59,59,82); }

h1.lightgrey, h2.lightgrey, h3.lightgrey, h4.lightgrey, p.lightgrey, .bubble.lightgrey, .benefits li.lightgrey { color:rgb(246,246,246); }

h1.green, h2.green, h3.green, h4.green, p.green, .bubble.green, .benefits li.green { color:rgb(106,175,35); }

h1.sun, h2.sun, h3.sun, h4.sun, p.sun, .bubble.sun, .benefits li.sun { color:rgb(250,174,16); }

h1.aqua, h2.aqua, h3.aqua, h4.aqua, p.aqua, .bubble.aqua, .benefits li.aqua { color:rgb(0,139,139); }

h1.fire, h2.fire, h3.fire, h4.fire, p.fire, .bubble.fire, .benefits li.fire { color:rgb(226,88,0); }

h1.white, h2.white, h3.white, h4.white, p.white, .bubble.white, .benefits li.white { color:#ffffff; }





/* Template One / tmplone
----------------------------------------------------------------------*/
.tmplone h1,
.tmplthree h1
{
  left:15px;
  top:18px;
  position:absolute;
  width:410px;
}
  
.tmplone x ol
{
  background-color:rgba(225,225,225,0.8);
  display:block;
  height:115px;
  left:445px;
  list-style:none;
  top:0;
  padding:0 20px;
  position:absolute;
}
  .tmplone x ol li
  {
    background-position:0 -499px;
    font:100 18px/18px 'TradeGothicCondensed', Arial, "Helvetica Neue", Helvetica, sans-serif;
    height:28px;
    padding:0 0 0 28px;
  }
    .tmplone x ol li.first { margin-top:20px; }
    
.tmplone #Bottom ol
{
  background:none;
  clear:both;
  list-style:none;
  margin:0;
  padding:0;
  width:972px;
}
  .tmplone #Bottom ol li
  {
    background:none;
    background-color:rgb(235,235,235);
    float:left;
    /*height:90px; für brillen/content-selected-casual.html herausgenommen*/
    margin-left:12px;
    position:relative;
    width:316px;
  }
    .tmplone #Bottom ol li.first   { margin:0; }
    .tmplone #Bottom ol li.left   { text-align:left; }
    .tmplone #Bottom ol li.center { text-align:center; }
    .tmplone #Bottom ol li.right   { text-align:right; }
  .tmplone #Bottom ol h3
  {
    margin:0;
    padding:24px 0 0 0;
  }
.tmplone #Bottom a.button30er
{
  bottom:0;
  position:absolute;
  right:0;
}

.tmplone #Right
{
  float:right;
  margin:0;
  padding-top:15px;
  width:234px;
}
  .tmplone #Right div
  {
    height:140px;
    text-align:center;
    width:234px;
  }
    .tmplone #Right div img,
    .tmplone #Right div a
    {
      display:block;
      margin:auto;
    }
    .tmplone #Right div.first { height:292px; }

.tmplone #ContentSupplementary { margin:0; }

.tmplone #ProductOverview
{
  float:left;
  margin:0;
  width:726px;
}

.tmplone .hover:hover img
{
  filter:alpha(opacity=0);
  opacity:0;
}

.tmplone #Together
{
  clear:both;
  float:left;
  width:726px;
}
.tmplone .uvpText.wide { width:972px !important; }




/* Template Two / tmpltwo / Leads 01 / Newsletter
----------------------------------------------------------------------*/
.tmpltwo #Bottom { position:relative; }
.tmpltwo h1
{
  font-size:30px;
  font-weight:bold;
  left:440px;
  line-height:30px;
  position:absolute;
  text-transform:uppercase;
  top:100px;
}

.tmpltwo ul
{
  font:normal 25px/25px 'TradeGothicCondensed', Arial, "Helvetica Neue", Helvetica, sans-serif;
  left:460px;
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  text-transform:uppercase;
  top:140px;
}

.tmpltwo .bubble
{
  background:url('../img/symlinks/bubbles.png') 0 -2px no-repeat;
  font:bold 46px/1px 'TradeGothicCondensed', Arial, "Helvetica Neue", Helvetica, sans-serif;
  height:93px;
  margin:0;
  position:absolute;
  padding:40px 0 0 0;
  right:95px;
  top:15px;
  width:115px;
  text-align:center;
}
  .safari .tmpltwo .bubble,
  .chrome .tmpltwo .bubble { line-height:10px; }
  .tmpltwo .bubble sub
  {
    font-size:21px;
    font-weight:normal;
    line-height:21px;
    text-align:center;
    text-transform:uppercase;
  }

.tmpltwo #Bottom .footer
{
  bottom:15px;
  color:#444444;
  font-size:15px;
  left:460px;
  position:absolute;
}  


.tmpltwo .layer
{
  background-color:rgb(221,221,221);
  box-shadow:3px 3px 3px rgb(178,178,178);
  color:#444444;
  font-size:22px;
  height:315px;
  left:410px;
  padding:10px 0 0 50px;
  position:absolute;
  top:225px;
  width:430px;
}
  .tmpltwo .layer p { margin:50px 0 0 0; }
  
  .tmpltwo .layer sub
  {
    font-size:11px;
    position:absolute;
    bottom:5px;
  }
  
.tmpltwo label { display:block; }
  .tmpltwo label.name,
  .tmpltwo label.email { margin:50px 0 0 0; }

.tmpltwo #NewsletterTmpl
{
  position:absolute;
  left:410px;
  top:200px;
}





/* Template Three / tmplone
----------------------------------------------------------------------*/
.tmplthree h1 { width:660px; }
  .tmplthree h1 sub
  {
    display:block;
    font-size:35px;
    font-weight:normal;
    line-height:40px;
  }

.tmplthree .box
{
  background:none;
  background-color:#e6e6e6;
  height:103px;
  margin:10px 0 0 0;
  padding:0;
}
  .tmplthree .box ol
  {
    background:#cdcdcd; /* Old browsers */
    background:-moz-linear-gradient(top, #cdcdcd 0%, #ebebeb 100%); /* FF3.6+ */
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdcdcd), color-stop(100%,#ebebeb)); /* Chrome,Safari4+ */
    background:-webkit-linear-gradient(top, #cdcdcd 0%,#ebebeb 100%); /* Chrome10+,Safari5.1+ */
    background:-o-linear-gradient(top, #cdcdcd 0%,#ebebeb 100%); /* Opera11.10+ */
    background:-ms-linear-gradient(top, #cdcdcd 0%,#ebebeb 100%); /* IE10+ */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdcdcd', endColorstr='#ebebeb',GradientType=0 ); /* IE6-9 */
    background:linear-gradient(top, #cdcdcd 0%,#ebebeb 100%); /* W3C */
    border-bottom:3px solid #cdcdcd;
    list-style:none;
    float:left;
    font-size:15px;
    height:43px;
    line-height:18px;
    margin:47px 0 0 0;
    padding:10px 0 0 0;
    position:absolute;
    width:640px;
  }
    .tmplthree .box ol li
    {
      background-position:12px -500px;
      border-left:1px solid #cdcdcd;
      border-right:1px solid rgb(235,235,235);
      float:left;
      height:34px;
      padding:0;
      width:118px;
      text-align:center;
    }
      .tmplthree .box ol li.first { border-left:none; }
      .tmplthree .box ol li.last { border-right:none; }
      .tmplthree .box ol li.check
      {
        background-position:12px -500px;  
        padding:0 0 0 40px;
        text-align:left;
      }

.tmplthree .shipment
{
  background-position:25px -540px;
  border-bottom:3px solid rgb(145,145,145);
  display:block;
  float:right;
  height:100px;
  right:0;
  padding:0 0 0 82px;
  position:relative;
  width:250px;
}
  .tmplthree .shipment h2
  {
    font:bold 18px/18px Arial,"Helvetica Neue",Helvetica,sans-serif;
    margin:0;
    padding:10px 0;
    width:225px;
  }
  .tmplthree .shipment p
  {
    font-size:15px;
    margin:0;
    padding:0;
    width:225px;
  }

.tmplthree .logo
{
  right:60px;
  position:absolute;
  top:15px;
}

.tmplthree #ProductListing { display:inline-block; }
  .msie6 .tmplthree #ProductListing { display:inline; }

.tmplthree #ProductListing a
{
  margin:0 21px 0 0 !important;
  width:310px;
}
  .tmplthree #ProductListing a.last { margin:0 0 0 0 !important; }

.tmplthree #ProductListing img,
.tmplthree #Right img
{
  display:block;
  margin:38px 0 0 38px;
}

.tmplthree #ProductListing .description
{
  background-position:0 bottom;
  height:115px;
}
  .tmplthree #ProductListing button,
  .tmplthree #Right button
  {
    margin:25px 0 0 52px;
  }
  .msie6 .tmplthree #ProductListing button,
  .msie6 .tmplthree #Right button
  {
    margin-left:26px;
  }
  .tmplthree #Right button
  {
    bottom:13px;
    position:absolute;
  }
  .msie6 .tmplthree #Right button
  {
    left:0;
  }
  
  .uk .tmplthree #ProductListing .oldPrice,
  .uk .tmplthree #ProductListing .extra { top:-8px; }

.tmplthree #Right { float:right; }
  .tmplthree #Right a
  {
    color:#3b3b3e;
    display:inline-block;
    width:310px;
  }

  .tmplthree #Right .description
  {
    background:url("../img/detail-gradient.png") repeat-x scroll 0 bottom transparent;
    display:block;
    height:124px;
    padding:0 9px 9px 9px;
    position:relative;
  }
  .tmplthree #Right .description
  {
    font-size:20px;
    text-align:center;
    line-height:22px;
  }
    .tmplthree #Right .description sub
    {
      display:block;
      font-size:15px;
      line-height:18px;
    }

.tmplthree #Bottom
{
  background:#efefef;
  border-bottom:6px solid #939393;
  clear:both;
  overflow:hidden;
  width:100%;
}
.tmplthree #Bottom .benefits
{
  overflow:hidden;
  margin:0;
  padding:0;
}
  .tmplthree #Bottom .benefits li
  {
    border-right:1px solid #b9b8b8;
    border-left:1px solid #ffffff;
    float:left;
    list-style:none;
    padding:8px 0;
    text-align:center;
    width:241px;
  }
  .tmplthree #Bottom .benefits li.first { border-left:0; }
  .tmplthree #Bottom .benefits li.last { border-right:0; }
    .tmplthree #Bottom .benefits li div
    {
      display:inline-block;
      padding-left:22px;
      text-align:left;
    }
      .tmplthree #Bottom .benefits li.normal div
      {
        background:none;
        padding-left:0;
        text-align:center;
      }
    .msie6 .tmplthree #Bottom .benefits li div,
    .msie7 .tmplthree #Bottom .benefits li div
    {
      display:inline;
    }
    .tmplthree #Bottom .benefits li.glasses div       { background-position:-500px 10px; }
    .tmplthree #Bottom .benefits li.glassesinbox div  { background-position:-500px -42px; }
    .tmplthree #Bottom .benefits li.glasses2 div       { background-position:-500px -93px; } 
    .tmplthree #Bottom .benefits li.reload div         { background-position:-500px -140px; }
    .tmplthree #Bottom .benefits li.delivery div       { background-position:-500px -190px; }
    .tmplthree #Bottom .benefits li.euro div           { background-position:-500px -240px; }
    .tmplthree #Bottom .benefits li.locked div         { background-position:-500px -290px; }
    .tmplthree #Bottom .benefits li.check div         { background-position:-500px -340px; }
    .tmplthree #Bottom .benefits li.check2 div         { background-position:-500px -490px; }
    .tmplthree #Bottom .benefits li.star div           { background-position:-500px -390px; }
    .tmplthree #Bottom .benefits li.telephone div     { background-position:-500px -440px; }
    .tmplthree #Bottom .benefits li.mail div           { background-position:-500px -737px; }
    .tmplthree #Bottom .benefits li.arrow1 div         { background-position:-500px -790px; }
    .tmplthree #Bottom .benefits li.arrow2 div         { background-position:-492px -839px; }
    .tmplthree #Bottom .benefits li.arrow3 div         { background-position:-500px -890px; }
    .tmplthree #Bottom .benefits li.basket div        { background-position:-501px -943px; }
    .tmplthree #Bottom .benefits li.cross div          { background-position:-499px -990px; }
      .tmplthree #Bottom .benefits li h4
      {
        display:block;
        font:normal 15px/15px Arial, sans-serif;
        text-align:left;
        text-transform:uppercase;
      }
        .tmplthree #Bottom .benefits li span { display:block; }





/* Template Four / tmplfour / Leads 3 Steps / Newsletter
----------------------------------------------------------------------*/
.tmplfour #Bottom
{
  height:585px;
  position:relative;
}
.tmplfour h1
{
  font-size:30px;
  font-weight:bold;
  left:220px;
  line-height:30px;
  position:absolute;
  top:55px;
}
.tmplfour ul
{
  border-top:5px solid #93141d;
  border-bottom:2px solid #93141d;
  box-shadow:3px 3px 3px rgb(178,178,178);
  background-color:#e9e9e9;
  font-size:20px;
  font-weight:bold;
  left:195px;
  line-height:22px;
  list-style:none;
  height:80px;
  margin:0;
  padding:10px 0 0 0;
  position:absolute;
  top:105px;
  width:725px;
}
  .tmplfour ul li
  {
    float:left;
    height:85px;
    padding:5px 0 0 50px;
    width:185px;
  }
    .tmplfour ul li.last
    {
      margin:0;
    }
    .tmplfour ul li.normal     { background:none }
    .tmplfour ul li.pencil     { background-position:13px -1050px; }
    .tmplfour ul li.check     { background-position:17px -497px; }
    .tmplfour ul li.check2     { background-position:6px -1247px; }
    .tmplfour ul li.euro       { background-position:12px -1147px; }
    .tmplfour ul li.delivery   { background-position:9px -550px; }
    .tmplfour ul li span
    {
      float:left;
      width:22px;
    }
    .tmplfour ul li p
    {
      float:left;
      width:160px;
    }

.tmplfour .layer
{
  background-color:rgb(221,221,221);
  box-shadow:3px 3px 3px rgb(178,178,178);
  color:#444444;
  font-size:22px;
  height:315px;
  left:440px;
  padding:10px 0 0 50px;
  position:absolute;
  top:245px;
  width:430px;
}
  .tmplfour .layer sub
  {
    font-size:11px;
    position:absolute;
    bottom:5px;
  }
    .tmplfour .layer p { margin:50px 0 0 0; }

    .tmplfour .layer sub
    {
      font-size:11px;
      position:absolute;
      bottom:5px;
    }

.tmplfour label { display:block; }
  .tmplfour label.name,
  .tmplfour label.email { margin:50px 0 0 0; }

.tmplfour #NewsletterTmpl
{
  position:absolute;
  left:440px;
  top:220px;
}


/* Formulare definieren / Leads-01 / Leads-02
----------------------------------------------------------------------*/
body.newslettertmpl,
body#NewsletterConfirm { background:transparent !important; }

.newslettertmpl form
{
  margin:23px 0 0 50px;
  position:fixed;
}  
  .msie6.newslettertmpl form { margin:55px 0 0 25px !important; }

.newslettertmpl form ul
{
  list-style:none;
  margin:0;
  padding:0;
}
  .newslettertmpl form ul li
  {
    height:31px;
    margin:37px 0 0 0;
    padding:0;
  }
  .newslettertmpl form ul input
  {
    height:25px;
    width:380px;
  }
.newslettertmpl form #Controls
{
  margin:50px 0 0 0;
  position:absolute;
  right:-5px;
}
  .newslettertmpl form #Controls button
  {
    clear:none;
    margin:0 0 0 20px;
  }
  .msie6.newslettertmpl form #Controls { right:210px; }
  
#NewsletterConfirm h3 { margin:32px 0 0 50px; }
#NewsletterConfirm p
{
  margin:15px 50px 0 50px;
  width:380px;
}