/* Layout - Ion Data LLC
   Shopping Cart, One Column

   Controls the general layout of the cart and checkout.
   Do NOT add a webfont @import to either pane - it breaks this editor.
===============================================================*/

* {
    margin: 0;
    padding: 0;
}

img, img a {
    border: 0 none;
}

#wrapper {
    position: relative;
    width: 960px;
    margin: 24px auto 40px auto;
    padding: 24px 24px 32px 24px;
}

#wrapperCheckout {
    position: relative;
    width: 960px;
    margin: 24px auto 40px auto;
    padding: 24px 24px 32px 24px;
}


/* TOP NAVIGATION AND HEADER
===============================================================*/

#topNav {
    width: 100%;
    height: 25px;
    margin: 0 auto 8px auto;
    font-size: 12px;
}

#topNav ul {
    list-style: none;
    margin: 0;
    float: right;
}

#topNav li {
    padding-left: 24px;
    list-style-image: none;
    display: inline;
}

#topNav a {
    padding: 6px 12px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

#header {
    width: 100%;
    margin-bottom: 20px;
    padding: 12px 0 20px 0;
    text-align: center;
}

#nav {
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
}

#nav ul {
    list-style: none;
    margin: 7px 0;
}

#nav li {
    list-style-image: none;
    display: inline;
}

#nav li a, #nav li a:hover {
    padding: 9px 30px 7px 30px;
    margin-right: 5px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.navHeader {
    margin: 24px 0 0 10px;
}


/* CONTENT
===============================================================*/

#productGrid {
    overflow: hidden;
}

#content {
    position: relative;
    width: 100%;
    margin: 10px auto 0 auto;
}

/* Checkout pages. Was a fixed 900px inside a 960 wrapper with a
   35px top margin - now flows inside the padded card. */
#contentWide {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
}

#contentProductDetail {
    position: relative;
    width: 100%;
    margin: 16px 0 0 0;
    padding: 0;
    border-radius: 4px;
    min-height: 200px;
    display: block;
}

#promoBanner {
    margin-bottom: 20px;
}

#breadcrumbs {
    margin: 0 0 10px 0;
}

#breadcrumbs ul { list-style: none; }

#breadcrumbs li {
    padding-right: 10px;
    list-style-image: none;
    display: inline;
}

#breadcrumbs li:after {
    content: ">";
    margin-left: 10px;
}

#breadcrumbs li:last-child:after { content: ""; }

.productGridOneCol {
    position: relative;
    width: 440px;
    min-height: 220px;
    margin: 0 20px 24px 0;
    float: left;
}

.productGridOneCol img { margin: 0 20px 0 0; float: left; }

.productName { margin: 6px 0; padding: 0; }
.priceBold   { margin: 0 0 6px 0; padding: 0; }
.price       { margin: 0 0 15px 0; }

.productImage { width: 170px; height: 170px; margin-bottom: 5px; }
.productImage img { float: left; }

.productImgContainer { margin: 6px 20px 32px 0; float: left; position: relative; }

.productOutOfStockBanner {
    bottom: 0; height: 50px; left: 0; line-height: 50px; margin: auto;
    position: absolute; right: 0; text-align: center;
    text-transform: uppercase; top: 0;
}

.productQty {
    padding: 8px;
    height: auto;
    width: 46px;
    display: block;
    text-align: right;
    margin-bottom: 5px;
}

#productDetails { padding: 0 20px 0 0; float: right; width: 500px; }
#productDescription { width: 100%; clear: both; padding: 20px 0 0 0; }
.productDescriptionShort { margin: 0; }
.productDescriptionFront { margin: 0 0 32px 0; width: 430px; }
#productDetails ul { margin: 15px 0 25px 0; width: 100%; }
#productDetails li { list-style-type: none; width: 400px; }
.productDrop { margin: 0; }
.optionName { width: 60px; height: 20px; float: left; }
table.productTable { margin: 20px 0 0 10px; padding: 4px; }
.productTable td { padding: 4px; }
td.bottom { vertical-align: bottom; }


/* CART AND CHECKOUT
===============================================================*/

input { margin: 0; }

.qtyField {
    padding: 8px;
    height: auto;
    width: 50px;
    display: block;
    text-align: right;
    margin: 0 auto 5px auto;
}

.cartThumb { float: left; margin: 4px 12px 8px 0; }
.cartProduct { margin: 0; padding: 0; }
.updateCart { font-size: 12px; }
.updateCart a:link { text-decoration: none; }
.paymentLabel { display: block; }
.choosePlan { margin-right: 8px; }

.promoCode {
    width: 45%;
    border-collapse: collapse;
    margin-bottom: 12px;
    float: right;
}

.promoCode td { height: 36px; }
.promoCode td:first-child { text-align: right; }

.shippingOptions { margin: 0 10px 3px 0; }

.address, .editInfo, .shippingOptions, .cardInfo, .shipInfo {
    margin: 0 0 4px 0; display: block;
}

.billName, .billStreet, .billCity, .shipName, .shipStreet, .shipCity {
    margin: 0; display: block;
}


/* Form fields - all border-box so widths behave
---------------------------------------------*/

.checkout, .checkoutBottom, .checkoutTop, .checkoutTopShort,
.checkoutShort, .checkoutShortest, .search, .promoField,
.signinField, .signinTop, .productQty, .qtyField, .checkoutInput {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.checkout {
    padding: 10px 12px;
    margin: 0;
    width: 260px;
}

.checkoutBottom {
    padding: 10px 12px;
    margin: 0 0 18px 0;
    width: 260px;
    height: auto;
}

.checkoutTop {
    padding: 10px 12px;
    margin: 8px 0 0 0;
    width: 260px;
    height: auto;
}

.checkoutTopShort {
    padding: 10px 12px;
    margin: 8px 0 0 0;
    width: 150px;
    height: auto;
}

.checkoutLabel {
    display: block;
    padding: 0 0 4px 0;
    margin: 10px 0 0 0;
}

.checkoutShort, .search, .promoField {
    padding: 10px 12px;
    margin: 0;
    width: 160px;
}

.checkoutShortest {
    padding: 10px;
    margin: 0;
    width: 92px;
}

.signinField, .signinTop {
    padding: 10px 12px;
    margin: 0;
    width: 200px;
    height: auto;
}

.signinTop { margin: 8px 0 0 0; }

.signinLabel { text-align: right; width: 150px; }
.paymentIcon { margin: 0 7px -5px 4px; }
.addressTableInfo { padding-bottom: 15px; }


/* Tables
---------------------------------------------*/

.viewCart {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.viewCart th, .viewCartShort th, .payPlan th, .summaryCart th, .shippingInfo th,
.billingInfo th, .billingTable th, .shippingTable th, .paymentInfo th,
.signinTable th, .paymentMethodTable th {
    padding: 12px 16px;
    text-align: left;
}

.viewCart td, .viewCartShort td, .payPlan td, .summaryCart td, .billingTable,
.shippingInfo td, .billingInfo td, .paymentInfo td, .paymentMethodTable td {
    padding: 12px 16px;
    vertical-align: top;
}

.payPlan {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    text-align: left;
}

.tableContainer { overflow: hidden; padding: 1px; }
.tableContainer > table { width: 100%; }

.billingTable {
    width: 48%;
    border-collapse: collapse;
    margin: 0 4% 20px 0;
    text-align: left;
    float: left;
    clear: both;
}

/* No shipping on data subscriptions. Delete this if that changes. */
.shippingTable, .shippingInfo {
    display: none;
}

.paymentMethodTable {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px 0;
    text-align: left;
    clear: both;
    float: none;
}

td.pay1 { width: 24%; padding-bottom: 18px; }
td.pay2 { width: 26%; padding-bottom: 18px; }
td.pay3 { width: 20%; padding-bottom: 18px; }
td.pay4 { padding-bottom: 18px; }

.signinTable {
    width: 360px;
    border-collapse: collapse;
    margin: 0 0 40px 0;
    text-align: left;
    float: left;
}

.signinTable td { padding: 8px 16px; vertical-align: top; }

.billingTable td { border: none; padding: 6px 16px; }

td.rightAlign, th.rightAlign { text-align: right; vertical-align: top; padding-top: 10px; }
td.rightAlignTop, th.rightAlignTop { text-align: right; vertical-align: top; padding-top: 18px; width: 150px; }
td.rightAlignBottom { text-align: right; vertical-align: top; padding: 10px 10px 18px 0; width: 150px; }
td.leftAlign, th.leftAlign { text-align: left; }
td.centerAlign, th.centerAlign { text-align: center; }
td .rightCell { text-align: right; }

.summaryCart {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    float: none;
}

.billingInfo {
    width: 48%;
    border-collapse: collapse;
    margin: 0 4% 20px 0;
    text-align: left;
    float: left;
}

.paymentInfo {
    width: 48%;
    border-collapse: collapse;
    margin: 0 0 20px 0;
    padding: 0;
    text-align: left;
    float: left;
}


/* Checkout button containers.
   The originals used a hardcoded height, a negative top margin, and
   in one case position:absolute with top:570px - which lands wherever
   depending on how many line items are in the cart. All static now.
---------------------------------------------*/

.checkoutLinksTop {
    height: auto;
    margin: 0 0 12px 0;
    text-align: right;
    position: static;
}

.checkoutLinks {
    width: 100%;
    height: auto;
    margin: 8px 0 24px 0;
    padding: 16px 0 0 0;
    text-align: right;
    border-radius: 4px;
    border-top: 1px solid #dde6f2;
    clear: both;
}

.checkoutLinksBottom {
    height: auto;
    margin: 0 0 24px 0;
    text-align: right;
    clear: both;
}

#checkoutLinksSummary {
    position: static;
    width: 100%;
    height: auto;
    margin: 16px 0 24px 0;
    padding-top: 16px;
    border-top: 1px solid #dde6f2;
    text-align: right;
    float: none;
    clear: both;
}


/* Forgot password
---------------------------------------------*/

#forgotPasswordWindow { width: 400px; margin: 40px auto 0 auto; padding: 20px; }
p.forgotPassword { margin: 10px 0 0 0; padding: 0; }
.forgotPasswordTable th { text-align: left; padding-left: 15px; }
.forgotPasswordTable td { padding: 8px 16px; }
.forgotPasswordTable input { padding: 10px 12px; margin: 0; width: 200px; height: auto; }


/* UPSELLS
===============================================================*/

#upsellContainer { width: 100%; clear: both; padding-bottom: 20px; }
#upsellContainer li { display: inline; margin-right: 20px; }

.upsell {
    width: 240px;
    padding: 14px 18px;
    float: left;
    margin: 0 20px 12px 0;
}

.upsellImage { float: left; margin: 3px 14px 0 0; }
.upsellItem { font-size: 15px; font-weight: bold; margin-right: 10px; }
.subscriptionPrice { margin: 0; }
.upsellAdd { float: right; margin: 10px 12px 0 0; }


/* TYPOGRAPHY
===============================================================*/

h1 { margin: 0 0 18px 0; }
h3 { margin: 0 0 14px 0; padding-bottom: 6px; }
h4 { margin: 20px 0 5px 0; }
h5 { margin: 2px 0 5px 5px; }
#upsellContainer h4 { margin: 0 0 5px 0; }
.tableHeader { margin: 20px 0 6px 0; display: block; }
p.homeLink { float: right; margin-bottom: 32px; }
p.signupInfo { margin: 0 0 20px 0; }


/* LINKS AND BUTTONS
===============================================================*/

a { text-decoration: none; }
a:hover { text-decoration: underline; }

.codeButton { padding: 9px 18px; margin: 0 0 0 12px; cursor: pointer; }
.cartButton, .continueButton, .formButton { padding: 12px 26px; margin: 6px 0 0 10px; cursor: pointer; }
.newsButton { margin-left: 60px; padding: 10px 18px; cursor: pointer; }
.searchButton { margin: 1px 0 0 5px; padding: 8px 12px; cursor: pointer; }
.upsellButton { margin: 1px 0 0 5px; padding: 6px 12px; cursor: pointer; }
.buttonRight a:hover, .buttonLeft a:hover { text-decoration: none; }


/* FOOTER
===============================================================*/

#footer {
    position: relative;
    margin-top: 24px;
    padding-top: 20px;
    width: 100%;
    height: auto;
    text-align: center;
    clear: both;
}


/* HTML AREAS
===============================================================*/

#customCheckoutBottom { clear: both; }
#customHomeProductGridTop { width: 100%; margin-bottom: 20px; }


/* MISC
===============================================================*/

.payPalImage { margin: 0 0 -5px 0; }
p.successMessage { margin: 20px 0; }
.checkoutWithPayPalLink { cursor: pointer; display: inline-block; }
.checkoutWithPayPalImg { display: block; margin: 0 0 -8px; }
.payPalPayWithCardInstead, .creditCardPayWithPayPalInstead { cursor: pointer; }
.payPalPaymentInfoImage { margin: 10px 0 0 0; }
.payPalPaymentInfoMessage { width: 100%; }


/* MOBILE
===============================================================*/

@media only screen and (max-width: 1000px) {
    #wrapper, #wrapperCheckout {
        width: auto;
        margin: 0;
        border-radius: 0;
        padding: 16px;
    }

    .billingTable, .paymentInfo, .billingInfo, .signinTable,
    .paymentMethodTable, .summaryCart, .promoCode {
        width: 100%;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

    .checkout, .checkoutTop, .checkoutBottom, .signinField, .signinTop {
        width: 100%;
    }

    .productGridOneCol, #productDetails, .productDescriptionFront {
        width: 100%;
        float: none;
    }

    td.pay1, td.pay2, td.pay3, td.pay4 {
        display: block;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    #header img { max-width: 80%; max-height: 88px; }
}


/* PAYPAL
===============================================================*/

.payPalLightboxIcon { float: right; padding: 20px; }
.payPalMessage { padding: 55px 30px 0; }
.closePayPalLightbox { margin-right: 30px; margin-top: 50px; float: right; }

.payPalGo {
    background: #FFA822;
    border-color: #D5BD98 #935E0D #935E0D #D5BD98;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 30px;
    margin-top: 10px;
    padding: 1px;
}

.checkoutButtonList { float: right; clear: both; }
.checkoutPaypalSmartPaymentButtons { margin: 0 0 10px; float: right; clear: both; }
.payPalOption td { width: 220px; }
.payPalOption td div { clear: both; float: left; }
/* Payment row: stop pay4 hogging the width */
.paymentMethodTable td.pay1 { width: 28%; }
.paymentMethodTable td.pay2 { width: 28%; }
.paymentMethodTable td.pay3 { width: 26%; white-space: nowrap; }
.paymentMethodTable td.pay4 { width: 18%; }

.paymentMethodTable .checkoutShortest { width: 88px; }
/* Custom Continue Shopping link in the HTML area */
#customCartTop, #customCheckoutTop {
    text-align: center;
    margin: 0 0 20px 0;
    clear: both;
}