body {
	font-family: arial, sans-serif;
	margin: 0px auto;
	text-align: center;
	background-image: url(/images/home_body-bg.gif);
	background-repeat: repeat-x;
	background-position: top center;
	background-color: #e1e1e1;
}

#containerHomePage {
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px auto;
	padding: 0px;
	width: 1024px;
	text-align: left;
	background-color: #ffffff;
}

#container {
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px auto;
	padding: 0px;
	width: 776px;
	min-height: 703px;
	height: 100%;
	text-align: left;
	background-color: #ffffff;
}

/*===== Sides of Container Styles =====*/
.containerLeftBleed {
	font-size: 0px; /*IE, handle the "whitespace" after images and such*/
	width: 17px; 
	background-image: url('/images/ContainerBleed-LeftBG.gif');
	background-repeat: repeat-y;
	background-position: top right;
	margin:  0px;
	padding: 0px;
}

.containerRightBleed {
	font-size: 0px; /*IE, handle the "whitespace" after images and such*/
	width: 17px;
	background-image: url(/images/ContainerBleed-RightBG.gif);
	background-repeat: repeat-y;
	background-position: top left;
	margin:  0px;
	padding: 0px;
}

#containerContent {
	width: 742px;
	min-height: 703px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	border: 0px none;
	position: relative;
}

#containerBottomBleed {
	text-align: center;
	margin: 0px; 
	padding: 10px 0px 0px 0px; 
	width: 100%; 
	background-image: url(/images/ContainerBleed-Bottom.gif); 
	background-repeat: repeat-x; 
	background-position: bottom
}

#containerBottomLeftBleed {
	float: left;
	margin: 0px;
	padding: 0px;
}

#containerBottomRightBleed {
	float: right;
	margin: 0px;
	padding: 0px;
}

/* The Header bar, spanning the width of the page content, contains the logo, topNav menu, and the tools on the right (cart and search)*/
#headerContainer {
	width: 100%;
	height: 125px;
	background-image: url(/images/headerContainer-BG.gif);
	background-repeat: repeat-x;
	background-position: top center;
}

#headerTools {
	vertical-align: bottom;
	height: 50px;
	padding: 0px 20px 0px 0px;
	margin-top: -10px; /*moves the header tools up (normally pushed below the logo on the left site), the default.asp page overrides this, since the tool ends up somewhere else*/
	float: right;
	position: relative; /*shift the position of the DIV from where it is supposed to be, to somewhere up (about 65pixels)*/
	top: -65px
}

#headerSearchTool {
	padding: 0px 0px 6px 0px; 
	margin: 0px;
	text-align: right;
}
#headerSearchTool form {
	display: inline; /*IE will render the break (CRLF, 0x10,0x13)  before and after the form tags, so we have to make the Form tag inline to keep that from happening*/
}

#headerCartTool {
	text-align: right; 
	padding-bottom: 45px;
}

#headerCartStatus {
	font: 12px Arial, Helvetica, sans-serif;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color:#8a8a8a;
	float: right; 
	border-top: 2px solid #d1000c; 
	margin-top: 20px; 
	padding: 2px 5px 0px 5px; 
	position: relative; 
	left: 6px /*overlap to the cart image to the right*/
	
}

/*===== Header Search Tool Styles =====*/
/* The Header Search Text Box */
#searchTextBox {
	font-size: 13px;
	border: 1px solid #B9A290;
	width: 140px;
}

#searchLabel {
	font:bold 11px Arial, Helvetica, sans-serif;
	color:#646464;
	text-transform: uppercase;
	vertical-align: middle;
}

#searchButton {
	border: 0px none;
	vertical-align: top;
}

/*===== Left Ad Related Styles =====*/
/* The Container has a the bordered part of the background, and a padding for the content to live inside of (3px)*/
#leftAdContainer {
	float: left;
	width: 260px;
	margin: 0px 18px;
	padding: 0px;
	font-size: 0px; /*This is required for IE, otherwise it renders the space (linebreaks) between the top bleed image, and the start of the next div, the font-size is restored in the leftAdContent div below*/
	background-repeat: repeat-y;
	background-image: url(/Images/LeftAdBlockContainer-BG.gif);
}

/* The container has this content div inside of it, this will have another background, a gradient from top to bottom, which will mask out part of the container's bg */
#leftAdContent {
	width: 252px;
	margin: 0px 4px;
	font-size: 11px;
	text-align: center; /*Usuaully we avoid centering content, but here it works*/
	background-position: bottom;
	background-color: #77553C;
	background-repeat: repeat-x;
	background-image: url(/Images/LeftAdBlock-BG.jpg);
}

#leftAdContent p {
	font: 12px Arial, Helvetica, sans-serif;
	color: #fff;
	width: 80%;
	margin: 0.7em auto;
}

#leftAdContent cite {
	font: 10px Arial, Helvetica, sans-serif;
	color: #fff;
	width: 80%;
	margin: 0.3em auto;
	text-decoration: none;
	font-style: normal;
}

.leftAd h1 {
	font: bold 35px Arial, Helvetica, sans-serif;
	text-align: center;
	margin: 0px;
	padding: 12px 0 0 0;
	line-height: 105%;
	color: #fff;
	text-transform: uppercase;
}

.leftAd h2 {
	font: bold 16px Arial, Helvetica, sans-serif;
	color: #eadec5;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin:0;
	padding:8px 0 10px 0;
	
}

.leftAd hr {
	width: 80%;
	height: 2px;
	border: 0px;
	background-color: #EADAC5;
	color: #EADAC5;
}

/*===== Inside  Content area, where the subcategory and product listings will be =====*/
#InsideContentContainer {
	width: 712px;
	margin-top: 20px; /* push this below the search bar over-hang (it's floating in another container with relative positioning)*/
	padding: 0px 20px 0px 10px;
}

#InsideSubCategoryContainer {
	float: left;
	width: 151px;
}

/*===== Main Area Styles =====*/
#mainContentContainer { 
	float: right; 
	width: 674px; 
	margin-right: 18px; 
	padding: 0px; 
	vertical-align: top;
}

/*This class is used on div's when we want to overlap images (such as the "As Seen On TV" badge on top of a product*/
.stackableImageContainer {
	position: relative; /*This resets the origin for child elements that use position:absolute (where we can use {top|left|bottom|right} = 0  to put images on top of each other, as long as position: absolute for the images)*/
	font-size: 0px; /*This keeps IE from rending the Line Feed/Carriage Returns in the HTML source between images, which will cause problem*/
	/* The margin and width should be set at the tag level, since that will differ for each use of this class*/
}

/* These are the smaller areas that show up under the main image, the mainAreBucketBorder has a padding and a border to give a white gap between the border and the background of the child div */
.mainAreaBucket {
	background-color: #BDB08F;
	border: 1px solid #ffffff; /*This may seem redundant, and it is, but it's required to keep IE from shifting content to the top (ignoring parent's padding)*/
}

.mainAreaBucketBorder {
	margin: 14px 0px 0px 0px; /*can't do left/right margin since we don't know which way this will float*/
	background: #ffffff;
	border: 1px solid #cfcfcf;
	padding: 4px;
}

.mainAreaBucket a {
	font-family: arial, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color: #76553b;
}

#footer {
	font:bold 10px Arial, Helvetica, sans-serif;
	color: #977f62;
	padding-bottom: 12px;
}

#footer span {
	font-weight: bold;
	font-size: 15px;
	letter-spacing: 0.3em;
}

#footer a, #footer a:hover, #footer a:visited, #footer a:active {
	text-decoration: none;
	color: #977f62;
}

#footer a:hover {
	text-decoration: underline;
}

.plainListing, ul .plainListing li {
	list-style-type: none;
	text-indent: 0px;
	margin: 0px;
	padding: 0px;
}

.subCategoryListing {
	list-style-image: url(/images/LittleRedArrowBullet.png);
	list-style-position: inside;
	font-size: smaller;
	font-weight: bold;
	padding: 0px 0px 0px 20px;
	margin: 0px;
	float: left;
	width: 124px;
	height: 200px;
	overflow: visible;
	text-indent: -16px;
}

.subCategoryListing a {
	color: #666666;
	text-transform: uppercase;
}

#navigationPagerBar {
	float: right; 
	width: 570px; 
	background: #f1f1f1; 
	/*margin-top: 24px;*/
	border-top: 1px solid #bbb;
}

#lnkHeaderLogo {
	display: block; 
	float: left; 
	padding: 0px 0px 0px 17px;
}

.empLabel {
	font-size: 13px;
	font-weight: bold;
	text-align: left;
}

.inContentList {
	list-style-image: url(/images/LittleRedArrowBullet.png); 
	text-indent: 0px;
	margin: 10px 0px;
	padding-left: 13px;
}