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

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

	Listing Order:

	==============

	1 - Global
	2 - Structure/Layout
	3 - Top Navigation
	4 - Footer	

************************************************************************/
/***********************************************************************
	1 - GLOBAL
************************************************************************/
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#000;
	background: url(../images/bg_body.gif) top left repeat;
}

html, body, h1, h2, h3, h4, h5, h6, ol, ul, li, dl, dt, dd, form, input, select, div, p, img, table, td { 
	margin: 0; 
	padding: 0; 
}

div#purpleBar {
	background: url(../images/bg_purpleBar.gif) top left repeat-x;
	height: 6px;
}

.clearFix {
	clear: both;
}

a {
	color: #000;
}

a:hover {
	color: #8177D0;
}

a.seoLink {
	color: #444;
	text-decoration: none;
}

a.seoLinkBlack {
	color: #000;
	text-decoration: none;
}

a.seoLink:hover, a.seoLinkBlack:hover  {
	color: #000;
	text-decoration: underline;
}

img.bodyImage {
	border: 1px solid #d5cfce;
	float: left;
	margin: 0 10px 0 0;
}
td.samples{
	font-size:10px;
	line-height:10px;
	color: #999999;
}

/***********************************************************************
	2 - STRUCTURE/LAYOUT
************************************************************************/

div#container {
	margin-left: auto;
	margin-right: auto;
	width: 801px;
	margin-top:50px;
	position: relative;
}

/*** LEFT COLUMN SECTION ***/
div#leftColumn {
	float: left;
	width: 92px;
}

div#logo {
	background: url(../images/bg_logo.gif) top left no-repeat;
	width: 176px;
	height: 51px;
	margin: 31px 0 0 0;
}

div#logo a {
	display: block;
	height: 100%;
	width: 100%;
}

div#easyAccess {
	width: 176px;
	margin: 61px 0 0 0;
}

div#samples {
	background: url(../images/bg_free-samples.gif) top left no-repeat;
	height: 33px;
}
div#samples a {
	display:block;
	height:100%;
	width:100%;

}
div#quickShop {
	background: url(../images/bg_quickShop.gif) top left repeat-x;
	height: 36px;
}

div#quickShop p {
	font-size: 9px;
	padding: 8px 6px 4px 0;
	text-align: right;
}

div#quickShop p span a{
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}

/*** RIGHT COLUMN SECTION ***/

div#topRightCorner {
	width: 245px;
	height: 73px;
	float: right;	
}

div#ecomLinks ul {
	list-style: none;
	text-transform: uppercase;
	text-align: right;
}
div#ecomLinks {
	margin-top:-15px;
}
div#ecomLinks ul li {
	background: url(../images/bg_purpleBar_sm.gif) right 3px no-repeat;
	height: 21px;
	padding: 0 10px 0 0;
}

div#ecomLinks ul li a {
	text-decoration: none;
	color: #000;
}

div#search {
	text-align: right;
}

input.searchField {
	margin: 0 5px 0 0;
	width: 115px;
	border: 1px solid #d5cfce;
	font-size: 11px;
	padding: 2px;
}
#searchBtn{
	position:relative;
	top:9px;
}

/***********************************************************************
	3 - NAVIGATION
************************************************************************/

div#nav {
	width: 177px;
	height: 100px;
	margin: 22px 0 0 0;
}

div#nav ul li {
	list-style: none;
	text-align: right;
	height: 24px;
	border-bottom: 1px solid #d5cfce;
}

div#nav ul li a {	
	display: block;	
	height: 100%;
	width: 100%;
}

div#nav ul li a span {
	display: none;
}

/*** ACTIVE ***/
li#about { background: url(../images/nav_about.gif) right bottom no-repeat; border-top: 1px solid #d5cfce; }
li#products { background: url(../images/nav_products.gif) right bottom no-repeat;}
li#ingredients { background: url(../images/nav_ingredients.gif) right bottom no-repeat;}
li#faqs { background: url(../images/nav_faqs.gif) right bottom no-repeat;}
li#threeSteps { background: url(../images/nav_3-steps.gif) right bottom no-repeat; }

/*** HOVER ***/
li#about a:hover { background: url(../images/nav_about_over.gif) right bottom no-repeat; }
li#products a:hover { background: url(../images/nav_products_over.gif) right bottom no-repeat; }
li#ingredients a:hover { background: url(../images/nav_ingredients_over.gif) right bottom no-repeat; }
li#faqs a:hover { background: url(../images/nav_faqs_over.gif) right bottom no-repeat; }
li#threeSteps a:hover { background: url(../images/nav_3-steps_over.gif) right bottom no-repeat; }

/*** ON ***/
li#about a.on { background: url(../images/nav_about_over.gif) right bottom no-repeat; }
li#products a.on { background: url(../images/nav_products_over.gif) right bottom no-repeat; }
li#ingredients a.on { background: url(../images/nav_ingredients_over.gif) right bottom no-repeat; }
li#faqs a.on { background: url(../images/nav_faqs_over.gif) right bottom no-repeat; }
li#threeSteps a.on { background: url(../images/nav_3-steps_over.gif) right bottom no-repeat; }

/***********************************************************************
	4 - FOOTER
************************************************************************/
#newsletterInput{padding-top:10px;}
div#newsletterSignUp {
	float: left;
	margin:107px 0 0 0;
}

div#newsletterSignUp p {
	text-transform: uppercase;
	color: #564b93;
	font-weight: bold;
}

div#footer {
	margin: 50px 0 0 0;
}

div#footerTxt {
	float: right;
	width: 600px;
	text-align: center;
	border-top: 1px solid #d5cfce;
	padding-top: 2px;
	padding-bottom:70px;
	margin-top: 50px;
}

div#footerTxt ul li {
	color: #a39a97;
	display: inline;
	text-transform: uppercase;
	font-size: 9px;
	padding: 0 0 0 1px;
}

div#footerTxt ul li a {
	color: #a39a97;
	font-style: italic;
}
input#submit {
	position:relative;
	top:9px;
}