/**
 * Global theme.liquid styles
 ************************************/

ul {
  list-style: none;
  padding: 0px;
}

/* Auto-complete styles. These control the look of the autocomplete search feature. To edit the look of a selected element, 
   edit the li.selected class below. */
div.auto_complete {
  background: #fff;
  z-index: 400;
}
div.auto_complete ul {
  border:1px solid #888;
  margin:0;
  width:100%;
  padding: 0;
  list-style-type: none;
}
div.auto_complete ul li {
  margin:0;
  padding:3px;
}
div.auto_complete ul li.selected { 
  background-color: #ffb; 
}
div.auto_complete ul strong.highlight { 
  color: #800; 
  margin:0;
  padding:0;
}

#left {
  float: left;
  width: 150px;
}

#left fieldset {
  border: 0px;
  padding: 0px;
}
#content {
  width: 444px;
  padding: 0px 15px;
  float: left;
  margin-left: 2px;
}
  #content p {
    text-align: justify;
  }
#right {
  float: right;
  width: 150px;
}

div.section_content {
  margin: 10px 0;
}

  #content .section_content {
    border-top: 1px solid #3B5D77;
    padding-top: 10px;
  }

    #content .section_content input,
    #content .section_content label {
      display: block;
      float: left;
      margin-bottom: 10px;
      margin-right: 10px;
    }

    #content .section_content input[type="text"],
    #content .section_content input[type="password"] {
      width: 160px;
    }

    #content .section_content label {
      width: 120px;
      text-align: right;
    }

  #content h2 {
    border-bottom: 1px solid #3B5D77;
  }
div.column_section {
  background: #e2eef6 url(images/column_section_bg.jpg) top left no-repeat;
  margin-bottom: 10px;
  padding: 5px;
}
  div.column_section h3 {
    height: 23px;
    font-size: 11px;
    color: #3b5d77;
    margin: 0;
    padding: 2px;
    text-transform: none;
  }
/* Make a pointer hand appear over every auto-complete item. */
li.autocomplete_item { cursor: pointer; }

/* Style the AJAX products query */
input#products_query {

}

/* Category Menus */
ul#categoryList {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul#categoryList li ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
  font-weight: normal;
}

ul#categoryList > li {
  padding: 2px 0;
  font-weight: bold;
}

  /**
   * _login.liquid
   * Used as a partial in the main theme file.
   *****************************************/

  /* This UL is shown when a user is logged in. */
  ul#accountLinks {}
  
   /* Style any of the links in the UL */
   ul#accountLinks li.button {}

  /* Style each individual link */
  ul#accountLinks li.wishlist {}
  ul#accountLinks li.orders {}
  ul#accountLinks li.account {}
  ul#accountLinks li.password {}
  ul#accountLinks li.logout {}
  
  form#quickLoginForm {}
    #quickLoginForm input[type="text"],
    #quickLoginForm input[type="password"] {
      width: 135px;
    }

  /* This UL holds links to Forgot your Password and Register your account */
  ul#quickLoginLinks {
    margin-bottom: 10px;
    padding: 0px;
    list-style: none;
  }
    ul#quickLoginLinks li {
      margin-bottom: 5px;
      text-size: 1em;
    }

  /**
   * _quick_cart.liquid
   * Used as a partial in the theme file.
   ***************************************/
  #quick_cart {}
  #quick_cart p {}

/**
 * Helper classes.
 * You can and should use these anywhere that it is convienient.
 *********************************/
.clear { clear: both; }
.justify { text-align: justify; }
.alignLeft { float: left; }
/*p label { display: block; }*/  /* All form fields are defined as <p><label for="field">Field 1</label> <input type="text" name="field" id="field"></p> */
h1.pagetitle { } /* All main H1 headers for the page have a class of "pagetitle" */
.no_underline { text-decoration: none; }
.shift_down { position: relative; top: 0.3em; }

/* These two classes can show up at the top of a page, such as login.liquid, to show error/notice messages */
.error_message {}
.notice_message {}

/* A series of assorted "container" styles to apply to sections to differentiate them */

.container1 {
  margin: 10px 0px;
  background: #EBEBEB;
  border: 1px solid white;
  padding: 5px;
}
.container2 {}
.container3 {}

/**
 * category_browse.liquid
 *********************************/

/* These rules define styles for boxes that appear by the user's mouse when certain events are triggered. For example,
   click "Add to Wishlist" on an item, and a notice DIV should appear next to the mouse. Try to add something that is 
   out of stock, and an error DIV will show up. */
.error { 
  border: 2px solid #003366;
  background-color: #eee;
  line-height: 24px;
  padding: 4px;
  font-weight: bold;
}
  .error img { vertical-align: -15%; }

.notice {
  border: 2px solid #00d647;
  background-color: #eee;
  line-height: 24px;
  padding: 4px;
  font-weight: bold;
 }

.notice img { vertical-align: -15%; }

/* These rules define alternating product rows. Every even row has a class of "even", every odd row has a class of 
   "odd" */
tr.even { background-color: transparent; }
tr.odd { background-color: #EBEBEB; }

/* This table defines a sub-table of variant information that will appear under any product with variant info. */
table.variant-table {width:100%;}
  /* Any of the rows that aren't in <thead> are of class variantRow */
  table.variant-table tr.variantRow {}
    /* This TD cell holds the specific information about each variant. E.g, "Color: Blue, Size: XXL" */
    table.variant-table tr.variantRow td.variantInfo {}

/* This controls the pagination links at the bottom of the categories page. */
#pagination {
  margin-left: auto;
  margin-right: auto;
  width: 250px;
  text-align: center;
}

/* This controls the photos associated with the block
   of text describing a product category */
img.categ_photo {
  float: left;
  display: block;
  border: 0;
  margin-right: 10px;
}

/**
 * login.liquid
 ********************************/
 
/* Styles the UL that holds the "Forgot your password" and "Register your account" links */
ul.loginLinks {
  padding-left: 130px;
}

/**
 * product.liquid
 ********************************/
#product_container { margin: 10px; }

#photos {
  float: left;
  width: 200px;
}

#photo img {
  width: 200px;
}

#product {
  float: left;
  width: 200px;
  margin-left: 20px;
}

/* This table holds all the product options. */
table#product_options_table {}

/**
 * General Checkout Styles
 **********************************/

/* The #cart_process DIV is used to style the buttons at the top of each Checkout page that tell you what stage of 
   checkout you are on. */
div#cart_process { 
  float: none;
  margin-left: 10px;
  margin-bottom: 10px;
  display: block; 
  text-align: center;
} 

div#cart_process div a { 
  text-decoration: none; 
  color: #000; 
  font-weight: bold; 
  display: block; 
  width: 60px;
  height: 66px;
  /*margin-top: 2px;*/
}
div#cart_process div { 
  cursor: pointer; 
  text-align: center; 
  padding: 3px; 
  width: 60px; 
  height: 66px;
  border: 1px solid #ccc; 
  float: left; 
  background-position: 50% 15%;
  background-repeat: no-repeat;
  margin-left: 2px;
  margin-top: 4px;
}

div#cart_process div img {
  margin-top: 1px;
  margin-left: 8px;
  border: 0;
  float: none;
  text-align: center;
}
div#cart_process div a:hover { text-decoration: none; border: none; }
div#cart_process div.active { border: 1px solid #666; background-color: #eee; }

/**
 * checkout_begin.liquid (Step 1)
 ******************************/
#checkout_begin_select {}
  p#checkout_begin_email {}
  p#checkout_begin_new_customer {}
  p#checkout_begin_old_customer {}
  p#checkout_begin_password {}

/**
 * checkout_cart.liquid (Step 2)
 ******************************/

/* This table makes a layout for the Qty and +/- buttons. */
table.qty-table {}
  table.qty-table tr td.qty { font-size: 2em; font-weight: bold; }

/**
 * checkout_shipping_address.liquid (Step 3)
 *****************************/

/**
 * checkout_billing_address.liquid (Step 4)
 *****************************/

/**
 * checkout_shipping.liquid (Step 5)
 *****************************/

table#shipping_options {}
  /* Carrier headers (UPS, USPS, etc) */
  table#shipping_options .carrier {}
  table#shipping_options tr td.quote-selector {}
  table#shipping_options tr td.quote-name {}
  table#shipping_options tr td.quote-amount {}

/**
 * checkout_payment.liquid (Step 6)
 ******************************/

/* This table is in _checkout_payments.liquid */
table#payments-table {}
  table#payments-table tr.subtotal {}
  table#payments-table tr.shipping {}
  table#payments-table tr.tax {}
  table#payments-table tr.payment {}
  table#payments-table tr.required {}
  table#payments-table tr.additional-coupons {}
  table#payments-table tr.coupon {}

div.payment_box {
  background-color:#F0F0F0;
  border:1px solid #C8C8C8;
  margin:1em 0pt 0pt;
  padding:0px 5px 5px 5px;
}

/**
 * checkout_summary.liquid (Step 7)
 *****************************/
div#shipping_address {}
div#billing_address {}
table#order-information {}
table#payment-information {}
div#account-information {}
div#special-instructions {}

/**
 * checkout_confirmed (Step 8)
 ****************************/
ol#survey-questions {}
  ol#survey-questions li.question {}


/**
 * user_account.liquid
 ********************************/

/* Basic user account info "Store Credit", "orders placed", etc */
ul#account-info {
  margin: 10px 0px;
}
  /* style for header of each item in account info section */
  ul#account-info .acct_info_item {
    font-weight: bold;
  }

#account_addresses {
    list-style: none;
    padding: 0px;
  }
  #account_addresses .address {}
    #account_addresses .address_name {
      color: #3B5D77;
      font-weight: bold;
    }
    #account_addresses .address_info {
      float: left;
      width: 300px;
    }
    #account_addresses .address_options {
      float: right;
      text-align: right;
      width: 120px;
    }
    #account_addresses .address_separator {
      clear: both;
    }
  #account_addresses #new_address {}

ul#card_list { padding: 0; list-style: none; }


/**
 * user_orders.liquid
 ********************************/
table#user_orders {}
  table#user_orders tr.order-basic-info
  table#user_orders tr.order-tracking-number
  table#user_orders tr.order-items
    table#user_orders tr.order-items table.list {}

/**
 * user_signup.liquid
 *******************************/

.greybox {
  background-color:#F0F0F0;
  border:1px solid #C8C8C8;
  margin:1em 0pt 0pt;
  padding:0px 5px 5px 5px;
}

/**
 * user_wishlist.liquid
 ******************************/
ul#wishlist {}
  ul#wishlist li {}