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

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

	Listing Order:

	==============
	
	1 - Structure/Layout
	2 - Sub navigation
	3 - Main Content
	4 - About Haba
	5 - Faqs Content
	6 - Site Map
	7 - 3 Steps to Beauty

************************************************************************/
/***********************************************************************
	1 - STRUCTURE
************************************************************************/

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

div#rightColumn {
	float: right;
	width: 600px;
	margin: 0 0 0 23px;
	background: #fff;
	/*padding: 40px 42px 35px 34px;*/
}

div#textContainer {
	padding: 40px 42px 30px 34px;
}

div#textContainer p {
	padding: 0 0 8px 0;
}

div#bottomCap {
	background: url(../images/bg_textHeavy_bottom.gif) left top repeat-x;
	height: 6px;
}
/***********************************************************************
	2 - SUB NAVIGATION
************************************************************************/

div#subNav {
	background: #a39a97;
	height: 16px;
	width: 600px;
	border-top: 1px solid #787270;
	border-bottom: 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 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 a:hover {
	background: #aeacea;
	font-style: italic;
}
	
li#skinCare { text-align:center; text-transform: uppercase; width: 95px; border-right: 1px solid #787270; }			
li#makeup { text-align:center; text-transform: uppercase; width: 80px; border-right: 1px solid #787270; }
li#hairBody { text-align:center;  width: 100px; border-right: 1px solid #787270; }
li#supplements { text-align:center; text-transform: uppercase; width: 100px; border-right: 1px solid #787270; }
li#accessories { text-align:center; text-transform: uppercase; width: 100px; border-right: 1px solid #787270; }
li#limited { text-align:center; text-transform: uppercase; width: 120px; border-right:none; }

/*** ABOUT SECTION ***/
/*** ACTIVE ***/
li#corporateInfo { text-align:center; text-transform: uppercase; width: 155px; border-right: 1px solid #787270; }
li#contact { text-align:center; text-transform: uppercase; width: 150px; border-right: 1px solid #787270; }
li#locations { text-align:center; text-transform: uppercase; width: 150px; border-right: 1px solid #787270; }
li#press { text-align:center; text-transform: uppercase; width: 140px; }

/*** ON ***/
li#contact a.on, li#locations a.on, li#press a.on, li#corporateInfo a.on { background: #aeacea; font-style: italic; }

/*** INGREDIENTS SECTION ***/
/*** ACTIVE ***/
li#glossary_ingre { text-align:center; text-transform: uppercase; width: 299px; border-right: 1px solid #787270; }
li#products_ingre { text-align:center; text-transform: uppercase; width: 299px; border-right: 1px solid #787270; }

/*** ON ***/
li#glossary_ingre a.on, li#products_ingre a.on  { background: #aeacea; font-style: italic; }

/*** FAQ SECTION ***/
/*** ACTIVE ***/
li#skinCare_faq { text-align:center; text-transform: uppercase; width: 149px; border-right: 1px solid #787270; }
li#makeup_faq { text-align:center; text-transform: uppercase; width: 149px; border-right: 1px solid #787270; }
li#hairBody_faq { text-align:center; text-transform: uppercase; width: 149px; border-right: 1px solid #787270; }
li#accessories_faq { text-align:center; text-transform: uppercase; width: 149px; }

/*** ON ***/
li#skinCare_faq a.on, li#makeup_faq a.on, li#hairBody_faq a.on, li#accessories_faq a.on { background: #aeacea; font-style: italic; }
 
 
/***********************************************************************
	3 - MAIN CONTENT
************************************************************************/

h1 {
	font-size: 26px;
	font-weight: normal;
	padding: 0 0 22px 0;
}

h2.subHeader {
	font-size: 15px;
	color: #8980d5;
	font-weight: normal;
	text-transform: uppercase;
	padding: 10px 0 10px 0;
}

p.question {
	font-size: 14px;
	padding: 10px 0 6px 12px;
}

p.answer {
	padding: 0 0 24px 24px; 
}

div#top {
	border-top: 1px dotted #a39a97;
	padding-bottom: 20px;
	font-size: 14px;
}

div#top p {
	background: url(../images/bg_backToTop.gif) left 7px no-repeat;
	height: 17px;
	text-transform: uppercase;
	padding: 4px 0 0 0;
}

div#top p a {
	color: #a39a97;
	text-decoration: none;
	padding: 0 0 0 10px;
}

/**** CORPORATE INFORMATION PAGE ****/
img.floatLeftImage {
	float: left;
	margin-right: 8px;
	border: 1px solid #d5cfce;
}

div#textContainer table#contactTable tr td input, div#textContainer table#contactTable tr td select, div#textContainer table#contactTable tr td textarea {
	border: 1px solid #d5cfce;
}

/***********************************************************************
	4 - ABOUT HABA PAGE 
************************************************************************/
p.regularTxt {
	padding: 0 0 15px 12px;
}

h2.aboutSubHeader {
	font-size: 13px;
	color: #aeacea;
	font-weight: normal;
	text-transform: uppercase;
	padding: 0 0 3px 12px;
}

div#habaStore {
	float: left;
	background: url(../images/bg_haba-storefront.jpg) left top no-repeat;
	width: 250px;
	height: 210px;
	border: 1px solid #d5cfce;
}

div#googleMap {
	float: left;
	background: url(../images/bg_map.gif) left top no-repeat;
	width: 250px;
	height: 210px;
	margin: 0 0 20px 20px;
	border: 1px solid #d5cfce;
}

/***********************************************************************
	5 - FAQ PAGE 
************************************************************************/

div#anchorLinks {
	padding: 0 0 15px 0;
}

div#anchorLinks ul li {
	list-style: none;
	display: inline;
	padding: 0 2px 0 2px;
}

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

div.grayBar {
	border-bottom: 1px solid #e8e4e5;
}

div#anchorLinksSection {
	background: #f9f8f8;
	margin: 3px 0 3px 0;
	padding: 15px 20px 15px 20px;
}

div#anchorLinksSection ul {
	float: left;
	list-style: none;
}

div#anchorLinksSection ul.anchorList {
	padding-right: 40px;
}

div#anchorLinksSection ul li {
	background: url(../images/bg_double-cheveron.gif) left 2px no-repeat;
	padding: 0 0 5px 10px;
}

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

div#anchorLinksSection ul li a:hover {
	border-bottom: 1px solid #bbbaba;
}

div#textContainer p span {
	font-weight: bold;
	font-size: 13px;
}

div#textContainer ul.listOfProducts {
	margin: 0 0 20px 10px;
	list-style: none;
	padding: 0 0 3px 0;
}

div#textContainer ul.listOfProducts a {
	text-decoration: none;
}

div#textContainer ul.listOfProducts a:hover {
	text-decoration: underline;
}

/***********************************************************************
	6 - SITE MAP 
************************************************************************/

ul#siteMap li {
	list-style: none;
	padding: 0 0 5px 12px;
}

/***********************************************************************
	7 - 3 STEPS TO BEAUTY 
************************************************************************/

div#threeStepsImage {
	margin-top: 15px;

}

/***********************************************************************
	8 - LOCATIONS PAGE 
************************************************************************/
div#distributors, div#jfcDistributors {
	float: left;
	width: 250px;
}

div#jfcDistributors {
	margin-left: 20px;
}

p.state {
	text-transform: uppercase;
	color: #a39a97;
}
p.subLine{
	font-size:10px;
	line-height:1px;
	color: #8980d5;
}