/* base css for e-comm */

@import url("/xm_css/fontface.css"); /* fonts for fira sans */

.ecomm {
   float: left;
   margin: 0 0 40px 0px;
   width: 100%;
   text-align: left;
}
.ecomm form {
   width: 100%;
}
.ecomm .mask {
   display: none;
}
.ecomm a.button, .ecomm input.button, .ecomm a.small_button, .ecomm input.small_button,
.ecomm td, .ecomm th, .ecomm h1, .ecomm h1, .ecomm .page_header h2, .ecomm .gray,
.ecomm span.frm, .ecomm span.label, .ecomm p, .ecomm span.lfrm, .ecomm td.status,
.ecomm .dark, .ecomm .fill, .ecomm ul.msg li, .ecomm table h1,
.ecomm p.wrap, .ecomm .blabel, .ecomm label,.ecomm table td span.caps,
.ecomm a, .ecomm select, .ecomm i, .ecomm em, .ecomm th.nbf, .ecomm input,
.ecomm .message_error, .ecomm_messages, .message_error, .message_success,
.ecomm ul.msg li, .ecomm_messages ul.msg li, .ecomm .message_success ul.msg li,
.ecomm_message .message_success ul.msg li, ul.ecomm_breadcrumb li
  {
   font-family: 'fira_sansbook',Verdana, sans-serif; /* <<=== CHANGE if specifying web fonts */
   /* font-weight: 400; <<=== CHANGE if specifying web fonts */
  /*  font-style: normal; <<=== CHANGE if specifying web fonts */
   color: #444;  /* <<=== CHANGE */
   font-size: 15px; /* <<=== CHANGE  if specifying web fonts */
   line-height: 20px;
   font-weight: normal;
}
.ecomm .blabel {
   font-family: 'fira_sanssemibold'; /* <<=== CHANGE */
   font-weight: normal; /* needed for some web font services */
}
.ecomm i, .ecomm em {
 font-family: 'fira_sansbook_italic';
 font-style: normal;  /* needed for some web font services */
}
.ecomm b, .ecomm strong {
 font-family: 'fira_sanssemibold';
 font-style: normal;  /* needed for some web font services */
}
.ecomm i.fa {
   font-family: 'FontAwesome';
}
/* .ecomm page header to help transition from rest of site */
.ecomm .page_header {
   width: 100%;
   height: 47px;
   background: #bbb;
}
.ecomm h1, .ecomm table h1  {
   font-size: 24px;
   color: #777;
   padding: 8px 0;
   font-family: 'fira_sanssemibold'; /* <<=== CHANGE */
   font-weight: normal; /* needed for some web font services */
}
.ecomm .page_header h2 {
   margin: 6px 20px;
	font-size: 24px;
   font-family: 'fira_sanssemibold';
	color: #fff;
   padding-top: 14px;
   font-weight: normal;
}
.ecomm .page_header h2:before {
   content: "Checkout";
}
.reviews h4 {
   font-family: 'fira_sansbook';
   font-size: 14px;
   font-weight: normal;
}
/*  just added on Oct 13 and changes made March 2015 */
#product_form{
  margin-bottom: 25px;
}
#product_form table {
  margin: 0;
}
#product_form td {
   padding: 8px 30px 8px 0;
}
#product_form th {
  padding: 10px 20px 10px 0;
  line-height: 30px;
}
#product_form input#quantity {
   width: 25px;
}

ul.ecomm_breadcrumb li a:after {
   content: ">";
}

/* error and success message handling */
.ecomm .message_error, .ecomm_messages, .message_error, .message_success {
   float: left;
   margin: 0b0 0 0;
   color: #c00;
   width: 100%;
   padding: 0;
}
.ecomm .message_success, .ecomm_messages .message_success {
   color: #339C33;
   /* border: 1px solid #339C33; */
}
.ecomm ul.msg, .ecomm_messages ul.msg {
	margin: 10px;
	list-style: none;
	color: #c00;
}
.ecomm ul.msg li, .ecomm_messages ul.msg li {
   line-height: 22px;
   background: url(/images/ecomm/buttons/error.png) no-repeat 4px;
   padding: 0 0 0 30px;
   color: #c00;
   list-style: none;
}
.ecomm .message_success ul.msg li, .ecomm_message .message_success ul.msg li  {
   line-height: 22px;
   background: url(/images/ecomm/buttons/success.png) no-repeat 4px;
   padding: 0 0 0 30px;
}

/* start the actual table */
.ecomm table {
   width: 100%;
   border: none;
   border-collapse: collapse;
}
.ecomm .login tr {
   border-bottom: 1px solid #ECB271;
}
.ecomm .shipping_header tr:nth-child(2) {
   border-bottom: 1px solid #3e2911;
   border-top: 1px solid #3e2911;
}
.ecomm .shipping_header tr:nth-child(2) td {
   padding: 10px 0 20px 0;
}
.ecomm td, .ecomm th {
   vertical-align: top;
   border-bottom: 1px solid;
   border-color: #bbb;
   padding: 10px 4px;
}
.ecomm th {
   color: #000;
   background-color: none;
   border-top: 3px solid #ECB271;
   border-bottom: 1px solid #ECB271;
}
.ecomm table h1 {
   font-family: 'fira_sansbook';
   font-size: 21px;
   margin: 0;
   padding: 2px 0 0 0px;
   color: #D77E1A;
}
.ecomm table h2 {
   font-family: 'fira_sanssemibold';
   font-size: 14px;
   padding: 0;
   margin: 0;
   color: #D77E1A;
}
.ecomm table.navigation {
   width: 100%;
   border-top: 1px solid #3e2911;
}
.ecomm table.navigation td {
   width: 42%;
   vertical-align: middle;
}
@media (max-width: 800px) {
   .ecomm table.navigation {
      margin-top: 40px;
   }
   .ecomm table.navigation td {
      display: inline-block;
      border: none;
      margin-top: 0px;
   }
   .ecomm table.navigation td .button {
      margin-top: 20px;
   }
   .ecomm table.navigation td:last-child {
      float: right;
   }
}

/* -----------------------------------------
 * Cart w/ Multi Addresses
 * -----------------------------------------*/

/* Mobile breakpoint */
@media (max-width: 800px) {
   /* Hides the following:
    * 1. Size
    * 2. Color
    * 3. Item ID
    */
   .ecomm table .order_items_header th:nth-child(3),
   .ecomm table .order_items_row td:nth-child(2),
   .ecomm table .order_items_header th:nth-child(4),
   .ecomm table .order_items_row td:nth-child(3),
   .ecomm table .order_items_header th:nth-child(5),
   .ecomm table .order_items_row td:nth-child(4) {
      display: none;
   }

   /*
    * Hide padding columns
    */
   .ecomm .total th:first-child,
   .ecomm .total td:first-child {
      display: none;
   }

   /*
    * Adjust buttons
    */
   .ecomm table .button_nav a.button {
      font-size: .9em;
   }
}

/*
 * Cart
 */
.cart-update input {
   line-height: 19px;
   padding: 14px 20px 10px;
   display: none;
}
/* Mobile breakpoint */
@media (max-width: 800px) {
   .cart-update {
      display: none;
   }
}

/*
 * Other
 */

/* cart specific table to narrow left column */
.ecomm table tr:nth-child(3) td:first-child {
   width: 40%;
   text-align: left;
}
.ecomm table tr.button_nav td {
   border-bottom: 0;
   vertical-align: middle;
   padding-top: 20px;
}
/* drop cap for 3 instructions */
.ecomm table td span.caps {
   float: left;
   color: #903;
   font-size: 48px;
   line-height: 35px;
   padding: 0 5px 15px 0;
   font-family: 'fira_sansbook';
}
.ecomm table.catalog_list {
   border: 0px solid #fff;
}
.ecomm .attribute {
   height: 15px;
}
.ecomm .rt {
   text-align: right;
}
.ecomm .ctr {
   text-align: center;
}

.ecomm .bf {
   font-family: 'fira_sanssemibold';
}
/*
 * Pronounced Headers
 *
 * This is for pronounced table headers like "Billing Address" & "Shipping
 * Address" on the Summary page.
 *
 * Though archaic, Sean Z. thinks they should be left in for now. Maybe
 * with a complete overhall they should be renamed.
 */
.ecomm th.nbf {
   text-transform: uppercase;
   vertical-align: middle;
}

/*
 * vline doesn't do anything by default but can be overwritten to show a
 * vertical line to split up cells.
 */
.ecomm th.vline {
}
.ecomm a {
   font-family: 'fira_sansbook';
   font-size: 14px;
   line-height: 18px;
   text-decoration: none;
   color: blue;
}
.ecomm a:hover {
   color: #ccc;
   text-decoration: none;
}

/* Status Bar */
.ecomm table.status td, .ecomm table.status th, .ecomm table.status tr  {
   border-bottom: 0;
}
/* status bar: gray=not done, dark=done, fill=current */
.ecomm .gray, .ecomm .dark, .ecomm .fill {
   font-family: 'fira_sansbook';
   font-size: 14px;
   line-height: 18px;
}
.ecomm .gray { color: #e5d198; }
.ecomm .dark { color: #c99c20; }
.ecomm .fill {
   color: #315b32;
   background-color: transparent;
   border-top: 4px solid #315b32;
   border-left: 0; border-right: 0; border-bottom: 0;
}

.ecomm .status .icon {
   display: none;
}

.ecomm .status .gray .icon {
   opacity: 0.5;
}

@media (max-width: 800px) {
   .ecomm .status .icon {
      display: inline;
      max-width: 32px;
      vertical-align: middle;
   }
   .ecomm .status .text {
      display: none;
   }
   .ecomm .status .fill {
      border-top: none;
   }
}

/*------------------------------------------------------------------------------
Summary
------------------------------------------------------------------------------*/
/* Mobile breakpoint are mostly covered by Cart w/ Multi Address
 * Here are the rest.
 */
@media (max-width: 800px) {
   #overlay {
      padding-top: 50%;
      padding-top: calc( 50% + 32px );
   }
}

/*------------------------------------------------------------------------------
FORMS
------------------------------------------------------------------------------*/

.ecomm p.wrap {
   width: 100%;
}
.ecomm label {
   padding: 7px 10px 0 0;
}

.ecomm input:not(.button), .ecomm textarea {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 2px solid #ccc;
}
.ecomm input:not(.button):focus, .ecomm textarea:focus {
   background: #fff;
   -webkit-box-shadow: 0px 0px 2px 1px #7aa3e8;
   -moz-box-shadow:    0px 0px 2px 1px #7aa3e8;
   box-shadow:         0px 0px 2px 1px #7aa3e8;
}
.ecomm .chzn-container {
   display: inline-block;
}
.ecomm select {
   border: 1px solid #bbb;
   border-radius: 3px 3px 3px 3px;
   overflow: hidden;
   height: 33px;
   width: 40%;
   padding: 4px;
   background: #e7e7e7; /* Old browsers */
   background: -moz-linear-gradient(top, #e7e7e7 0%, #fefefe 100); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #e7e7e7 0%,#fefefe 100); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #e7e7e7 0%,#fefefe 100); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #e7e7e7 0%,#fefefe 100); /* IE10+ */
   background: linear-gradient(to bottom, #e7e7e7 0%,#fefefe 100); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
   -webkit-box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
}

.ecomm input[type="text"], .ecomm input[type="email"], .ecomm input[type="password"], .ecomm input[type="tel"] {
   width: 100%;
   margin-top: 0;
   height: 35px;
   line-height: 25px; /* <<=== CHANGE depending on font */
   box-sizing: border-box;
}
.ecomm .exp-dates {
   width: 20%;
}
.exp-dates {
   width: 80px;
}
/* buttons */
.ecomm a.button, .ecomm input.button, .ecomm a.small_button,
.ecomm input.small_button, .ecomm input[type="submit"] {
   text-transform: uppercase;
   font-size: 18px;
   color: #fff;
   width: auto;
}

/* Guest Checkout button */
.guest {
   display: inline-block;
}

/* Desktop adjustments */
@media (min-width: 500px) {
   .ecomm label {
      width: 125px;
      float: left;
      text-align: right;
   }
   .ecomm p.wrap {
      margin: 10px 0 0 40px;
   }
   .ecomm .login label {
      width: 25%;
   }
   .ecomm.shipping input[type="text"], .ecomm.billing input[type="text"], .ecomm.summary input[type="text"], .ecomm.summary input[type="tel"], .ecomm.billing input[type="tel"] {
      width: 40%;
   }
   .ecomm input[type="text"], .ecomm input[type="email"], .ecomm input[type="password"], .ecomm input[type="tel"] {
      width: 60%;
      height: 25px;
      box-sizing: initial;
   }
   /* Guest Checkout button */
   .guest {
      display: inline;
   }
}

/*------------------------------------------------------------------------------
Manage Account
------------------------------------------------------------------------------*/
.manage_account tr.mobile-header {
    display: none;
}
@media (max-width: 680px) {
    .manage_account tr.mobile-header {
        display: inline-block;
        clear: both;
    }
    .manage_account th, .manage_account td {
        display: block;
    }
    .manage_account tr {
        float: left;
        margin-bottom: 25px;
    }
    thead {
        display: none;
    }
}
.manage_account #product_form table {
    margin-bottom: 15px;
}
.manage_account #product_form tbody {
    vertical-align: top;
}
.manage_account form#product_form th {
    padding: 8px;
    text-align: left;
}
.manage_account form#product_form table tbody tr td a img {
    margin-bottom: 7px;
    max-width: 125px!important;
    height: auto!important;
    display: block;
}
.manage_account #product_form tr.mobile-header {
    display: none;
}
.manage_account #product_form th, .manage_account #product_form td {
    display: table-cell;
    vertical-align: top;
}
.manage_account #product_form tr {
    float: none;
    margin-bottom: 25px;
}
#product_form thead {
    display: table-header-group;
}
@media (max-width: 450px) {
    .manage_account #product_form table {
        font-size: 97%;
    }
    .manage_account #product_form th, .manage_account #product_form td {
        padding: 5px;
    }
    .manage_account #product_form td img {
        max-width: 75px!important;
    }
}
/*------------------------------------------------------------------------------
ODDS N' ENDS
------------------------------------------------------------------------------*/

/* password recover div */
.ecomm #msgs_recovery, .ecomm #gift_form {
   display: none;
}

.ecomm div.form.address_form {
   margin-left: 120px;
}
.ecomm input.counter {
   width: 50px;
   display: inline;
}
#taxes {
   width: 400px;
   display: none;
}
input.security_code {
   width: 40px;
}
.ecomm a.forgot {
   font-size: 14px;
}
.ecomm input.quantity {
   text-align: right;
   width: 25px;
}

/* Hide quantity touch buttons if not on a mobile device */
@media (min-width: 800px) {
   .quantity-increment, .quantity-decrement {
      display: none;
   }
}
.cat_bread_crumbs {
   background: none;
   list-style: none;
   margin: 0 0 20px 0;
   overflow: hidden;
   padding-left: 20px;
}
.cat_bread_crumbs li {
   float: left;
   margin: 1px 10px 0 0;
}
.cat_bread_crumbs a {
   font-size: 14px;
}
.ecomm a.button.add_address {
   float: right;
   font-size: 15px;
}
.ecomm .order_items_header th {
   background-color: transparent;
   color: #9C785C;
   border-bottom: solid 1px #9C785C;
}
.ecomm #login_form {
   display: none;
   margin: 20px;
}
.ecomm .meta_info th {
	background: transparent;
}
.ecomm .ship_date {
	width: 100%;
	display: block;
}
.ecomm .meta_info tr:last-child td {
	border: none;
}

.ecomm .security_footer {
   text-align: center;
}
div.AuthorizeNetSeal {
   display: inline-block;
}
/* ===== Billing ===== */
.cred_cards {
   display: none;
   height: 25px;
   vertical-align: middle;
}

/* ===== Ecomm Public ===== */
.sale {
	color: #d00;
	margin-left: 5px;
}
span.sold_out {
   color: #c00;
}
.price_strike {
	text-decoration: line-through;
}
.left_info {
	float: left;
}
.right_info {
	float: right;
}

.receipt #ecomm_nav {
   position: absolute;
   right: 10px;
}
.receipt ul {
   list-style-type: none;
}
.ecomm.receipt a.button {
   padding: 2px 12px 2px 12px;
}


/* ==========
 * Address Book Form
 * ========== */
form#address_book {
   float: left;
}
/* Styling in general */
.canonContainer {
   max-width: 300px;
   float: right;
   font-size: 15px;
   line-height: 18px;
   font-weight: normal;
}
/* Styling for the single shipment address and billing page */
.ecomm.shipping .canonContainer, .ecomm.billing .canonContainer {
   position: absolute;
   right: 0;
}
.canonContainer table {
   margin: 0 0 9px 0;
}
.canonContainer ol li {
   margin-bottom: 4px;
   font-size: 15px;
   line-height: 19px;
}
.canonContainer th, .canonContainer p,
.canonContainer td, .canonContainer ol li {
   text-align: left;
   font-family: 'fira_sansbook';
}
.canonContainer th,
.canonContainer td {
   padding: 2px 0;
}
.canonContainer table tr:first-child th {
   font-family: 'fira_sanssemibold';
   padding: 0 0 4px 0;
}
.canonContainer h2 {
   font-family: 'fira_sansbook';
   font-weight: normal;
   font-size: 20px;
}
p.addVer-options {
   margin-top: 24px;
}

/* ==========
 * Shipping Multi
 * ========== */
.shipping.multi .address-disabled {
   display: none;
   width: 200px;
}
/* ==========
 * Shipping Recipient
 * ========== */

/* General styling */
.shipping.recipient-based #instructions {
   margin-bottom: 50px;
}
.shipping.recipient-based .recipient {
   margin-bottom: 20px;
}
.shipping.recipient-based .add-recipient {
   margin-bottom: 1.5rem;
}

/* Recipient header */
.shipping.recipient-based h2 {
   display: inline-block;
}
.shipping.recipient-based .edit-recipient, .shipping.recipient-based .remove-recipient {
   float: right;
}
.shipping.recipient-based .remove-recipient {
   clear: both;
}
.shipping.recipient-based .recipient-header {
   border-top: solid 2px #000;
   padding: 10px;
}
.shipping.recipient-based .recipient-header h2 {
   vertical-align: baseline;
}
.shipping.recipient-based .incompleted .recipient-header h2 {
   font-weight: bold; /* To draw more attention to it */
}
.shipping.recipient-based .recipient-header .incomplete-message {
   color: #c00;
   display: block;
}
.shipping.recipient-based .shipping-method {
   /* margin-top: 20px; */
   margin-bottom: 10px;
}
.shipping.recipient-based .shipping-method label {
   text-align: left;
}

/* Address form in recipient shipping */
#address-book-container input {
   width: 100%;
   box-sizing: border-box;
}
/* Fix chosen container's getting the wrong width */
#address-book-container .chosen-container {
   width: 100% !important;
}
#address-book-container .chosen-container input {
   width: 100%;
}

/* Auxiliary input fields */
.shipping.recipient-based .gift-message, .shipping.recipient-based .arrival-date {
   clear: both;
}
.shipping.recipient-based .gift-message-inputs, .shipping.recipient-based .arrival-date-inputs {
   display: none;
}

/* Order items */
.shipping.recipient-based .order-items {
   margin-top: 25px;
}
.shipping.recipient-based .order-items th:first-child {
   width: 100%;
}
.shipping.recipient-based .order-items th.qty {
   max-width: 100px;
}
.shipping.recipient-based .order-items th:last-child {
   max-width: 50px;
}
.shipping.recipient-based .order-items img {
   max-width: 100px;
   max-height: 50px;
   float: left;
   margin-right: 10px;
}
.shipping.recipient-based .order-items tr.no-items {
   display: none;
}
.shipping.recipient-based .product_list {
   margin-bottom: 20px;
}

@media (min-width: 500px) {
   .shipping.recipient-based .recipient-header .incomplete-message {
      margin-left: 8px;
      display: inline;
   }
   /* Auxiliary fields */
   .shipping.recipient-based .shipping-method label {
      width: 100%;
   }
   .shipping.recipient-based .shipping-method select {
      width: auto;
   }

   #address-book-container input {
      width: 280px;
   }

   /* Order items */
   .shipping.recipient-based .order-items img {
      max-width: 200px;
      max-height: 100px;
   }
}
#fancybox-outer {
  padding: 0 25px;
}


/* ==========
 * Detail page
 * ========== */
.Detail #product_form table {
   width: 50%;
}
.product-images .views .ext-img {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   min-width: 25px;
   min-height: 25px;
   display: inline-block;
}