/* @override http://localhost:8888/projects/s3group/SalonHQ/styles/screen.css */

@import url("reset.css");

/* @group HTML tags */

html{
	background: #a9a9a9 url(../images/bg_loop.jpg) top left repeat-x;
}

body{
	background: url(../images/shadow.png) top center repeat-y;
	font-family: Arial, Verdana, sans-serif;
	font-size: 11pt;
	color:#666;
}

div{
	position: relative;
}

#temp{
	list-style-type: none;
}

/* @end */

/* @group Layout */

.clear{
	clear: both;
	height: 1px;
}

.debug{
	background: #efefef;
	color: #f00;
}

.quiet{
	display: none;
}

.middle{
	text-align: center;
}

.strong{
	font-weight: bold;
}

.dummy{
	height: 100px;
}

#page{
	background: #efefef;
	margin: 0 auto;
	width: 960px;
}


/* @end */


/* @group Header */

#header{
	background: url(../images/title_bg_loop.jpg) top left repeat-x;
	height: 109px;	
}

	#header h1{
		background: url(../images/logo.jpg) top left no-repeat;
		float: left;
		height: 109px;
		margin-left: 40px;
		text-indent: -9999px;
		width: 185px;
	}
	
	#header h2{
		background: url(../images/title_text.jpg) top left no-repeat;
		float: left;
		height: 109px;
		margin-left: 95px;
		text-indent: -9999px;
		width: 309px;
	}

/* @end */

/* @group Navigation */

#nav{
	background: url(../images/menu_bg_loop.jpg) top left repeat-x;
	display: inline-block;
	height: 24px;
	width: 100%;
	z-index: 10;
	position: relative;
	font-size: 11px;
}
	#nav a{
		display: block;

	}

	#nav > li {
		display: inline;
		float: left;	
		margin-top: -99999px;	
		width: 92px;
	}			
	
		#nav > li > a{
			display: block;
			float: left;
			height: 24px;
			margin-top: 99999px;
			margin-right: -99px;
			position: relative;
			text-indent: -9999px;
			width: 100px;
		}
		
.sub-nav{
	float: left;	
	margin-top: -24px;
	margin-bottom: -99px;
	padding-top: 24px;
	display: none;
}

	.sub-nav li{

	}
	
		.sub-nav li a{
			background: url(../images/subnav_bg_loop.png) top right repeat-y;		
			color: #666666;
			font-size: 11px;
			margin-right: -9px;
			padding: 5px 0 5px 7px;
			position: relative;
			text-decoration: none;
			width: 153px;			
		}
		
		.sub-nav li a.sub-title{
			background: url(../images/subnav_bg_title_loop.png) top right repeat-y;
			font-weight: bold;
			padding-left: 7px;
			width: 153px;
		}	
		
		.sub-nav li a.sub-splitter{
			background: url(../images/subnav_splitter.png) top right no-repeat;
			height: 1px;
			padding: 0 0 0 7px;
		}
		
		.sub-nav li a.sub-li-last{
			background: url(../images/subnav_bottom.png) bottom right no-repeat;
			height: 9px;
			padding: 0 0 0 7px;
		}		

		
		.sub-nav li a:hover, .sub-nav li a.active{
			color: #ff0000;
		}
		
#nav a:hover, #nav a:focus, #nav a:active{
	margin-right: 0;
}

a.nav-home{
	background: url(../images/nav_home.jpg);
	width: 92px;
}

a.nav-product{
	background: url(../images/nav_product.jpg);
	width: 96px;
}

a.nav-stockists{
	background: url(../images/nav_stockists.jpg);
	width: 95px;
}

a.nav-press{
	background: url(../images/nav_press.jpg);
	width: 96px;
}

a.nav-about{
	background: url(../images/nav_about.jpg);
	width: 95px;
}

a.nav-contact{
	background: url(../images/nav_contact.jpg);
	width: 100px;
}


/* @end */

/* @group Home Main */

#home-main{
	background: url(../images/home_main.jpg) top left no-repeat;
	height: 339px;
	margin-top: -4px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

#home-pattern{
	background: url(../images/home_pattern.jpg) top left no-repeat;
	height: 128px;
}
	#home-pattern p{
		color: #ffffff;	
		padding: 30px;
	}

#door-left{
	background: url(../images/door_left-trans.png);
}

#door-right{
	background: url(../images/door_right-trans.png);
}

#hidden-btn-1 a, #hidden-btn-2 a, #hidden-btn-3 a{
	display: block;
	position: absolute;
	width: 300px;
	height: 300px;
}

#hidden-btn-1 a{
	left: 140px;
}

#hidden-btn-2 a{
	left: 445px;
}

#hidden-btn-3 a{
	left: 705px;
}


/* @end */

/* @group Spray Cover */

#right-nav{
	float: right;
	position: relative;
	z-index: 10;
	width: 227px;
	margin-top: -4px;
}
	#right-nav li a{
		width: 227px;		
		display: block;
		background: url(../images/right_nav_bg_loop.png) top left repeat-y;
		color: #666666;
		font-size: 10px;
		margin-right: -9px;
		padding: 10px 0 10px 20px;
		position: relative;
		text-decoration: none;	
	}
	
	#right-nav li a:hover,#right-nav li a.active{
		color: #ff0000;
	}		

	#right-nav li a.right-splitter{
		display: block;
		background: url(../images/right_nav_separator.png) top left no-repeat;
		height: 5px;
		padding: 0 0 0 7px;
		width: 227px;
	}
	
	#right-nav li a.right-li-last{
		display: block;
		background: url(../images/right_nav_bottom.png) bottom left no-repeat;	
		height: 16px;
		padding:  0 0 0 7px;
		width: 227px;
	}


#spray-cover{
	background: #aaaaaa url(../images/spray_cover.jpg) top left no-repeat;
	height: 345px;
	margin-top: -4px;
	overflow: hidden;
	position: relative;
	font-weight: normal;
}

#spray-pattern{
	background: url(../images/spray_pattern.jpg) top left no-repeat;
	height: 197px;
}

	#spray-pattern p{
		color: #ffffff;
		padding:  40px;
	}
	
		#spray-pattern em{
			font-size:  14px;
		}

/* @end */

/* @group Teeth Cover */



#teeth-cover{
	background: #aaaaaa url(../images/teeth_cover.jpg) top left no-repeat;
	height: 343px;
	margin-top: -4px;
	overflow: hidden;
	position: relative;
	font-weight: normal;
}

#teeth-pattern{
	background: url(../images/spray_pattern.jpg) top left no-repeat;
	height: 197px;
}

	#teeth-pattern p{
		color: #ffffff;
		padding:  40px;
	}
	
		#teeth-pattern em{
			font-size:  14px;
		}

/* @end */

/* @group Content */


/* @group Wax Cover */




#wax-cover{
	background: #aaaaaa url(../images/wax_cover.jpg) top left no-repeat;
	height: 343px;
	margin-top: -4px;
	overflow: hidden;
	position: relative;
	font-weight: normal;
}

#wax-pattern{
	background: url(../images/spray_pattern.jpg) top left no-repeat;
	height: 130px;
}

	#wax-pattern p{
		color: #ffffff;
		padding:  40px;
	}
	
		#wax-pattern em{
			font-size:  14px;
		}

/* @end */

/* @group Content */

#teeth-top{
	background: url(../images/teeth/teeth_top.jpg) top left no-repeat;
	width: 960px;
	height: 342px;
	margin-top: -4px;
}

#wax-top{
	background: url(../images/wax/wax_top.jpg) top left no-repeat;
	width: 960px;
	height: 342px;
	margin-top: -4px;
}

#spray-top{
	background: url(../images/spray/spray_top.jpg) top left no-repeat;
	width: 960px;
	height: 342px;
	margin-top: -4px;
}

#stockists-top{
	background: url(../images/stockists/banner.jpg) top left no-repeat;
	width: 960px;
	height: 342px;
	margin-top: -4px;
}

#about-top{
	background: url(../images/about_us/banner.jpg) top left no-repeat;
	width: 960px;
	height: 342px;
	margin-top: -4px;
}

#press-top{
	background: url(../images/press/banner.jpg) top left no-repeat;
	width: 960px;
	height: 342px;
	margin-top: -4px;
}

#contact-top{
	background: url(../images/contact_us/banner.jpg) top left no-repeat;
	width: 960px;
	height: 342px;
	margin-top: -4px;
}

#content{
/*	background: #ffffff url(../images/content_top.jpg) top left no-repeat;*/
	background: #ffffff url(../images/swipe.jpg) bottom right no-repeat;
	padding: 40px;
	margin-top: -4px;
	font-size: 11pt;
	min-height: 200px;
	padding-bottom: 100px;
}

#content-inner{
	width: 850px;
}

	#content li{
		list-style-type: disc;
		list-style-position: inside;
	}
	
	#content h2{
		font-weight: bold;
		padding-top: 20px;
	}

	#content p{
		padding: 10px 0;
	}
	
.red{
	color: #d20000;
}

.red-bold{
	color: #d20000;
	font-weight: bold;
}

.faq-q{
	color: #d20000;
	padding-bottom: 0;
	margin-bottom: -20px;
	font-weight: bold;
}

.blue-bold{
	color: #00b0f0;
	font-weight: bold;
}

.blue{
	color: #00b0f0;
}

.blue-faq-q{
	color: #00b0f0;
	padding-bottom: 0;
	margin-bottom: -20px;
	font-weight: bold;
}

#content .faq-list, #content .faq-list2{
	margin-left: 20px;
	list-style-type: square;
}
	#content .faq-list li{
		margin-left: 20px;
		list-style-type: lower-alpha;
		list-style-position: outside;
	}
	
	#content .faq-list2 li{
		margin-left: 20px;
		list-style-type: decimal;
		list-style-position: outside;
	}


#content img{

}

#stockists{
	margin-top: 20px;
}

#stockists ul{
	width: 30%;
	float: left;
}

#stockists li{
	list-style-type: none;
	font-size: 12px;
	padding: 2px;
}

#stockists .page-separator {
	clear: both;
	padding-top: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #efefef;
}

#content .page-separator {
	clear: both;
	padding-top: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #efefef;
}


.img-shadow{
	background: url(../images/img_shadow.png) bottom right no-repeat;
	margin:  18px;
	display: block;
	float: left;
	margin-bottom: -20px;
}

.img-shadow img{
	display: block;
	border: 1px solid #a9a9a9;
	margin: 0 16px 16px 0px;
	background: #ffffff;
	padding: 2px;
}

/* teeth procedure */
ul.procedure{
	list-style: none;
	list-style-type: none;
	list-style-image: none;
	margin-top: 20px;
}

	#content ul.procedure li{
		list-style: none;
		list-style-type: none;
		float: left;
		width: 120px;
		list-style-image: none;
		margin-right: 30px;
	}
	
	#content ul.procedure li img{
	
	}	
	
	#content ul.procedure li h3{
		font-weight: bold;
	}	
	
	#content ul.procedure li p{
		font-size: 11px;
	}
	
	#content ul.procedure li.double{
		margin-right: 100px;		
	}
	
	#content ul.procedure li.last{
		margin-right: 0px;
	}	
	
	#content ul.procedure li img.up{
		margin-top: -44px;
	}

/* @end */

/* @group Footer */

#footer{
	background: #3a3a3a url(../images/footer_bg_loop.jpg) top left repeat-x;
	font-size: 10px;
	height: 26px;
}

	#footer .copyright{
		color: #aaaaaa;
		float: left;
		padding: 6px;
		padding-left: 30px;
	}
	
#footer-nav{
	float: right;
	margin-right: -20px;
	padding: 6px;	
	width: 160px;	
}

	#footer-nav li{
		float: left;
		width: 80px;
	}
	
		#footer-nav li a{
			color: #aaaaaa;
		}

/* @end */