/* =================================================================
    layout_classic.css
    For all classic templates.
   
    QSC MAIN LAYOUT CSS
    
	This file is comprised of mainly 4 parts:
   
	jello mold styles - this is the mion-width/max-width enabling code
	page wrapper styles - header, sidebars, footer, etc.
    forms
    search results
   ================================================================= */

/******************************************************************
    THIS IS A JELLO MOLD LAYOUT
     
        http://www.positioniseverything.net/articles/jello.html
     
    Several numbers are VERY important to the success of this layout.
    Rather than try to figure them all out on your own, use the generator:
     
        http://www.positioniseverything.net/articles/sidepages/pie-calc.php
     
    Then copy the top set of rules (body, #sizer, and #expander from the
        generated page and put them here.
 ******************************************************************/

/* RESETS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* /RESETS */

/* Jello -- start copying here * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
body {
	padding: 0 400px 0 400px;
	margin: 0;
	text-align: center;
}
		
#sizer {
	margin: 0 auto 0 auto;
	padding: 0;
	width: 83%;
	max-width: 400px;  /* version for IE is at the bottom of this style block
}

#expander {
	background: white;
	margin: 0 -400px 0 -400px;
	min-width: 800px; /* Critical Safari fix!
	position: relative;
}
*/

/* * * * * * Fixed Width * * * * * * */

body {
	padding:0px;
}

#sizer {
	max-width:none !important;
	width:auto !important;
}

#expander {
	margin:auto !important;
	min-width:0px !important;
	width: 780px !important;
}


/* Holly hack for IE \*/
* html #expander { height: 0; }
/* */

/* helps IE get the child percentages right. */
#wrapper1 { width: 100%; } 


/* * --- stop copying, but be sure to grab IE's max-width, just above the body-tag --- * * * * * * * * * * * * * * */
	

/* */
/* The above is a modified Holly hack for #expander, with zero substituted for the 
   usual 1% height value. Any % value on this element causes a horrendous IE bug! */
/* helps IE get the child percentages right. */
/*#page-wrap { width: 99%; }*/

#wrapper1 {
    position: relative;
    font-size: .9em; /* set global font-size here */
	min-width: 0;
}
    
    /* this positioning may be needed for IEwin if page is to contain positioned elements */
#wrapper2 {
    position: relative; /* extra insurance against bugs in IEwin */
	min-width: 0;
}

/****************** Main Page Structure *****************/
/* To modify the side column widths and the col divider widths, the values that are 
marked "critical" and also refer to the desired mod MUST be changed as a group. */
.outer,
body.col3 .outer {
	/* WARNING: borders affect the critical values below, so use them with that in mind.*/ 
    /* border-left: 1px solid #f90;  */
    /* border-right: 1px solid #f90; */
	/*** Critical left divider dimension value ***/
    /*** Critical right divider dimension value ***/
    margin-left: 170px; /*** Critical left col width value ***/
    margin-right: 170px; /*** Critical right col width value ***/
}
/* values for 1 and 2 column layouts */
body.col1 .outer {
    margin-left: 0; margin-right:0;
}
body.col2left .outer {
    margin-right: 0;
}
body.col2right .outer {
    margin-left: 0;
}

.float-wrap {
    float: left;
    width: 100%;
}

.center {
    float: right;
    width: 100%;
}

.left {
    float: left;
    position: relative; /* Needed for IE/win */
    width: 165px; /*** Critical left col width value ***/
    margin-left: -170px; /*** Critical left col width value ***/
    /*** Critical left divider dimension value ***/
}

body.col1 .left { display:none; }
body.col2right .left { display:none; }

.right {
    float: right;
    position: relative; /* Needed for IE/win */
    width: 165px; /*** Critical right col width value ***/
    margin-right: -170px; /*** Critical right col width value ***/
    /*** Critical right divider dimension value ***/
    margin-left: 3px; /*** Critical right divider dimension value ***/
}

body.col1 .right { display:none; }
body.col2left .right { display:none; }

.centerbox {
    font-weight: normal;
    text-align: left;
    overflow: visible;
    width: 100%;
    /* padding-bottom: 250px; */
}

.container-right {
    padding-bottom: 80px;
}

/************** Spacing Controls for various column contents ***************/
.textpadder,
.content {
	padding-top: 0px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

/* Prevents long urls from breaking layout in IE, must 
be hidden in a conditional comment for CSS to validate */
img {
    max-width: 100%;
}

#wrapper1:after,
#wrapper2:after,
.container-left:after,
.container-right:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* prevents oversize images from breaking layout in browsers that support max-width */
/* \*/
* html #wrapper1,
* html #wrapper2,
* html .outer a,
* html .container-left,
* html .container-right,
* html .outer,
* html h2,
* html .sidenav li a {
    height: 1%;
}

/* Holly hack */ /*** Variance fixes for IEwin ***/ /*\*/
* html .outer p {
    margin-right: -6px;
}

/* */ /**************** Utility Rules *******************/ /*\*/ /*/
.sidenav a:hover {position: relative;}
/* this fixes an IEmac hover bug in the left column, hidden from other browsers */
.brclear { /* Use a break with this class to clear float containers */
    clear: both;
    height: 0;
    margin: 0;
    font-size: 1px;
    line-height: 0em;
}

/* =================================================================
   PAGE WRAPPER CSS
   ================================================================= */
html {
	font-size: 100%;
}
body {
    font-size: .75em;
}

input, textarea {
	padding: 1px;
}

/*************** Header and Footer elements *****************/
.header {
    padding: 5px 0;

}

#header-content {
	/* overflow: hidden; 
	word-wrap: break-word;*/
}

.header h1 {
    font-size: 150%;
    margin: 0;
    padding: 15px;
}

.header span {
}

.footer {
    font-weight: bold;
    font-size: 1em;
    clear: both;
    position: relative;
    margin: 10px;
}

.footer-section {
	text-align:center;
}

/************** Top & Bottom Nav **************/
.navigation1,
.navigation2 {
    height: auto;
    margin-bottom: 2px;
}

.navigation1 ul,
.navigation2 ul {
    margin: 0 0;
    height: auto !important; height: 1%; /* fix for IE to contain floats */
    padding-left: 15px;
	list-style-type: none;
}

/*.navigation2 {
	float: left;
}*/

/* fix for firefox, safari to contain floats */
.navigation1:after,
fieldset:after,
.navigation1 ul:after,
.navigation2 ul:after {
    content: ".";
    display: block;
    visibility: hidden;
    height: 0;
    font-size: 1px;
    clear: both;
}

fieldset:after,
.navigation1 ul, 
.navigation2 ul 
{ display: inline-block; }
 
/* Hides from IE-mac \*/
* html fieldset,
* html .navigation1 ul, 
* html .navigation2 ul
{ height: 1%; }
.navigation1 ul,.header .quick-search { display: block; }
/* End hide from IE-mac */

.navigation1 ul li,
.navigation2 ul li {
    float: left;
    width: auto !important; width: 5px; /* fix for IE */
    white-space: nowrap;
}

.navigation1 ul li a,
.navigation2 ul li a {
    margin: 0 0 0 1px;
    text-decoration: none;
    display: block;
    padding: 0 10px;
}

.navigation1 ul li a:hover,
.navigation2 ul li a:hover {
    text-decoration: none;
}

.navigation2 {
    text-align: center;
	margin: 0 auto;
}

/************** Sidebars *************/


.main-content {
    display: block;
}

.container-left .textpadder {
    padding: 0;
    text-align: left;
	padding-bottom: 40px;
}

.container-right .textpadder {
    padding: 0 0 80px 0;
    text-align: left;
	padding-bottom: 40px;
}

/********** Sidebar blocks ***********/
.container-left .content-block,
.container-right .content-block {
    padding: 3px 5px;
    margin: 0 5px 10px;
}

.container-left .content-block li,
.container-right .content-block li {
    
}

.container-left .content-block h3,
.container-right .content-block h3 {
    margin: 0;
    padding: 0;
}
.container-left .content-block h4,
.container-right .content-block h4 {
    margin: 2px 0;
}

.container-left .content-block h4 a,
.container-right .content-block h4 a {
    text-decoration: none;
}

/*
.container-left .quick-search,
.container-right .quick-search {
	margin: 0;
	padding: 5px;
	padding-bottom: 10px;
	padding-top: 5px;
	text-align: center;
}

.container-left .quick-search li,
.container-right .quick-search li {
    margin: 0;
}
*/

/********* Featured Products *********/
#featured-products .shortdescription {
    margin: 5px 0;
}

.options {
    text-align: right;
}

.price {
    margin: 3px 0;
}

#featured-products .smallimage,
#categories .smallimage {
}

/*********** Categories *************/

.category .shortdescription {
    margin: 5px 0;
}

/*********** Page Blocks ************/
dt, dd {
    text-align: left;
}

dd.options,
dd.prices {
	text-align:right;
}

.content-block {
}

.content-block:after {
    content: ".";
    display: block;
    visibility: hidden;
    height: 0;
    font-size: 1px;
    clear: both;
}
/* now, for IE */
* html .content-block {
    height: 1%;
}
.content-block table a {
    text-decoration: none;
}

.content-category .description,
.content-product .description {
    text-align: left;
}

/************************************
 Home
 ************************************/
.welcome {
    font-weight: normal; 
    margin-bottom: 20px;
	height: 1%;
}

.welcome:after {
	clear:both;
	content:".";
	display:block;
	height:0pt;
	visibility:hidden;
}

.welcome img {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

/************************************
 Form Presentation
 
 based on guide here:
 http://gdstyleguide.intranet.gdg/style/index.php?id=41
 
 ************************************/
form.page-form {
	font-size: .9em;
	font-weight: normal;
	margin-bottom: 20px;
}

form h3 { padding: 0; margin:10px 0 5px 0; }

.form-section {
	margin-top: 20px;
}

#searchAdvancedForm .form-section { clear: left; }

.form-item {
	margin-bottom: 10px;
}

.categories .form-item {
	/*width: 32% !important; width: 30%;
	float: left;
	margin-right: 1%;*/
}

.categories .form-item label {
	padding-left: 1.5em;
	padding-right: 1em;
}

.categories .form-item input {
	/* margin-left: -1.5em; */
}

.form-row-start {
	clear: left;
}

fieldset {
	padding: 10px;
	margin-bottom: 20px;
	font-weight: normal;
}

legend {
	font-weight: bold;
	font-size: 1.1em;
}

label {
	display: block;
}

fieldset .no-form-list {
	margin-bottom: 10px;
}

.required { color: #cc0000; }

div.required { margin-bottom: 5px; }

.state { float: left; width: 7em; }
.zip { float: left; }

.buttons { text-align:right; font-size: 1.1em;}

/************************************
 Products Search Results Presentation
 ************************************/

.search-result-controls p {
	margin-bottom: 5px;
}

.search-result-controls strong {
	font-weight: bold;
}

.search-control {
	float: left;
	padding-left:10px;
}

.search-results .content-product {
    padding: 4px;
    margin-bottom: 10px;
    font-weight: normal;
	clear:left;
}

.search-results .content-product .largeimage { display:none; }
.search-results .content-product .smallimage img {
    float: left;
    max-width: 75px;
    border: none;
}

.search-results .content-product dd {
    display: block;
    margin-left: 80px;
}

.search-results .content-product .content-product-header {
    margin: -4px -4px 10px;
    padding: 3px;
}

.search-results .content-product .content-product-header a {
    text-decoration: none;
}

.search-results .content-product dd ul li { /** reset values set in ol li // this is because IE does not support the > selector. Grr. **/
    float: none;
    margin: 0;
    width: auto;
}

.search-results .content-product .options ul {
    list-style-type: none;
    padding: 0; margin: 0;
}

.search-results .content-product dd.options .list,
.search-results .content-product dd.options .adj,
.search-results .content-product dd.options .btn
{ display: none; }

a.search-result-button {
    float: right;
    font-weight: normal;
}

.upsell-group .price-col {
	/* word-wrap: break-word; / IE-only, but fixes ugly layout bug */
}

.upsell-group table {
	table-layout: fixed;
	overflow: auto;
}

div.featured-item .strike,
div.product-detail .strike,
dl.content-product .strike {
	text-decoration:line-through;
}

.hidden {
	display: none;
}

/* categories lists */
ol#categories li {
	line-height: 1.2;
}

#siteseal {
	text-align: center;
	margin-top: 10px;
}