/* =================================================================
    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 img,h1, span,
html, body, div,  applet, object, iframe,
 h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, 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 .content,
* 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;
}