﻿/* ==========================================================================
   Shopping Cart
   ========================================================================== */
p { margin-top: 0; }
.sale { color: #900; }
.white-to-grey { 
    border: 3px solid #FFF;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 3px 5px #999;
    background-color: #FFF;
    background-image: -moz-linear-gradient(top, #FFF 0%, #FFF 35%, #DEDEDE 100%);
    background-image: -o-linear-gradient(top, #FFF 0%, #FFF 35%, #DEDEDE 100%);
    background-image: -ms-linear-gradient(top, #FFF 0%, #FFF 35%, #DEDEDE 100%);
    background-image: -webkit-linear-gradient(top, #FFF 0%, #FFF 35%, #DEDEDE 100%);
    background-image: linear-gradient(top, #FFF 0%, #FFF 25%, #DEDEDE 100%);  
}
.white-to-grey > div{
    overflow: hidden;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DEDEDE');
    zoom: 1;
}
 .btn-yellow { font-size: 17px; vertical-align: middle; }
 div.raised { margin-bottom: 30px; }
 h2 { line-height: 1; }
.cart { background: #EFEFEF; min-height: 100%; padding-bottom: 30px; }
 a.primary { text-decoration: none; }
.off { display: none; }
.tooltip-anchor { border-bottom: 1px dotted #999; }
#progressIndicator {
    padding: 30px 1px;
    line-height: 1;
    overflow: hidden;
}
#progressIndicator h1, #progressIndicator span {
    color: #006232;
    display: block;
    padding-bottom: 3px;
    float: left;
    margin: 0 55px 0 0;
    font-size: 20px;
}

#progressIndicator .inactive {
    color: #AAA;
}
#progressIndicator .active { border-bottom: 3px solid #8C0; }
 #topCTA { color: #900; }
 input[type="text"],  input[type="email"],  input[type="password"], textarea {
    border-radius: 4px;
    border: none;
    box-shadow: inset 1px 1px 4px #999;
    padding: 5px;
}
 input[type="text"].long,  input[type="email"].long,  input[type="password"].long { width: 260px; }
 input[type="text"].medium,  input[type="email"].medium,  input[type="password"].medium { width: 200px; }
 input[type="text"].short,  input[type="email"].short,  input[type="password"].short { width: 120px; }

#cart { overflow: hidden; }
#cart .cart-items { margin-bottom: 10px; overflow: hidden; }
#cart .cart-item {
    height: 95px;
    overflow: hidden;
    margin-bottom: 15px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EDEDED;
}
#cart .cart-item:last-child {
    border: none;
}
#cart .cart-item .product-icon {
    /*width: 100px;*/
    text-align: center;
}
#cart .cart-item .product-info {
    /*width: 580px;*/
    font-size: 14px;
    padding: 8px 10px 10px;
    overflow: hidden;
}
#cart #shippingItems .cart-item .product-info {
    /*width: 430px;*/
}
#cart .cart-item .product-info .details, #multiShippingAddresses .product-info .details {
    height: 24px;
    padding: 5px 0;
    line-height: 1;
}
#cart .cart-item .product-info .details .color-block, #multiShippingAddresses .product-info .details .color-block {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 1px solid #999;
    vertical-align: bottom;
    margin-right: 5px;
}
#cart .cart-item .price {
    font-size: 13px;
    font-weight: lighter;
    line-height: 1;
    padding: 10px 0;
    text-align: right;
}
#cart .cart-item .price .savings {
    color: #B00;
    line-height: 1.1;
}
#cart .cart-item .remove-panel {
    padding: 5px 5px 0;
    overflow: hidden;
    background: #FFF;
}
#cart .cart-item .remove-panel a {
    display: block;
    color: #690;
    font-weight: normal;
    text-align: left;
    text-decoration: none;
}
/*Checkbox Styling*/
input[type="checkbox"] + label { 
    display: inline-block; 
    height: 13px; 
    padding: 2px 0 1px 18px; 
    background: url(../../static/img/small-checkbox-sprite.png) left top no-repeat; 
    vertical-align: middle;
}
input[type="radio"] + label { 
    display: inline-block; 
    height: 13px; 
    padding: 4px 4px 3px 25px; 
     border: 1px solid transparent;
    background: url(../../static/img/small-radio-sprite.png) 2px 3px no-repeat;
    line-height: 1;
}
input[type="checkbox"]:checked + label { background-position: left -16px; }
input[type="radio"]:checked + label { background-position: 2px -15px; border: 1px solid #9c0; font-weight: bold; }
input[type="checkbox"], input[type="radio"] { display: none; }
#cart .cart-item .product-info label { font-size: 13px; line-height: 1.4; }

#cart .cart-item label span {
    display: none;
    font-size: 12px;
    margin-left: 5px;
}
#cart .cart-item .qty {
    padding: 9px 0 10px;
    line-height: 1;
}
#cart .qty input {
    margin: 3px 6px 4px;
    text-align: center;
}
#cart .qty a {
    display:block;
    text-align: center;
    font-size: 11px;
    color: #690;
    font-weight: normal;
    text-decoration: none;
}
#cart .qty .qty-price {
    padding-top: 9px;
    text-align: right;
}
#cart #calculating { width: 480px; float: left; }
#cart #calculating > div { overflow: hidden; }
#cart #calculating h5 {
    float: left;
    width: 160px;
    color: #888;
}
#cart #calculating > div .form { width: 320px; float: right; }
#cart #calculating .form input[type="text"] { font-size: 14px; margin-right: 5px; }
 ul.radio-list,  ul.radio-list li {
    margin-left: 0;
    margin-bottom: 8px;
    padding-left: 0;
    list-style: none;
    font-size: 12px;
    line-height: 1;
}
#cart #promoCodeEntry .response { margin-top: 3px; }
 li input[type="radio"] { vertical-align: text-top; }
 #shipOptions { list-style-type: none; padding-left: 0px; overflow: hidden;}
 #shipOptions li label { text-overflow: ellipsis; white-space: nowrap; }
 #shipOptions li label, #cart #promoCodeEntry .response .code { font-weight: bold; }
 #shipOptions li label .est-arrival { font-weight: normal; }

#cart #calculated {
    padding: 20px 30px;
    border: 3px solid #ffc300;
    width: 350px;
    margin-right: 16px;
    overflow: hidden;
    float: right;
    text-align: right;
}
#cart #calculated h2 { color: #666; margin-bottom: 0; }
#cart #calculated p { font-size: 11px; margin: 0; }
#cart #calculated .totals {
    padding-bottom: 20px;
    margin-bottom: 12px;
    border-bottom: 1px solid #DDD;
}
#cart #calculated .totals .cart-items { font-size: 1.3em; font-weight: bold; }
#cart #calculated .totals .promo-disc { font-size: 1.2em; color: #900; }
#cart #calculated .totals .shipping { font-size: 1.2em; }
#cart #calculated ._total { display: inline-block; width: 85px; }


/* ==========================================================================
   Log in Panel
   ========================================================================== */

#cartLogin { margin-bottom: 30px; }
#cartLogin #loginGuest { border-right: 1px solid #FFF; padding: 0px 20px; }
#cartLogin #loginAccount  {  border-left: 1px solid #CACACA; padding: 0px 20px; margin-left: 0px; }


/* ==========================================================================
   FAQ Nav
   ========================================================================== */

#cartFaqNav { margin: 20px 0; margin-bottom: 30px; }
#cartFaqNav #continueShopping { padding: 20px 0px; }
#cartFaqNav > a { display: block; float: left; width: 375px; text-align: center; font-size: 16px; line-height: 1; padding: 16px 0; }
#cartFaqNav .faq-nav a { 
    text-decoration: none;
    color: #690;
}

#cartFaqNav .faq-nav {
    padding: 5px;
}

#cartFaqNav .faq-nav div {
    border-left: 1px solid #CACACA; 
    line-height: 1; 
    border-right: 1px solid #FFF; 
    text-align: center;
    padding: 5px 0px;
    margin-left: 0px;
}
#cartFaqNav .faq-nav div:first-child { border-left: none; }
#cartFaqNav .faq-nav div:last-child { border-right: none; }


/* ==========================================================================
   Recommended Items
   ========================================================================== */

#recoSliderInner { height: 230px; }
#recoSliderInner .container { width: 760px; }


/* ==========================================================================
   Shipping / Payment
   ========================================================================== */

 .form-field.text label,  .form-field.select label { display: inline-block; width: 130px; text-align: right; margin-right: 20px; }
 #paymentForm .form-field.checkbox { margin: 10px 0 10px 150px; }
 #paymentForm .form-field.checkbox label { width: auto; }
 .form-field { margin-bottom: 10px; }

 #shippingMethodForm ul#shipOptions li { margin-bottom: 10px; }

#cartSummary { border: 3px solid #ffc300; }
#cartSummary li { overflow: hidden; margin-bottom: 3px; padding: 2px 0 0 32px; }
#cartSummary li .prod-name { width: 70%; }
#cartSummary h3 { color: #666; font-weight: bold; font-size: 14px; margin-bottom: 5px; }
#cartSummary ul { display: block; border-bottom: 1px solid #EEE; padding-bottom: 10px; padding-left: 0; }
#cartSummary .totals { background: #EEE; padding: 10px; text-align: right; margin: -13px 0 10px; }
#cartSummary .totals .cart-items { font-weight: bold; }
#cartSummary .totals .promo-disc { color: #900; }
#cartSummary .totals ._total { display: inline-block; width: 65px; }
#cartSummary .orderTotal { font-size: 1.8em; font-weight: bold; text-align: right; }
#cartSummary li.gift { background: url(../../static/img/icon-gift.png) left top no-repeat; }

#paymentForm h3 { color: #666; }
#paymentForm h3#billingHeader { margin-bottom: 0; }
#paymentForm h2 { padding-top: 3px; }
#creditCardForm, #existingCardForm { padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid #EEE; }
#existingCardForm .exp-date { font-style: italic; }
#existingCardForm a { margin-left: 25px; display: inline-block; }
#creditCardForm .form-field.credit-cards { overflow: hidden; margin-left: 150px; }
#creditCardForm .form-field.credit-cards a { display: block; float: left; margin-right: 10px; }
#creditCardForm .form-field #cscNumber + img { margin: 2px 5px; vertical-align: top; }

/** Multiple Addresses Scroller **/
.cart .paginator .inline-links { vertical-align: middle; }
.cart .paginator .inline-links li { margin-top: 4px; }

.account-addresses-scroller, .account-addresses-scroller-inner { height: 185px; }
.account-addresses-scroller .items > div { width: 215px; border: 1px solid transparent; margin: 20px 8px 10px 50px; }
.account-addresses-scroller .items input[type="radio"] + label { margin-left: -26px; }
#accountShippingAddresses .paginator { top: 12px; right: 4px; }
.account-addresses-scroller .browse {
    width: 18px;
    height: 32px;
    top: 0;
    margin-top: 0;
    cursor: pointer;
    position: absolute;
    z-index: 5;
}
.account-addresses-scroller .next {
    background: url(../../static/img/right-paginate.png) no-repeat center center;
    right: 0px;
}
.account-addresses-scroller .prev {
    background: url(../../static/img/left-paginate.png) no-repeat center center;
    margin-right: 25px;
    right: 70px;
    left: auto;
}
.account-addresses-scroller .inline-links {
    float: right;
    margin-right: 16px;
    margin-top: 2px;
}
.account-addresses-scroller .inline-links li {
    width: 14px;
    height: 18px;
}
.account-addresses-scroller .inline-links .active a {
    background: url(../img/paginate-on.png) no-repeat center center;
}
.account-addresses-scroller .inline-links li a {
    display: block;
    text-indent: -9999px;
    background: url(../img/paginate-off.png) no-repeat center center;
}

#paymentForm .paginator { top: -15px; right: 4px; }

#addAddresses form { margin-bottom: 30px; }
#saveAddresses { margin-left: 20px; }

.multi-shipping-scroller { border: 1px solid #9c0; padding: 10px; overflow: hidden; float: right; width: 250px; padding: 10px; }
.multi-shipping-scroller .prev { left: 10px; }
.multi-shipping-scroller .next { right: 10px; }
.multi-shipping-scroller, .multi-shipping-scroller-inner { height: 120px; }
.multi-shipping-scroller .items > div { width: 200px; border: 1px solid transparent; margin: 0 30px 0; font-size: 12px; }
.multi-shipping-scroller .items > div p { margin-bottom: 8px; }
.multi-shipping-scroller .items input[type="radio"] + label { margin-left: -3px; }
#multiShippingAddresses .row { border-bottom: 1px solid #EEE; padding-bottom: 20px; margin-bottom: 20px; }
#multiShippingAddresses .item-to-ship { width: 270px; float: left; margin: 20px 0; }
#multiShippingAddresses .item-to-ship .product-icon, #multiShippingAddresses .item-to-ship .product-info { float: left; }
#multiShippingAddresses .item-to-ship .product-icon { min-width: 91px; text-align: center; }
#multiShippingAddresses .item-to-ship .product-info { width: 150px; margin: 5px 0 0 12px; }


/* ==========================================================================
   Gifting
   ========================================================================== */

#giftingInformation .row [class*="span"] img { max-width: 100%; }
#giftingInformation .form-field.text label { width: auto; margin-right: 0; }
#giftingInformation .form-field.text input { margin-bottom: 10px; }
#giftingInformation textarea { height: 145px; color: #999; }
#giftingInformation textarea:focus { color: #333; }
#giftingInformation .gift-item { border-bottom: 1px solid #EEE; padding-bottom: 10px; margin-bottom: 30px; }
#giftingInformation .gift-item:last-child { border: none; }
#giftingInformation .gift-wrap-label { margin-left: 8px; }


/* ==========================================================================
   Modals
   ========================================================================== */

#accountGifting.modal { width: 800px; margin-left: -400px; }
#accountGifting > div { width: 376px; }
#accountGifting > div.left { border-right: 1px solid #FFF; padding-right: 30px; min-height: 110px; margin-bottom: 20px; }
#accountGifting > div.right { border-left: 1px solid #CCC; padding-left: 30px; min-height: 110px; margin-bottom: 20px; }
#accountGifting .btn { text-align: center; min-width: 170px; max-width: 300px; margin: 0 auto; }

#multipleAddresses.modal, #addNewAddress.modal { width: 680px; margin-left: -310px; }
#multipleAddresses h3 { color: #666; }
#multipleAddresses p { margin-bottom: 16px; }
#multipleAddresses .form-field { float: left; margin-bottom: 10px; }
#multipleAddresses .form-field input[type="text"] { width: 165px; }
#multipleAddresses .form-field button { width: 175px; }
#multipleAddresses .benefits { padding: 10px; background: #FFF; width: 275px; }
#multipleAddresses .benefits em { font-style: normal; font-weight: bold; font-size: 1.1em; margin-bottom: 8px; display: block; }
#multipleAddresses .benefits ul, #multipleAddresses .benefits li { list-style: none; margin: 0; padding: 0 0 0 10px; }
#multipleAddresses .form-field.button-field  { margin: 10px 0 10px 150px; }
#multipleAddresses .form-field.button-field label { width: auto; display: inline-block; margin-left: 35px; font-size: 12px; }

#addNewAddress form { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #CCC; }
#addNewAddress button { margin: 20px 0 0 150px; }
#addNewAddress h3 { margin-top: 12px; }
#addNewAddress .account-addresses-scroller .items > div { width: 250px; }


/* ==========================================================================
   Review
   ========================================================================== */

#shippingAndBilling .order-total {
    margin-left: 20px;
}

#shippingAndBilling .row [class*="span"] {
    height: 292px;
}

.price-group:before,
.price-group:after {
  display: table;
  line-height: 0;
  content: "";
}

.price-group:after {
  clear: both;
}

.price-type {
    width: 130px;
    float: left;
}

.price-group .total {
    float: left;
    width: 70px;
}

/* ==========================================================================
   Confirmation
   ========================================================================== */

.container {
    width: 918px;
}

.table .item-description, .table .item-gift, .table .item-address {
    text-align: left;
    text-indent: 0px;
}

.table .item-address, .table .item-description {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 284px;
max-width: 284px;
min-width: 284px;
}

.table .item-gift {
    width: 124px;
max-width: 124px;
min-width: 124px;
}

.table .item-price, .table .item-total {
    text-align: right;
}

.table th:last-child, .table td:last-child {
    text-align: right;
}

#thankYou {
    background-color: #FFF;
    border: 3px solid #ffc300;
    padding: 12px 18px;
}   

p {
    margin: 0px 0px 1px 0px;
}

#orderTotal {
    text-align: right;
}

#orderDetails h5 {
    color: #666;
    font-weight: bold;
}

#createAccountBenefits {
    padding: 20px;
    background-color: #f7f7f7;
}

#createAccountBenefits ul {
    list-style-type: none;
    margin: 15px 5px;
    padding: 0px;
}

#createAccountBenefits li {
    background: url('../../static/img/list-icon-check.png') no-repeat center left;
    height: 24px;
    padding: 0px 0px 0px 26px;
    margin: 5px 0px;
}