/*
---------------------
01. General
02. Global Classes
03. Structure
04. Navigation
05. Forms
------------------------


----------------------------------------------------------
01. GENERAL
---------------------------------------------------------- */
@import url("reset.css");
a:link, a:visited { color:#666; text-decoration:underline; text-transform:none; }
a.active { color:#E35A01  }
li a:link, li a:visited { font-weight:bold; text-decoration:none; text-transform:uppercase; }
a:hover, li a:hover { color:#E35A01 }
body { background:#fff; color:#666; font:62.5% 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif; text-align:center }  
h1 { font-weight:normal; margin-bottom:1em;}
h1.title { font-weight:bold; text-transform:uppercase;}
h1 a:link, h1 a:visited { background:url(../images/icon_arrow.gif) no-repeat 0 0.3em; padding-left:0.75em; text-decoration:none; text-transform:uppercase;}
hr { border:0; clear:both; color:#ccc; background:#ccc; height:1px; margin:2.5em 0 7px }
hr.dotted { background:none; border-top:1px dotted #ccc; height:1px; margin:2em 0;}
ol { list-style-type:decimal; list-style-position:inside;}
p {  margin-bottom:1em;}


/*
----------------------------------------------------------
02. GLOBAL CLASSES
---------------------------------------------------------- */
.clear { clear:both }
.float-left { float:left; }
.float-right  { float:right }
.nopadding { padding:0 }
.noindent { margin-left:0; padding-left:0 }
.nobullet { list-style:none; list-style-image:none }
.portfolio, #services-anim { height:575px; position:absolute; right:0; top:0; }
.replace { text-indent:-9999px;}
.wrap { font-size:1.1em; margin:0 auto; text-align:left; width:860px }


/*
----------------------------------------------------------
03. STRUCTURE
---------------------------------------------------------- */
#home { background-repeat:no-repeat; background-position:35px right;}
#home #content { height:700px;}
#home #logo { margin-top:200px;}
#home #callout { background:url(../images/icon_callout.gif) no-repeat left top; margin:3em 0 0 -61px; padding:58px 0 30px 65px; width:220px;}
	#home #callout h1, #home #callout p { margin-bottom:0.2em;}
	#home #callout a { text-transform:none;}
#content { font-size:1.1em; line-height:1.4em; height:575px; /*overflow:hidden;*/ position:relative; }
#content-main { /*overflow:hidden;*/ }
#content-main.valign { width:360px; }
#footer { clear:both; color:#999; margin-top:1em; padding-bottom:3em; position:relative; text-align:center; }

/* LISTS */
ul.arrow { margin-bottom:1.5em;}
ul.arrow li { margin-bottom:1em; }
ul.arrow li a { background:url(../images/icon_arrow.gif) no-repeat 0 0.3em; padding-left:0.75em;}

ul.bullet { list-style-type:disc; margin:0 0 1.5em 1em;}
ul.bullet li { list-style-position:inside; }

ul.expertise { margin-bottom:1.75em;}
ul.expertise li { display:inline;}
ul.expertise li span { color:#ccc; padding:0 5px 0 5px;}
ul.expertise li strong { padding-right:5px;}

ul.inline { overflow:hidden;}
ul.inline li { display:inline; }

ul.twocol { margin-bottom:1em; overflow:hidden; width:250px;}
ul.twocol li { display:block; float:left; width:110px;}

ul#resume li { background:url(../images/icon_arrow.gif) no-repeat 0 0.3em; padding-left:0.75em; }
ul#resume li a { background:none; text-decoration:underline; text-transform:none; padding:0; }


/*
----------------------------------------------------------
04. NAVIGATION
---------------------------------------------------------- */
#nav-main { height:70px; overflow:hidden; position:relative; }
#nav-main li { display:inline; float:left; margin-right:30px; }
#nav-main li.end, #home #nav-main li.end { margin-right:0; }
#nav-main li a { background-image:url(../images/nav.gif); background-repeat:no-repeat; display:block; font-weight:bold; height:40px; margin-top:40px; text-indent:-9999px; }

#nav-main li.logo { margin-top:-10px; }
#nav-main li.logo a { background:none; text-indent:0; height:65px; width:74px;}
#nav-main li.appts a { background-position:-544px 0; margin-top:0; position:absolute; right:1px; top:0; width:171px; }
#nav-main li.appts a:hover, #nav-main li.appts a.active { background-position:-544px -40px }
#nav-main li.about a { background-position:-715px 0; width:37px; }
#nav-main li.about a:hover, #nav-main li.about a.active { background-position:-715px -40px }
#nav-main li.services a { background-position:0 0; width:55px; }
#nav-main li.services a:hover, #nav-main li.services a.active { background-position:0 -40px }
#nav-main li.products a { background-position:-65px 0; width:60px; }
#nav-main li.products a:hover, #nav-main li.products a.active { background-position:-65px -40px }
#nav-main li.stylists a { background-position:-132px 0; width:54px; }
#nav-main li.stylists a:hover, #nav-main li.stylists a.active { background-position:-132px -40px }
#nav-main li.blog a { background-position:-192px 0; width:93px; }
#nav-main li.blog a:hover, #nav-main li.blog a.active { background-position:-192px -40px }
#nav-main li.events a { background-position:-292px 0; width:132px; }
#nav-main li.events a:hover, #nav-main li.events a.active { background-position:-292px -40px }
#nav-main li.careers a { background-position:-432px 0; width:51px; }
#nav-main li.careers a:hover, #nav-main li.careers a.active { background-position:-432px -40px }
#nav-main li.contact a { background-position:-488px 0; width:51px; }
#nav-main li.contact a:hover, #nav-main li.contact a.active { background-position:-488px -40px }

/* HOMEPAGE NAV EXCEPTIONS */
#home { position:relative;}
#home #image-fade { position:absolute; right:0; top:40px; height:900px; width:1100px }
#home #nav-main li { margin-right:45px; }

/* FOOTER */
#footer ul { font-size:0.95em; line-height:1.8em; margin:0 auto; }
#footer li { border-right:1px dotted #ccc; display:inline; letter-spacing:0.1em; margin-right:6px; padding-right:6px; text-transform:uppercase; white-space:nowrap; }
#footer li span { text-transform:none; }
#footer li.end { border-right:0; margin-right:0; padding-right:0; }
#footer li a { color:#999; font-weight:normal; }
#footer li a:hover { color:#E35A01 }
#footer li#moncur { margin-left:8px; position:relative; letter-spacing:normal; text-transform:none; }
#footer li#moncur span  { color:#999; font-size:10px; position:absolute; left:18px; top:-4px; white-space:nowrap;}


/*
----------------------------------------------------------
05. SUBPAGES
---------------------------------------------------------- */
table#content-main { height:575px; }
table#content-main td { vertical-align:middle;}

/* SERVICES */
#services ul.arrow { float:left; width:165px; }
#services ul.inline { width:500px }
#services ul.inline li { display:inline; float:left; margin-right:2em; }
#services ul.inline li a.active { color:#E35A01  }
#services p#identity { display:inline; float:left; width:190px; }
table.services { margin-bottom:3em; width:355px;}
table.services thead th { border:dotted #ccc; border-width:0 0 1px 1px; font-weight:normal; padding:3px; text-align:center; }
table.services thead th.category { border-left:0; padding-left:0; text-align:left; text-transform:uppercase;}
table.services thead th h2 { font-weight:bold; margin-bottom:0;}
table.services tbody th { border-bottom:1px dotted #ccc; font-weight:normal; padding:3px 0; width:150px;}
table.services tbody td { border:dotted #ccc; border-width:0 0 1px 1px; padding:3px 6px 3px 10px; text-align:center; vertical-align:top;  }
table.services tbody td span { display:block; margin:0 auto; text-align:right; width:25px;  }
table.services tbody td.left { text-align:left; }
table.treatments tbody th { width:100px;  }
table.treatments tbody td { text-align:left;  }

/* PRODUCTS */
#products h1 { float:left; display:inline; margin:0 4em 0 0; padding-bottom:1.5em; width:280px;}
#products #footer { border-top:1px solid #E1E1E1; clear:both; margin-top:-1.1em; padding-top:2em;}
#products .portfolio { height:425px; position:static; margin-bottom:2em;}
ul#brands { float:left; display:inline;}
ul#brands li.end { margin-right:0;}
ul#brands li { background-image:url(../images/brands.gif); background-repeat:no-repeat; display:block; display:inline; float:left; height:50px; margin-right:4em; padding:0 10px; text-indent:-9999px }
ul#brands li.bb { background-position:10px 0; cursor:pointer; width:150px; }
ul#brands li.bb a { background:url(../images/brands.gif); background-repeat:no-repeat; background-position:0 0; display:block; height:50px; width:150px; }
ul#brands li.bb a:hover { background-position:0 -50px; }


ul#brands li.shu { background-position:-165px 0; width:108px; }
ul#brands li.kerastase { background-position:-290px 0; width:97px; }

/* STYLISTS */
div.stylist-group { float:left; display:inline; margin-top:0.5em; width:120px;}
div.stylist-group h2 { margin-bottom:0.5em;}
div.stylist-group ul.arrow li { margin-bottom:0.3em;}
div.stylist-group ul.arrow li a { background:url(../images/icon_arrow.gif) no-repeat 0 0.25em; font-weight:normal; text-transform:none;}

/* PROMOS & EVENTS */
#events #content, #events #content-main { overflow:visible;}
#events #footer { border-top:1px solid #E1E1E1; margin-top:-1.1em; padding-top:2em;}
#events .portfolio { height:425px; position:static; margin-bottom:2em;}
#events div.promo { border-right:1px dotted #ccc; display:inline; float:left; margin-right:2em; padding-right:2em; width:175px;}
#events div.end { border-right:0; margin:0; padding:0;}

#events #promos { color:#fff; margin-bottom:5em; position:relative; height:425px; width:860px;} 
#events #promos a { color:#fff; display:block; text-decoration:none; overflow:hidden; position:relative; text-transform:uppercase; } 
#events #promos a strong { display:block; font-size:2em; font-weight:bold; line-height:1.2em; margin-bottom:0.2em; } 
#events #promos a span.description { display:block; font-size:1.3em; font-weight:normal; line-height:1.3em; } 
#events #promos a span.link { background:url(../images/icon_promolink.gif) no-repeat 0 0.3em; display:block; font-size:1em; padding-left:10px; position:absolute; } 
#events #promos a:hover span.link { color:#E75C01; }

#events #promo-major { border:2px solid #fff; border-width:0 0 2px 2px; position:absolute; right:0; top:20px; height:230px; width:460px; } 
#events #promo-major a { height:230px; padding:65px 235px 0 35px;  width:190px; } 
#events #promo-major a span.link { top:210px; }

#events div.promo-secondary { background-image:url(../images/bg_promosquares.png); background-repeat:no-repeat; border-left:2px solid #fff; position:absolute; bottom:0; height:173px; width:229px;} 
#events div.promo-secondary a { height:148px; padding:25px 25px 0 35px; width:169px;} 
#events div.promo-secondary a span.link { top:153px; }

#events #promo2 { background-position:left top; right:231px; } 
#events #promo3 { background-position:right top; right:0; } 
#events #promos h1, #events #promos h2 { text-transform:uppercase;}
#events #promos h1 { font-size:24px; font-weight:bold; line-height:1.2em; margin-bottom:0;}
#events #promos h2 { font-size:14px; font-weight:normal; line-height:1.3em;}

/* EVENT DETAILS */
#details #content, #details #content-main { height:auto; min-height:575px; }
#details #post-content { padding-top:5em; margin-bottom:3em;}
	#details #post-content ul.arrow li { background:url(../images/icon_arrow.gif) no-repeat 0 0.3em; margin-bottom:0.2em; padding-left:0.75em;}}

/* BLOG */
#blog #content-main { width:950px;}
#blog-nav { float:left; margin-right:2em; width:200px; }
#blog-nav li { margin-bottom:0.2em;}
#blog-nav li a { display:block; font-weight:normal; text-transform:none;}
#blog-nav li.archives { margin-top:1.5em;}
#blog-nav li.archives a { font-weight:bold;}
#blog #post-content { border-left:1px dotted #ccc; display:inline; float:left; height:400px; overflow:auto; padding:0 5em 1em 1.5em; width:600px;}
#blog #post-content h1 { font-size:1.8em; line-height:1.2em; margin-bottom:0.2em;}
#blog #post-content p.date span { color:#ccc; padding:0 2px;}
#blog #post-content .thumbs li a { border:1px dotted #fff; display:block; float:left; padding:10px;}
#blog #post-content .thumbs li a:hover { border:1px dotted #ccc; }

/* PHOTO GRIDS */
#grid { margin-bottom:3em; position:relative; height:300px; width:602px;}
#grid div { overflow:hidden; position:absolute;}
#grid #major { border-right:2px solid #fff; height:300px; width:400px;}
#grid div.minor { height:149px; width:200px; right:0;}
#grid #img2 { border-bottom:2px solid #fff; top:0;}
#grid #img3 { bottom:0;}
#grid.single { float:left; width:400px; margin-right:3em;}

#blog.template #content { height:auto; min-height:300px; overflow:hidden; padding:6em 0 1.5em; width:850px;}
#blog.template #blog-nav { display:inline; width:190px;  }
#blog.template #blog-nav li { width:190px;  }
#blog.template #post-content { display:inline; height:auto; overflow:visible; padding-right:0; width:605px;  }





/* BLOG ARCHIVES */
#archive-list { height:400px; overflow:auto; width:350px;}
#archive-list p.date { margin-bottom:0;}
#archive-list p.date span { color:#ccc; padding:0 2px;}
#archive-list h2 { margin-bottom:1.25em;}

/* CONTACT */
div.hours, div.location { display:inline; float:left; margin:0 2em 2em 0; width:170px;}
div.location ul { margin-bottom:1em;}
div.location a {  background:url(../images/icon_arrow.gif) no-repeat 0 0.25em; font-weight:normal; padding-left:0.75em; text-transform:none; }
div.hours {  margin-right:0;}

/* SITE MAP */
#sitemap h1.spacer { margin-top:1em;}
#sitemap h1.section, #sitemap ul.arrow li { margin-bottom:0.3em;}
#sitemap ul.arrow li a { font-weight:normal; text-transform:none;}
#sitemap hr { margin:0 0 1em;}

/* PRODUCT COUPON */
body#coupon { margin:5em; text-align:left;}
body#coupon div { border:1px dashed #666; font-size:1.2em; line-height:1.5em; margin-bottom:2em; height:260px; padding:65px 2em 2em; width:320px }
body#coupon a#logo { border-right:1px solid #ccc; display:inline; float:left; margin-right:1.5em; padding:1em 1.7em 0 0; }
body#coupon h1 { color:#E35A01; font-size:2em; display:inline; font-weight:bold; float:left; line-height:1.25em; padding-top:0.25em; text-transform:uppercase; width:190px;}
body#coupon p strong { text-transform:uppercase;}
body#coupon p#disclaimer { font-size:0.9em; line-height:1.4em; margin-bottom:0.25em;}
body#coupon ul { font-size:1.2em;}



/*
----------------------------------------------------------
05. FORMS
---------------------------------------------------------- */
form div { display:inline; float:left; margin:0 8px 0 0; }
form div p { color:#666; white-space:nowrap;}
input, label, option, select, textarea { color:#666; font:11px Helvetica, Arial, Verdana, sans-serif; }
label { display:block; float:left; font-weight:bold; padding-right:15px; width:150px }
input, textarea, ul.checklist { background:url(../images/bg_diag.gif) repeat; border:1px solid #E1E2E2; display:block; margin-bottom:0.75em; width:215px;}
input.btn { border:1px dotted #E35A01; display:inline; font-weight:bold; margin:0 2em 2em 0; padding:5px; text-transform:uppercase; width:auto;  }
input.textfield { padding:3px; width:140px;}
span.required, label span.required { color:#E35A01 }
textarea { padding:3px; width:300px; }

/* CONTACT */
#contact form { clear:left; width:400px;}


/* APPOINTMENTS */
#appt form { width:400px;}
#appt form div img { display:inline; float:left;}
#appt #appt-date { float:left; display:inline;}

form div select { margin:2px 0 3px; width:150px;}
form div select#appt-stylist { margin-bottom:1em; width:305px;}
#appt form div #contact-name { width:296px;}

ul#errors { background:#F9CFB3; border:1px solid #F28F4E; color:#333; margin-bottom:1em; padding:10px; width:280px;}
ul#errors li { background:url(../images/icon_arrow.gif) no-repeat 0 0.3em; padding-left:0.75em;}



/* CHECKLIST */
ul.checklist { border:1px dotted #ccc; height:120px; overflow:auto; padding:5px; width:297px; }
ul.checklist input { background:none; border:0; display:inline; margin:0; vertical-align:middle; width:auto;}
ul.checklist li { padding:3px;}
ul.checklist li.group { border-top:1px dotted #E35A01; float:none; font-weight:bold; margin-top:1em; text-transform:uppercase; width:250px;}
ul.checklist li.first { border:0; margin-top:0;}
ul.checklist label { display:block; float:none; font-weight:normal; width:auto; }