/*--------------------------------------*/
/* Colors
/*--------------------------------------*/
$c_green:       #8dba53;  /* Spree green    */
$c_red:         #e45353;  /* Error red      */

$layout_background_color:   #FFFFFF;
$title_text_color:          #404042;
$body_text_color:           #404042;
$link_text_color:           #00ADEE;

$product_background_color:  #FFFFFF;
$product_title_text_color:  #404042;
$product_body_text_color:   #404042;
$product_link_text_color:   #BBBBBB;

/*--------------------------------------*/
/* Fonts import from remote
/*--------------------------------------*/
@import url(//fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic|&subset=latin,cyrillic,greek,greek-ext,latin-ext,cyrillic-ext);

/*--------------------------------------*/
/* Font families
/*--------------------------------------*/
$ff_base:       'Ubuntu', sans-serif;

/*--------------------------------------
  | Font sizes
  |--------------------------------------
  |- Navigation                         
  |                                    */
      $header_navigation_font_size:           14px;
      $horizontal_navigation_font_size:       16px;
      $main_navigation_header_font_size:      14px;
      $main_navigation_font_size:             12px;
/*|------------------------------------
  |- Product Listing                         
  |                                  */
      $product_list_name_font_size:           12px;
      $product_list_price_font_size:          16px;
      $product_list_header_font_size:         20px;
      $product_list_search_font_size:         14px;
/*|------------------------------------
  |- Product Details
  |                                  */
      $product_detail_name_font_size:         24px;
      $product_detail_description_font_size:  12px;
      $product_detail_price_font_size:        20px;
      $product_detail_title_font_size:        14px;
/*|------------------------------------
  |- Basic
  |                                  */
      $heading_font_size:                     24px;
      $sub_heading_font_size:                 14px;
      $button_font_size:                      12px;
      $input_box_font_size:                   13px;
      $base_font_size:                        12px;

/*--------------------------------------*/
/* Basic styles 
/*--------------------------------------*/
body {
  font-family: $ff_base;
  color: $body_text_color;
  line-height: 18px;
  font-size: $base_font_size;
  background-color: $layout_background_color;
}

/* Line style */
hr {
  border-color: lighten($body_text_color, 60);
}

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: $link_text_color; color: $layout_background_color; text-shadow: none;}
::selection {background: $link_text_color; color: $layout_background_color; text-shadow: none;} 

/*  j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: $link_text_color;} 

ins {background-color: $link_text_color; color: $layout_background_color; text-decoration: none;}
mark {background-color: $link_text_color; color: $layout_background_color; font-style: italic; font-weight: bold;}

  /*--------------------------------------*/
  /* Links
  /*--------------------------------------*/
  a {
    text-decoration: none;
    color: $link_text_color;

    &:hover {
      color: darken($link_text_color, 10) !important;
    }
  }

  /*--------------------------------------*/
  /* Lists
  /*--------------------------------------*/
  ul, ol {
    li {
      
    }

    &.inline {
      li {
        display: inline-block;
      }
    }
  }
  
  dl {
    dt, dd {
      display: inline-block;
      width: 50%;
      padding: 5px;

      &.odd {
        background-color: lighten($body_text_color, 60);
      }
    }
    dt {
      font-weight: bold;
      text-transform: uppercase;      
    }
    dd {
      margin-left: -23px;
    }
  }

  /*--------------------------------------*/
  /* Headers
  /*--------------------------------------*/
  h1 { font-size: $heading_font_size;         line-height: $heading_font_size + 10;         }
  h2 { font-size: $heading_font_size - 2;     line-height: $heading_font_size - 2 + 10;     }
  h3 { font-size: $heading_font_size - 4;     line-height: $heading_font_size - 4 + 10;     }
  h4 { font-size: $heading_font_size - 6;     line-height: $heading_font_size - 6 + 10;     }
  h5 { font-size: $sub_heading_font_size;     line-height: $sub_heading_font_size + 10;     }
  h6 { font-size: $sub_heading_font_size - 2; line-height: $sub_heading_font_size - 2 + 10; }

  h1, h2, h3, h4, h5, h6 {    
    font-weight: bold;
    color: $title_text_color;
  }

  /*--------------------------------------*/
  /* Forms
  /*--------------------------------------*/
  textarea, input[type="date"], 
  input[type="datetime"], input[type="datetime-local"],
  input[type="email"], input[type="month"], input[type="number"],
  input[type="password"], input[type="search"], input[type="tel"],
  input[type="text"], input[type="time"], input[type="url"], 
  input[type="week"] {
    border: 1px solid lighten($body_text_color, 60);
    padding: 2px 5px;    
    font-family: $ff_base;
    font-size: $input_box_font_size;

    &:active, &:focus {
      border-color: $link_text_color;;
      outline: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      -o-box-shadow: none;
      box-shadow: none;
    }

    &.error {
      border-color: $c_red;
    }
  }

  select {
    border: 1px solid lighten($body_text_color, 60);
    font-family: $ff_base;
    background-image: url('select_arrow.gif');
    background-repeat: no-repeat;
    background-position: right center;

    &:active, &:focus {
      @extend input[type="text"]:focus  
    }
  }

  label.error {
    display: block;
    font-size: $base_font_size - 1;
    color: $c_red;
    margin-top: 3px;
  }

  input[type="submit"], input[type="button"],
  input[type= "reset"], button, a.button {
    background-color: $link_text_color;;
    background-image: none;
    text-shadow: none;
    color: $layout_background_color;
    font-weight: bold;
    font-size: $button_font_size;
    font-family: $ff_base;
    border: 1px solid rgba(0, 138, 189, .75);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
     -khtml-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
       -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
         -o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    -webkit-border-radius: 0px;
     -khtml-border-radius: 0px;
       -moz-border-radius: 0px;
        -ms-border-radius: 0px;
         -o-border-radius: 0px;
            border-radius: 0px;
    vertical-align:  text-top;

    &.large {
      padding: 7px 10px;
      font-size: $button_font_size + 2;
    }

    &:hover {
      background-image: none;
      background-color: $body_text_color;
      border-color: $body_text_color;
      color: $layout_background_color !important;
    }
  }

  .ie8 {
    a.button {
      line-height: 16px;
    }
  } 

  input[type="checkbox"], input[type="button"],
  input[type="submit"], input[type="reset"], 
  button, label {
    vertical-align: middle;
  }

  a.button {
    display: inline-block;
    line-height: 15px;
    margin-top: -2px;
    vertical-align: bottom;
  }

  /*--------------------------------------*/
  /* Footer
  /*--------------------------------------*/
  footer#footer {
    padding: 10px 0;
    border-top: 1px solid lighten($body_text_color, 60);
  }

  /*--------------------------------------*/
  /* Paragraphs
  /*--------------------------------------*/
  p {
    padding: 10px 0;
  }

  /*--------------------------------------*/
  /* Tables
  /*--------------------------------------*/
  table {
    thead {
      background-color: lighten($body_text_color, 60);
      text-transform: uppercase;

      tr {
        th {
          padding: 5px 10px;
        }
      }
    }

    tbody, tfoot {
      tr {
        border-bottom: 1px solid lighten($body_text_color, 60);

        td {
          vertical-align: middle;
          padding: 5px 10px;
        }

        &.alt, &.odd {
          background-color: lighten($link_text_color, 50);
        }
      }
    }
  }

  /*--------------------------------------*/
  /* Navigation
  /*--------------------------------------*/
  nav#top-nav-bar {
    text-align: right;
    margin-top: 20px;

    ul {
      li {
        margin-bottom: 5px;
        padding-left: 10px;

        a{
          font-weight: bold;
          font-size: $header_navigation_font_size;
          text-transform: uppercase;          
        }
      }
    }
  }

  nav #main-nav-bar {
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 20px;
    border-bottom: 1px solid lighten($body_text_color, 60);
    padding-bottom: 6px;

    li {
      
      a {
        font-size: $horizontal_navigation_font_size;
        padding: 5px;
      }

      &:first-child {
        a {
          padding-left: 0
        }
      }

      &#link-to-cart {
        float: right;
        padding-left: 24px;
        background: url("cart.png") no-repeat left center;

        &:hover {
          border-color: $link_text_color;

          .amount {
            border-color: $link_text_color;
          }
        }

        a {
          font-weight: normal;
          font-size: $horizontal_navigation_font_size;
          color: $link_text_color;

          .amount {
            font-size: $horizontal_navigation_font_size + 2;
            font-weight: bold;
            border-left: 1px solid lighten($body_text_color, 60);
            padding-left: 5px;
            padding-bottom: 5px;
          }
        }
      }
    }
  }

  nav#taxonomies {
    .taxonomy-root {
      text-transform: uppercase;
      border-bottom: 1px solid lighten($body_text_color, 60);
      margin-bottom: 5px;
      font-size: $main_navigation_header_font_size;
    }

    .taxons-list {
      padding-left: 20px;
      margin-bottom: 20px;
      list-style: disc outside;

      li {
        a {
          font-size: $main_navigation_font_size
        }
      }
    }
  }

  #breadcrumbs {
    border-bottom: 1px solid lighten($body_text_color, 60);
    padding: 3px 0;
    margin-bottom: 15px;

    li {
      a {
        color: $link_text_color;
      }
      span {
        text-transform: uppercase;
        font-weight: bold;
      }
    }
  }

  /*--------------------------------------*/
  /* Flash notices & errors
  /*--------------------------------------*/
  .flash {
    padding: 10px;
    color: $layout_background_color;
    font-weight: bold;
    margin-bottom: 10px;

    &.notice {
      background-color: $link_text_color;
    }
    &.success {
      background-color: $c_green;
    }
    &.error {
      background-color: $c_red;
    }
  }

  .errorExplanation {
    @extend .flash.error;
    @extend .flash;

    p {
      font-weight: normal;
    }

    ul {
      list-style: disc outside;
      margin-left: 30px;

      li {
        font-weight: normal;
      }
    }
  }

  /*--------------------------------------*/
  /* Main search bar
  /*--------------------------------------*/
  #search-bar {
    display: block;
  }

  /*--------------------------------------*/
  /* Products
  /*--------------------------------------*/
  [data-hook="product_show"] {
    h6 {
      font-size: $product_detail_title_font_size;
    }
  }

  .product-section-title {
    text-transform: uppercase;
    margin-top: 15px;
  }

  .add-to-cart {
    margin-top: 15px;

    input[type="number"] {
      margin-right: 3px;
      width: 60px;
      vertical-align: middle;
      padding: 5px;
      height: 35px;
    }
  }

  span.price {
    font-weight: bold;
    color: $link_text_color;

    &.selling {
      font-size: $product_detail_price_font_size;
    }
    &.diff {
      font-weight: bold;
    }  
  }

  .taxon-title {
    font-size: $product_list_header_font_size;
  }

  .search-results-title {
    font-size: $product_list_search_font_size;
  }

  ul#products {
    &:after {
      content: " ";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
    }

    li {
      text-align: center;
      font-weight: bold;
      margin-bottom: 20px;

      a {
        display: block;

        &.info {
          height: 35px;
          margin-top: 5px;
          font-size: $product_list_name_font_size;
          color: $product_link_text_color;
          border-bottom: 1px solid lighten($body_text_color, 60);
          overflow: hidden;
        }
      }

      .product-image {
        border: 1px solid lighten($body_text_color, 60);
        padding: 5px;        
        min-height: 110px;
        background-color: $product_background_color;

        &:hover {
          border-color: $link_text_color;
        }

      }

      .price {
        color: $link_text_color;
        font-size: $product_list_price_font_size;
        padding-top: 5px;
        display: block;
      }
    }
  }

  .subtaxon-title {
    text-transform: uppercase;

    a {
      color: $link_text_color;
    }    
  }

  .search-results-title {
    text-transform: uppercase;
    border-bottom: 1px solid lighten($body_text_color, 60);
    margin-bottom: 10px;
  }

  #sidebar_products_search {
    .navigation {
      margin-bottom: 15px;
    }

    span.category {
      display: block;
      font-weight: bold;
      text-transform: uppercase;
      border-bottom: 1px solid #ededed;
      margin-bottom: 5px;
      color: $link_text_color;
      font-size: $base_font_size + 2;
      line-height: 24px;
    }
  }

  .taxon {
    overflow: hidden;
  }

  #product-images {
    #main-image {
      text-align: center;
      border: 1px solid lighten($body_text_color, 60);
      background-color: $product_background_color;
    }
    #product-thumbnails {
      li {
        background-color: $product_background_color;
      }
    }
  }

  #product-description {
    .product-title {
      border-bottom: 1px solid lighten($body_text_color, 60);
      margin-bottom: 15px;
      color: $product_title_text_color;
      font-size: $product_detail_name_font_size;
    }

    [data-hook="product-description"] {
      font-size: $product_detail_description_font_size;
      color: $product_body_text_color;
    }
  }

  #product-thumbnails {
    margin-top: 10px;

    li {
      margin-right: 6px;
      border: 1px solid lighten($body_text_color, 60);

      img {
        padding: 5px;
      }

      &:hover, &.selected {
        border-color: $link_text_color;
      }
    }
  }

  #product-properties {
    border: 1px solid lighten($body_text_color, 60);
    padding: 10px;
  }

  #product-variants {
    ul {
      li {
        padding: 5px;
      }
    }
  }

  #cart-form {
    #inside-product-cart-form:after {
      content: " ";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
    }
  }

  /*--------------------------------------*/
  /* Checkout
  /*--------------------------------------*/
  .progress-steps {
    list-style: decimal inside;
    overflow: auto;

    li {
      float: left;
      margin-right: 20px;
      font-weight: bold;
      text-transform: uppercase;
      padding: 5px 20px;
      color: lighten($body_text_color, 20);

      &.current-first, &.current {
        background-color: $link_text_color;
        color: $layout_background_color;
      }

      &.completed-first, &.completed {
        background-color: lighten($body_text_color, 60);
        color: $layout_background_color;

        a {
          color: $layout_background_color;
        }

        &:hover {
          background-color: $link_text_color;
          color: $layout_background_color;

          a {
            color: $layout_background_color;

            &:hover {
              color: $layout_background_color !important;              
            }
          }
        }
      }
    }
  }

  #checkout-summary {
    text-align: center;
    border: 1px solid lighten($body_text_color, 60);
    margin-top: 23px;
    margin-left: 0;

    h3 {
      text-transform: uppercase;
      font-size: $base_font_size + 2;
      border-bottom: 1px solid lighten($body_text_color, 60);
    }

    table {
      width: 100%;

      tr[data-hook="item_total"] {
        td:last-child {
          strong {
            @extend span.price;
          }
        }
      }

      tr[data-hook="order_total"] {
        border-bottom: none;
      };

      #summary-order-total {
        @extend span.price;
        font-size: $base_font_size + 2;
      }      
    }
  }

  #billing, #shipping, #shipping_method, 
  #payment, #order_details, #order_summary {
    margin-top: 10px;
    border: 1px solid lighten($body_text_color, 60);
    padding: 10px;

    legend {
      text-transform: uppercase;
      font-weight: bold;
      font-size: $base_font_size + 2;
      color: $link_text_color;
      padding: 5px;
      margin-left: 15px;
    }
  }

  #order_details, #order_summary {
    padding: 0;

    div:last-child {
      margin-left: -1px;
    }

    .payment-info {
      .cc-type {
        img {
          vertical-align: middle;
        }
      }
    }

    td.price, td.total {
      span {
        @extend span.price;
      }
    }

    table tfoot {
      text-align: right;
      color: lighten($body_text_color, 20);

      tr {
        border: none;
      }

      &#order-total {
        text-transform: uppercase;
        font-size: $base_font_size + 4;
        color: $body_text_color;

        tr { 
          border-top: 1px solid lighten($body_text_color, 60);
          
          td {
            padding: 10px; 
          }
        }
      }
    }

    .steps-data {
      div.columns {
        padding: 5px;
        margin: 0;

        &:first-child {
          margin-left: 10px;
        }
      }

      h6 {
        border-bottom: 1px solid lighten($body_text_color, 60);
        margin-bottom: 5px;
      }
    }
  }

  #shipping_method {
    p {
      label {
        float: left; 
        font-weight: bold;
        font-size: $base_font_size + 2;
        margin-right: 40px;
        padding: 5px;
      }
    }
  }

  p[data-hook="use_billing"] {
    float: right;
    margin-top: -18px;
    background-color: $layout_background_color;
    padding: 5px;
  }

  /*--------------------------------------*/
  /* Cart
  /*--------------------------------------*/
  table#cart-detail {
    width: 100%;
    tbody#line_items {
      tr {

        td[data-hook="cart_item_price"], td[data-hook="cart_item_total"] {
          @extend span.price;
          @extend span.price.selling;
        }
        td[data-hook="cart_item_quantity"] {
          .line_item_quantity {
            width: 40px;
          }
        }
        td[data-hook="cart_item_delete"] {
          .delete {
            display: block;
            width: 20px;
          }
        }
      }
    }
  }

  div[data-hook="inside_cart_form"] {
    .links {
      margin-top: 15px;
    }
    
    #subtotal {
      text-align: right;
      text-transform: uppercase;
      margin-top: 15px;

      span.order-total {
        @extend span.price;
      }
    } 
  }

  #empty-cart {
    margin-top: 15px;
    float: right;
  }

  /*--------------------------------------*/
  /* Account
  /*--------------------------------------*/
  #existing-customer, #new-customer, #forgot-password {
    h6 {
      text-transform: uppercase;
    }
  }

  #registration {
    h6 {
      text-transform: uppercase;      
    }

    #existing-customer {
      width: auto;
      text-align: left;
    }
  }

  #user-info {
    margin-bottom: 15px;
    border: 1px solid lighten($body_text_color, 60);
    padding: 10px;
  }

  /*--------------------------------------*/
  /* Order
  /*--------------------------------------*/
  #order_summary {
    margin-top: 0;
  }
  #order {
    p[data-hook="links"] {
      margin-left: 10px;
      overflow: auto;
    }
  }

  table.order-summary {
    tbody {
      tr {
        td {
          width: 10%;
          text-align: center;

          &:first-child {
            a {
              text-transform: uppercase;
              font-weight: bold;
              color: $link_text_color;
            }
          }
        }
      }
    }
  }

/* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {

  }

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
      padding-left: 10px;
      width: 758px;
    }
    footer#footer {
      width: 748px;
    }
    p[data-hook="use_billing"] {
      margin-top: -15px;
    }    
  }

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {        

    html {
      -webkit-text-size-adjust: none;
    }

    #order_details .steps-data div.columns, 
    #order_summary .steps-data div.columns {
      padding: 0;
      margin: 0;

      &:first-child {
        margin: 0
      }
    }

    nav#taxonomies {
      text-align: center;

      ul {
        padding-left: 0 !important;
        list-style: none !important;
      }
    }

    ul#nav-bar {
      text-align: center;
    }

    .steps-data div.columns {
      margin-bottom: 15px;
      text-align: center;
    }

    #order_details, #order {
      table[data-hook="order_details"] {
        width: 100%;
      } 
    }

    #update-cart {
      #subtotal, .links {
        width: 50%;
        float: left;
        text-align: left;
      }
      #subtotal {
        text-align: right;
      }
    }
  }

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {

    footer#footer {
      width: auto !important;
    }

    input, select {
      vertical-align: baseline !important;
    }

    figure#logo {
      text-align: center;
    }

    #link-to-login {
      display: block;
      text-align: center;
    }

    #search-bar {
      display: block;
      text-align: center;

      select {
        margin-bottom: 10px;
      }
    }

    ul#products {
      margin-left: 0;
      margin-right: -20px;

      li {
        width: 133px;
        margin-right: 10px;
      }
    }

    table#cart-detail, table[data-hook="order_details"] {
      tbody {
        tr {
          td[data-hook="cart_item_description"], td[data-hook="order_item_description"] {
            font-size: $base_font_size - 1;
            line-height: 15px;
            width: 100px;

            h4 {
              font-size: $base_font_size + 2;
              line-height: 17px;
              margin-bottom: 10px;
            }
          }
          td[data-hook="cart_item_price"], td[data-hook="cart_item_total"],
          td[data-hook="order_item_price"], td[data-hook="order_item_total"]  {
            font-size: $base_font_size !important; 
          }
          td[data-hook="cart_item_image"], td[data-hook="order_item_image"] {
            img {
              width: 70px;
            }
          }
        }
      }  
    }

  }


  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {
    
    .progress-steps li {
      padding: 0;
      margin: 0;
      width: 50%;

      span {
        display: block;
        padding: 10px 20px;
      }
    }

    #shipping_method p label {
      float: none;
      display: block;
      text-align: center;
      margin-right: 0;
    }

    p[data-hook="use_billing"] {
      float: none;
      margin-top: 0;
    }

    table#cart-detail, table[data-hook="order_details"] {
      tbody {
        tr {
          td[data-hook="cart_item_description"], td[data-hook="order_item_description"] {
            padding: 0 !important;
            text-indent: -9999px;

            h4 {
              display: none;
            }
          }
          td[data-hook="cart_item_image"], td[data-hook="order_item_image"] {
            img {
              width: 70px;
            }
          }
          td[data-hook="cart_item_price"], td[data-hook="cart_item_total"] {
            font-size: $base_font_size + 2 !important; 
          }
        }
      }  
    }

    table.order-summary {
      display: block; position: relative; width: 100%;

      thead { display: block; float: left; }
      tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
      thead tr { display: block; }
      th { display: block; }
      tbody tr { display: inline-block; vertical-align: top; }
      td { display: block; min-height: 1.25em; }
    }
    

    figure#logo {
      text-align: center;
    }

    #link-to-login {
      display: block;
      text-align: center;
    }

    #search-bar {
      display: block;
      text-align: center;

      select {
        margin-bottom: 10px;
      }
    }

    aside#sidebar {
      text-align: center;

      ul {
        padding-left: 0 !important;

        li {
          list-style-type: none;
        }
      }
    }

    ul#products {

      li {
        width: 142px;
        margin-right: 15px;

        &.secondary, &.omega {
          margin-right: 0;
        }
      }


    }

    #content {
      text-align: center;
    }
        
  }