/* --- Colors --- 
Orange = #f15c22
Dark Gray = #322e2f
Light Gray = #8f8d8e
*/


/* @group Body */
body,
html {
    margin:0;
    padding:0;
    background: #8f8d8e url(../img/bg.jpg) repeat-x;    	color:#000;
    }
body {
	min-width: 800px;
	font: 12px/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #8f8d8e;
}

/* @end */
/* @group Page Structure */

#wrapper {
	width: 800px;
	margin-top: 10px;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
	margin-right: auto;
	margin-left: auto;
	background-color: white;
}
#content {
	width: 605px;
	float: left;
	margin-top: 10px;
	margin-right: 10px;
	padding: 0;
	border-right: 1px solid #8f8d8e;
}
#sidebar {
	margin-top: 10px;
	width: 178px;
	float: right;
}
#header {
	width: 590px;
	margin-top: 0px;
}
#navcontainer {
	float:left;
	clear:both;
	width: 590px;
	padding-bottom:2px;
}
#topimage {
	float:left;
	position:relative;
	z-index:1000;
	width: 590px;
	margin:0 0 5px 0;
	padding:0 0 2px 0;
}

#leftcol {
	float: left;
	width: 287px;
}
#rightcol {
	float: right;
	width: 287px;
	margin-left: 15px;
	margin-right: 15px;
}
#fpcontent {
	padding:20px 20px 20px 0;
}
#fullcol {
	width: 590px;
	float: left;
	margin-right: 15px;
}
#footer {
	clear: both;
	background-color: white;
	height: 10px;
}

/* @end */
/* @group Main Navigation */

#cat_315692_divs ul {
	padding-left: 0;
	margin-left: 0;
	margin-top: 0;
	color: White;
	float: left;
	width: 590px;
	text-transform: uppercase;
	/*height: 25px;*/
	font: 11px arial, helvetica, sans-serif;
	margin-bottom: 0;
}

#cat_315692_divs ul li { display: inline; }

#cat_315692_divs ul li a {
	color: White;
	text-decoration: none;
	float: left;
	width: 98.33333333334px;
	text-align: center;
	height: 19px;
	background: url(../img/NavBG.png) 0 0;
	padding-top: 6px;
}
#cat_315692_divs ul li a:hover {
	color: #fff;
	background: url(../img/NavBG.png) 0 -25px;
}

/* Main Nav Highlighting */


/* Note: This works by setting the body idea to the name of the page eg services for the services page. Then setting the li tag to the appropriate selected CSS style */

body#services li#services.selected a,
body#appointments li#appointments.selected a,
body#hairservices li#services a,
body#nails li#services a,
body#facials li#services a,
body#packages li#services a,
body#principals li#stylists a,
body#stylists li#stylists a,
body#estheticians li#stylists a,
body#colorists li#stylists a,
body#products li#products.selected a,
body#kerastase li#products a,
body#shuuemura li#products a,
body#vincentlongo li#products a,
body#bior li#products a,
body#location li#location.selected a,
body#press li#press.selected a,
body#press li#press a {
	background: url(../img/NavBG.png) 0 -25px;
}

/* @end */
/* @group Stylists Navigation */

#cat_315980_divs, #cat_316028_divs, #cat_353883_divs, #presssubwrap { float:left; position:relative; top:2px; width:590px; margin:0; padding:0; }

#cat_315980_divs ul, #cat_316028_divs ul, #cat_353883_divs ul, ul#presssubnav {
	float: left;
	margin:0;
	padding:0;
	color: White;
	width:588px;
	text-transform: uppercase;
	font: 11px arial, helvetica, sans-serif;
	background:#322e2f;
}

#cat_315980_divs ul li, #cat_316028_divs ul li, #cat_353883_divs ul li, ul#presssubnav li { display:inline; }

#cat_315980_divs ul li a, #cat_316028_divs ul li a, #cat_353883_divs ul li a {
	color: White;
	text-decoration: none;
	float: left;
	height: 16px;
	width:24.5%;
	text-align: center;
	background-color: #322e2f;
	padding:3px 0 0 0;
}
ul#presssubnav li a {
	color: White;
	text-decoration: none;
	float: left;
	height: 16px;
	width: 196px;
	text-align: center;
	background-color: #322e2f;
	padding:3px 0 0 0;	
}
#cat_315980_divs ul li a:hover, #cat_316028_divs ul li a:hover, #cat_353883_divs ul li a:hover, ul#presssubnav li a:hover {
	color: #fff;
	background-color: #8f8d8e;
}

/* Stylists Nav highlighting */

/* Note: For the subnav to highlight both the main nav and the subnav, use Firebug to discover the ID number, then set the UL, UL LI, UL LI A and UL LI A:HOVER CSS to that number. Remember to add the appropriate line to the main nav so that the main nav will also highlight when visiting a subnav page.*/

body#stylists ul#nav_315980 li#style.selected a,
body#principals ul#nav_315980 li#principals.selected a,
body#estheticians ul#nav_315980 li#estheticians.selected a,
body#colorists ul#nav_315980 li#colorists.selected a {
	background-color: #8f8d8e;
}

/* @end */
/* @group Products Navigation */







/* Product Nav highlighting */

body#kerastase ul#nav_316028 li#Kerastase.selected a,
body#shuuemura ul#nav_316028 li#ShuUemura.selected a,
body#vincentlongo ul#nav_316028 li#VincentLongo.selected a,
body#bior ul#nav_316028 li#BioRecherche.selected a {
	background-color: #8f8d8e;
}
body.lubapress li#subprint a,
body.lubaspecial li#subspecial a,
body.lubasalon li#subsalon a {
	background-color: #8f8d8e;
	
}

/* @end */

/* @group Services Navigation */



/* Stylists Nav highlighting */

/* Note: For the subnav to highlight both the main nav and the subnav, use Firebug to discover the ID number, then set the UL, UL LI, UL LI A and UL LI A:HOVER CSS to that number. Remember to add the appropriate line to the main nav so that the main nav will also highlight when visiting a subnav page.*/

body#hairservices ul#nav_353883 li#hairservices.selected a,
body#nails ul#nav_353883 li#nails.selected a,
body#facials ul#nav_353883 li#facials.selected a,
body#packages ul#nav_353883 li#packages.selected a {
	background-color: #8f8d8e;
}

/* @end */

/* @group Text Styles */

h1 {
	color: #8f8d8e;
	font: italic 18px/22px Georgia, "Times New Roman", Times, serif;
	margin-top: 20px;
	margin-bottom: 0;
}

#leftcol h1{
	color: #F15C22;
	font: italic 18px/22px Georgia, "Times New Roman", Times, serif;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 20px;
	padding-left: 25px;
	padding-right: 10px;
}
#fpcontent h1  {
	color: #F15C22;
	font: italic 18px/22px Georgia, "Times New Roman", Times, serif;
	margin-top: 0;
	margin-bottom: 15px;
	padding-top: 5px;
	}
h2 {
	color: #322e2f;
	font: bold 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-transform: uppercase;
	margin-bottom: 1px;
	margin-top: 9px;
}
#sidebar h2 a:hover {
	color: #F15C22;
	font-weight: bold;
	text-decoration: none;
}
h3 {
	color: #8f8d8e;
	font: italic bold 12px Georgia, "Times New Roman", Times, serif;
	margin-top: 2px;
	margin-bottom: 8px;
	border-bottom: 1px solid #8f8d8e;
	position:relative; float:left; width:100%;
}
h4 {
	color: #8f8d8e;
	font: italic 14px Georgia, "Times New Roman", Times, serif;
	border-bottom: 1px solid #8f8d8e;
	margin-top: 15px;
	padding-bottom: 2px;
	margin-bottom: 8px;
}

h5 {
	color: #322e2f;
	font: bold 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-transform: uppercase;
	margin-bottom: 2px;
	margin-top: 20px;
}
.orange {
	color: #F15C22;
	font: bold 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-transform: uppercase;
}
p, td p {
	margin-top: 2px;
	margin-bottom: 5px;
	font: 12px/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #8f8d8e;
}
p a {
	font-weight: bold;
	text-decoration: none;
	color: #8f8d8e;
}
#sidebar p a:hover, #rightcol p a:hover {
	color: #F15C22;
	font-weight: bold;
}
.price {
	position:absolute; right:0;
}
.orangebox {
	background-color: #F15C22;
	color: white;
	padding: 3px 8px;
}
td {
	font: 12px/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #8f8d8e;
}
/* @end */
/* @group Sidebar */

.phone {
	margin-top: 20px;
}
#booknow {
	margin-bottom: 3px;
	width: 180px;
	height: 20px;
}
#booknow a {
	background: url(../img/BookNow.png);
}
#booknow a:hover {
	background: url(../img/BookNowOn.png);
}
#sidebar a {
	color: #8f8d8e;
	font-weight:bold;
	text-decoration:none;
}
#sidebar a:hover {
	color:#f15c22;
   font-weight:bold;
	text-decoration:none;
}

/* @end */
/* @group Products */

#productframe {
	width: 287px;
	height: 78px;
	border: 1px solid #8f8d8e;
}
#fullcol h2 {
	color: #322e2f;
	font: bold 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-transform: uppercase;
	margin-bottom: 2px;
	margin-top: 8px;
}


table.webapptable td {
	vertical-align: top;
	padding-right: 8px;
	padding-bottom: 6px;
}

/* @end */
/* @group Stylists */

#stylistframe {
	width: 287px;
	height: 78px;
	border: 1px solid #8f8d8e;
}
#stylistframe img {
	display: inline;
	float: left;
}
#stylistframe p {
	padding-top: 15px;
	padding-right: 15px;
	float: right;
	text-decoration: none;
	color: #f15c22;
	text-transform: uppercase;
}
#stylistframe p a:hover {
	color: #8f8d8e;
}
#fullcol h2 {
	color: #322e2f;
	font: bold 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-transform: uppercase;
	margin-bottom: 2px;
	margin-top: 8px;
}
table.webapptable td {
	vertical-align: top;
}

/* @end */
/* @group Footer */

p.copyright {
	float: left;
	color: silver;
	margin-top: 18px;
	margin-left: -20px;
	font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

*html body p.copyright { margin-left:0; }

p.skaggs {
	float: right;
	color: silver;
	margin-top: 18px;
	margin-right: -25px;
	font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

*html body p.skaggs { float:right; margin-right:0; position:relative; }

p.skaggs a {
	text-decoration: none;
}
p.skaggs a:hover {
	text-decoration: underline;
}

.highlight {
	background: orange url(../img/highlightbg.png) repeat-x;
	padding: 15px;
	width: 550px;
	font-weight: bold;
	float:left
}
.highlight h1, .highlight p {
	color: #fff !important;

}
.highlightborder {
	border: 1px solid #8f8d8e;
	width: 580px;
	padding: 5px;
	float: left;
	margin-bottom: 20px;
}
#highlighttext h5{
	color: #FFF !important;
	font: italic bold 12px Georgia, "Times New Roman", Times, serif !important;
	text-transform: none !important;
}
#slideshow {
	width: 588px;
	height: 380px;
	position: relative;
        margin-top: 27px;
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}
#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

.peopleimg {
float: left;
padding-right: 10px;
padding-bottom: 10px;
}

/* @end */