* { 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(http://www.sassoonsolutions.com/images/main_background.jpg) repeat-y; }
	#bottom { width: 928px; height: 14px; background: url(http://www.sassoonsolutions.com/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(http://www.sassoonsolutions.com/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(http://www.sassoonsolutions.com/images/split.gif) no-repeat; }
	
	li#home { width: 41px; background: url(http://www.sassoonsolutions.com/images/home.jpg) no-repeat left top; position: fixed; }
	li#home a:hover { width: 41px; background: url(http://www.sassoonsolutions.com/images/home.jpg) no-repeat right top; border-right: 1px solid #b8bab3; margin-right: -1px; }
	li#home-active { width: 41px; background: url(http://www.sassoonsolutions.com/images/home.jpg) no-repeat right top; border-right: 1px solid #b8bab3; margin-right: -1px; }
	
	
	li#smart-heat { width: 92px; background: url(http://www.sassoonsolutions.com/images/smart_heat.jpg) no-repeat left top; position: relative; display: block; }
	li#smart-heat a:hover { background: url(http://www.sassoonsolutions.com/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(http://www.sassoonsolutions.com/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(http://www.sassoonsolutions.com/images/products.jpg) no-repeat left top; position: relative; display: block; }
	li#products a:hover { background: url(http://www.sassoonsolutions.com/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(http://www.sassoonsolutions.com/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(http://www.sassoonsolutions.com/images/hair_quiz.jpg) no-repeat left top; position: relative; display: block; }
	li#hair-quiz a:hover { background: url(http://www.sassoonsolutions.com/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(http://www.sassoonsolutions.com/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(http://www.sassoonsolutions.com/images/hair_type_guide.jpg) no-repeat left top; position: relative; display: block; }
	li#hair-type-guide a:hover { background: url(http://www.sassoonsolutions.com/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(http://www.sassoonsolutions.com/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(http://www.sassoonsolutions.com/images/personal_stylist.jpg) no-repeat left top; position: relative; display: block; }
	li#personal-stylist a:hover { background: url(http://www.sassoonsolutions.com/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(http://www.sassoonsolutions.com/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#buynow { width: 70px; background:url(../images/buynow.jpg) no-repeat left top; position: relative; display: block; }
	li#buynow a:hover { background:url(../images/buynow.jpg) no-repeat right top; border-left: 1px solid #b8bab3; margin-left: -1px; }
	li#buynow-active { width: 70px; background:url(../images/buynow.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(http://www.sassoonsolutions.com/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(http://www.sassoonsolutions.com/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; }
	
	#pdf { width: 97px; height: 97px; position:absolute; margin-top: 222px; margin-left: 275px; display:block; }
	#pdf a { display: block; height: 97px; outline: none; }
	#pdf span { display: none; }

#box1 { 
width: 277px;
height: 89px;
background: url(../images/what-is.jpg) no-repeat;
margin: 9px 9px 0 0;
float: left;
}
	#box1 a { height: 89px; width: 277px; display: block; margin-top: 0px; margin-left: 0px; float: left; }
	#box1 span { display: none; }
	
#box2 { 
width: 277px;
height: 89px;
background: url(../images/whats-your.jpg) no-repeat;
color: #83a7b2;
font-size: 11px;
margin: 9px 9px 0 0;
float: left;
}
	#box2 a { height: 89px; width: 277px; display: block; margin-top: 0px; margin-left: 0px; float: left; }
	#box2 span { display: none; }

#box3 { 
width: 277px;
height: 89px;
background: url(../images/solution.jpg) no-repeat;
margin: 9px 0 0 0;
float: left;
}
	#box3 a { height: 89px; width: 277px; display: block; margin-top: 0px; margin-left: 0px; float: left; }
	#box3 span { display: none; }

#footer { font-size: 10px; color: #e4ebe8; line-height: 24px; }
#footer span { font-size: 10px; color: #e4ebe8; float:none; margin-left: 160px; line-height: 24px; }
#footer a { color: #e4ebe8; text-decoration: none; }
#footer a:hover { text-decoration: underline; }


#active { text-decoration: underline !important; }
