@charset "utf-8";
/* CSS Document */
body{margin:0px; padding:0px;  color:#58585a; overflow-y:auto;overflow-x: hidden;}
#supersized{
	    position:fixed;
	}
	#supersized img{ -ms-interpolation-mode: bicubic; }
	#supersized img, #supersized a{
	    height:100%;
	    width:100%;
	    position:absolute;
	    z-index: -1;
	}
	.sent-case{text-align:center; font-size:13px;}
	#supersized .prevslide, #supersized .prevslide img{
	    z-index: 1;
	}
	#supersized .activeslide, #supersized .activeslide img{
	    z-index: 2;
	}
	
	@font-face {
	font-family: HelveticaNeueLTPro-Lt;
	src: url('../js/HelveticaNeueLTPro-Lt.otf');
}
	
	@font-face {
	font-family: bodoni;
	src: url('../js/bodoni.ttf');
}

p.custom_font{
	font-family:bodoni; /* no .ttf */
}

p{ text-align:center; font-family:bodoni; text-transform:uppercase; color:#58585a;  font-size:13px; letter-spacing:1px;}
.style1{
	padding:42px;
	line-height:31px;
	color: #58585a;
	text-align:center;
	font-size:16px;

}
.style2{
	padding: 50px 10px 30px 50px;
	text-align:center;
	line-height:26px;
	color: #58585a;
	width:550px;	
}.style3{padding: 0px;
	text-align:left;
	line-height:16px;
	color: #58585a;
	width:550px; font-size:16px;}
.style4{padding-left:40px;   font-family:bodoni; text-transform:uppercase; color:#58585a; padding-top:0px; margin-top:0px; font-size:12px;}



#logo{background:url(../images/logo.png) no-repeat; height:146px; width:230px; margin-bottom:7px; position:absolute; }

div#navigation {position: absolute; top: 671px; left:0;  width: 868px; height: 22px; font: 14px Verdana, sans-serif; z-index: 100; text-transform:uppercase; }
div#navigation a {display: block; 
   }
div#navigation a:hover {color: #411; }
.page_active{position: absolute; top:520px; height: 22px; width: 930px;}
div#nav a img {height: 0; width: 0;  border-width: 0;}

div#nav a:hover img {position: absolute; top: -30px; left:0;   height: 22px; width: 930px;}

div#navigation ul {margin-left:10px; width: 868px; }
div#navigation ul li{display:inline; color:#faa61a; font:Verdana, Geneva, sans-serif; }
#nav{width:931px; height:12px; position:absolute; top:19px; padding-left:50px;}
.nav{float:left;}	
.belief{background:url(../images/nav-belief.png); width:46px; margin-right:45px; height:12px;}
.stylist{background:url(../images/nav-stylist.png); width:64px; margin-right:41px; height:12px;}
.services{background:url(../images/nav-services.png); width:67px; margin-right:38px; height:12px;}
.products{background:url(../images/nav-products.png); width:75px; margin-right:41px; height:12px;}
.club{background:url(../images/nav-club.png); width:92px; margin-right:38px; height:12px;}
.promotions{background:url(../images/nav-promotions.png); width:91px; margin-right:40px; height:12px;}
.contact{background:url(../images/nav-contact.png); width:65px; margin-right:40px; height:12px;}
.blog{background:url(../images/nav-blog.png); width:36px; height:12px;}


			

/* tabs */
			
			.containerall {width: 860px; margin: 0px; padding:20px; padding-top:126px; overflow:hidden; height:500px; }
ul.tabs {
	margin: 0;
	padding: 0;
	float:left;
	list-style: none;
	height: 66px;
	margin-left:28px;
	margin-top:50px;
	
	width: 172px; color:#000; font-family:"Trebuchet MS", Verdana, Arial, Georgia; text-align:left; font-size:12px;
}
ul.tabs li {
	
	margin: 0;
	padding: 0;
	width:172px;
	height: 66px;
	text-align:center;
	display:block;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 0px;
	outline: none;
}
ul.tabs li a:hover {
	background:url(../images/club-active.png);
	height: 66px;
}


/*
#t1 {background:url(../images/philosophy.png); height:93px; width:256px;}
#t1:hover {background:url(../images/transparent.png); height:93px; width:256px;}
#t1 a:active {background:url(../images/transparent.png); height:93px; width:256px;}

#t2 {background:url(../images/mission.png); height:93px; width:256px;}
#t2:hover {background:url(../images/transparentm.png); height:93px; width:256px;}
#t2 a:active {background:url(../images/transparentm.png); height:93px; width:256px;}


#t3 {background:url(../images/vision.png); height:93px; width:256px;}
#t3:hover {background:url(../images/transparentmm.png); height:93px; width:256px;}
#t3 a:active {background:url(../images/transparentmm.png); height:93px; width:256px;}
*/
#tab1{background:url(../images/transparent2.png)  no-repeat; height:479px; }
#tab2{background:url(../images/transparentm.png) no-repeat;  height:420px; padding-top:80px }
#tab3{background:url(../images/transparentm.png) no-repeat;  height:420px; padding-top:140px }

#tab4{background:url(../images/transp-club.png)  no-repeat; height:484px; width:646px;  margin-top:50px;}
#tab5{ background:url(../images/transp-club.png)  no-repeat; height:479px; margin-top:50px; }
#tab6{background:url(../images/transp-club.png)  no-repeat;  height:420px; margin-top:50px; }
html ul.tabs li.active, html ul.tabs li.active   {
	background:url(../images/club-active.png);
	height:66px;
	
}
hr{background:url(../images/hr.png) repeat-x; height:5px; border:none; margin:0px; padding:0px; }
.hr1{background:url(../images/line.jpg) repeat-x; height:5px; border:none; margin:0px; padding:0px; }

h5{font-size:20px; margin:0px; padding:0px; line-height:2px;/* background:url(../images/line2.jpg) repeat-x left;width:50%;*/  }

.tab_container {
	float: left; 
	width: 640px;
	height:372px;
}
.tab_content {
	float: left; 
	width: 640px;
	height:372px;
		
color:#000; font-family:"Trebuchet MS", Verdana, Arial, Georgia; text-align:left; font-size:12px;
}
.tab_content h2 {
	font-weight: normal;
	padding-bottom: 10px;
	border-bottom: 1px dashed #ddd;
	font-size: 1.8em;
}
.tab_content h3 a{
	color: #254588;
}
.tab_content img {
	float: left;
	margin: 0 20px 20px 0;
	border: 0px solid #ddd;
	padding: 5px;
}

#navigation-bar{background:url(../images/navigation-bar.png) no-repeat; height:6px; width:720px; position:absolute; margin-left:50px; }
#menu-box{ position:absolute; height:30px; width:931px;  top:628px; }

img {
		outline:0; 
		border:0;
	}
	
	#menu {
		/* you must set it to relative, so that you can use absolute position for children elements */
		position:relative; 
		text-align:left; 
		width:950px; 
		height:50px;

	}
	
	#menu ul {
		/* remove the list style and spaces*/
		margin:0; 
		padding:0; 
		list-style:none; 
		display:inline;
			border-top: 5px solid #faa61a;		
		/* position absolute so that z-index can be defined */
		position:absolute; 
		
		/* center the menu, depend on the width of you menu*/
		left:50px; 
		top:0; 
		
	}	#menu ul li {
		
		/* give some spaces between the list items */
		margin:0 0px; 
		
		/* display the list item in single row */
		float:left;
		padding-top:3px;
		margin-right:15px;
	}
	
	#menu ul li a { /*font-family:Arial, Helvetica, sans-serif;*/ text-transform:uppercase;  text-decoration:none; color:#58585a; font-size:14px;font-weight: bold;}
	#menu ul li a:hover{color:#faa61a;}
	#menu ul li a.active{color:#faa61a;}
	#menu #box {
		
		/* position absolute so that z-index can be defined and able to move this item using javascript */
		position:absolute; 
		left:0; 
		top:0; 
		z-index:200; 
 
		/* image of the right rounded corner */
		height:35px;
 
 
		/* add padding 8px so that the tail would appear */
		padding-right:8px;
		
		/* set the box position manually */
		margin-left:5px;
		
	}
	
	#menu #box .head {
		/* image of the left rounded corner */
		background:url(../images/active.png) no-repeat 0 0;
		height:24px;
		color:#eee;
		width:89px;
		position:absolute;
		top:-33px;
		left:-20px;
		
		/* force text display in one line */
		white-space:nowrap;
 
		/* set the text position manually */
	}
	
	
	
	
/* demo thumbnail scroller - horizontal liquid size 100% */
#tshf_container{position:absolute; top:530px; left:255px;  width:600px;}
#tshf_container .thumbScroller{position:relative; width:608px; overflow:hidden;}
#tshf_container .thumbScroller, #tshf_container .thumbScroller .container, #tshf_container .thumbScroller .content{height:168px;}
#tshf_container .thumbScroller .container{position:relative; left:0;}
#tshf_container .thumbScroller .content{float:left;}
#tshf_container .thumbScroller .content div{padding:0px; margin:0px; height:100%;}
#tshf_container .thumbScroller img{border:none; margin:0px; padding:0px;}
#tshf_container .thumbScroller .content div a{display:block;}
#tshf_container .thumbScroller .content div a:hover{border-color:#fff;}

div.visible {
display: visible;
}
div.hidden {
display: none;
}
p.tabstyle{margin-left:20px; font-family:bodoni}

h2{font-family:HelveticaNeueLTPro-Lt; letter-spacing:1px; text-transform:uppercase; color:#58585a; font-size:11px; margin-top:5px; margin-right:15px;}
h2 a{ text-decoration:none;color:#58585a; }
h2 a:hover{ text-decoration:none;color:#faa61a; }
h2 a.active{ text-decoration:none;color:#faa61a; }

.stylist-left{width:200px; float:left; margin-left:30px; height:600px; text-align:left; }
.stylist-left img{margin-top:50px; margin-bottom:10px;}
.stylist-right{width:250px; float:left; text-align:left; margin-left:30px; margin-top:50px; height:600px;}

h3{font-family:bodoni; margin:0px; padding:0px;  color:#58585a;  font-size:16px; text-transform:uppercase; letter-spacing:1px;	}

ul.stylist-nav  {height:61px; width:180px; border:0; }

ul.stylist-nav li {border:0px; }
ul.stylist-nav  li:hover{background:url(../images/stylist-active.png);}
.stylist-nav img.active{background:url(../images/stylist-active.png);}

input{margin-left:40px; height: 15px; width:300px; padding:5px;  color:#58585a; border:#faa61a thin solid;}
.out{ width:500px;  height:8px; color:#58585a; margin-bottom:30px; text-align:right }
.out-left{ width:60px; padding-top:10px; height:8px;  float:left;}
.out-right{ width:350px;  float:left; height:8px; color:#58585a; margin-top:10px;}
.button{background:#faa61a; width:313px; border:0; height:30px; margin-left:40px; margin-top:20px; font-family:botani; text-transform:uppercase; color:#58585a; letter-spacing:1px;}
.button:hover{color:#58585a;}

h4{font-family:bodoni; letter-spacing:1px; text-transform:uppercase; color:#58585a; font-size:12px; padding-top:8px; padding-left:18px;}
h4 a{ text-decoration:none;color:#58585a; }
h4 a:hover{ text-decoration:none;color:#faa61a; }
h4 a.active{ text-decoration:none;color:#faa61a; }
	#social-media{width:150px; height:25px; margin-left:50px;}