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


/*******************HTML TAGS*********************/
body{
	margin:0px;
	padding:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:62.5%;
	color:#666666;
	background-color: #CCCCCC;
	background-image: url(_images/MineralBurst09.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

h1{
	margin:0px;
	padding:0px;
}

a:link, a:visited{
	color:#666666;
	text-decoration:none;
}

a:hover{
	color:#999999;
}

/*******************CONTAINER*********************/

#container{
	width:800px;
	margin:10px auto;
}

/******************* CONTAINER*********************/
#mast{
	height:150px;
	position:relative;
	background-color: #EFF0F0;
	width: 800px;
	background-image: url(_images/MineralBurst02.gif);
	background-repeat: no-repeat;
	background-position: top left;
}

#mastLogo{
	float:left;
	margin: 20px 0 0 10px;

}

#mastBannerAd{
	width:466px;
	height:98px;
	border:1px solid #cccccc;
	float: right;
	margin: 10px 10px 0 0;
}

/*******************NAVIGATION*********************/
#navigation{
	float:left;
	width: 800px;
	height: 20px;
	padding: 15px 0 0 0;
}

#navigation ul{
	font-size:1.4em;
	font-weight:bold;
	color:#666666;
	padding:0px;
	margin:0px;
	width: 800px;
	display: block;
}

#navigation li{
	list-style-type:none;
	padding:0;
	float: left;
	display: block;
	text-align: center;
	margin: 0 37px;
}

#navigation li.first {
	margin: 0 39px 0 10px;
	}
	
#navigation li.last {
	margin: 0 0 0 39px;
	}

#navigation a:link, #navigation a:visited{
	color:#666666;
	text-decoration:none;
}

#navigation a:hover{
	color:#CCCCCC;
}

/*******************CONTENT*********************/
#content{
	width:800px;
	float:left;
	background-color: #FFFFFF;
}

/*******************FLASH BANNER*********************/

#flashBanner{
	width:800px;
	height:200px;
	margin:0;
	text-align: left;
	background-image: url(_images/flashbg.gif);
	background-position: top left;
	background-repeat: repeat-x;
	border-top: 1px solid #ccc;
}

/*******************PRODUCTS*********************/

#productsBox{
	width:800px;
	height:490px;
	margin:0;
	background-image:url(nav/productsBack.jpg);
	background-repeat:no-repeat;
	position:relative;
	font-size:1.2em;
	color:#666666;
	background-color: #FFFFFF;
	border-top: 1px solid #ccc;
}

#productsBox h1{
	overflow:hidden;
	background-image: url(nav/ourProducts.gif);
	background-repeat: no-repeat;
	padding-top:28px;
	height: 0px !important;
	height /**/:30px;
	width:180px;
	position: relative;
	display:block;
}

#productsBoxLeft{
	position:absolute;
	width:430px;
	left:0px;
	padding:10px;
	z-index: 1;
}

#productsBoxRight{
	position:absolute;
	width:360px;
	height:250px;
	right:0px;
	top:10px;
	background-color: #FFFFFF;
	z-index: 2;
}

#productsBoxRight li{
	list-style-type:none;
}


#makeUp{
	position:absolute;
	left:0px;
	top:0px;
	z-index:30;
}

#makeUpImage{
	position:absolute;
	right:10px;
	top:35px;
}

/*li graphics*/
a#foundation{
	overflow:hidden;
	background-image: url(nav/foundation.gif);
	background-repeat: no-repeat;
	padding-top:23px;
	height: 0px !important;
	height /**/:23px;
	width:100px;
	position: relative;
	display:block;
	left:100px;
}

a:hover#foundation{
	background-image: url(nav/foundationOn.gif);
}

a#coverUp{
	overflow:hidden;
	background-image: url(nav/coverUp.gif);
	background-repeat: no-repeat;
	padding-top:26px;
	height: 0px !important;
	height /**/:26px;
	width:100px;
	position: relative;
	display:block;
	left:80px;
}

a:hover#coverUp{
	background-image: url(nav/coverUpOn.gif);
}


a#corrector{
	overflow:hidden;
	background-image: url(nav/corrector.gif);
	background-repeat: no-repeat;
	padding-top:25px;
	height: 0px !important;
	height /**/:25px;
	width:100px;
	position: relative;
	display:block;
	left:60px;
}

a:hover#corrector{
	background-image: url(nav/correctorOn.gif);
}

a#finishingMineral{
	overflow:hidden;
	background-image: url(nav/finishing.gif);
	background-repeat: no-repeat;
	padding-top:25px;
	height: 0px !important;
	height /**/:25px;
	width:118px;
	position: relative;
	display:block;
	left:20px;
}

a:hover#finishingMineral{
	background-image: url(nav/finishingOn.gif);
}

a#bronzer{
	overflow:hidden;
	background-image: url(nav/bronzer.gif);
	background-repeat: no-repeat;
	padding-top:23px;
	height: 0px !important;
	height /**/:23px;
	width:110px;
	position: relative;
	display:block;
	left:20px;
}

a:hover#bronzer{
	background-image: url(nav/bronzerOn.gif);
}

a#blush{
	overflow:hidden;
	background-image: url(nav/blush.gif);
	background-repeat: no-repeat;
	padding-top:25px;
	height: 0px !important;
	height /**/:25px;
	width:60px;
	position: relative;
	display:block;
	left:70px;
}

a:hover#blush{
	background-image: url(nav/blushOn.gif);
}

a#mattEye{
	overflow:hidden;
	background-image: url(nav/matteye.gif);
	background-repeat: no-repeat;
	padding-top:26px;
	height: 0px !important;
	height /**/:23px;
	width:115px;
	position: relative;
	display:block;
	left:30px;
}

a:hover#mattEye{
	background-image: url(nav/matteyeOn.gif);
}

a#shimmer{
	overflow:hidden;
	background-image: url(nav/shimmerEye.gif);
	background-repeat: no-repeat;
	padding-top:24px;
	height: 0px !important;
	height /**/:24px;
	width:140px;
	position: relative;
	display:block;
	left:30px;
}

a:hover#shimmer{
	background-image: url(nav/shimmerEyeOn.gif);
}

a#makeupBrush{
	overflow:hidden;
	background-image: url(nav/makeUp.gif);
	background-repeat: no-repeat;
	padding-top:24px;
	height: 0px !important;
	height /**/:24px;
	width:118px;
	position: relative;
	display:block;
	left:80px;
}

a:hover#makeupBrush{
	background-image: url(nav/makeUpOn.gif);
}

/*******************SKIN TONE*********************/

#skinToneBox{
	width:780px;
	height:280px;
	margin:0;
	background-image:url(nav/skintoneBack.jpg);
	background-repeat:no-repeat;
	padding:10px;
	position:relative;
	background-color: #FFFFFF;
	border-top: 1px solid #ccc;
}

#skinToneBox ul{
	padding:0px;
	margin:0px 0px 0px 10px;
}

#skinToneBox li{
	list-style-type:none;
	margin:0px;
	padding:0px;
}


#skinToneBox h1{
	overflow:hidden;
	background-image: url(nav/skinTone.gif);
	background-repeat: no-repeat;
	padding-top:28px;
	height: 0px !important;
	height /**/:30px;
	width:180px;
	position: relative;
	display:block;
}

#skinToneBox h2{
	margin:0px 0px 0px 10px;
}

#skinTextBox{
	position:absolute;
	top:40px;
	width:580px;
	font-size:1.2em;
	z-index: 3;
}

#skinToneOne{
	width:170px;
	height:160px;
	position:absolute;
	left:0px;
	top:100px;
	background-image:url(nav/skinToneCirlces.gif);
	background-repeat:no-repeat;
	background-position:bottom;
	border-right:1px solid #cccccc;
	z-index: 4;
}

#skinToneOne h2{
	overflow:hidden;
	background-image: url(nav/selectTone.gif);
	background-repeat: no-repeat;
	padding-top:28px;
	height: 0px !important;
	height /**/:20px;
	width:113px;
	position: relative;
	display:block;
}

#skinToneTwo{
	width:170px;
	height:170px;
	position:absolute;
	left:170px;
	top:100px;
	background-image:url(nav/alarmClock.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
	border-right:1px solid #cccccc;
	z-index: 5;
}

#skinToneTwo h2{
	overflow:hidden;
	background-image: url(nav/selectPhase.gif);
	background-repeat: no-repeat;
	padding-top:28px;
	height: 0px !important;
	height /**/:20px;
	width:113px;
	position: relative;
	display:block;
}

#skinToneThree{
	width:170px;
	height:180px;
	position:absolute;
	left:350px;
	top:100px;
	z-index: 8;
}

#skinToneThree h2{
	overflow:hidden;
	background-image: url(nav/selectProduct.gif);
	background-repeat: no-repeat;
	padding-top:28px;
	height: 0px !important;
	height /**/:20px;
	width:113px;
	position: relative;
	display:block;
}

#skinToneFour{
	width:160px;
	height:200px;
	position:absolute;
	right:10px;
	top:70px;
	border:1px solid#ccc;
	z-index: 7;
}

/*column buttons*/

a#fairSkin{
	overflow:hidden;
	background-image: url(nav/fairSkin.gif);
	background-repeat: no-repeat;
	padding-top:28px;
	height: 0px !important;
	height /**/:20px;
	width:113px;
	position: relative;
	display:block;
}

a:hover#fairSkin{
	background-image: url(nav/fairSkinOn.gif);
}


a#mediumSkin{
	overflow:hidden;
	background-image: url(nav/mediumSkin.gif);
	background-repeat: no-repeat;
	padding-top:28px;
	height: 0px !important;
	height /**/:20px;
	width:113px;
	position: relative;
	display:block;
}

a:hover#mediumSkin{
	background-image: url(nav/mediumSkinOn.gif);
}

a#mediumDarkSkin{
	overflow:hidden;
	background-image: url(nav/mediumDarkSkin.gif);
	background-repeat: no-repeat;
	padding-top:28px;
	height: 0px !important;
	height /**/:20px;
	width:125px;
	position: relative;
	display:block;
}

a:hover#mediumDarkSkin{
	background-image: url(nav/mediumDarkSkinOn.gif);
}

a#darkSkin{
	overflow:hidden;
	background-image: url(nav/darkSkin.gif);
	background-repeat: no-repeat;
	padding-top:28px;
	height: 0px !important;
	height /**/:20px;
	width:113px;
	position: relative;
	display:block;
}

a:hover#darkSkin{
	background-image: url(nav/darkSkinOn.gif);
}

a#natural{
	overflow:hidden;
	background-image: url(nav/natural.gif);
	background-repeat: no-repeat;
	padding-top:28px;
	height: 0px !important;
	height /**/:20px;
	width:113px;
	position: relative;
	display:block;
}

a:hover#natural{
	background-image: url(nav/naturalOn.gif);
}

a#daytime{
	overflow:hidden;
	background-image: url(nav/dayTime.gif);
	background-repeat: no-repeat;
	padding-top:28px;
	height: 0px !important;
	height /**/:20px;
	width:113px;
	position: relative;
	display:block;
}

a:hover#daytime{
	background-image: url(nav/dayTimeOn.gif);
}

a#nightTime{
	overflow:hidden;
	background-image: url(nav/nightTime.gif);
	background-repeat: no-repeat;
	padding-top:28px;
	height: 0px !important;
	height /**/:20px;
	width:113px;
	position: relative;
	display:block;
}

a:hover#nightTime{
	background-image: url(nav/nightTimeOn.gif);
}

/*li graphics*/
a#foundationTone{
	overflow:hidden;
	background-image: url(nav/foundationTone.gif);
	background-repeat: no-repeat;
	padding-top:15px;
	height: 0px !important;
	height /**/:15px;
	width:115px;
	display:block;
}

a:hover#foundationTone{
	background-image: url(nav/foundationToneOn.gif);
}


a#coverUpTone{
	overflow:hidden;
	background-image: url(nav/coverUpTone.gif);
	background-repeat: no-repeat;
	padding-top:15px;
	height: 0px !important;
	height /**/:15px;
	width:110px;
	display:block;
}

a:hover#coverUpTone{
	background-image: url(nav/coverUpToneOn.gif);
}



a#correctorTone{
	overflow:hidden;
	background-image: url(nav/correctorTone.gif);
	background-repeat: no-repeat;
	padding-top:15px;
	height: 0px !important;
	height /**/:15px;
	width:110px;
	display:block;
}

a:hover#correctorTone{
	background-image: url(nav/correctorToneOn.gif);
}


a#finishingMineralTone{
	overflow:hidden;
	background-image: url(nav/finishingTone.gif);
	background-repeat: no-repeat;
	padding-top:15px;
	height: 0px !important;
	height /**/:15px;
	width:110px;
	display:block;
}

a:hover#finishingMineralTone{
	background-image: url(nav/finishingToneOn.gif);
}

a#bronzerTone{
	overflow:hidden;
	background-image: url(nav/bronzerTone.gif);
	background-repeat: no-repeat;
	padding-top:15px;
	height: 0px !important;
	height /**/:15px;
	width:110px;
	display:block;
}

a:hover#bronzerTone{
	background-image: url(nav/bronzerToneOn.gif);
}


a#blushTone{
	overflow:hidden;
	background-image: url(nav/blushTone.gif);
	background-repeat: no-repeat;
	padding-top:15px;
	height: 0px !important;
	height /**/:15px;
	width:110px;
	display:block;
}

a:hover#blushTone{
	background-image: url(nav/blushToneOn.gif);
}

a#mattEyeTone{
	overflow:hidden;
	background-image: url(nav/matteyeTone.gif);
	background-repeat: no-repeat;
	padding-top:15px;
	height: 0px !important;
	height /**/:15px;
	width:110px;
	display:block;
}

a:hover#mattEyeTone{
	background-image: url(nav/mattEyeToneOn.gif);
}

a#shimmerTone{
	overflow:hidden;
	background-image: url(nav/shimmerTone.gif);
	background-repeat: no-repeat;
	padding-top:15px;
	height: 0px !important;
	height /**/:15px;
	width:110px;
	display:block;
}

a:hover#shimmerTone{
	background-image: url(nav/shimmerToneOn.gif);
}

a#makeupBrushTone{
	overflow:hidden;
	background-image: url(nav/makeUpTone.gif);
	background-repeat: no-repeat;
	padding-top:15px;
	height: 0px !important;
	height /**/:15px;
	width:110px;
	display:block;
}

a:hover#makeupBrushTone{
	background-image: url(nav/makeUpToneOn.gif);
}

/*******************APPLICATION TIPS*********************/
#applicationTipsBox{
	width:780px;
	margin:0;
	background-image:url(nav/ApplicationTipsBack.jpg);
	position:relative;
	padding:10px;
	border-top: 1px solid #ccc;
}

#applicationTipsBox h1{
	overflow:hidden;
	background-image: url(nav/applicationTips.gif);
	background-repeat: no-repeat;
	padding-top:28px;
	height: 0px !important;
	height /**/:30px;
	width:180px;
	position: relative;
	display:block;
}

#applicationTipsBox p{
	width:520px;
	font-size:1.2em;
	color:#666666;
}


#brushImage{
	position:absolute;
	bottom:0px;
	right:0px;
	background-image:url(nav/brush.gif);
	background-repeat:no-repeat;
	width:180px;
	height:104px;
	z-index: 9;
}



/*******************FOOTER*********************/
#footer{
	width:800px;
	border-top:1px solid #cccccc;
	clear:both;
	color:#666666;
	font-weight:bold;
	padding:10px 0px;
}

#footer a:link, #footer a:visited {
	color:#666666;
	text-decoration:none;
}

.floatRight{
	float:right;
}

.largeLink{
	font-size:1.3em;
	font-weight:bold;
	color:#666666;
	text-decoration:none;
}


/*******************BUG FIXES*********************/

/*Fixes the auto height for in Firefox on the container div when it containes floating elements. Apply style to the containing div*/	
.addClear:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

* html .addClear {height:1%;}

.addClear {display:inline-block;} 
/* Hide from IE Mac \*/ 
.addClear {display:block;} 
/* End hide from IE Mac */