@import url(tripoli.base.css);
@import url(jquery.fancybox.css);

/* color chips

bright pink: #ec008c
light teal: #e2f2ea
medium teal: #d4ece1

*/

html {background-color:#000;
}

body {font-family:helvetica, arial, sans-serif; color:#000; background-color:#000;
}

#branding {float:left; width:135px; height:80px;
}

img.stylist {margin-top:-35px;
}

img {-ms-interpolation-mode:bicubic; /* fixes image resizing nastiness in IE */
}





/*----- mainnav
---------------------- */

#mainnav { background-color:#000;
}

#mainnav ul {margin:0;
}

#mainnav ul li {float:left; height:80px; text-indent:-9999px; background-color:#000; display:block; list-style-type:none; margin:0;
}

#mainnav ul li a {background:url(../images/mainnav-sprites.png) left top #000 no-repeat; display:block; height:80px; width:96px; margin:0;
}
	#mainnav ul li a#services, #mainnav ul li a#services:visited {background-position:0 0;}
		#mainnav ul li a#services:hover, #mainnav ul li a#services:focus, #mainnav ul li.on a#services {background-position:0 -80px !important;}
		
	#mainnav ul li a#philosophy, #mainnav ul li a#philosophy:visited {background-position:-92px 0; width:114px;}
		#mainnav ul li a#philosophy:hover, #mainnav ul li a#philosophy:focus, #mainnav ul li.on a#philosophy {background-position:-92px -80px !important;}
		
	#mainnav ul li a#staff, #mainnav ul li a#staff:visited {background-position:-212px 0; width:84px;}
		#mainnav ul li a#staff:hover, #mainnav ul li a#staff:focus, #mainnav ul li.on a#staff {background-position:-212px -80px !important;}
		
	#mainnav ul li a#products, #mainnav ul li a#products:visited {background-position:-302px 0; width:116px;}
		#mainnav ul li a#products:hover, #mainnav ul li a#products:focus, #mainnav ul li.on a#products {background-position:-302px -80px !important;}
		
	#mainnav ul li a#education, #mainnav ul li a#education:visited {background-position:-411px 0; width:110px;}
		#mainnav ul li a#education:hover, #mainnav ul li a#education:focus, #mainnav ul li.on a#education {background-position:-411px -80px !important;}
		
	#mainnav ul li a#newsletter, #mainnav ul li a#newsletter:visited {background-position:-511px 0; width:116px;}
		#mainnav ul li a#newsletter:hover, #mainnav ul li a#newsletter:focus, #mainnav ul li.on a#newsletter {background-position:-511px -80px !important;}
		
	#mainnav ul li a#press, #mainnav ul li a#press:visited {background-position:-631px 0; width:87px;}
		#mainnav ul li a#press:hover, #mainnav ul li a#press:focus, #mainnav ul li.on a#press {background-position:-631px -80px !important;}
		
	#mainnav ul li a#contact, #mainnav ul li a#contact:visited {background-position:-724px 0; width:102px; margin:0;}
		#mainnav ul li a#contact:hover, #mainnav ul li a#contact:focus, #mainnav ul li.on a#contact {background-position:-724px -80px !important;}
		
		
		
		
		
/*----- sidenav
---------------------- */

#sidenav {margin-top:40px;
}

#sidenav ul {margin:0;
}

#sidenav li {margin:3px 0; list-style-type:none;
}

#sidenav ul li a:link, #sidenav ul li a:visited {text-transform:uppercase; font-weight:bold; font-size:1.1em; color:#000; text-decoration:none; display:block; padding:4px 5px 2px 20px; line-height:1.2;
}
	#sidenav ul li a:hover, #sidenav ul li a:focus, #sidenav ul li.on a {color:#fff !important; background-color:#ec008c;}




/*----- type
---------------------- */

h2 {font-size:12px; text-transform:uppercase; padding:0 9px 1px; font-family:'arial narrow'; margin:0;
}
	div.headline-bg {display:inline-block; border:solid 2px #000; background-color:#fff; margin:20px 0 10px;}
	h2.small {font-size:9px; padding-bottom:2px;}
	h2.big {font-size:21px; padding:0;}
	h2.white {color:#fff !important; padding:0;}

h3 {font-size:13px; padding:10px 0 0; margin:10px 0 0 10px; text-transform:uppercase; letter-spacing:1px; border-top:dotted 1px #000; font-family:'arial narrow';
}
	h3.noborder {border-top:none; margin:5px 0 0 10px; padding:0;}

p {font-size:1.1em; line-height:1.2; margin:0 0 10px 10px; padding:0;
}
	p.item-day {float:left; width:100px; display:inline; margin:0 0 2px 10px;}
	p.price-hours {float:right; width:150px; margin:0 80px 2px 0; display:inline;}
		.services-home p.item-day {width:140px; margin-bottom:5px;}
		.services p.item-day {width:150px; margin-bottom:5px;}
		.services-home p.price-hours {width:85px; margin:0 0 5px 0;}
		.services p.price-hours {width:170px; margin:0 0 5px 0;}
		p.subcat {font-weight:bold; margin-bottom:0;}
		p.note {font-size:1em; font-style:italic; clear:both; font-weight:normal;}
	p.price-desc {margin:-10px 0 5px 150px;}
	p.indent {margin-left:15px !important;}
		div.border p.indent {margin-left:15px !important;}
	
ul {font-size:1.1em; margin:0 30px 10px; padding:0;
}
	ul li {list-style-type:disc; line-height:1.1; margin:3px 0;}
	
ul#nav_categories {margin:0;
}
	ul#nav_categories li {margin:0; list-style-type:none; font-size:1em;}
	ul#nav_categories li p {font-size:1em;}
	
	
	
	
	

/*----- stylist-grid
---------------------- */

.stylist-grid a.stylist-thumb {margin:0 8px 8px 0; position:relative; display:block; float:left; width:150px; height:150px; text-decoration:none;
}

.stylist-grid a.stylist-thumb img {position:relative;
}

.stylist-grid a.stylist-thumb span {display:none; text-transform:uppercase; font-weight:bold; font-size:1.2em; letter-spacing:1px;
}

.stylist-grid a.stylist-thumb:hover span {display:inline; padding:2px 5px 3px; background-color:#fff; border:solid 2px #000; position:absolute; top:118px; left:10px; z-index:100;
}
	
	
	
	
	

/*----- stylists
---------------------- */
	
.specialties {float:left; display:inline; margin:20px 20px 0 0; width:160px;
}





/*----- home
---------------------- */
	
.promo-images {margin-top:-2px;
}

.promo-images img {padding:2px 0 5px; border-bottom:dotted 1px #000; margin:0;
}

.follow-us-chip {background:url(/images/follow-us-bg.png) #000 0 0 no-repeat; width:208px; height:38px; margin:-1px 0 0; padding:0;
}
	.follow-us-chip .facebook {margin:11px 5px 0 115px;}





/*----- contact
---------------------- */

.contact .wrapper {background:url(../images/contact-bg.png) left bottom no-repeat #d4ece1; min-height:580px;
}

.contact #main-content {position:relative;
}

.contact img.hours {margin-top:20px; margin-left:543px;
}

.contact .hours {margin-top:0; margin-left:555px;
}
	.contact .hours table p {padding:0 0 5px; font-weight:bold; text-transform:uppercase; font-size:12px; margin-left:0;}

.contact .address {margin-top:50px; margin-left:555px;
}

.address p {font-size:1.9em; font-weight:bold; line-height:1.4; margin-left:0;
}

.address a.map-link, .address a.map-link:visited {font-size:15px;
}
	.address a.map-link:hover, .address a.map-link:focus {color:#000;}
	
.contact .address p.social {font-size:1.9em; font-weight:bold; margin:15px 0 0;
}

.contact p { margin-left:0 !important;}





/*----- philosophy
---------------------- */

.philosophy p {font-size:1.4em; line-height:1.5; margin:0 0 8px; padding:0 10px 0 35px;
}
	.philosophy p.cite {text-align:right;}

.philosophy h2 {margin-bottom:8px; padding:0 10px 0 35px;
}
	
	
	
/*----- services
---------------------- */

a.makeup-artists, a.makeup-artists:visited {color:#ec008c; font-weight:bold;
}

a.makeup-artists:hover, a.makeup-artists:focus {color:#000;
}




/*----- news
---------------------- */

.newsletter h3 {border-top:none; margin:0 0 -10px 10px; padding-top:0;
}

.newsletter h4 {font-weight:bold; text-transform:uppercase; border-top:dotted 1px #000; margin:10px 0 5px 10px; padding:15px 0 0; font-size:11px;
}




/*----- products
---------------------- */

/*.hair-care .line {background:url(/images/hair-care-bg.jpg) right bottom no-repeat #e2f2ea;
}*/





/*----- general
---------------------- */

.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;
}

.clear {clear:both; height:1px; overflow:hidden; line-height:1%; font-size:0; margin-bottom:-1px;
}

div.border {border-top:dotted 1px #000; padding:10px 0 0; margin: 0 0 0 10px; clear:both;}
	div.border p, div.border h3 {margin-left:0 !important;}

a, a:visited { color:#ec008c; text-decoration:none;
}
	a.toggle, a.toggle:visited {color:#ec008c;}
	a.toggle:hover, a.toggle:focus {color:#000;}

a:hover, a:focus {color:#000;
}

.running-float-left {float:left; display:inline; margin:5px 15px 5px 0;
}







/*-----
------- layout -------
--------------------------- */

#container {overflow:auto; /*clears all contained floats*/ width:960px; margin:0 auto; overflow:auto;
}

.wrapper {float:left; width:960px; display:block; position:relative; /*prevents shifting when changing viewport in IE;thanks to Alan Gresley*/ background:url(../images/bg.png) 0 0 repeat-y #e2f2ea; min-height:350px;
}
	.philosophy .wrapper {background-image:none; background-color:#ec008c; min-height:520px;}

.footer {float:left; width:960px; display:block; position:relative; top:0; background-color:#000; color:#ccc; height:10px;
}
	.press .footer, .contact .footer {height:0;}

.header {float:left; width:960px; display:block; position:relative;
}

.line {float:left; width:960px; display:block; position:relative;
}

.item {position:relative; float:left; overflow:hidden; left:100%;
}

.fap-content {overflow:hidden;
}

#col-full {width:960px; margin-left:-960px; 
}

#col-1 {margin-left:-960px; width:135px; padding:0;
}
	.home #col-1 {width:738px; padding:0; margin-left:-960px; height:520px;}
	.philosophy #col-1 {width:400px; padding:40px; margin-left:-960px;}

#col-2 {margin-left:-825px; width:350px; padding:10px 30px 10px;
}
	.home #col-2 {width:208px; padding:0 7px; margin-left:-222px; height:520px;}
	.tri-col #col-2 {margin-left:-825px; width:235px; padding:10px 20px 20px;}
	.philosophy #col-2 {width:480px; padding:0; margin-left:-480px;}
	.stylist-grid #col-2 {width:650px; padding:0 175px 0 0; margin-left:-825px; margin-bottom:-8px;}
	.press #col-2 {width:410px; margin-left:-825px; padding:0;}
		.press #col-2 .fap-content {height:540px;}

#col-3 {margin-left:-415px; width:355px; padding:10px 30px 10px;
}
	#col-3-img {margin-left:-415px; width:415px; padding:0;}
	.press #col-3 {width:410px; margin-left:-410px; padding:0;}
		.press #col-3 .fap-content {height:540px;}
	.tri-col #col-3 {margin-left:-550px; width:235px; padding:10px 20px 20px;}
	.tri-col #col-4 {margin-left:-275px; width:235px; padding:10px 20px 20px;}
	.newsletter #col-3-img {margin-left:-414px;}
		.newsletter #col-3-img img {margin:0 0 5px 5px; float:left;}