@charset "UTF-8";
/* CSS Document */

/* ----------------------------------------------------------------------- */
/* Initialization Styles                                                   */
/* ----------------------------------------------------------------------- */

/* Note: 1em = 10 pixels, after em is initialized via the body tag		   */

* {
	margin: 0;
	padding: 0;
	}

body {
	background-color: #fff;
	margin: 0px;
	padding: 0px;
	behavior: url(../scripts/csshover.htc);
	}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-table;
}

/* backslash hack hides from IE mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* end backslash hack */



/* ----------------------------------------------------------------------- */
/* Horizontal Navigation, version 1                                        */
/* ----------------------------------------------------------------------- */
		
div.navh01 {
	background-color: #fff;
	}

div.navh01 ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
	
div.navh01 li {
	border-left: 1px solid #999;
	background-color: #fff; /* default Link Background Color */
	float: left;
	}

div.navh01 li.first {
	border-left: none;
	}

div.navh01 li:hover {
	background-color: #fff; /* mouseover Link background Color */
		}

div.navh01 a {
	text-decoration: underline;
	color: #633; 		    /* default Link text color */
	padding: 0 1em;		/* allows the hot area of the link to occupy white space */
	float: left;
	}

div.navh01 a:visited {
	color: #633; 		/* visited Link text color */	
	}
	
div.navh01 a:hover {
	background-color: #fff;
	color: #c99; 		/* mouseover Link text color */
	}



/* ----------------------------------------------------------------------- */
/* Horizontal Navigation, version 2                                        */
/* Centered Widthless Floats											   */
/* http://www.pmob.co.uk/temp/centred-float4.htm                           */
/* ----------------------------------------------------------------------- */

div.navh02 {
	position: relative;
	left: 50%;
	float: left;
	text-align: left;
}

div.navh02 ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	left: -50%;
}

div.navh02 li {
	border-left: 1px solid #999;
	background: #fff;
	float: left;
	margin: 0px 0px 0px 0px;
}

div.navh02 li.first {
	border-left: none;
}

div.navh02 li a {
	text-decoration: underline;
	color: #633; 		    /* default Link text color */
	padding: 0 1em;		/* allows the hot area of the link to occupy white space */
	background: #fff;
	float: left;
}

div.navh02 a:visited {
	color: #633; 		/* visited Link text color */	
	}

div.navh02 li a:hover {
	BACKGROUND: #fff;
	color: #c99; 		/* mouseover Link text color */
}

* html div.navh02 ul {
	float: left;		/* hack IE to behave properly */
}



/* ----------------------------------------------------------------------- */
/* Vertical Navigation, version 1                                          */
/* ----------------------------------------------------------------------- */

div.navV01 {
width: 204px;
padding: 30px 0;
}

div.navV01 ul {
margin: 0;
padding: 0;
border-bottom: 1px solid #fff;
}

div.navV01 ul ul{
border-bottom: none;
padding: 0 0 0 20px;
}


div.navV01 li {
border-top: 1px solid #fff;
list-style-type: none;
}

div.navV01 li.first {
}

div.navV01 li a {
	display: block;
	padding: 0 0 0 20px;
	line-height: 20px;
}

div.navV01 a:link {
	color: #633;
	}

div.navV01 a:visited {
	color: #633;
	}

div.navV01 a:hover {
	color: #fff;
	}

div.navV01 a:active {
	color: #c36;
	}



/* ----------------------------------------------------------------------- */
/* Vertical Navigation, version 2                                          */
/* ----------------------------------------------------------------------- */

div.navV02 {
padding: 0;
}

div.navV02 ul {
margin: 0;
padding: 0;

}

div.navV02 ul ul{
border-bottom: none;
padding: 0;
}


div.navV02 li {
margin: 0;
padding: 0;
border-top: 1px solid #fff;
list-style-type: none;
}

div.navV02 li.first {
}

div.navV02 li a {
	display: block;
	padding: 0;
	line-height: 12px;
	text-decoration:none;
}

div.navV02 a:link {
	color: #666;
	}

div.navV02 a:visited {
	color: #666;
	}

div.navV02 a:hover {
	color: #633;
	background-color: #fff;
	}

div.navV02 a:active {
	color: #633;
	}


/* ----------------------------------------------------------------------- */
/* page Box Definition Styles                                              */
/* ----------------------------------------------------------------------- */

#pageContainer {
	padding: 0;
	margin: 0 auto;
	width: 801px;
	}
	
	
/* ----------------------------------------------------------------------- */
/* header Box Definition Styles                                            */
/* ----------------------------------------------------------------------- */

#headerContainer {
	background-color: #633;
	}
	
#custLinks {
	font-size: 0.909em; /* adjust size to 10px from 11px */
	padding: 1em 0 .5em 0;
	/*float: right;*/
	width: 801px;
		}

#custLinks ul{
	float: right;
	}
	
#custLinks strong{
	color: #633;
	text-decoration: none;
	}

#custLinks #printButton {
	background: url(/images/iface/icon_print.gif) no-repeat .8em -.1em;
	padding-left: 3em;
	}

#custLinks #closeButton {
	background: url(/images/iface/icon_close.gif) no-repeat .8em -.1em;
	padding-left: 3em;
	}

/*#custLinks #emailButton {
	background: url(/images/iface/icon_email.gif) no-repeat .8em -.1em;
	padding-left: 3em;
	}*/

#header {
	height: 49px;
	background-color:#633;
	position: relative;
	/*float: left;*/
	}

#header a {
	padding: 0;
	margin: 0;
	height: 49px;
	display: block;
}

#header span {
	display: none;
	}


#logo h1 {
	margin: 0;
	padding: 0;
	}

#logo a {
	width: 271px;
	background: #633 url(/images/iface/be_logo.gif) no-repeat;
	}

#topNav {
	width: 530px;
	height: 49px;
	position: absolute;
	top: 0;
	left: 271px;
	}

#topNav ul{
	width: 397px;
	background-color:#633;
	list-style-type: none;
	padding: 0;
	margin: 0;
	float: right;
	}

#topNav li{
	float: left;
	}

#topNav span {
	display: none;
	}


#topNav #navBM a{
	width: 123px;
	background: url(/images/iface/bttn_topNav_bm.gif) no-repeat left top;
	}

#topNav #navMDF a{
	width: 146px;
	background: url(/images/iface/bttn_topNav_mdf.gif) no-repeat left top;
	}

#topNav #navSHOP a{
	width: 128px;
	background: url(/images/iface/bttn_topNav_shop.gif) no-repeat left top;
	}


#topNav #navBM a:hover,
#topNav #navMDF a:hover,
#topNav #navSHOP a:hover{
	background-position: 0 -49px;
	}


/* ----------------------------------------------------------------------- */
/* primary content Box Definition Styles                                   */
/* ----------------------------------------------------------------------- */

#contentContainer {
	width: 799px;
	border: 1px solid #aaa;
	margin: 2px 0 0 0;
	padding: 0 0 2px 0;
	background: #fff url(/images/iface/back_leftnav_topbottom.gif) 0px 100% no-repeat; /* bottom */
	}

* html #contentContainer {
	background-position: 1px 100%; /* correct bottom border for IE6 */
	}

#content {
	background: #fff url(/images/iface/back_leftnav_mid.gif) repeat-y left;
	position: relative;
	}

#sideNavContainer {
	background: url(/images/iface/back_leftnav_topbottom.gif) 0 0 no-repeat; /* top */
	width: 204px;
	position: absolute;
	top: 0;
	left: 0;
	}

#mainContentContainer {
	width: 594px;
	border-left: 1px solid #aaa;
	position: relative;
	left: 204px;
	}
	

/* ----------------------------------------------------------------------- */
/* Promo / Home Page  Definition Styles                                    */
/* ----------------------------------------------------------------------- */

#promoContentContainer {
	width: 799px;
	border: 1px solid #aaa;
	margin: 2px 0 0 0;
	padding: 0;
	position: relative;
	}

#promoContentContainer a{
	margin: 0;
	padding: 0;
	display: block;
	}

#mainPromo {
	width: 594px;
	border-right: 1px solid #aaa;
}

#sidePromo {
	width: 204px;
	position: absolute;
	top: 0;
	left: 595px;
	}

#hp1 {
	width: 594px;
	height: 471px;
	background-color: #edc8a6;	
	/*background:url(/images/iface/hp1_back.gif) no-repeat left top;*/
	}

#hp2, #hp3, #hp4, #hp5 {
	width: 204px;
	height: 117px;
	border-bottom: 1px solid #aaa;
	}
	
/*#hp2 {
	background-color: #edc8a6;	
	background:url(/images/iface/hp2_back.gif) no-repeat left top;
	}

#hp3 {
	background-color: #f4c999;	
	background:url(/images/iface/hp3_back.gif) no-repeat left top;
	}

#hp4 {
	background-color: #f0c186;	
	background:url(/images/iface/hp4_back.gif) no-repeat left top;
	}

#hp5 {
	background-color: #e2ae77;
	background:url(/images/iface/hp5_back.gif) no-repeat left top;
	}*/
	
#hp6 {
	width: 799px;
	height: 54px;
	border-top: none;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	border-left: 1px solid #aaa;
	clear: both;
	background: #633 url(/images/iface/hp6_back.gif) no-repeat left top;
	}

#hp6 a {
	display: block;
	width: 799px;
	height: 54px;
	padding: 0;
	margin: 0;
	}


#hp23, #hp34, #hp45 {
	width: 204px;
	height: 235px;
	border-bottom: 1px solid #aaa;
	}
		
#hp234, #hp345 {
	width: 204px;
	height: 353px;
	border-bottom: 1px solid #aaa;
	}

#hp2345 {
	width: 204px;
	height: 471px;
	}

#hp5, #hp45, #hp345 {
	border: none;
	}

#hp1Content {
	background: url(/images/iface/hp1_promo.jpg) no-repeat left top;
	width: 594px;
	height: 471px;
	}

#hp1Nav {
	margin: 0;
	padding: 0;
	position: relative;
	}

#hp1Nav ul {
	list-style-type: none;
	width: 165px;
	margin: 0;
	padding: 0;
	position: relative;
	left: 20px;
	}

#hp1Nav h3 {
	padding: 0;
	}

#hp1Nav span {
	display: none;
	}

#hp1Discover {
	background: url(/images/iface/hp1_nav_discover.jpg) no-repeat left top;
	width: 280px;
	height: 170px;
	margin: 0;
}

#hp1Pure {
	background: url(/images/iface/hp1_nav_pure.jpg) no-repeat left top;
	width: 280px;
	height: 55px;
	position: absolute;
	top: 380px;
	left: 0;
	margin: 0;
}

#hp1_complexion,
#hp1_prep,
#hp1_eyes,
#hp1_lips,
#hp1_brushes,
#hp1_collections {
padding: 0;
margin: 0;
width: 165px;
height: 25px;
display: block;
}	

#hp1_complexion {
	background: url(/images/iface/hp1_nav_complexion.jpg) no-repeat 0 0;
}	

#hp1_prep {
	background: url(/images/iface/hp1_nav_prep.jpg) no-repeat 0 0;
}	

#hp1_eyes {
	background: url(/images/iface/hp1_nav_eyes.jpg) no-repeat 0 0;
}	

#hp1_lips {
	background: url(/images/iface/hp1_nav_lips.jpg) no-repeat 0 0;
}	

#hp1_brushes {
	background: url(/images/iface/hp1_nav_brushes.jpg) no-repeat 0 0;
}	

#hp1_collections {
	background: url(/images/iface/hp1_nav_collections.jpg) no-repeat 0 0;
}	

#hp1Nav a:hover {
	background-position: -180px 0;
}	

	
/* ----------------------------------------------------------------------- */
/* Side Nav Specific Definition Styles                                     */
/* ----------------------------------------------------------------------- */

#sidePrimaryNav {
	width: 204px;
	background-repeat:no-repeat;
	background-position: left top;
	padding: 20px 0 0 0;
	}

#sidePrimaryNav ul {
	border: none;
}


#sidePrimaryNav a {
	font-size: 12px;
	text-decoration: none;
}

#sidePrimaryNav a:hover {
	font-weight: bold;

}

#sidePrimaryNav li li a {
	color: #fff;
}

#sidePrimaryNav li li a:hover {
	background: url(/images/iface/leftnav_lvl2_back.gif) no-repeat 0 1px;
	color: #633;
	font-weight: normal;
}

#sidePrimaryNav li {
	padding: 0 0 20px 0;
	border: none;
}

#sidePrimaryNav li li{
	padding: 0;
	min-height: 20px;
	height: auto !important;
	height: 20px;
}


#sidePrimaryNav li.active a {
	color: #fff;
	font-weight: bold;
}

#sidePrimaryNav li.active li a {
	font-weight: normal;
}

#sidePrimaryNav li.active li.active a {
	color: #633;
}


#sideSecondaryNav {
	width: 186px;
	background: #feeae7 url(/images/iface/scndnav_body_back.gif) repeat-x 0 100%;
	border: 1px solid #fff;
	margin: 30px auto 0 auto;
	}
	
#sideSecondaryNav h4{
	padding: 10px;
	text-align:center;
	color: #633;
	background: #feeae7 url(/images/iface/scndnav_head_back.gif) repeat-x 0 100%;
	}

#sideSecondaryNav ul{
	padding: 0 0 10px 0;
	}

#sideSecondaryNav li{
	margin: 0 auto;
	width: 165px;
	border-top: none;
	border-bottom: 1px solid #fff;
	}

#sideSecondaryNav a{
	width: 105px;
	padding: 10px 30px;
	text-align:center;
	background: url(/images/iface/scndnav_lvl1_back.gif) no-repeat 0 -100%;
	}

#sideSecondaryNav a:hover{
	background-position: 0 50%;
	}


/* ----------------------------------------------------------------------- */
/* Hero Banner Specific Definition Styles                                  */
/* ----------------------------------------------------------------------- */

#bannerLarge,
#bannerSmall {
	width: 594px;
	border-bottom: 1px solid #aaa;
	}


#bannerLarge {
	height: 229px;
	background: #fff url(/images/iface/hero_lg_back.gif) no-repeat left top;
	}

#bannerSmall {
	height: 54px;
	background: #fff url(/images/iface/hero_sm_back.gif) no-repeat left top;
	}

#bannerLarge span,
#bannerSmall span,
#bmHero_Lips *,
#bmHero_Eyes *,
#bmHero_Complexion *,
#bmHero_Collections *,
#bmHero_Brushes * {
	display: none;
	}


#heroBElarge,
#heroBMlarge, 
#heroMDFlarge,
#heroSHOPlarge,
#bmHero_Lips,
#bmHero_Eyes,
#bmHero_Complexion,
#bmHero_Collections,
#bmHero_Brushes {
	margin: 0;
	padding: 0;
	width: 594px;
	height: 229px;
	
	}

#heroBElarge {
	background:url(/images/iface/hero_large_BE.jpg) no-repeat 0 0;
	}

#heroBMlarge {
	background:url(/images/iface/hero_large_BM.jpg) no-repeat 0 0;
	}
	
#heroMDFlarge {
	background:url(/images/iface/hero_large_MDF.jpg) no-repeat 0 0;
	}
	
#heroSHOPlarge {
	background:url(/images/iface/hero_large_shop.jpg) no-repeat 0 0;
	}

#bmHero_Lips {
	background:url(/images/iface/hero_large_BM_lips.jpg) no-repeat 0 0;
	}

#bmHero_Eyes {
	background:url(/images/iface/hero_large_BM_eyes.jpg) no-repeat 0 0;
	}
	
#bmHero_Complexion {
	background:url(/images/iface/hero_large_BM_complexion.jpg) no-repeat 0 0;
	}

#bmHero_Collections {
	background:url(/images/iface/hero_large_BM_collections.jpg) no-repeat 0 0;
	}
	
#bmHero_Brushes {
	background:url(/images/iface/hero_large_BM_brushes.jpg) no-repeat 0 0;
	}


#heroBEsmall,
#heroBMsmall,
#heroMDFsmall,
#heroSHOPsmall {
	margin: 0;
	padding: 0;
	width: 594px;
	height: 54px;
	}

#heroBEsmall {
	background:url(/images/iface/hero_small_BE.jpg) no-repeat 0 0;
	}

#heroBMsmall {
	background:url(/images/iface/hero_small_BM.jpg) no-repeat 0 0;
	}

#heroMDFsmall {
	background:url(/images/iface/hero_small_MDF.jpg) no-repeat 0 0;
	}

#heroSHOPsmall {
	background:url(/images/iface/hero_small_shop.jpg) no-repeat 0 0;
	}


/* ----------------------------------------------------------------------- */
/* Main Content Specific Definition Styles                                 */
/* ----------------------------------------------------------------------- */

#mainContent {
	width: 594px;
	padding: 30px 0 100px 0;
	min-height: 350px;
	height: auto !important;
	height: 350px;	}
	

div.textBox00 {
	padding: 0 30px 0 20px;
	width: 544px;
	}	
	
div.textBox01left {
	padding: 0 229px 0 20px;
	width: 345px;
	}	

div.textBox01right {
	padding: 0 30px 0 219px;
	width: 345px;
	}	

div.textBox02left {
	padding: 0 177px 0 20px;
	width: 397px;
	}
	
div.textBox02right {
	padding: 0 30px 0 167px;
	width: 397px;
	}


#mdfFAQ h4,
#bmFAQ h4 {
	margin: 2.4em 0 0 0;
	}


#mdfFAQ h1 + h4,
#bmFAQ h1 + h4 {
	margin-top: 3em; 
	}

#mdfClinical h3{
	margin-top: 3em;
	}

#mdfClinical table{
	width: 394px;
	}
	
#mdfClinical .clinStep {
	width: 90px;
	}
	
#mdfClinical .clinMorning,
#mdfClinical .clinEvening {
	width: 150px;
	}

/* ----------------------------------------------------------------------- */
/* Product Content Specific Definition Styles                              */
/* ----------------------------------------------------------------------- */

#productDetail {
	position: relative;
	}

#productDetail img.productImage{
	position: absolute;
	left: 0;
	top: 0;
	}

#productDetail table {
	width: 85px;
	margin-top: 2em;
	}

/*#productDetail h1 {
	margin-bottom: 1em;
	}

#productDetail h2 {
	margin: 0;
	}

#productDetail img.productImage + h3,
#productDetail img.productImage + p {
	margin-top: 1em;
	}*/

#productOverview {
margin: 0 0 3em 0;
}

#productOverview h2 {
margin: 0;
}

.productShade{
width: 85px;
padding: 0;
}

.productShade p{
color: #666;
background: url(/images/iface/dashed_line_shade_list.gif) no-repeat 0 -1px;
font-size: .909em;
line-height: 1.2em;
width: 75px;
padding: 1em 5px;
margin: 0;
}

/* ----------------------------------------------------------------------- */
/* PRODUCT LIST Styles                                            */
/* ----------------------------------------------------------------------- */

#productDescription {
margin: 0 0 3em 0;
}

/*#productDescription h1 {
margin: 0;
}

#productDescription h1 + *{
margin-top: 1.8em;
}*/

#productList{
margin: 1.8em 0 0 0;
}

#productList p{
margin: 0;
padding: 0 1em;
color: #c99;
text-align: center;
width: 112px;
font-size: .909em;
}

#productList p.productName {
font-weight: bold;
color: #633;
background: url(/images/iface/dashed_line_product_list.gif) no-repeat 0 -1px;
padding-top: 1em;
}


#productList .productGroup {
	width: 134px; 	
	border-top: 1px solid #e2b8b7;
	border-left: 1px solid #e2b8b7;
	margin-top: .6em;
}

/*#productList .oneItem{
	width: 134px; 	
}

#productList .twoItem{
	width: 270px;
}

#productList .threeItem{
	width: 405px; 	
}*/

#productList .product {
	width: 134px;
	border-bottom: 1px solid #e2b8b7;
	border-right: 1px solid #e2b8b7;
	padding: 0 0 1em 0;
}

.productFamily {
	clear: both;
	padding: 0 0 30px 0;
	border-bottom: 1px solid #e2b8b7;
	width: 540px;
}



/* ----------------------------------------------------------------------- */
/* Glossary Styles                                                         */
/* ----------------------------------------------------------------------- */
#glossary h1{
	margin: 0 0 30px 0;
	}


/* ----------------------------------------------------------------------- */
/* footer Box Definition Styles                                            */
/* ----------------------------------------------------------------------- */

#footerContainer {
	background-color: #fff;
	padding: 1em 0 0 0;
	}
	
#footer p.captionText {
	padding: 1em 0 0 0;
	text-align: center;
	clear: both;
	}
	
div#corpLinksMain {
	font-size: 0.909em; /* adjust size to 10px from 11px */
	margin: 0 0 .5em 0;
	}


/* ----------------------------------------------------------------------- */
/* Tab Navigation Styles                                                   */
/*                                                                         */
/* - DO NOT rename CSS declarations below                                  */
/* - Has to intereact with tabs_script.js to work properly                 */
/* ----------------------------------------------------------------------- */

div#tabContentContainer {
	width: 540px;
	}

div.tabsContent {
	clear: both;
	padding: 30px 0;
	border-bottom: 1px solid #e2b8b7;
	width: 540px;
	}


div#tabs {
	float: left;
	width: 100%;
	border-bottom: 1px solid #e2b8b7;
	}

div#tabs h3{
	/*margin: 30px 0 0 0;*/
	margin: 0;
	padding: 5px 20px 0 0;
	float: left;
	}

div#tabs h3 + ol#tabsTOC{
	/*margin: 30px 0 0 0;*/
	margin: 0;
	padding: 0;
	}

ol#tabsTOC {
	margin: 0;
	padding: 0;
	/*padding: 30px 0 0 0;*/
	list-style-type: none;
	float: right;
	}

ol#tabsTOC li {
	float: left;
	}


ol#tabsTOC a {
	display: block;
	padding: 0 0 0 9px;
	float: left;
	background: url(/images/iface/tab_left.gif) no-repeat -1px top;
	}

ol#tabsTOC a.first {
	background-position: 0px top;
	}

ol#tabsTOC span {
	display: block;
	background: url(/images/iface/tab_right.gif) no-repeat right top;
	padding: 5px 15px 5px 6px;
	float: left;
	}

ol#tabsTOC li.tabsCurrent span {
	background-position: 100% -120px;
	padding-bottom: 0;
	}
	
ol#tabsTOC a:hover span {
	background-position: 100% -60px;
}

ol#tabsTOC li.tabsCurrent a {
	background-position: -1px -120px;
	}

ol#tabsTOC LI.tabsCurrent a:hover,
ol#tabsTOC a:hover {
	background-position: -1px -60px;
	}

ol#tabsTOC li.tabsCurrent a.first {
	background-position: 0 -120px;
	}

ol#tabsTOC LI.tabsCurrent a:hover.first,
ol#tabsTOC a:hover.first {
	background-position: 0 -60px;
	}