/* GILARUT STYLESHEET
---------------------------------------- */

@import url("reset.css");

body {
	
	background: #fff;
	
	font-family: Arial, Verdana, sans-serif; font-size:12px; color:#422109;
}

#wrapper {
	
	width:950px;
	
	margin:0 auto; padding:25px 0 0 0;

}

a { color:#422109; text-decoration: underline; outline:none; }
a:hover { text-decoration: none; }

p.tabs a { color:#422109; text-decoration:none; }
p.tabs a:hover { color:#455499; text-decoration:none; }
p.tabs a.active { color:#455499; text-decoration:none; }

.left { float:left; } .right { float:right; } .clear { clear:both; }

hr { color:#cbcbcb; border:0; background:#cbcbcb; clear:both; margin:0; padding:0; height:1px; }

h1 { font-size:24px; color:#422109; font-weight:bold; }
h2 { font-size:18px; color:#422109; padding:5px 0; margin:0; font-family:'Century Gothic', Arial, sans-serif; }
h2.border { border-bottom:1px solid #cbcbcb; }
h3 { font-size: 14px; color:#422109; }
h4 { font-size: 12px; color:#422109; padding:5px 0; }



/* GLOBAL STYLING
---------------------------------------- */

#container {
	
	width:948px; min-height:578px; height:auto !important; height:578px; position:relative;
	
	margin:0 auto; border:1px solid #cbcbcb; /*overflow:hidden;*/
}

#container.home { background: url(../images/home-background.jpg) top right no-repeat; }
#container.home.b2 { background: url(../images/home-background2.jpg) top right no-repeat; }
.about { background: url(../images/about-background.jpg) no-repeat top right; }
.cutting { background: url(../images/services-hair-background.jpg) top right no-repeat; }
.colour { background: url(../images/services-colour-background.jpg) top right no-repeat; }
.makeup { background: url(../images/services-makeup-background.jpg) top right no-repeat; }
.additional { background: url(../images/services-additional-background.jpg) top right no-repeat; }
.default { background:none; }

h1.header a { 

	display:block; width:248px; height:90px; 
		
	text-indent:-9999px;
	
	background: url(../images/header-logo.gif) top left no-repeat;
}

.home h1.header a { 

	width:280px; height:105px; 
	
	position:absolute; top:40px; left:35px;
		
	background: url(../images/home-logo.gif) top left no-repeat;
}



/* NAVIGATION STYLING
---------------------------------------- */

#nav {

	width:937px; height:22px; padding:0 0 0 11px; position:relative;
	
	margin:-1px auto 0; background:#fff; border:1px solid #cbcbcb;
	
	list-style:none; z-index:1000;
}

#nav li { display:inline; float:left; padding:0; margin:0; }
#nav li a { color:#422109; display:block; float:left; padding:0; text-align:center; height:22px; line-height:22px; text-decoration:none; }
#nav li a.active { font-weight:bold; }
#nav li a#about { width:84px; }
#nav li a#services { width:82px; }
#nav li a#appointments { width:143px; }
#nav li a#gifts { width:95px; }
#nav li a#rewards { width:84px; }
#nav li a#blog { width:55px; }
#nav li a#events { width:70px; }
#nav li a#collections { width:108px; }
#nav li a#employment { width:104px; }
#nav li a#contact { width:101px; }

/* HOME NAV */

ul.home-nav { position:absolute; top:350px; left:0; list-style:none; }

ul.home-nav li a {

	display:block; height:35px; padding-left:37px; width:283px;
	
	text-align:center; color:#fff; text-decoration:none; font-size:12px; line-height:35px;
	
	background:#5374A9; border:1px solid #cbcbcb; border-left:0; margin-top:7px;
}

ul.home-nav li a:hover { background:#dce0ec; color:#422109; }


ul.home-nav li.brazil  a { 
display:block; height:35px; width:320px;
	padding:0;
	text-indent:110px; color:#fff; text-decoration:none; font-size:12px; line-height:35px;
	
	 border:1px solid #cbcbcb; border-left:0; margin-top:7px; 
	 background:url(../images/brazilian_blowout.jpg) left top no-repeat;
	}
	
	
ul.home-nav li.brazil a:hover { background:#ebcba2; color:#422109; 
background:url(../images/brazilian_blowout_faded.jpg) left top no-repeat;}




/* SUB NAV */

ul.sub-nav { list-style:none; margin-top:25px; }

ul.sub-nav li a {

	display:block; height:35px; width:195px;
	
	text-align:right; color:#422109; text-decoration:none; font-size:12px; line-height:35px;
	
	background:#fff; border:1px solid #cbcbcb; border-left:0; margin-top:7px; padding:0 15px 0 0;
}

ul.sub-nav li a:hover { background:#dce0ec; }
ul.sub-nav li a.active { background:#dce0ec; }

/* SERVICES NAV */

ul.services-nav { list-style:none; padding:0; margin:0; }

ul.services-nav li { padding:32px 0 18px; }
ul.services-nav li a {

	display:block; height:53px; width:195px;
	
	text-align:right; color:#422109; text-decoration:none; font-size:12px; line-height:18px;
	
	background:#fff; border:1px solid #cbcbcb; border-left:0; margin:0; padding:15px 15px 0 0;
}

ul.services-nav li a.services-1, ul.services-nav li a.services-1b { background:url(../images/services-nav1.gif) -210px 0 no-repeat;}
ul.services-nav li a.services-2, ul.services-nav li a.services-2b { background:url(../images/services-nav2.gif) -210px 0 no-repeat;}
ul.services-nav li a.services-3, ul.services-nav li a.services-3b { background:url(../images/services-nav3.gif) -210px 0 no-repeat;}
ul.services-nav li a.services-4, ul.services-nav li a.services-4b { background:url(../images/services-nav4.gif) -210px 0 no-repeat;}

ul.services-nav li a.services-1:hover, ul.services-nav li a.services-2:hover, ul.services-nav li a.services-3:hover, ul.services-nav li a.services-4:hover { background-position: left center;}
ul.services-nav li.active a.services-1, ul.services-nav li.active a.services-2, ul.services-nav li.active a.services-3, ul.services-nav li.active a.services-4 { background-position: left center;}

ul.services-nav li a.services-1b, ul.services-nav li a.services-2b, ul.services-nav li a.services-3b, ul.services-nav li a.services-4b { background-position:left center;}

ul.services-nav li a.services-1b:hover, ul.services-nav li a.services-2b:hover, ul.services-nav li a.services-3b:hover, ul.services-nav li a.services-4b:hover { background-position:0 0;}


/* EVENTS NAV */

ul.events-nav { list-style:none; /*margin-top:25px;*/ }

/*ul.events-nav li a {

	display:block; height:173px; width:195px;
	
	text-align:right; color:#422109; text-decoration:none; font-size:12px; line-height:18px;
	
	background:#fff; border:1px solid #cbcbcb; border-left:0; margin-top:7px; margin-bottom:45px; padding:15px 15px 0 0;
}*/
ul.events-nav li {

	display:block; height:173px; width:195px;
	
	text-align:right; color:#422109; text-decoration:none; font-size:12px; line-height:18px;
	
	background:#fff; border:1px solid #cbcbcb; border-left:0; margin-bottom:3px; margin-top:37px; padding:15px 15px 0 0;
}


/*ul.events-nav li a.upcoming { background:url(../images/upcoming-nav.gif) left center no-repeat;}
ul.events-nav li a.past { background:url(../images/past-nav.gif) left center no-repeat;}

ul.events-nav li a.upcoming:hover { background-position:-210px 0;}
ul.events-nav li a.past:hover { background-position:-210px 0;}*/

ul.events-nav li.upcoming { background:url(../images/upcoming-nav.gif) left center no-repeat;}
ul.events-nav li.past { background:url(../images/past-nav.gif) left center no-repeat;}



/* LEFT & RIGHT COLUMN STYLING
---------------------------------------- */

#left-column {

	width:248px; float:left;
}

#right-column {
	
	width:700px; float:left;
	
	padding:35px 0 0 0;
	
}


#right-column p { padding:5px 0; line-height:18px; width:430px; }
#right-column.full p { padding:5px 0; line-height:18px; width:660px; }
.services #right-column p { padding:5px 0; line-height:18px; width:660px; }

#container.press #right-column p { float:left; width:300px;  padding:10px 40px 25px 0;  }
#container.press #right-column p img { float:left; margin:0 15px 0 0; }
#container.press #right-column p a { text-decoration:none; }


/* SERVICES - ADDITIONAL - TOOLTIP */

td.tooltip  a { color:#422109; text-decoration:none; }
td.tooltip  a:hover { color:#455499; text-decoration:none; }
td.tooltip  a.active { color:#455499; text-decoration:none; }

td.brazil  a { color:#422109;  }
td.brazil   a:hover { color:#455499; text-decoration:none; }
td.brazil   a.active { color:#455499; text-decoration:none; }
#demotip {
	display:none;
/*	background:transparent url(/tools/img/tooltip/black_arrow.png); */
	border:1px solid #cbcbcb; 
	background-color:#f9edde;
	font-size:12px;
	height:30px;
	width:350px;	
	padding:5px;
	color:#422109;	
	/* I added  */
	position:relative;
	
	margin-left:120px;
	}
	
	

/* style the trigger elements */
#demo img {
	border:0;
	cursor:pointer;
	margin:0 8px;
}

#demotip_med {
	display:none;
/*	background:transparent url(/tools/img/tooltip/black_arrow.png); */
	border:1px solid #cbcbcb; 
	background-color:#f9edde;
	font-size:12px;
	height:50px;
	width:350px;	
		padding:5px;
	color:#422109;	
	/* I added  */
	position:relative;
	margin-top:20px;
	margin-left:120px;
}

/* style the trigger elements */
#demo_med img {
	border:0;
	cursor:pointer;
	margin:0 8px;
}
#demotip_tall {
	display:none;
/*	background:transparent url(/tools/img/tooltip/black_arrow.png); */
	border:1px solid #cbcbcb; 
	background-color:#dae0ec;
	font-size:12px;
	height:80px;
	width:300px;
	padding:5px;
	color:#422109;	
	/* I added  */
	position:relative;
	margin-top:20px;
	margin-left:120px;
}

/* style the trigger elements */
#demo_tall img {
	border:0;
	cursor:pointer;
	margin:0 8px;
}

/* JOBS STYLING
---------------------------------------- */

.jobs-table tr td a { text-decoration:none; }
.jobs-table tr td a:hover { text-decoration:underline; }
.tblApply td {padding:0px 0px 10px 0px;}
a.back { float:left; font-size:10px; font-weight:bold; text-decoration:none; padding-left:15px; background: url(../images/back-arrow.gif) left center no-repeat; }
a.apply { float:right; color:#224482; font-size:10px; font-weight:bold; text-decoration:none; padding-right:15px; background: url(../images/forward-arrow.gif) right center no-repeat; }
a.back:hover, a.apply:hover {text-decoration:underline;}

.resume { padding-top:5px; }

#jobs-wrapper { min-height:440px; height:auto !important; height:450px; position:relative; }
.radiolist label { padding:0 15px 0 4px; }

/* APPOINTMENTS STYLING
---------------------------------------- */
a.bookapt {color:#224482; font-size:10px; font-weight:bold; text-decoration:none; padding-right:15px; background: url(../images/forward-arrow.gif) right center no-repeat;}
a.bookapt:hover {text-decoration:underline;}


/* EVENTS STYLING
---------------------------------------- */

.upcoming-events-box {
	
	border:0; border-top:1px solid #cbcbcb; border-bottom:1px solid #cbcbcb;
	
	margin-top:59px; height:188px; width:600px;
}
.past-events-box {
	
	border:0; border-top:1px solid #cbcbcb; border-bottom:1px solid #cbcbcb;
	
	margin-top:37px; height:186px;
}
.upcoming-events-box a, .past-events-box a { text-decoration:none; }
.upcoming-events-box a:hover, .past-events-box a:hover { text-decoration:underline; }

#right-column p.date { margin:-8px 0 0 0; padding-bottom:19px; }

/* CONTACT STYLING
---------------------------------------- */

.hillcrest {
	
	width:948px; height:190px; border:0; border-top:1px solid #cdcdcd; border-bottom:1px solid #cdcdcd;
	
	background: #e6e4e5 url(../images/hillcrest.gif) top left no-repeat; clear:both; margin: 0 0 50px 0;
	position:relative; margin-left:-248px; height:172px; padding-top:11px;
}

.otay-ranch {
	
	width:948px; height:190px; border:0; border-top:1px solid #cdcdcd; border-bottom:1px solid #cdcdcd;
	
	background: #e6e4e5 url(../images/otay-ranch.gif) top left no-repeat; clear:both; margin:0;
	position:relative; margin-left:-248px; height:172px; padding-top:11px;
}

.hillcrest h3, .otay-ranch h3 { line-height:20px; font-size:12px; }
#right-column .hillcrest p, #right-column .otay-ranch p { width:auto; clear:both; }
.location { float:left; text-align:right; width:240px; padding:0 39px 0 0; margin:0; }
.address { width:185px;float:left; padding:10px 0 0 0; margin:0; }
.hours { width:202px; float:left; padding:10px 0 0 0; margin:0; }
.hours span { width:70px; display:inline-block; }
.directions { width:200px; float:left; padding:10px 0 0 0; margin:0; }

/* COLLECTIONS STYLING
---------------------------------------- */
#largeimg { width:341px; height:431px; float:left; position:relative; overflow:hidden; }
#largeimg img { border:1px solid #CBCBCB; position:absolute; top:0; left:0; width:339px; height:429px; }
#largeimg img#loader { display:none; border:0; top:200px; left:155px; z-index:100; height:32px; width:32px; }
#thumbs { width:265px; float:right; padding:0 34px 0 0; }
#thumbs a { background:url(/images/collection-thumb-shadow.gif) no-repeat 0 0; padding:1px 16px 16px 1px; width:48px; height:48px; display:block; float:left; outline:0; }
#thumbs img { width:48px; height:48px; }

/* COLOUR TALENT STYLING
---------------------------------------- */
#tblColours { padding-top:74px; width:375px; padding-right:10px; background:url(/images/colour-column-headers.gif) no-repeat right 0; margin-top:25px; }
#tblColours td { background:#dadada; padding:5px 0; text-align:center; width:49px; }
#tblColours td.left { padding:5px 0 5px 5px; text-align:left; width:125px; }
#tblColours .odd td { background:#dae0ec; }
#tblColours .nobg td { background:none; }

/* NEW TALENT STYLING
---------------------------------------- */
#new-talent { padding-top:30px; width:375px; }
#new-talent p { background:#D5DBE9; padding:0 10px; height:24px; line-height:24px; margin:0 0 16px 0; width:auto; }
#new-talent p span { float:left; display:inline-block; }
#new-talent p span.price { float:right; }

/* FOOTER STYLING
---------------------------------------- */

div.social { padding:29px 0 10px 0; float:right;}


div.social2 { padding:29px 0 10px 0; float:left;}


/*#tagline { background:url(/images/tagline.gif) no-repeat 0 0; text-indent:-9999px; height:135px; width:176px; position:absolute; top:163px; left:87px; }*/
#tagline { display:none; }

#flashlogo { position:absolute; top:144px; left:89px; }

#flashlogo2 { position:absolute; top:174px; left:74px; }

#soundbox {position: absolute; top: 605px; left:905px; }

.showpanel { cursor:pointer; padding-right:12px; background: url(/images/arrow.gif) no-repeat right -10px; }
.showpanel-show { cursor:pointer; padding-right:12px; background: url(/images/arrow.gif) no-repeat right 5px; }
.showpanel:hover { text-decoration:underline; }
