* { margin: 0; padding: 0; }

body {
background: #332c4b;
font-family: Helvetica, Arial, sans-serif;
}

.clear { clear: both; }

#gradient-container { width: 928px; margin: 0 auto; background: url(../images/main_background.jpg) repeat-y; }
	#bottom { width: 928px; height: 14px; background: url(../images/bottom.jpg) no-repeat; margin: 0 auto; }
#container { width: 900px; margin: 0 auto; background: #94a8b9; }

#wrapper {
width: 850px;
height: 600px;
margin: 0 auto;
background: url(../images/background2.jpg) no-repeat #94a8b9;
padding: 0 25px;
}

#navigation { padding-top: 34px; float: left; }
	#navigation li {
	list-style: none;
	height: 24px;
	float: left;
	}
	#navigation li a { display: block; height: 24px; outline: none; }
	#navigation li span { display: none; }
	
	li.split { width: 1px; height: 14px; background: url(../images/split.gif) no-repeat; }
	
	li#home { width: 41px; background: url(../images/home.jpg) no-repeat left top; position: fixed; }
	li#home a:hover { width: 41px; background: url(../images/home.jpg) no-repeat right top; border-right: 1px solid #b8bab3; margin-right: -1px; }
	li#home-active { width: 41px; background: url(../images/home.jpg) no-repeat right top; border-right: 1px solid #b8bab3; margin-right: -1px; }
	
	
	li#smart-heat { width: 92px; background: url(../images/smart_heat.jpg) no-repeat left top; position: relative; display: block; }
	li#smart-heat a:hover { background: url(../images/smart_heat.jpg) no-repeat right top; border-right: 1px solid #b8bab3; border-left: 1px solid #b8bab3; margin-left: -1px; margin-right: -1px; }
	li#smart-heat-active { width: 92px; background: url(../images/smart_heat.jpg) no-repeat right top; border-right: 1px solid #b8bab3; border-left: 1px solid #b8bab3; margin-left: -1px; margin-right: -1px; }
	
	
	li#products { width: 76px; background: url(../images/products.jpg) no-repeat left top; position: relative; display: block; }
	li#products a:hover { background: url(../images/products.jpg) no-repeat right top; border-right: 1px solid #b8bab3; border-left: 1px solid #b8bab3; margin-left: -1px; margin-right: -1px; }
	li#products-active { width: 76px; background: url(../images/products.jpg) no-repeat right top; border-right: 1px solid #b8bab3; border-left: 1px solid #b8bab3; margin-left: -1px; margin-right: -1px; }
	
	
	li#hair-quiz { width: 75px; background: url(../images/hair_quiz.jpg) no-repeat left top; position: relative; display: block; }
	li#hair-quiz a:hover { background: url(../images/hair_quiz.jpg) no-repeat right top; border-right: 1px solid #b8bab3; border-left: 1px solid #b8bab3; margin-left: -1px; margin-right: -1px; }
	li#hair-quiz-active { width: 75px; background: url(../images/hair_quiz.jpg) no-repeat right top; border-right: 1px solid #b8bab3; border-left: 1px solid #b8bab3; margin-left: -1px; margin-right: -1px; }
	
	
	li#hair-type-guide { width: 107px; background: url(../images/hair_type_guide.jpg) no-repeat left top; position: relative; display: block; }
	li#hair-type-guide a:hover { background: url(../images/hair_type_guide.jpg) no-repeat right top; border-right: 1px solid #b8bab3; border-left: 1px solid #b8bab3; margin-left: -1px; margin-right: -1px; }
	li#hair-type-guide-active { width: 107px; background: url(../images/hair_type_guide.jpg) no-repeat right top; border-right: 1px solid #b8bab3; border-left: 1px solid #b8bab3; margin-left: -1px; margin-right: -1px; }
	
	li#personal-stylist { width: 114px; background: url(../images/personal_stylist.jpg) no-repeat left top; position: relative; display: block; }
	li#personal-stylist a:hover { background: url(../images/personal_stylist.jpg) no-repeat right top; border-right: 1px solid #b8bab3; border-left: 1px solid #b8bab3; margin-left: -1px; margin-right: -1px; }
	li#personal-stylist-active { width: 114px; background: url(../images/personal_stylist.jpg) no-repeat right top; border-right: 1px solid #b8bab3; border-left: 1px solid #b8bab3; margin-left: -1px; margin-right: -1px; }
	
	li#stockists { width: 70px; background: url(../images/stockist.jpg) no-repeat left top; position: relative; display: block; }
	li#stockists a:hover { background: url(../images/stockist.jpg) no-repeat right top; border-left: 1px solid #b8bab3; margin-left: -1px; }
	li#stockists-active { width: 70px; background: url(../images/stockist.jpg) no-repeat right top; border-left: 1px solid #b8bab3; margin-left: -1px; }

#logo { float: right; width: 163px; padding-top: 27px; }
#logo h1 { width: 163px; height: 24px; }
#logo h1 a { display: block; height: 24px; outline: none; }
#logo h1 span { display: none; }

#main {
width: 840px;
height: 410px;
background: url(../images/before-loading.gif) no-repeat;
padding: 10px 0 0 10px;
}
	#loading img, span { float: left; }
	#loading img { margin-right: 10px; }
	#loading span { font-size: 13px; font-weight: bold; color: #FFFFFF; line-height: 15px; }

#main-sub {
width: 840px;
height: 376px;
background: url(../images/before-loading2.gif) no-repeat;
padding: 10px 0 0 10px;
}
	

#home_banner {
width: 850px;
height: 420px;
background: url(../images/home_banner.jpg) no-repeat;
}
	#home_banner p { font-size: 11px; color: #FFFFFF; line-height: 14px; width: 377px; padding: 113px 0 0 38px; }
	#home_banner strong { color: #bdd8d8; text-transform: uppercase; font-weight: normal; display: block; }
	
	#i2000 { width: 115px; height: 26px; margin-top: 171px; margin-left: 161px; float: left; display: inline; }
	#i2000 a { display: block; height: 26px; outline: none; }
	#i2000 span { display: none; }
	
	#i230 { width: 115px; height: 26px; float: left; margin-top: 171px; margin-left: 173px; display: inline; }
	#i230 a { display: block; height: 26px; outline: none; }
	#i230 span { display: none; }

#box1 { 
width: 262px;
height: 53px;
background: url(../images/what-is.jpg) no-repeat;
color: #83a7b2;
font-size: 11px;
padding: 36px 0 0 15px;
margin: 9px 9px 0 0;
float: left;
line-height: 14px;
}
	#box1 p { width: 192px;	}
	#box1 p a { font-weight: bold; color: #518392; border-bottom: 2px solid #c0d5d8; text-decoration: none; }
	#box1 p a:hover { border-bottom: 2px solid #518392; }

#box2 { 
width: 262px;
height: 53px;
background: url(../images/solution.jpg) no-repeat;
color: #83a7b2;
font-size: 11px;
padding: 36px 0 0 15px;
margin: 9px 9px 0 0;
float: left;
line-height: 14px;
}
	#box2 p { width: 192px;	}
	#box2 p a { font-weight: bold; color: #518392; border-bottom: 2px solid #b2cccf; text-decoration: none; }
	#box2 p a:hover { border-bottom: 2px solid #518392; }

#box3 { 
width: 262px;
height: 53px;
background: url(../images/hairtypebottom.jpg) no-repeat;
color: #83a7b2;
font-size: 11px;
padding: 36px 0 0 15px;
margin: 9px 0 0 0;
float: left;
line-height: 14px;
}
	#box3 p { width: 192px;	}
	#box3 p a { font-weight: bold; color: #518392; border-bottom: 2px solid #a9c6ca; text-decoration: none; }
	#box3 p a:hover { border-bottom: 2px solid #518392; }	



#footer { font-size: 10px; color: #e4ebe8; line-height: 24px; }
#footer a { color: #e4ebe8; text-decoration: none; }
#footer a:hover { text-decoration: underline; }

#active { text-decoration: underline !important; }