/* CSS Document */
/************************************************************************

	Site:
	Author:		eROI		[www.eroi.com] 

	Listing Order:

	==============
	
	1 - Structure/Layout
	2 - Sub navigation
	3 - Main Content

************************************************************************/
/***********************************************************************
	1 - STRUCTURE
************************************************************************/
div#rightColumn {
	float: right;
	width: 600px;
	margin: 0 0 0 23px;
}

div#subLeftColumn {
	float: left;
	width: 330px;
}

div#subRightColumn {
	float: left;
	width: 243px;
	margin: 0 0 0 26px;
}

div#rightText {
	border-top: 1px solid #d5cfce;
}

/*** NEW PRODUCTS ***/
div#newProductsTitle {
	border-bottom: 1px dotted #d5cfce;
	color: #a39a97;
}

div#newProducts {
	margin: 11px 0 0 0;
	padding: 0 0 13px 0;
	border-bottom: 1px solid #d5cfce;
}

div#newProd {
	float: left;
	width: 244px;
	background: url(../images/bg_sub_newProducts.gif) left top no-repeat;
	height: 54px;
}

div#newProd1 {
	margin-left: 13px;
}

div#newProd1, div#newProd2, div#newProd3, div#newProd4 {
	float: left;
	width: 54px;
	text-align: center;
	padding: 8px 0 0 0;
}

/***********************************************************************
	2 - SUB NAVIGATION
************************************************************************/

div#subNav {
	background: #a39a97;
	height: 16px;
	width: 600px;
	border-top: 1px solid #787270;
	float: right;
	margin: 2px 0 10px 0;
}

div#subNav ul {
	list-style: none;
	margin:0;
	padding:0;
}

div#subNav ul li {
	list-style: none;
	float: left;
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}
div#subNav li#monthlySpecials{
	background: #68a1d6;
	
}
div#subNav ul li#monthlySpecials a:hover {
	background: #a39a97;

}
div#subNav ul li a {
	font: 11px Arial, Helvetica, sans-serif;
	display: block;
	width:100%;
	color: #fff;
	text-decoration:none;
	padding: 2px 0 0 0;
	margin:0;
}

div#subNav ul li#monthlySpecials a {
	color: #fff;
}

div#subNav ul li#monthlySpecials a:hover {
	color: #fff;
}
div#subNav ul li a:hover {
	background: #aeacea;
	font-style: italic;
}
	
li#skinCare { text-align:center; text-transform: uppercase; width: 75px; border-right: 1px solid #787270; border-bottom: 1px solid #787270; }			
li#makeup { text-align:center; text-transform: uppercase; width: 70px; border-right: 1px solid #787270; border-bottom: 1px solid #787270; }
li#hairBody { text-align:center; color:#993333; text-transform: uppercase; width: 100px; border-right: 1px solid #787270; border-bottom: 1px solid #787270; }

li#limited { text-align:center; text-transform: uppercase; width: 115px; border-right: 1px solid #787270; border-bottom: 1px solid #787270; }
li#accessories { text-align:center; text-transform: uppercase; width: 105px; border-right: 1px solid #787270; border-bottom: 1px solid #787270; }
li#monthlySpecials { text-align:center; color:#993333; text-transform: uppercase; width: 130px; border-right: none; border-bottom: 1px solid #787270; }
div#subNav li ul {
	display: none;
	position: absolute;
	background-color: #fff;
	top: 6px;
	left: 0;
	margin: 11px 0;
	padding: 10px 0;
	border-bottom: 1px solid #939598;
	border-right: 1px solid #939598;
	border-left: 1px solid #939598;
	z-index: 30;
}

div#subNav li ul li {
	width: 120px;
	display: block;
	margin: 0;
	padding: 1px 0;
	font: 10px Arial, Helvetica, sans-serif;
	text-transform: none;
}

div#subNav li ul li a {
	display: block;
	color: #6e6f6f;
	width: 100%;
	text-align: left;
	padding-left: 16px;
}



div#subNav li ul li a:hover {
	color: #333;
	background: #ddd;
	font-weight: bold;
	width: 86%;
	_width: 100%; /* IE HACK */
}



div#subNav li ul a.link {
	width: 100%;
	display: block;
}

div#subNav li:hover ul, div#subNav li.over ul{ display: block; }

/***********************************************************************
	3 - MAIN CONTENT
************************************************************************/

h1 {
	font-size: 25px;
	padding: 20px 0 5px 0;
	font-weight: normal;
}

div#ProductsLandingImage {
	background: url(../images/bg_pureGroup_products.jpg) right top no-repeat;
}

div#skincareLandingImage {
	background: url(../images/PR_line.jpg) right top no-repeat;
}

div#makeupLandingImage {
	background: url(../images/bg_makeup-image.jpg) right top no-repeat;
}

div#hairBodyLandingImage {
	background: url(../images/bg_hairbody-image.jpg) right top no-repeat;
}


div#accessoriesLandingImage {
	background: url(../images/fl_ion.jpg) right top no-repeat;
}

div.ProductsImage {
	width: 330px;
	height: 364px;
}

div#rightText p {
	color: #444;
	text-align: justify;
	padding: 3px 0 8px 0;
}

div#rightText span {
	text-transform: uppercase;
	text-align: justify;
	color: #444;
	line-height: 145%;
}

div#rightText ul#leftProdList, div#rightText ul#rightProdList {
	float: left;
	padding: 5px 0 8px 0;
}

div#rightText ul#leftProdList li, div#rightText ul#rightProdList li {
	list-style: none;
	background: url(../images/bg_backToTop.gif) left 3px no-repeat;
	text-transform: uppercase;
	padding: 0 0 5px 8px;
}

div#rightText ul#leftProdList li a, div#rightText ul#rightProdList li a {
	text-decoration: none;
	color: #444;
}

div#rightText ul#leftProdList li a:hover, div#rightText ul#rightProdList li a:hover {
	background: #fff;
}


div#rightText ul#rightProdList {
	margin: 0 0 0 30px;
}

div#newProducts {
	position: relative;
}

div#newProducts div.sp_pop {
	position: absolute;
	top: 54px;
	right: 0;
	width: 243px;
	display: none;
	border-top: 1px solid #81756d;
	border-left: 1px solid #cecece;
	border-right: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
}

div.popTitle {
	background: #a39a97;
	text-align: right;
	text-transform: uppercase;
	color: #fff;
	padding: 0 8px 0 0;
}

div.popTxt {
	background: #fff;
	color: #6e6f6f;
	text-align: left;
	padding: 10px 12px 8px 12px;
}
/***********************************************************************
	4 - PRODUCT DETAIL STYLES
************************************************************************/