/* Layout: One Column



Theme: Sapphire







Layout.css contains the layout properties for your order form,



including width, height, margin, padding, position, float,



display and text-align.







NOTE: There are additional classes that are not listed here



because they currently have no attributes. You can locate



these by downloading and using Firebug.



===============================================================*/







* {



    margin: 0;



    padding: 0;



}







#wrapper {



    /* Wraps around everything and sets the total width of the order form */



    position: relative;



    width: 960px;



    margin: 0 auto;



    padding: 10px 10px 60px 10px;



    background: #fff;



}







#header {



    /* The top area that contains your banner or logo */



    width: 960px;



}







#content {



    /* Content wrapper */



    position: relative;



    width: 960px;



    margin: 0 auto;



}















/* PRODUCT GRID



===============================================================*/







.productImage {



    /* Image in the product grid */



    margin: 8px 0 10px 0;



    border: 1px solid #eee;



    max-width: 100%;



}







.price {



    /* Price in the right column of the product grid */



    display: block;



}







.productDescription {



    /* Paragraph for short product description */



    margin-bottom: 13px;



}







.optionsDrop {



    /* Dropdown for product options */



    padding: 4px 4px 4px 6px;



    margin-bottom: 13px;



}







.subscriptionPlan {



    display: block;



}







.qtyField {



    /* Quantity field in product grid */



    padding: 4px 4px 4px 6px;



    width: 30px;



    display: block;



    text-align: right;



    margin: 0 auto;



    margin-bottom: 5px;



}















/* HTML AREAS (Insert custom HTML by going to the HTML area tab)



===============================================================*/







#topCustomHTML {



    /* HTML area below header image. */



    margin: 35px 0 15px 0;



}







#middleCustomHTML {



    /* HTML area below product grid. */



    margin: 35px 0 60px 0;



    clear: both;



}







#bottomCustomHTML {



    /* This is your footer. */



    background: #313131;



    width: 960px;



    margin: 0 auto 20px auto;



    padding: 15px;



    text-align: center;



    clear: both;



    border: none;



}















/* FORMS



===============================================================*/







input {



    margin: 0 0 7px 0;



}







.paymentLabel {



    /* Labels for payment method table */



    display: block;



}







.choosePlan {



    /* Radio buttons used to choose pay plan or shipping option */



    margin-right: 5px;



}















/* Form fields and labels



---------------------------------------------*/







.checkout, .checkoutDone {



    /* Form fields used in checkout forms */



    padding: 4px 4px 4px 6px;



    margin: 0;



    width: 200px;



}







.checkoutBottom, .checkoutBottomDone {



    /* Provides bottom padding for last form field in a form */



    padding: 4px 4px 4px 6px;



    margin: 0 0 20px 0;



    width: 200px;



}







.checkoutTop, .checkoutTopDone {



    /* Provides top padding for first form field in a form */



    padding: 4px 4px 4px 6px;



    margin: 10px 0 0 0;



    width: 200px;



}







.checkoutLabel {



    /* Checkout form label */



    padding: 0 0 -3px 0;



    margin: 0 0 -3px 0;



}







.checkoutShort, .promoField {



    /* Smaller form field */



    padding: 4px;



    margin: 0;



    width: 125px;



}







.promoLabel {



    padding-top: 3px;



}







.checkoutShortest {



    /* Even smaller form field */



    padding: 5px;



    margin: 0;



    width: 70px;



}







.addressTableInfo {



    margin-bottom: 0px;



}







.paymentIcon {



    /* Credit card, pay pal and check icons in payment information table */



    margin: 0 7px -5px 4px;



}















/* Tables



---------------------------------------------*/







.viewCart {



    width: 100%;



    border-collapse: collapse;



    margin: 20px 0 30px 0;



    float: left;



    border-radius: 4px;



}







.viewCart th, .billingTable th, .shippingTable th, .shipMethodTable th, .paymentMethodTable th, .payplanTable th, .orderSummary th {



    padding: 10px 10px 10px 15px;



    text-align: left;



}







.viewCart td, .shipMethodTable td, .paymentMethodTable td, .payplanTable td, .orderSummary td {



    padding: 10px 10px 10px 15px;



    vertical-align: top;



}







.billingTable td, .shippingTable td {



    padding: 8px 0 0 15px;



    vertical-align: top;



}







.billingTable {



    /* Table for entering billing address */



    width: 470px;



    border-collapse: collapse;



    margin: 0 20px 20px 0;



    text-align: left;



    float: left;



    height: 500px;



}







.shippingTable {



    /* Table for entering shipping address */



    width: 470px;



    border-collapse: collapse;



    margin: 0 0 20px 0;



    text-align: left;



    float: right;



    height: 500px;



}







.orderSummary {



    /* Table for order form summary */



    position: relative;



    width: 470px;



    border-collapse: collapse;



    margin-bottom: 20px;



    text-align: left;



    float: right;



    clear: right;



}







.shipMethodTable {



    /* Table for shipping options */



    width: 470px;



    border-collapse: collapse;



    margin-bottom: 20px;



    margin-right: 20px;



    text-align: left;



    float: left;



    clear: left;



}







.payplanTable {



    /* Table for choosing pay plan */



    width: 470px;



    border-collapse: collapse;



    margin-bottom: 20px;



    text-align: left;



    float: left;



}







#shipPaymentContainer {



    width: 470px;



    float: left;



}







.tableOption { /**/



    /* Paragraph for shipping or pay plan option */



    margin: 0 0 11px 0;



}







.payplanSummary { /* Box that shows payment schedule for payment plan */



    background-color: #fff;



    width: 200px;



    margin: -12px 0 15px 0;



}







.paymentDate { /* Date shown in .paypanSummary box */



    width: 100px;



    display: inline-block;



    border-bottom: 1px dashed #ddd;



}







.paymentAmount { /* Payment amount shown in .paypanSummary box */



    width: 65px;



    text-align: right;



    display: inline-block;



    border-bottom: 1px dashed #ddd;



}







.financeDate { /* Finance charge label shown in .paypanSummary box */



    color: #777;



    font-style: italic;



    width: 100px;



    display: inline-block;



}







.financeAmount { /* Finance charge amount shown in .paypanSummary box */



    color: #777;



    font-style: italic;



    width: 65px;



    text-align: right;



    display: inline-block;



}







.promoCode {



    /* Table for promo code field */



    width: 453px;



    border-collapse: collapse;



    margin-left: 15px;



}







.promoCode td {



    height: 30px;



}







.paymentMethodTable {



    /* Table for entering payment method */



    width: 100%;



    border-collapse: collapse;



    margin: 40px 0 20px 0;



    text-align: left;



    float: right;



}







td.pay1 {



    /* First column in .paymentMethodTable */



    width: 220px;



    padding-bottom: 20px;



}







td.pay2 {



    /* First column in .paymentMethodTable */



    width: 231px;



    padding-bottom: 20px;



}







td.pay3 {



    /* First column in .paymentMethodTable */



    width: 186px;



    padding-bottom: 20px;



}







td.pay4 {



    /* First column in .paymentMethodTable */



    width: 314px;



    padding-bottom: 20px;



}







td.rightAlign {



    text-align: right;



    vertical-align: top;



    padding-top: 10px;



    height: 20px;



}







th.rightAlign {



    text-align: right;



}







th.rightAlignTop {



    text-align: right;



    vertical-align: top;



    padding-top: 20px;



    width: 150px;



}







td.rightAlignTop {



    text-align: right;



    padding-top: 20px;



    width: 150px;



    height: 20px;



}







td.rightAlignBottom {



    text-align: right;



    vertical-align: top;



    padding: 10px 10px 20px 0;



    width: 150px;



}







th.leftAlign {



    text-align: left;



    height: 15px;



}







td.leftAlign {



    text-align: left;



}







td.centerAlign, th.centerAlign {



    text-align: center;



}







td .rightCell {



    text-align: right;



}







.productCell {



    width: 80%; !important



}







.qtyCell {



    width: 10%; !important



}







.priceCell {



    width: 10%; !important



}







.checkoutLinks {



    /* Container for 'Checkout' and 'Continue Shopping' buttons */



    width: 350px;



    height: 30px;



    margin: 0 0 40px;



    text-align: right;



    float: right;



    clear: both;



}







.checkoutWithPayPalLink {



    cursor: pointer;



    display: inline-block;



    margin: 10px 0 0 10px;



    padding: 3px 0;



}







.checkoutWithPayPalImg {



    display: block;



    margin: 0 0 -9px;



}







.payPalDescription {



    width: 400px;



}







.switchPaymentSelectionLink {



    padding-bottom: 25px;



    cursor: pointer;



}







.paymentIcon {



    margin: 15px 7px -5px 4px;



}















/* UPSELLS



===============================================================*/







#upsellContainer {



    /* Contains all upsells */



    margin-bottom: 60px;



    clear: both;



}







.upsell {



    /* Box that contains single upsell */



    width: 283px;



    float: left;



    margin: 0 10px 20px 0;



    padding: 10px 10px 12px 15px;



}







.upsellImage {



    float: left;



    margin: 6px 15px 0 0;



}







.upsellItem {



    /* Product name */



    font-weight: bold;



    margin-right: 10px;



}







.upsellAdd {



    /* Add to cart button for upsells */



    float: right;



    margin: 7px 7px 0 0;



}







.upsellPrice {



    margin-left: 9px;



}















/* TYPOGRAPHY



===============================================================*/







h1 {



    /* Used for product names */



    margin: 2px 0 2px 0;



}







h2 {



    /* Used for upsell product names */



    margin-right: 10px;



    display: inline;



}







#upsellContainer h2 {



    /* Used for upsell product names */



    margin: 5px 12px 0 0;



    display: inline-block;



}







h3 {



    /* Used for upsell headline */



    margin: 0 0 5px 0;



    padding-bottom: 3px;



}















/* LINKS AND BUTTONS



===============================================================*/







a {



    text-decoration: none;



}







a:hover {



    text-decoration: underline;



}







.codeButton, .continueButton {



    padding: 7px 17px 6px 17px;



    margin: 0 0 0 15px;



    cursor: pointer;



      background: rgb(255,174,1);

  background: -moz-linear-gradient(top, rgba(255,174,1,1) 0%, rgba(225,55,6,1) 100%);

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,174,1,1)), color-stop(100%, rgba(225,55,6,1)));

  background: -webkit-linear-gradient(top, rgba(255,174,1,1) 0%, rgba(225,55,6,1) 100%);

  background: -o-linear-gradient(top, rgba(255,174,1,1) 0%, rgba(225,55,6,1) 100%);

  background: -ms-linear-gradient(top, rgba(255,174,1,1) 0%, rgba(225,55,6,1) 100%);

  background: linear-gradient(to bottom, rgba(255,174,1,1) 0%, rgba(225,55,6,1) 100%);

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffae01', endColorstr='#e13706', GradientType=0 );

  border-radius: 0;

  border: none;

  line-height: 1.25;

  outline: none !important;

  color: #fff !important;

  text-align: center;

  text-decoration: none;

  padding: 0.25em 2em;

  display: inline-block;

  zoom: 1;

  font-family: Georgia,Times,"Times New Roman",serif;

  font-weight: normal;

  font-size: 16px;



}







.upsellButton {



    margin: 0 0 0 1px;



    padding: 5px 8px 5px 8px;



    cursor: pointer;



}







/* PAYPAL LIGHTBOX



===============================================================*/







.payPalLightboxIcon {



    float: right;



    padding: 20px;



}







.payPalMessage {



    padding: 55px 30px 0;



}







.closePayPalLightbox {



    margin-right: 30px;



    margin-top: 50px;



    float: right;



}







.payPalGo {



    -moz-border-bottom-colors: none;



    -moz-border-left-colors: none;



    -moz-border-right-colors: none;



    -moz-border-top-colors: none;



    background: url("https://www.paypalobjects.com/en_US/i/pui/core/btn_bg_sprite.gif") repeat-x scroll left 17.5% #FFA822;



    border-color: #D5BD98 #935E0D #935E0D #D5BD98;



    border-image: none;



    border-style: solid;



    border-width: 1px;



    cursor: pointer;



    font-size: 14px;



    margin-left: 30px;



    margin-top: 10px;



    padding: 1px;



}







@media only screen and (max-width : 960px) {



    #wrapper {



        width: auto;



        left: 0;



        right: 0;



    }







    #header, .billingTable, .shippingTable, .shipMethodTable, .paymentMethodTable, .orderSummary {



        width: 100%;



    }







    #paymentSelection {



        text-align: center;



    }







    #content {



        width: auto;



    }







    td.pay1, td.pay2, td.pay3, td.pay4 {



        display: block;



        width: 100%;



        text-align: center;



        padding-left: 0;



        padding-right: 0;



    }







    .orderSummary td:last-child{



        text-align: right;



    }







    .viewCart > tbody > tr:not(:first-child):not(:last-child) > td:first-child,



    .viewCart > tbody > tr:not(:first-child):not(:last-child) > td:nth-child(2):not(.priceCell) {



        display: block;



    }







    .viewCart > tbody > tr:first-child > th:nth-child(2),



    .viewCart > tbody > tr:last-child > td:nth-child(3) {



        display: none;



    }







    #companyLogoTopBanner img {



        max-width: 100%;



    }







    td.rightAlignTop {



        width: auto;



    }







    .shipMethodTable {



        text-align: center;



    }







    .shippingCheckbox {



        text-align: center;



    }







    #theLightbox_c {



        position: fixed !important;



        left: 10px !important;



        right: 10px !important;



        top: 10px !important;



        width: auto !important;



    }







    #theLightbox {



        width: auto !important;



    }



}



/* PAYPAL SMARTBUTTONS===============================================================*/.checkoutButtonList { /* Container for the checkout links and PayPal smart payment buttons, if the smart payment buttons are present */ float: right; clear: both; padding-right: 30px;}.checkoutPaypalSmartPaymentButtons { /* Container for the PayPal smart payment buttons */ float: right; clear: both;}.payPalOption td { /* PayPal option in the Payment Information */ width: 220px;}.payPalOption td div { /* Container for the PayPal smart payment buttons in the PayPal option in the Payment Information */ clear: both; float: left;}#payPalButtons { /* PayPal initial order form page when multiple payment option */ background-color: #ffffff; padding: 16px;}#payPalOptionButtons { /* Container for the PayPal smart payment buttons */ float: right; clear: both; width: 220px;}