﻿/* Checkout Base Layout */
#chkContainerMain { }
#chkContainerMain button, #chkContainerMain input[type="submit"], #chkContainerMain input[type="button"], #avalaraExistingTop, #avalaraExisting, #MemberForgotPasswordContainer #btnSubmit, #avalaraAccept { background-color: #64c596; color: white; border: none; font-family: 'proxima_nova_rgregular', Arial, Helvetica, sans-serif; font-size: 12px; text-transform: uppercase; text-decoration: none; }
#ctl00_content_upMain{ background:#fff; padding:10px 20px; }

/* Multiple Shipping Address Modal */
form#form1.multiShipForm1 { position: relative; width: auto; height: auto; z-index: 1;}
    #animationDiv { display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 541px; background: rgba(255, 255, 255, 0.75); z-index: 3; }
        #animationDiv img { position: absolute; top: 217px; left: 50%; width: 66px; height: 66px; margin: 0 0 0 -33px; z-index: 4; }
    #pnlMultiShip { width: 100%; height: auto; margin: 0; padding: 0;  }
    .multiAddressShippingForm { width: 100%; height: auto; margin: 0; padding: 0; }
            .MultiShipToRightCurrAdd { margin: 1em 0 0; }
            .MultiShipToLeft { margin: 0 5px 0 0; font-weight: bold; }
                .MultiShipToRight select { width: 80%; }
                    #multiShipEditAddress { text-decoration: underline; }
        
            .multiCartHeader { font-weight: bold; }
            #grdMultiCart, .multiSelectBodyRight table.grid { width: 100%; height: auto; margin: 7px 0 10px 0; border-collapse: collapse; }
                #grdMultiCart .gridhead th,
                .multiSelectBodyRight .grid .gridhead th { padding: 8px 5px; font-weight: bold; color: #fff; border: none; background: #369; *white-space: nowrap !important; }
                #grdMultiCart td, .multiSelectBodyRight .grid td { padding: 5px; border-bottom: 1px solid #ddd; }
                #grdMultiCart .gridAlter td, .multiSelectBodyRight .grid .gridAlter td { background: #fafafa; }
                #grdMultiCart .gridRowItem_0 { max-width: 190px; }
                #grdMultiCart .gridHeadItem_1, #grdMultiCart .gridHeadItem_2, #grdMultiCart .gridRowItem_1, #grdMultiCart .gridRowItem_2,
                .multiSelectBodyRight .grid .gridHeadItem_1, .multiSelectBodyRight .grid .gridRowItem_1, .multiSelectBodyRight .grid .gridHeadItem_2, .multiSelectBodyRight .grid .gridRowItem_2 { text-align: center; }
                #grdMultiCart .gridHeadItem_3,  #grdMultiCart .gridRowItem_3,
                .multiSelectBodyRight .grid .gridHeadItem_3, .multiSelectBodyRight .grid .gridRowItem_3 { text-align: right; }
                .multiSelectBodyRight .grid .gridRowItem_0 { max-width: 210px; }
                    #grdMultiCart td input[type="text"] { position: relative; width: 50px !important; margin: 0; text-align: center; }
            #multiShipRightFooterButtons { width: 100%; height: auto; padding: 0 0 31px 0; }
        .multiSelectHeader { border-bottom: 1px solid #ddd;  font-weight: 700; width: 100%; height: 31px; line-height: 31px; margin: 0 0 15px 0; clear: both;}
            .multiSelectHeaderLeft { float: left; width: 60%; height: 31px; line-height: 31px; cursor: pointer; }
                .multiSelectHeaderLeft .arrowOpen { display: block; position: relative; float: left; width: 11px; height: 11px; margin: 10px 0 0; background: url('/images/design/plusminus.gif') 0 0 no-repeat; } 
                .multiSelectHeaderLeft .arrowCollapsed { display: block; position: relative; float: left; width: 11px; height: 11px; margin: 10px 0 0; background: url('/images/design/plusminus.gif') 0 -39px no-repeat; } 
                .multiSelectHeaderLeft .headerText { display: block; position: relative; float: left; width: auto; height: 31px; line-height: 31px; margin: 0 0 0 10px; } 
            .multiSelectHeaderRight { float: right; width: 30%; height: 31px; line-height: 31px; margin: 0 25px 0 0; text-align: right; }
        .multiSelectBody { width: 100%; height: auto; padding: 0 0 15px 0; display: none; }
            .multiSelectBodyLeft { float: left; width: 34%; height: auto; }
                .multiSelectBodyLeftInner { width: 100%; height: auto; }
            .multiSelectBodyRight { float: right; width: 65%; }
                 
                .addressRptRight { width: 100%; height: auto; margin: 15px 0 0; }
                    .addressRptRightNames { float: left;margin-left:160px;text-align:right; }
                        .addressRptSubtotalL { height: 22px; line-height: 22px; margin: 0 0 5px 0; font-weight: bold; }
                        .addressRptShipSelL { height: 22px; margin: 0 0 5px 0; font-weight: bold; }
                            .addressRptShipSelL #ddlShipping{ height: 20px; }
                            .addressRptShipSelLSpan {}
                        .addressRptTotalL { height: 22px; line-height: 22px; font-weight: bold; }
                    .addressRptRightValues { float: right; }
                        .addressRptSubtotalR { height: 22px; line-height: 22px; margin: 0 0 5px 0; font-weight: bold; }
                        .addressRptShipSelR { height: 22px; line-height: 22px; margin: 0 0 5px 0; font-weight: bold; }
                        .addressRptTotalR { height: 22px; line-height: 22px; font-weight: bold; }
        #divTopMultiAddressEdit { display: none; width: 100%; height: 1px; margin: 0 auto 15px auto; background: #ddd; clear: both; }
    #actionsPanel { position: fixed; bottom: 0px; left: 0; width: 100%; padding: 0.5em 1em; text-align: right; color:#fff; background: #369; clear: both; }
        #multiShipCancel { color:#fff; display: inline-block; }
.addressRptShipSelLSpan {display:none;}

/* Checkout Left General */
.checkoutLeft { position: relative; }
    .checkoutLeft select { width: 99.8%; }
    .checkoutLeft table input[type="text"] { width: 99.8%; padding-left: 0px; padding-right: 0px; }
    .checkoutLeft h3 { font-weight: bold; margin: 0px 0px 2px 0px; }
    .checkoutLeft p { margin: 10px 0px 0px; }
    .checkoutLeft li.active a {  }
    .checkoutLeft li ul { background: #fff; width: 100%; }
/* Checkout Left Headers */ 
.checkoutLeft .checkoutHeader { background: #eee; margin: 0.5em 0 0; padding: 0.5em; text-transform: capitalize; }
.checkoutLeft .checkoutHeaderActive { background: #06c; }
.checkoutLeft .checkoutHeaderComplete { background: #77787C; color: #fff; }
    .checkoutLeft h2 { height: 18px; line-height: 18px !important; margin: 3px 0 0 0; padding: 0px 0px 0px 15px; background: url(../secure/images/bracket.gif) no-repeat -4px 2px; }
    .active h2 { padding: 0px 0px 0px 17px; background: transparent url('../secure/images/bracket.gif') no-repeat -2px -12px; }
    .checkoutHeader .chkHeader { width: 160px; }
    .checkoutHeader .chkDetails { line-height: 24px; }
    .floatright span#ctl00_content_lblSignInEmail, .floatright a#ctl00_content_btnLogout, .floatright span#ctl00_content_lblSignInEmail2 { height: 24px; line-height: 24px; }
    .floatright span#ctl00_content_lblSignInEmail2 { margin: 0 10px 0 0; }
    .checkoutHeader .checks.floatright { display: block; width: 19px; min-height: 18px; height: 18px; margin: 3px 0 0 0; background: transparent url(../secure/images/checks.png) no-repeat 0px 0px; }
    .active .checks.floatright { background: transparent url(../secure/images/checks.png) no-repeat 0px -18px; }
    .checkoutHeaderComplete .checks.floatright { background: transparent url(../secure/images/checks.png) no-repeat 0px -36px; }
    .checkoutHeader a { color: #fff; text-decoration: underline; }
    .checkoutHeader a:hover { color: #fff; text-decoration: none; }
/* Checkout Left Content */
.checkoutExpand { height: auto; margin: 0px; padding: 1em 0; z-index: 2; }
/* Checkout Left Footers */
.checkoutBarNoFinancing { display: none; margin: 10px -10px 4px; padding: 8px 12px; text-align: right; }
.checkoutBar { clear: both; margin: 10px 0 4px; padding: 10px; text-align: right; }
.barCenter { padding: 10px 0; }
.barCentered { float: left; padding: 0 1em; width: 50%; line-height: 24px; text-align: center; }
    .barCentered input { border: none; max-width: 100%; }

#spinStep_1, #spinStep_2, #spinStep_3, #spinStep_4, #spinStep_5 { background: rgba(255, 255, 255, 0.75); position: absolute; width: 100%; height: 100%; top: 0; z-index: 3; }
    #spinStep_1 img, #spinStep_2 img, #spinStep_3 img, #spinStep_4 img, #spinStep_5 img { position: absolute; top: 20%; left: 50%; margin: 0 0 0 -33px; }

/* Step 1 Specific */
#hdrStep_1 .floatleft{ width:100px;}
.memberProfileQuestions .Profiles { list-style: none; }
    .memberProfileQuestions .Profiles li { float: left; margin: 0 0 1em; min-height: 100px; width: 50%; }
    .memberProfileQuestions select { width: auto; }
    .memberProfileQuestions input[type="checkbox"], .memberProfileQuestions input[type="radio"] { float: left; }

/* Step 2 Specific */
#ctl00_content_pnlReviewDelivery{display:none; }
#hdrStep_2.checkoutHeader.checkoutHeaderComplete { height: auto !important; }
    #hdrStep_2.checkoutHeader.checkoutHeaderComplete .floatleft.chkDetails { width: 270px; height: auto !important; line-height: 18px;}
        #divShipInfo { width: 270px; height: auto; }
            #divShipInfo td { padding: 2px 10px 2px 2px; }
            #divShipInfo #lblShippingInfo { width: 220px; height: auto; }
#ctl00_content_tblShippingHeader td p { margin: 0;}
#bdyStep_2 table td + td { width: 50%; }
    #ctl00_content_shipToLabel { float: left !important; font-weight: bold; }
.addressbooklink { text-decoration: underline; }

table.shipBoxStyle { float: left !important; }
    table.shipBoxStyle td b { font: bold 1.3em "Helvetica Neue", Arial, sans-serif; float:right; }
    #ShipOptionsTable .shipBoxStyle tr td { border-bottom: 1px dotted #ddd; padding: 1em !important; white-space: normal;}
        table.shipBoxStyle td[align="center"] { width: 4% !important; }
        table.shipBoxStyle td[align="center"] input[type="radio"] { margin: 0 0 0 0; *margin: -4px 0 0 0; }
#ctl00_content_tblShippingFields table { position: relative; }/* Keeps guest shipping state from disappearing in IE when zip code entered */
.alignRight { text-align: right; }
.gloveDeliveryLabel {}
.gloveDeliveryItem { font-weight: bold; }
.gloveDeliveryMessage { font-style: italic; }
.checkoutLeft .shipOptionLabel { display:inline-block; width: 220px; }
.checkoutLeft .shipOptionPrice { font-weight: bold; }
.ship-options-row{ padding:10px 0 0 0; }
#ship-one.ship-panel hr{display:none; } 
#grpStep_3 { display: none; }

/* Step 3 Specific */
#bdyStep_3 textarea { width: 100%; }

/* Step 4 Specific */
/*#ctl00_content_updatePanelCashPayment, #ctl00_content_bdyStep_4a { display: none; }*/
#animationPaymentDiv { position: absolute; width: 100%; height: 66px; margin: 0 0 0 0 !important; background: url('../images/spinStepBg.png') top left repeat; z-index: 3; }
    #animationPaymentDiv img { position: absolute; top: 0px; left: 251px; }
#bdyStep_4 hr { width: 100%; height: 1px; background: #e6e2d9; border: none; }
#ctl00_content_bdyStep_4a { display: none !important; }
#bdyStep_4_Payment { *width: 500px; height: auto; clear: both; }
#divBillingCheckbox { margin-top:10px; margin-bottom:10px; }
#divGiftOptions td { padding: 2px 10px 2px 2px; }
#divPayment td { padding: 2px 10px 2px 2px; }
.ccTable { width: 100%; }
#ctl00_content_cardNumber { width: 150px; }
#ctl00_content_cardName { width: 200px; }
/* horizontal payment options */
#ctl00_content_divPayCash { float: left; width: 25%; }
    #ctl00_content_divPayCash input { float: left; margin: 0 2% 0 0; }
    #ctl00_content_divPayCash label { float: left; width: 80%; }
#ctl00_content_divPayByPrivateLabel { float: left; }
#ctl00_content_divPayByCC { float: left; width: 20%; }
    #ctl00_content_divPayByCC input { float: left; margin: 0 2% 0 0; }
    #ctl00_content_divPayByCC label { float: left; width: 100%; }
#ctl00_content_divPayByBML { float: left;}
    #ctl00_content_divPayByBML input { margin: 0 2% 0 0; }
#ctl00_content_divPayByPP { float: left; width: 20%; }
    #paypalImage { margin: 0 0 0 2%; }
    #ctl00_content_divPayByPP a { display: block; }
#ctl00_content_divPayByPO { float: left; width: 25%; }
    #ctl00_content_divPayByPO input { float: left; margin: 0 2% 0 0; }
    #ctl00_content_divPayByPO label { float: left; width: 80%; }

/* step 4 select payment modal */
.addressSelectAddNew { margin: 1em 0; }
.tblSelectPayment { border-left: 1px solid #ccc; }
    .tblSelectPayment td { padding: 0 1em; }

/* Step 5 Specific */
#ctl00_content_reviewHeardFromList { width: 300px; }
#ctl00_content_SMSPanel { margin: 1em 0 0; }
#ctl00_content_billingMobilePhone { margin: 0 0 0.5em; }
#bdyStep_5 input[type="text"], #bdyStep_5 input[type="password"], #bdyStep_5 select { width: auto;} 
.checkoutReview { background: #fcf4e8; color: #5a5a5a; font-size: 10px; font-style: italic; }
.sp1 { display: none; }
#ctl00_content_chkTerms { margin-right: 3px; }

/* Checkout Right */
.checkoutRight { border-left: 1px solid #ddd; float: right; width: 29%; height: auto; margin: 0.5em 0 0;  padding: 0 1% 4%; }
    .checkoutRight h2 { margin: 0 0 0.5em; }
    .checkoutRight .cartProduct  { height: auto; margin: 0 0 10px 0; padding: 0 0 10px; }
        .checkoutRight .cartImg { float: left; width: 40%; margin: 10px 0 0 0; }
            .checkoutRight .cartImg img { width: 90px; height: 90px; }
        .checkoutRight .cartDetails { float: left; width: 60%; height: auto; margin: 10px 0 0; }
            .checkoutRight .cartLineItem span { font-weight: bold; }
            .checkoutRight .cartProdName.cartLineItem span { font-weight: normal; }
            .checkoutRight .label { float: left; display: inline-block; width: 40%; }
    .checkoutRight .cartSummary { padding: 10px; }
        .checkoutRight .cartTotal { text-align: right; }
#currentPromos table th { text-align: left; }
.checkout-prod .checkout-img{ overflow:hidden;}
.checkout-prod .checkout-img img{max-height:100%; max-width:10000px !important;}
#checkoutPromoResponse #dialog{ position: absolute !important; left:6px !important; top:78px !important; padding:0 !important; height:400px !important; width:70% !important; border:1px solid #999;}
#checkoutPromoResponse #dialog #promoFrame{ border:0;}
@media (max-width: 460px){
 #checkoutPromoResponse #dialog{ width:96% !important; left:2% !important; right:2%; }
}

/* Alert Messages */
.alertFailure { padding: 10px; vertical-align: middle; font-weight: bold; color: #c80000; background-color: #fee; border-color: #c80000; border-style: solid; border-width: 1px; }
.alertSuccess { padding: 10px; vertical-align: middle; font-weight: bold; color: #0b6e06; background-color: #e6f8dd; border-color: #0b6e06; border-style: solid;  border-width: 1px; }
.alertWarning { padding: 10px; vertical-align: middle; font-weight: bold; color: #3499fc; background-color: #fff; border-color: #3499fc; border-style: solid; border-width: 1px; }
.alertInformation { padding: 10px; vertical-align: middle; font-weight: bold; color: #1754d7; background-color: #dae7fc; border-color: #1754d7;  border-style: solid; border-width: 1px; }


/* checkout confirmation */ 
.pg-confirm:after { content: ''; clear: both; display: block; } 
.pg-confirm h2 { margin: 1em 0 0.2em; } 
.pg-confirm p { margin: 0 0 1em; } 
.pg-confirm table th { text-align: left; width: 100px; }

/* small screen styles */
@media (max-width: 640px) {
    
}
/* small and medium screens */
@media (max-width: 960px) {
    .checkoutLeft, .checkoutRight { float: none; width: 100%; }
    
}
/* medium screen styles */
@media (min-width: 640px) and (max-width: 960px) {
    
}
/* medium and large screens */
@media (min-width: 640px) {

}
/* large only screens */
@media (min-width:960px) {
    .MultiShipLeft { float: left; width: 33%; }
    .MultiShipRight { float: right; width: 65%; }
    /* checkout left */
    .checkoutLeft { width: 70%; height: auto; z-index: 1; }
}

@media (max-width: 460px)  
{
 #checkoutPromoResponse #dialog{ position:fixed !important; overflow:hidden; top:20px !important; min-width:308px !important; width:96% !important; left:2% !important; right:2% !important; }
 .promoPage .prodImage{ width:40%; margin:5px; }
 .promoPage .prodInfo{width:44%; margin:5px; }
    
}