/* 
STYLE.CSS
AUTHOR - metal@flat.com
DATE   - March, 2009
NOTES  - 
	This layout and stylesheet uses an em based configuration with a ratio of 1.0em => 10px
	Colors used:
	
	 
*/
/************************************************************************************************************/
/************************************************************************************************************/
/************************************************************************************************************/
/* ------------------------------------------------------------------------------------------------------- */
/* BODY ATTRIBUTES - this will zero things out and prep the font size for 'em' based relations */
/* ------------------------------------------------------------------------------------------------------- */

*::-moz-selection
{
	background-color: #eee;
}

*::selection
{
	background-color: #eee;
}

*
{
	outline: none;
}

html
{
	font-size: 100%; /* failsafe for IE6 */
	overflow-y: scroll;
}

body
{
	font-family: arial, verdana, helvetica, san-serif;
	font-size: 62.5%; /* this will render a default 16pt font as 10px ( 10px/16 * 100% = 62.5), thus 1em == 10px */
	margin: 0;
	padding: 0;
}

html > body
{
	font-size: 10px; /* ignored by IE6, recognized by Firefox, Safari, IE7, Opera */
}

/* this will zero out unwanted or expected borders and margins....unless specified later */
body, img, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, p, blockquote, table, tr, th, td
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
}

html, body
{
	height: 100%;
	background: #fff url('../img/') no-repeat bottom left fixed; */
color:#444;
}


/************************************************************************************************************/
/************************************************************************************************************/
/************************************************************************************************************/
/* ------------------------------------------------------------------------------------------------------- */
/* COMMON ELEMENTS */
/* ------------------------------------------------------------------------------------------------------- */

a, a:link, a:visited
{
	color: #444;
	text-decoration: none;
}

a:hover, a.on
{
	color: #444;
	text-decoration: underline;
}

a.nohover, a.nohover:link, a.nohover:hover, a.nohover:visited, a img, a:hover img
{
	background: transparent !important;
}

p
{
	font-size: 1.2em;
	line-height: 1.3em;
	margin-top: 0;
	margin-bottom: 0;
	color: #444;
}

small
{
	color: #aaa;
	font-size: 1.0em;
	text-transform: uppercase;
}

h1
{
	font-size: 2.1em;
	font-weight: normal;
	font-family: Arial;
	color: #444;
	margin-bottom: 1.5em;
	line-height: none !important;
}

h2
{
	font-size: 1.6em;
	font-weight: normal;
	font-family: Arial;
	color: #444;
	margin-bottom: 1.2em;
	line-height: none !important;
}

h3
{
	font-weight: normal;
	font-family: Arial;
	color: #444;
	margin-bottom: 0em !important;
	line-height: none !important;
}


/************************************************************************************************************/
/************************************************************************************************************/
/************************************************************************************************************/
/* ------------------------------------------------------------------------------------------------------- */
/* CONTENT AND LAYOUTS */
/* ------------------------------------------------------------------------------------------------------- */

.preload
{
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

.horizontal_rule
{
	clear: both;
	height: 0.1em;
	margin: 0em 1.0em;
	border-top: 0.1em solid #eee;
	overflow: hidden;
}

.horizontal_rule img
{
	height: 0.1em;
}


/* ------------------------------------------------------------------------------------------------------- */
/* BODY FOG & LOAD LAYER - for dynamic content */
/* ------------------------------------------------------------------------------------------------------- */
#body_fog
{
	/* hack for IE6 needed - background transparency */
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 100;
	height: 100%;
	width: 100%;
	background: url('../img/trans_white_90.png') repeat;
}

#load_layer
{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 200;
	height: 100%;
	width: 100%;
}

#load_layer .content
{
	position: relative;
	z-index: 202;
	width: 94.0em; /* becomes 980 with the 20 padding on the left and right */
	margin: 9.1em auto 0em auto;
	padding: 0em 2.0em;
}


/* ------------------------------------------------------------------------------------------------------- */
/* BODY CONTAIER - main wrapper
/* ------------------------------------------------------------------------------------------------------- */
#body_container
{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

html > body #body_container
{
	height: auto;
}

/* ------------------------------------------------------------------------------------------------------- */
/* BODY HEADER - logo and navigation
/* ------------------------------------------------------------------------------------------------------- */
#body_header
{
	position: relative;
	z-index: 2;
	height: 9.0em;
	width: 100%;
}

#body_header_inner
{
	width: 94.0em; /* becomes 980 with the 20 padding on the left and right */
	margin: 0 auto;
	padding: 0em 2.0em;
	height: 6.9em;
	min-height: 6.9em;
}

#body_header_logo
{
	width: 32.0em;
	margin-top: 4.0em;
	float: left;
}

#body_header_spacer
{
	/* there is a column of 160 next to the logo, before the navigation on the right */
	width: 16.0em;
	margin-top: 4.0em;
	float: left;
}

#body_header_logo_receipt
{
	width: 26.0em;
	margin-top: 4.0em;
}

#body_header_spacer_receipt
{
	/* there is a column of 160 next to the logo, before the navigation on the right */
	width: 20.0em;
	margin-top: 4.0em;
	float: left;
}

#body_header_navigation
{
	width: 46.0em;
	margin-top: 4.0em;
	float: left;
}

/* header logo */
#img_logo
{
	height: 1.6em;
	width: 26.5em;
	margin-top: -0.2em;
}

#header_product_search
{
	position: relative;
	top: -0.3em;
}

#product_search_input
{
	height: 1.8em;
	width: 11.0em;
	border: 0.1em solid #e5e5e5;
	border-bottom: 0 !important;
	float: left;
	overflow: hidden;
	text-align: left;
	padding: 0em 0.3em;
}

#product_search_button
{
	height: 2.1em;
	width: 2.7em;
	float: left;
}

input[type="text"].input_search, .input_search
{
	font-family: Arial;
	font-size: 10.5px;
	color: #999;
	width: 9.3em;
	height: 12.5pt;
	line-height: 9pt;
	margin: 0;
	padding: -0.5pt 0 -2.5pt 0;
	border: 0.1em solid #fff;
	outline: none !important;
}

/* header navigation */
.header_nav_left
{
	float: left;
}
.header_nav_left p
{
	line-height: 1.2em;
}

.header_nav_right
{
	float: right;
	text-align: right;
}


/* ------------------------------------------------------------------------------------------------------- */
/* BODY CONTENT - section breadcrumb nav, section nav on the left, and content container on the right
/* ------------------------------------------------------------------------------------------------------- */
#body_content
{
	position: relative;
	z-index: 3;
	width: 100%;
	margin-bottom: 4.0em; /* match the height of the footer to prevent an overlap on small windows */
	margin-bottom: 12.0em; /* add 40 to create a buffer */
}

#body_content_inner
{
	width: 94.0em; /* becomes 980 with the 20 padding on the left and right */
	margin: 0 auto;
	padding: 0em 2.0em;
}

#body_content_inner_email
{
	width: 94.0em; /* becomes 980 with the 20 padding on the left and right */
	margin: 0 auto;
	padding: 0em 2.0em;
}

#body_section_navigation
{
	/* first div in the body_content area */
	height: 2.0em; /* the interior of this changes from section to section, from 2 columns to 3, sometimes 4... */
	margin-bottom: 2.0em;
}

#body_section_content
{
 padding-top: 0.8em;
}

#content_left_navigation
{
	
	width: 16.0em;
	float: left;
	padding-top:0.3em;
}

#content_right_container
{
	width: 78.0em;
	float: left;
}


/* ------------------------------------------------------------------------------------------------------- */
/* BODY FOOTER - body footer, always floats to the bottom, never overlaps the content
/* ------------------------------------------------------------------------------------------------------- */
#body_footer
{
	position: absolute;
	z-index: 4;
	bottom: 0;
	height: 4.0em;
	width: 100%;
}

#body_footer_inner
{
	width: 94.0em; /* becomes 980 with the 20 padding on the left and right */
	margin: 0 auto;
	padding: 0em 2.0em;
}

#body_footer_navigation
{
	width: 94.0em;
	margin-top: 1.0em;
	padding-top: 0.2em;
	color: #999;
}

#body_footer_navigation *
{
	color: #999;
}



/* ------------------------------------------------------------------------------------------------------- */
/* LAYOUT COLUMNS & ADD ONS  */
/* ------------------------------------------------------------------------------------------------------- */
/* The layout totals 980, with an immediate padding of 20 on the left, yeilding a workarea of 960
/* That 960 is broken down into columns of 160; each area of the site varies in column use, some areas
/* using 2 columns - 320 - and others using 3 - 480. These classes help speed the build up.
*/
.column_160
{
	width: 16.0em;
	float: left;
}
.column_blog
{
	width:60em;
	float:left;
	text-align: right;
}
.column_200
{
	width: 20.0em;
	float: left;
}

.column_180
{
	width: 18.0em;
	float: left;
}

.column_280
{
	width: 28.0em;
	float: left;
}

.column_320
{
	width: 32.0em;
	float: left;
}

.column_420
{
	width: 42.0em;
	float: left;
}



.column_480
{
	width: 48.0em;
	float: left;
}

.column_300
{
	/* used on the far right, where there is a padding of 20, AND on catalog features */
	width: 26.0em;
	float: left;
}


.column_300A
{
	/* used on the far right, where there is a padding of 20, AND on catalog features */
	width: 30.0em;
	float: left;
}

.column_460
{
	/* used on the far right, where there is a padding of 20 */
	width: 46.0em;
	float: left;
}

.column_400
{
	/* used on the far right, where there is a padding of 20 */
	width: 40.0em;
	float: left;
}

.column_140
{
	/* used on Catalog pages, for thumnails under featured items */
	width: 14.0em;
	margin-right: 2.0em;
	float: left;
}

.column_120
{
	/* used on Catalog pages, for thumnails under featured items */
	width: 12.0em;
	float: left;
}

.column_100
{
	/* used on Catalog pages, for thumnails under featured items */
	width: 10.0em;
	margin-right: 2.0em;
	float: left;
}

.column_240
{
	width: 26.0em;
	float: left;
}

.column_220	
{
	width: 22.0em;
	float: left;
}
/* Hover states */
div.hover_wrap
{
}
div.hover_wrap:hover
{
	cursor: pointer;
	background-color: transparent; /* #fff3ee */
}
div.hover_wrap:hover a
{
	text-decoration: underline;
}


/* ------------------------------------------------------------------------------------------------------- */
/* LIST ITEMS FOR NAVIGATION
/* ------------------------------------------------------------------------------------------------------- */
/* ul.nav_left - for navigation links and dropdowns on the left */
ul.rpRootGroup, ul.rpRootGroup li, ul.rpRootGroup li ul
{
	margin: 0;
	padding: 0;
	list-style-type: none !important;
	display: block;
}
ul.rpRootGroup
{
	width: 12.0em;
	border-bottom: 0.1em solid #444;
}

ul.rpRootGroup li
{
	width: 12.0em;
}

ul.rpRootGroup li a, ul.rpRootGroup li a:link, ul.rpRootGroup li a:visited
{
	width: 12.0em;
	margin: 0em 0em !important;
	padding: 0.8em 0em !important;
	border: none;
	background-color: transparent;
	text-decoration: none;
	outline: none;
	display: block;
	border-top: 0.1em solid #444;
}

ul.rpRootGroup li a:hover
{
	width: 12.0em;
	margin: 0em 0em !important;
	padding: 0.8em 0em !important;
	border: none;
	/*background-color: #fff3ee;*/
	text-decoration: none;
	outline: none;
	display: block;
	border-top: 0.1em solid #444;
}

ul.rpRootGroup li a:active
{
	width: 12.0em;
	margin: 0em 0em !important;
	padding: 0.8em 0em !important;
	border: none;
	/*background-color: #fff3ee;*/
	text-decoration: none;
	outline: none;
	display: block;
	border-top: 0.1em solid #444;
}

ul.rpRootGroup li a.on, ul.rpRootGroup li a.on:link, ul.rpRootGroup li a.on:visited
{
	width: 12.0em;
	margin: 0em 0em !important;
	padding: 0.8em 0em 0.1em 0em !important;
	border: none;
	background-color: transparent;
	text-decoration: none;
	outline: none;
	display: block;
	text-transform: uppercase;
}

ul.rpRootGroup li a.on:hover, ul.rpRootGroup li a.on:active
{
	width: 12.0em;
	margin: 0em 0em !important;
	padding: 0.8em 0em 0.1em 0em !important;
	border: none;
	background-color: #fff3ee;
	text-decoration: none;
	outline: none;
	display: block;
	text-transform: uppercase;
}

ul.rpGroup li.rpLast
{
	padding-bottom: 0.8em;
}

ul.rpRootGroup li a:before
{
}

ul.rpRootGroup li a span
{
	font-size: 1.1em;
}

/* nav_left_nest */
ul.rpGroup, ul.rpGroup li, ul.rpGroup li ul
{
	margin: 0;
	padding: 0;
	list-style-type: none !important;
	display: block;
}

ul.rpGroup li
{
	width: 12.0em;
	border: none !important;
}

ul.rpGroup li a, ul.rpGroup li a:link, ul.rpGroup li a:visited
{
	width: 12.0em;
	margin: 0em 0em !important;
	padding: 0.2em 0em !important;
	border: none;
	background-color: transparent;
	text-decoration: none;
	outline: none;
	display: block;
}

ul.rpGroup li a:hover, ul.rpGroup li a:active
{
	width: 12.0em;
	margin: 0em 0em !important;
	padding: 0.2em 0em !important;
	border: none;
	/*background-color: #fff3ee;*/
	text-decoration: none;
	outline: none;
	display: block;
}

ul.rpGroup li a.viewall, ul.rpGroup li a.viewall:link, ul.rpGroup li a.viewall:visited
{
	width: 12.0em;
	margin: 0em 0em !important;
	padding: 0.2em 0em 0.8em 0em !important;
	border: none;
	background-color: transparent;
	text-decoration: none;
	outline: none;
	display: block; /*border-bottom: 0.1em solid #444;*/
}

ul.rpGroup li a.viewall:hover, ul.rpGroup li a.viewall:active
{
	width: 12.0em;
	margin: 0em 0em !important;
	padding: 0.2em 0em 0.8em 0em !important;
	border: none;
	background-color: #fff3ee;
	text-decoration: none;
	outline: none;
	display: block; /*border-bottom: 0.1em solid #444;*/
}



ul.rpGroup li a:before
{
}

ul.rpGroup li a span
{
	font-size: 1.1em;
}

/* ------------------------------------------------------------------------------------------------------- */
/* FORM ELEMENTS
/* ------------------------------------------------------------------------------------------------------- */


input.restock
{
	width: 15.6em;
	font-family: Arial;
	font-size: 1.0em; /* keep this, as to override default browser settings... */
	color: #aaa;
	background: #fff;
	padding: 0.2em;
	border: 0.1em solid #eee;
	outline: none;
}

input_button
{
	height: 1.8em;
	width: 9.0em;
	cursor: pointer;
}

#mail_signup {
	 position: absolute;
	 top: 0px;
	 z-index: 210;
	 height: 100%;
	 width: 19.0em;
}

#mail_signup .content {
	
}

#mail_signup .content p.title {
	color: #444;
	margin-bottom: 1.0em;
}


#mail_signup .content p.text {
	color: #777;
	margin-bottom: 1.0em; 
	line-height: 1.2em;
}