/** 
 * Styles for all Checkout-Pages
 * 
 * @section checkout-css
----------------------------------------------------------------------*/

/* GENERAL / MISC
----------------------------------------------------------------------*/

a.change:link, a.change:visited, a.change:hover {
  background:transparent url('../img/change.gif') left 50% no-repeat;
  border-style:none;
  display:block;
  margin-top:5px;
  padding:0 0 0 10px;
  text-decoration:underline;
}
.group label {
  display:inline;
  width:380px;
}
.group label.radio {
  margin:0 0 0 4px;
}
ol.group {
  margin:50px 0 0 0;
  width:480px;
}
ol.horizontal {
  margin:0px;
}
ol.group li input.radio {
  float:none;
  margin:2px 4px 0 0;
  padding:0;
  top:8px;
}
ol.group li {
  cursor:pointer;
  padding:3px;
  width:468px;
}
ol.group li.active {
  background:rgb(229,229,229);
}
ol.horizontal {
  overflow:hidden;
  width:100%;
}
ol.horizontal li label {
  cursor:pointer;
  width:413px;
}  
ol.horizontal li {
  float:left;
  padding:0 0 0 0;
  width:455px;
}
ol.horizontal li:hover {
  background-color:transparent;
}
ol.horizontal li {
  margin:0 40px 0 0;
}
ol.horizontal li.last {
  float:right;
  margin:0;
  width:310px;
}
ol.horizontal li input.checkbox {
  float:left;
  margin:1px 10px 0 0;
}
div.label {
  margin:0 0 0 20px;
}
input.error,
select.error {
  background-color:rgb(255,251,171);
}
select.col1 { width:45px }
select.col2 { width:60px }
select.col5 { width:187px }
select.col8 { width:311px }
.field:after, .group:after {
  clear:left;
}
#CheckoutAddress .field label {
  cursor:pointer;
}

/* LOGIN-BOX
----------------------------------------------------------------------*/

#LoginBox {
  background-color:rgb(232,232,232);
  float:right; 
  width:316px;
}
  #LoginBox p {
    margin:0 0 10px 0;
  }
  #LoginBox a {
    font-weight:bold;
    position:relative;
    top:10px;
  }
  #LoginBox h2 {
    line-height:17px;
    margin:0 0 13px 0;
  }
  #LoginBox .field {
    margin:0;
  }
    #CheckoutAddress #LoginBox .field label {
      display:inline-block;
      width:109px;
    }
  #CheckoutAddress #LoginBox input#EMailLogin,
  #CheckoutAddress #LoginBox input#Password {
    width:175px;
    margin:0 0 0 0 !important;
  }
   #LoginBox div {
    margin:10px;
  }
    #LoginBox div.adressfield {
      margin:7px 0 0 0;
    }
    #CheckoutAddress #LoginBox div.info {
      padding:7px 10px;
      margin:0;
    }

/* ADDRESS & CONFIRMATION
----------------------------------------------------------------------*/

#CheckoutAddress .field label {
 display:inline-block;
 width:122px;
 float:left;
}
.field span {
font-size:11px;
}
  
#CheckoutAddress div.info,
#CheckoutPayment div.info {
  background-color:rgb(255,251,171);
  border:solid 1px #fdeda1;
  padding:8px;
  margin:13px 0 14px 0;
}
.info,
.partnerinfo,
.warning {
border:1px solid #feeca0;
background-color:#fffbaa;
color:#000;
padding:9px;
}

#CheckoutConfirmation {
 overflow:hidden;
padding:0 0 15px 0;
}

  #CheckoutConfirmation a {
    text-decoration:underline;
  }

  #CheckoutConfirmation p {
    margin-bottom:18px;
  }

  #CheckoutConfirmation hr {
    border:0px;
    background-color:#e6e6e6;
    clear:both;
    height:2px;
    margin:20px 0 12px; 
  }

#CheckoutConfirmation .bannerrecommend {
  font-size:18px;
}

#CheckoutConfirmation a.headline, #CheckoutConfirmation a.headline:visited, #CheckoutConfirmation a.headline:hover {
  border-bottom:1px solid #B5B5B5;
  font-weight:bold;
  font-size:15px;
  margin:20px 0 10px 0;  
  color:#742727;
}

#CheckoutConfirmation ol.articleteaser, #CheckoutConfirmation ol.banner  {
  padding:0px;
  margin:0px;
}

#CheckoutConfirmation ol.articleteaser li, #CheckoutConfirmation ol.banner li {
  margin:35px 0 0;
  list-style:none outside none;
  margin-top:expression(this.previousSibling==null?'0px':'35px');
}

#CheckoutConfirmation ol.articleteaser li:first-child, #CheckoutConfirmation ol.banner li:first-child  {
  margin-top:20px;
}

#CheckoutConfirmation ol.articleteaser li p, #CheckoutConfirmation ol.banner li p {
  margin:10px 0 0 0;
}
  
#CheckoutConfirmation ol.articleteaser li p {
  margin:10px 0 0 0;
}

#CheckoutConfirmation ol.articleteaser {
  padding:0px;
}

  #CheckoutConfirmation ol.banner li img {
    float:left;
    margin:0 15px 0 0;
  }
  
  #CheckoutConfirmation ol.banner li div {
    width:400px;
    float:left;
  }

  #CheckoutConfirmation ol.banner li p {
    margin:0 0 10px 0;
    width:auto;
  }
  
#Checkout {
  color:#222222;
  padding-top:7px;
  position:relative;
}

  #Checkout p {
    margin:0;
  }
  
  #Checkout p.mandantory {
    margin:15px 0 0 0;
  }
  
  #Checkout p.mandantory em {
    color:#851E23;
  }
  
  #Checkout .info div {
    background-color:#fffbab;
    border:solid 1px #fdeda1;
    padding:8px;
  }
  
  #Checkout div.deliver {
    background:transparent url('../img/icon_deliver.gif') left 50% no-repeat;
    padding:0 0 0 27px;
    color:#666666;
  }

/* CHECKOUT-STEPS
----------------------------------------------------------------------*/

#CheckoutSteps {
  border:1px solid #bebebe;
  margin:12px 0 16px 0;
  overflow:hidden;
  height:42px;
  width:970px;
}

  #CheckoutSteps ol {
  overflow:hidden;
    padding:0;
  }
  
    #CheckoutSteps ol li {
      float:right;
      display:block;
      background:transparent url('../img/checkoutsteps.png') right 50% no-repeat;
      color:#686868; 
      font-size:18px;
      font-weight:bold;
      margin-left:-20px;
      padding:12px 12px 12px 36px;
      width:216px;
      background-position:expression(this.previousSibling==null ? 'left' :'right');
      width:expression(this.previousSibling==null?'210px':'216px');
    }
    
      #CheckoutSteps ol li.current {
        background:transparent url('../img/checkoutsteps-act.png') right 50% no-repeat;
        color:#fff;
      }

      #CheckoutSteps ol li.done {
        background:transparent url('../img/checkoutsteps-done.png') right 50% no-repeat;
        color:#444444;
      }

    #CheckoutSteps ol li.done a {
    border:0;
    color:#686868;
    }

      #CheckoutSteps ol li:first-child {
        background-position:left;
        width:210px;
      }

/* CHECKOUT - CART
----------------------------------------------------------------------*/

#CheckoutCart {
  margin:0;
  padding:0;
}

  #CheckoutCart thead#trial {
    vertical-align:bottom;
  }
  
  #CheckoutCart th {
    padding:12px 0 6px;
  }
  
  #CheckoutCart td {
    border-top:2px solid #e6e6e6;
    padding:10px 0;
  }
  
  #CheckoutCart td.info {
    border-top:0px;
    padding:10px;
    margin:0;
    height:auto;
  }

  #CheckoutCart td.partnerinfo {
     padding:9px;
  }

  #CheckoutCart td {
    vertical-align:top;
  }
  
  #CheckoutCart .image {
    width:150px;
  }
  
  #CheckoutCart .description {
    width:462px;
    padding-right:20px;
  }
  
    #CheckoutCart .description h3,
    #CheckoutCart .description h4 {
      font-size:13px;
    }
    
    #CheckoutCart .options {
      margin:20px 0;
    }   
  
    #CheckoutCart .options table {
      float:left;
      margin:0 20px 0 0;
      width:180px;
    }    
  
    #CheckoutCart .options th {
      background:#e6e6e6;
      font-weight:bold;
      padding:2px 0 1px 6px;
    }
    
    #CheckoutCart .options td {
      border:0px;
      padding:0 6px;
      width:50%;
    }
    
    #CheckoutCart .options tr.dark td {
      background-color:#f0f0f0;
    }

  #CheckoutCart .price, 
  #CheckoutCart .cost,
  #CheckoutCart .quantity,
  #CheckoutCart .delete {
   height:5px;
  }

  #CheckoutCart .price, 
  #CheckoutCart .cost {
    font-weight:bold;
    text-align:right;
    width:104px;
  }
  #CheckoutCart .colspan3
  {
    width:208px;
  }
  #CheckoutCart .colspan2
  {
    width:158px;
  }
  #CheckoutCart .light {
    font-weight:normal;
  }
  #CheckoutCart .noborder {
    border:none;
  }

    /** OldPrice - copy in detail.css, overview.css, option.css
    ----------------------------------------------------------------------*/
    #CheckoutCart .price del {
      color:rgb(170,55,55);
      font-weight:normal;
      text-align:right;
    }
  
  #CheckoutCart .cost {
    width:121px;
  }  
  
  #CheckoutCart .quantity {
    width:50px;
  }
  
    #CheckoutCart .quantity input {
      width:30px;
    }
  
  #CheckoutCart .delete {
    top:-1px;
    width:85px;
  }
  
/* CHECKOUT - SUMMARY
----------------------------------------------------------------------*/

  #CheckoutCart tfoot td {
    border:0;
    vertical-align:bottom;
  }  
  
  #CheckoutCart tfoot .DiscountCode {
    padding:0 10px 0 0;
  }
  #CheckoutCart tfoot #DiscountCode td,
  #CheckoutCart tfoot td.info {
    border-top:2px solid #e6e6e6;
    padding:0 10px 0 12px;
  }

  #CheckoutCart tfoot td input {
    width:100px;
  }

  #CheckoutCart #Total {
    font-weight:bold;
    font-size:27px;
    float:right;
    line-height:27px;
  }
    #CheckoutCart #Total em{
       font-weight:normal;
       padding: 0 10px 0 0;
     }
     
  #CheckoutCart tfoot label, 
  #CheckoutCart tfoot input, 
  #CheckoutCart tfoot #DiscountCode span, 
  #CheckoutCart tfoot a.info, 
  #CheckoutCart tfoot p {
    float:right;
  }

  #CheckoutCart tfoot p {
    font-weight:bold;
  }
  
  
/* PAYMENT
----------------------------------------------------------------------*/

#CheckoutPayment tfoot td.deliver {
  border-bottom:2px solid #e6e6e6;
  padding:10px 0 12px;
}

#CheckoutPayment #Address div {
  float:left; 
  width:285px;
}

#CheckoutPayment #Address div h3 {
  margin-bottom:1px;
}

  #Checkout div.deliver {
    background:transparent url('../img/icon_deliver.gif') left 50% no-repeat;
    padding:0 0 0 27px;
    color:#666666;
  }

#CheckoutPayment ol.group {
  width:800px;
  margin-top:0px;
}  

#PaymentMethod {
  /*
  height:auto;
  min-height:550px;
  */
  padding-bottom:18px;
}

#PaymentMethod ol.group {
  /*display:none;*/
  margin-top:10px;
}

#PaymentMethod ol li {
  padding:9px;
  width:954px;
}

#PaymentMethod ol li div.PaymentMethodDescription{
  xdisplay:none;
}

#PaymentMethod ol li.active {
  background:#e5e5e5;
}

#PaymentMethod ol li.active div.PaymentMethodDescription{
  display:block;
}


#PaymentMethod label {
  float:left;
  font-weight:bold;
  width:120px;
}

#PaymentMethod div.label {
  margin:0 0 0 10px;
  width:750px;
  float:left;
}

#PaymentMethod ol.group li input.radio {
  float:left;
}

#PaymentMethod input.select {
  width:182px;
}

#PaymentMethod table {
  xdisplay:none;
  margin:20px 0 10px 0;
}

#PaymentMethod table tr td {
  padding-bottom:7px;
}

#CheckoutPayment td.deliver {
    border-top:2px solid #e6e6e6;
}

#CheckoutPayment .callback {
  width:430px; 
  margin-right:30px;
}

#CheckoutPayment .callback label {
  float:left;
  font-weight:bold;
  width:120px;
}

#CheckoutPayment .callback .field {
  margin-top:18px;
}

#CheckoutPayment .message {
  float:right;
  width:480px;
}

#CheckoutPayment .message textarea {
  width:472px;
  margin-bottom:3px;
}

#CheckoutPayment .legalmessage{
  padding-left:600px;
}

#CheckoutPayment #Total {
    margin-right:0px;
}

#CheckoutPayment ol.group {
  width:800px;
}

    #CheckoutAddress li input.checkbox {
      margin:3px 6px 0 0;
    }
  
    #CheckoutAddress hr {
       margin:7px 0;
    }
    
    ol.delivery {
      margin-bottom:11px;
    }



.selected {
  background-color:rgb(229,229,229);
}

/* BUTTON STYLES 
----------------------------------------------------------------------*/
#LoginSubmit{
  float:right;
  width:95px;
}

#ReminderSubmit{ width:130px;}

#CheckoutConfirmation ul.controls li, #CheckoutConfirmation ul.controls li:first-child { margin-top:0px; }  



/* KL Reminder */
#LensReminderBox {
  background:#e6e6e6;
}
#LensReminderBox h3 {
  padding:5px;
}

/* Kunden werben Kunden */
#KundenWerbenKunden {
  background:url(../img/checkout_kunden.jpg) no-repeat;
  height:363px;
  margin:0 auto 20px auto;
  position:relative;
  width:972px;
}
#KundenWerbenKunden .social-links {
  left:504px;
  position:absolute;
  top:177px;
}
#KundenWerbenKunden .social-links a {
  border:0;
  color:#58585a;
  display:block;
  float:left;
  font-size:18px;
  font-weight:bold;
  height:30px;
  margin:0 10px 0 0;
  overflow:hidden;
  padding:12px 0 0 0;
  text-decoration:none;
  text-indent:48px;
  white-space:nowrap;
  width:48px;
}
#KundenWerbenKunden .social-links p {
  color:#c3c3c3;
  clear:both;
  margin:0 0 3px 6px;
}
#KundenWerbenKunden .social-links a.facebook {
  background:url(../img/co_facebook.png) no-repeat 4px 0;
}
#KundenWerbenKunden .social-links a.twitter {
  background:url(../img/co_twitter.png) no-repeat 4px 0;
}
#KundenWerbenKunden .social-links a.email {
  background:url(../img/co_mail.png) no-repeat 4px 0;
}
#KundenWerbenKunden .social-links form,
#KundenWerbenKunden .social-links div {
  float:left;
}
#KundenWerbenKunden .social-links form div {
  float:none;
}
#KundenWerbenKunden .social-links input {
  font-size:12px;
  margin:6px 0 8px 6px;
  padding:5px 0;
  width:190px;
}
#KundenWerbenKunden .social-links span {
  color:#c3c3c3;
  font-size:12px;
  margin:0 0 0 6px;
}                  

/* Trusted Shops */
#formTShops a {
  border:0;
  float:left;
  margin:0 10px 0 0;
}
button#trustedSubmit {
  font-weight:700;
  font-size:13px;
  font-family:Arial;
  float:left;
  color:#ffffff;
  background:transparent;
  display:block;
  border:0 none transparent;
  padding:0;
  cursor:pointer;
  height:38px;
}

button#trustedSubmit strong, 
button#trustedSubmit span {
  display:block;
  background:#ffffff url(../img/button-link.png) no-repeat;
  line-height:18px;
}
button#trustedSubmit strong {
  background-position:100% 0;
  padding:0 20px 0 0;
}

button#trustedSubmit span {
  padding:9px 0 9px 20px;
}




/* Tooltip-Style (used in payment) */
#CCSideNotes { display:none; }

#CCSideNotes ol li
{
  position:absolute;
  background:#1c1c1c;
  background:rgba(0,0,0,0.8);
  color:#ffffff;
  left:531px;
  padding:6px 9px 9px 9px;
  top:160px;
  width:300px;
  z-index:3000;
}

#tooltip
{
  position:absolute;
  z-index:3000;
  background:#1c1c1c;
  background:rgba(0,0,0,0.9);
  color:#ffffff;
  padding:6px 9px 9px 9px;
  width:300px;
}
#tooltip h3, #tooltip div { margin:0; }

.tooltip
{
  float:right;
  margin-right:3px;
}




/* CheckoutConfirmationPayPal */
ul#CheckoutConfirmationPayPal
{
  list-style:none;
  margin:0;
  overflow:hidden;
  padding:0;
}

ul#CheckoutConfirmationPayPal li {
  float:left;
  list-style:none;
  margin-right:40px;
}

ul#CheckoutConfirmationPayPal li.middle { width:400px; }




/* Button - Payment
----------------------------------------------------------------------*/

.basket .button45er,
.basket .button45er.grey
{
  clear:none;
  float:left;
  font-size:15px;
  margin-left:10px;
  width:auto !important;
}
.payment .button45er,
.shipment .button45er
{
  clear:none;
  float:right;
  font-size:15px;
}
  .basket .button45er strong,
  .basket .button45er.grey strong,
  .payment .button45er strong,
  .shipment .button45er strong { padding:3px 20px 0 0; }
  
  .basket .button45er span,
  .basket .button45er.grey span,
  .payment .button45er span,
  .shipment .button45er span { white-space:nowrap; }




/* Kautionstext - Payment
----------------------------------------------------------------------*/
  
#payments a.back { float:left; }  

#payments div#Bailment 
{
  float:left;
  line-height:15px;
  margin-left:110px;
  width:485px;
}
  #payments #Bailment p
  {
    float:left;
    height:45px;
    width:7px;
  }