@charset "UTF-8";
/* Define constants for the application and to configure the blueprint framework. */
/* ===== Compass Imports ===== */
/* DO NOT include Blueprint here. We are using Susy for the grid, and if Blueprint is here, it will mess things up */
/* @import "compass/css3/columns" */
/* @import "compass/css3/hyphenation"; */
/* Needed for the link-colors() function */
/* Needed for the horizontal-list() function */
/* When remembering whether or not there's a hyphen in white-space is too hard */
/* Use pie-clearfix when there is no width set ont the element to avoid edge cases */
/* Use to calculate color legibility: http://compass-style.org/reference/compass/utilities/color/contrast/ */
/* Other interesting functions:
	@import "compass/utilities/color/contrast";
		detailed here: http://compass-style.org/reference/compass/utilities/color/contrast/
		Used to pass two colors into a get out the most readable color.
		Good for situations where we dont want to create a new color,
		but be sure that colors from variables are always going to be readable
*/
/* ===== Grid ===== */
/*
 * Susy: Un-obtrusive grids for designers
 * By: Eric A. Meyer and OddBird
 * Site: susy.oddbird.net
 */
/* Settings  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 * Susy & Compass use HTML hacks to support IE 6 and 7. You can turn that on or off.
 * We are using Susy 1.0. Update your GEM file by deleting the old an downloading the new.
 */
/* ===== Variables ===== */
/* Colors */
/* Typography */
/* True here means that all computed values will be in EMs */
/* Allows the adjust-font-size-to and lines-for-font-size mixins to round to the nearest half line height to avoid large spacing between lines. */
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
/* Useful to set this here, but don't echo it anywhere. Used in calculations */
	/*
		Compass will convert the font sizes from px to em and fit it into the vertical rhythm automatically with the necessary margin
		A neat trick, for sure. More on using the vertical rhythm properties and mixins: http://compass-style.org/reference/compass/typography/vertical_rhythm/

		Quick Reference:
		+padding-leader(1) – Adds $base-line-height padding to the top of an element.
		+padding-trailer(1) – Adds $base-line-height padding to the bottom of an element.

		+margin-leader(1) – Adds $base-line-height margin to the top of an element.
		+margin-trailer(1) – Adds $base-line-height margin to the bottom of an element.

		+adjust-font-size-to(XXpx) – Changes the font-size to the value. Can also use a multiplier (see next example).
		+adjust-leading-to(2) – Changes the line-height to 2 * $base-line-height. Can also use a px value.

		Note: The line height is relative to the constant $base-line-height.
		The number you specify for the leader, trailer and leading will be multiplied by the constant, then converted to its relative value in ems.
		Don’t worry about nested elements etc, Compass will do the maths for you :)
	*/
/* Defaults */
/* Shorthand for a set of useful text/line-height resizing functions. easier to remember... */
/* Easy little function to do the math of pixel to EM conversion for us. Needs a base-font-size set in _base.scss */
/*
@mixin pe-border( $width: 1px, $style: solid, $color-top: none, $color-right: none, $color-bottom: none, $color-left: none ) {
    @if $color-top != none
        { border-top: $width $style $color-top; }
    @if $color-right != none
        { border-right: $width $style $color-right; }
    @if $color-bottom != none
        { border-bottom: $width $style $color-bottom; }
    @if $color-left != none
        { border-left: $width $style $color-left; }
}
*/
/* 
 * Cross browser method to apply word-breaking and hyphenation (where supported) 
 * Should be able to use the built-in Compass method, hyphenation(), but the library won't load right now
 */
/* Keep this in all mix-in files if you can. Useful stuff */
/* Letterpress Type Effect - needs to be tested */
/* Manage our preferred reset as a Mix-in instead of replying on Compass or Blueprint */
/* Add in the HTML5 Boilerplate rules for print (generic). Modify as needed. */
/* ! Slideshows - - - */
/*<div id="homepage-slideshow" class="flex-slideshow home-slideshow">
    <div class="flex-viewport" style="overflow: hidden; position: relative; "> // Dynamically added
        <ul class="slides">
            <li class="slide-container slide-0 flex-active-slide">
                <figure>
                    <div class="frame-wrapper">
                        <img src="/media/slides/websize_library_Zack_Altschuler.jpg" alt="Slide #3 Library">
                    </div>
                    <figcaption class="caption-wrapper">
                        <p>Library. Student Photographer: Zack Athschuler</p>
                    </figcaption>
                </figure>
            </li>
        </ul>
    </div> // Dynamically added wrapper
</div>*/
/* - - - Larger than 760px - - - */
/* - - - Larger than 980px - - - */
/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */
/* Browser Resets
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} */
/* FlexSlider Necessary Styles
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;} */
/* Clearfix for the .slides element */
.slides:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

html[xmlns] .slides {
  display: block;
}

* html .slides {
  height: 1%;
}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you include js that eliminates this class on page load */
.no-js .slides > li:first-child {
  display: block;
}

/* FlexSlider Default Theme
.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
  .loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px} */
/* Direction Nav
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(../img/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;} */
/* Control Nav
.flex-control-nav {width: 100%; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  .flex-direction-nav .flex-next {opacity: 1; right: 0;}
} */
/*
 *  Structural CSS styles and Media Queries for responsive design
 *  NOTICE- WinMobile does not support media queries IN CSS. Only in HTML!

    Examples of common screen sizes... pick the best breakpoints based on the design, but keep these in mind.

    iPad = 768 x 1024
    iPhone 4= 640 x 940
    iPhone 3= 320 x 480
    Kindle Fire = 1024×600, though in portrait mode it uses our 768 layout.
    Kindle2 = 600 x 800 (582 x 782)
    Kindle DX = 824 x 1200
    Barnes & Noble Nook = 600 x 800
    BeBook Neo = 600 x 800
    Sony Touch = 600 x 800

 * Default rules for devices at 1024px. These rules build on or change previous rules.
 * NOT encased in a media query, as we want these rules to be the default in older IE browsers
 */
/* === Local Mixins === */
#user-links, #user-links ul li, #secondary-links a, #info-links ul a, #copyright, #footer-links a {
  border: none;
  clear: none;
  display: auto;
  padding: 0;
  text-align: left;
}

body {
  /* The values below represent 81.25% of 16px = 13px, and 1.6155 line height, or ~ 21px */
  font: normal 81.25%/1.6155 "Averia Serif Libre", Times, serif;
  color: #444;
  padding: 0;
  text-rendering: optimizeLegibility;
}

.container {
  margin: 0 20px;
}

#user {
  padding: 0;
}

#logo {
  float: left;
  margin: .75em auto .75em .75em;
}

.skip {
  display: none;
}

#user-links {
  clear: both;
  display: block;
  margin: -10px 1em 1em;
  text-align: center;
}
#user-links li {
  display: inline-block;
}
#user-links label {
  display: block;
  margin-right: 0.5em;
  padding: 0 10px;
}
#user-links ul {
  margin-bottom: 0;
}
#user-links ul li {
  border-right: 1px solid #999;
  display: inline-block;
  line-height: 1em;
  margin-right: -0.25em;
  padding: 0 10px;
}
#user-links ul li:last-child {
  border-right: 0 none;
  margin-right: 0;
}
#user-links ul li {
  border-right: 1px solid #666;
}
#user-links label, #user-links input, #user-links a.button, #user-links a {
  width: auto;
}
#user-links input:not(.button) {
  display: inline;
  margin: 0 auto .25em 0;
}
#user-links input[type='submit'] {
  display: inline-block;
}

#secondary-links {
  display: block;
  margin: 1em 1em 1em 0;
  text-align: left;
}
#secondary-links ul {
  margin-bottom: 0;
  text-align: center;
}
#secondary-links ul li {
  border-right: 1px solid #999;
  display: inline-block;
  line-height: 1em;
  margin-right: -0.25em;
  padding: 0 10px;
}
#secondary-links ul li:last-child {
  border-right: 0 none;
  margin-right: 0;
}
#secondary-links ul li {
  border-right: 1px solid #666;
}
#secondary-links ul li#usa {
  background: #555;
  border-right: none;
  margin-right: 5px;
  padding: 3px;
  position: absolute;
  bottom: 0;
}
#secondary-links ul li#usa a {
  border: 1px dashed #999;
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
  display: block;
  font-size: 0.78571em;
  line-height: 1.90909em;
  height: 2em;
  letter-spacing: 0.1em;
  line-height: 2em;
  padding: 3px 8px;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}
#secondary-links ul li:last-child {
  margin-right: 0;
  padding: 0 0 0 10px;
}
#secondary-links a {
  color: #E8E5DA;
}
#secondary-links a:hover {
  text-decoration: underline;
}

#primary-links {
  -moz-box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.75), inset 0px 20px 0px rgba(255, 255, 255, 0.1);
  -webkit-box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.75), inset 0px 20px 0px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.75), inset 0px 20px 0px rgba(255, 255, 255, 0.1);
  padding: 0.5em 0;
}
#primary-links ul.level-one {
  margin-bottom: 0;
  max-width: 1000px;
}
#primary-links ul.level-one li {
  border-right: 1px solid #999;
  display: inline-block;
  line-height: 1em;
  margin-right: -0.25em;
  padding: 0 10px;
}
#primary-links ul.level-one li:last-child {
  border-right: 0 none;
  margin-right: 0;
}
#primary-links ul.level-one > li {
  border: none;
  border-right: 2px solid rgba(0, 0, 0, 0.25);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 0 4px;
}
#primary-links ul.level-one > li > a {
  display: block;
}
#primary-links ul.level-one > li:hover > a {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}
#primary-links ul.level-one > li:hover ul.level-two {
  left: 0;
  transition-delay: .25s;
}
.no-touch #primary-links ul.level-one li {
  padding: 0 4px;
}
#primary-links ul.level-two {
  background: #fff;
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  font-size: 0.85714em;
  line-height: 1.75em;
  text-align: left;
  min-width: 100%;
  z-index: 1000;
  transition: all 0s ease;
}
#primary-links ul.level-two li {
  border-right: none;
  border-bottom: 1px solid #eee;
  display: block;
  margin-right: 0;
  padding: 0;
  white-space: nowrap;
}
#primary-links ul.level-two li a {
  display: block;
  padding: 0.5em;
}
#primary-links ul.level-two li a:hover {
  background: #F8F5EA;
}

#info-bar {
  text-align: left;
}

#mobile-search {
  display: none;
}

#site-search {
  display: inline-block;
  width: 50%;
}
#site-search form {
  padding: 0;
}
#site-search form .site-search-field {
  width: 75%;
  font-family: "Archivo Narrow", Arial, sans-serif;
  font-size: 1.75em;
  padding: .44em .5em;
  font-weight: normal;
}
#site-search form .button {
  width: 50px;
  height: 50px;
  font-size: 2em;
  line-height: 1.5em;
  font-family: "icomoon";
  font-weight: normal;
}
#site-search .button {
  display: inline-block;
}

#contact-phone {
  float: right;
}

#page {
  padding: 2em 0;
}

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

#site-info {
  font-size: 0.78571em;
  line-height: 1.90909em;
  clear: both;
  display: block;
  padding: 15px 0;
}

#info-links ul {
  margin-bottom: 0;
}
#info-links ul li {
  border-right: 1px solid #999;
  display: inline-block;
  line-height: 1em;
  margin-right: -0.25em;
  padding: 0 10px;
}
#info-links ul li:last-child {
  border-right: 0 none;
  margin-right: 0;
}

#copyright {
  text-align: center;
}

#footer-links ul {
  border-left: 1px solid #555;
  display: inline-block;
  vertical-align: top;
  width: 33%;
  margin:0 0 20px 0;
}
#footer-links li {
  margin-bottom: 0.2em;
  margin-left: 13px;
}
.no-touch #footer-links li a {
  height: inherit;
  line-height: inherit;
}
#footer-links li.section {
  /* border-bottom: 1px solid #333; */
  font-size: 1.4em;
  line-height: 1.3125em;
  margin-right: 5px;
  margin-bottom: 0.25em;
  margin-left: 5px;
  padding: 5px 8px 0;
}

#mobile-footer-links {
  display: none;
}

#signup {
  display: block;
}
#signup .button {
  display: inline-block;
}

a.button,
a.price-button,
a.button.cancel,
input[type="submit"] {
  display: inline-block;
  width: auto;
}

.section-header h1 em, .section-header h2 em, .group-header h1 em, .group-header h2 em {
  display: inline;
}

.filter-category li {
  font-size: 0.71429em;
  line-height: 2.1em;
  line-height: 1.3em;
  padding: 0.4em 0 0.4em 1.6em;
}
.filter-category input[type='checkbox'] {
  height: auto;
  width: auto;
}

.filters {
  padding: 10px;
}

.category-products .feature {
  border-top: 1px solid #ccc;
}
.category-products .feature:nth-child(1) {
  border-top: 0;
}
.category-products .feature-thumb-container {
  float: left;
  padding: 1em 2em;
}
.category-products .feature-description {
  display: table-cell;
  padding: 1em 0;
  vertical-align: top;
}

.products-group {
  padding: 0 10px;
}

.view-cat, .add-list, .reply {
  float: right;
}

.more, .update, .remove {
  float: right;
}

.view-cat {
  display: block;
}

.secondary-products .products-group {
  float: left;
  width: 50%;
}

#product-img-viewer,
#product-description,
#product-specs {
  clear: left;
  float: left;
  width: 48%;
}

#product-details {
  clear: none;
  float: right;
  width: 48%;
}

.product-list-group td,
.product-list-order td {
  display: table-cell;
}
.product-list-group td a.button,
.product-list-order td a.button {
  display: block;
}
.product-list-group td a.button.approve, .product-list-group td a.button.reorder,
.product-list-order td a.button.approve,
.product-list-order td a.button.reorder {
  margin-right: 1px;
}

.product-list-group td {
  width: 200px;
}

table#quote-items td:first-child {
  text-align: center;
}
table#quote-items td {
  border: 1px solid #999;
}
table#quote-items td span.quote-product-name {
  font-weight: bold;
  font-size: 1.1em;
}
table#quote-items td .remove-product {
  cursor: pointer;
}
table#quote-items .readmore {
  text-decoration: underline;
  font-style: italic;
}
table#quote-items p {
  margin-bottom: 0;
}

.add-product-form a#add-custom {
  float: right;
}

#add-custom-project-form-container {
  display: none;
}

#lookup-results {
  background: white;
  overflow: scroll;
  width: 400px;
  height: 300px;
  position: absolute;
  display: none;
}
#lookup-results li.lookup-result {
  cursor: pointer;
}

a.button.accept {
  float: right;
}

h1 {
  font-size: 3em;
  line-height: 1.27273em;
  line-height: 1.2em;
  letter-spacing: -0.5px;
}

.sitemap_list li {
  float: left;
  margin-right: 2%;
  width: 48%;
}

.scroll.back {
  left: -20px;
}
.scroll.ahead {
  right: -20px;
}

/* ! ===== Breakpoint 775px ===== */
@media (min-width: 775px) {
  #site-search,
  #contact-phone {
    width: 50%;
  }

  #contact-phone {
    float: right;
  }
  #contact-phone a {
    display: inline;
  }

  #usa {
    margin-top: 10px;
    display: inline-block;
  }

  .category-intro img {
    margin: 0;
    max-height: 300px;
  }

  .category-img-container {
    display: block;
    float: left;
    margin: 0 30px 2em 0;
    max-width: 370px;
  }

  .category-description {
    display: table-cell;
    margin: 0;
    max-width: 500px;
    padding: 1em 0;
  }

  .category-products {
    float: right;
    width: 80%;
  }

  .product-list #page .container {
    margin: 0 auto;
  }

  .filters {
    float: left;
    padding: 0;
    width: 23%;
  }

  #filtered-content {
    float: right;
    width: 100%;
  }

  .products-group {
    padding: 0;
  }

  .product-list-group td a.button.approve, .product-list-group td a.button.reorder,
  .product-list-order td a.button.approve,
  .product-list-order td a.button.reorder {
    margin-right: 1px;
  }

  .sitemap_list li {
    width: 30%;
  }
}
/* ! ==== Breakpoint 850px ==== */
@media (min-width: 53.125em) {
  #user-links {
    clear: right;
    float: right;
    margin: -13px 0 0 0;
    text-align: left;
  }

  #secondary-links {
    clear: right;
    float: right;
  }

  #footer-links ul {
    width: 33%;
  }
}
/* ! ===== Breakpoint 920px ===== */
@media (min-width: 61.875em) {
  #product-img-viewer,
  #product-description,
  #product-specs {
    width: 432px;
  }

  .container {
    margin: 0 auto;
  }

  #logo {
    float: left;
    margin: 1em auto 1em 0;
  }

  #primary-links {
    -moz-box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.75), inset 0px 20px 0px rgba(255, 255, 255, 0.1);
    -webkit-box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.75), inset 0px 20px 0px rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.75), inset 0px 20px 0px rgba(255, 255, 255, 0.1);
  }

  #contact-phone label {
    display: inline;
  }

  #info-links {
    float: right;
  }

  #site-info p {
    margin-bottom: 0;
  }

  #copyright {
    float: left;
  }

  #slideshow {
    padding: 2em 2em 0 2em;
  }
  #slideshow .flex-slideshow {
    margin: 0 auto;
  }
  #slideshow .flex-slideshow figure {
    display: table-row;
  }
  #slideshow .flex-slideshow .frame-wrapper {
    width: 60%;
    display: table-cell;
  }
  #slideshow .flex-slideshow .caption-wrapper {
    padding: 2em 2.5em 2em 2em;
    width: 27%;
    display: table-cell;
  }
  #slideshow .flex-slideshow .flex-control-nav {
    margin: -39px 0 0 0;
    display: block;
    padding: .5em;
    text-align: right;
  }
  #slideshow .flex-slideshow .flex-direction-nav li a.flex-prev {
    left: -30px;
  }
  #slideshow .flex-slideshow .flex-direction-nav li a.flex-next {
    right: -30px;
  }
}
/* ! ===== Breakpoint 1235px =====     (Slidshow width (1220) + scrollbar width (15px))    */
@media (min-width: 81.25em) {
  #slideshow .flex-slideshow {
    width: 1220px;
  }
}
/* ! ===== Breakpoint 540px / 1130px =====  */
/* ! ===== Breakpoint 1100px ===== */
@media (min-width: 68.75em) {
  #signup p, #signup form, #signup input {
    display: inline-block;
    margin-bottom: 0;
  }

  .products {
    overflow: visible;
  }

  .item:hover .popup-info {
    display: block;
  }
}
/* ! ===== Breakpoint 2000px =====  */
@media (min-width: 125em) {
  /* For our super big iMac 27" monitors, why not make everything a little more readable */
}