@charset "utf-8";

/* CSS RESET */
body,div,ul,ol,li,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}em,strong{font-style:normal;font-weight:normal;}li{list-style:none;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%;}

/* MAIN CSS */

html, body{
	background: #FFF url(../images/background_tile.jpg) repeat-x;
	color:#999;
	font-family: Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
	font-size:21px;
	font-style: normal;
	font-weight: 400;
	line-height: 30px;
}

.gold {
	color: #cb873d;
	font-style: italic;
}

a {
	color: #7d5425;
}

a:hover{
	color:#999;
}

a:active{
	color: #7d5425;
}

a:visited{
	color: #7d5425;
}

p{
	font-family: serif;
}

i, h4, .partner-desc h2 {
	color: #cb873d;
}

.font18{
	font-size: 18px;
}

h1{
	font-size: 38px;
	font-weight:350;
	margin-bottom: 30px;
	color: #7d5425;
}

h2, h3, h5{ 
	font-size: 28px;
	color: #7d5425;
	margin: 0;
	padding: 0;
}

h3{
	padding: 25px 0 10px 0;
	margin: 0;
	text-align:center;
}

h4{
	font-size: 22px;
	padding: 10px 0 10px 0;
	margin: 20px 0 0 0;
	font-weight: normal;
}

h5 {
	padding: 25px 0 0 0;
	margin: 0;
	text-align:left;
}

.bigtext {
	margin-top: 30px;
	font-size: 30px;
	color: #7d5425;
}

.smalltext {
	font-size: 12px;
}

.center{
	text-align:center;
}

.left{
	text-align:left;
}

.padtop25{
	padding-top: 25px;
}

.padtop40{
	padding-top: 40px;
}

.caption-award{
	font-size: 16px;
	padding-top: 15px;
	color:#999;
}

.caption{
	font-size: 14px;
	color: #cb873d;
}

.grey{
	color:#999;
}
	
.header, .bodycontent{
	width: 940px;
	margin: 0 auto;
}

.header .left, .header .right{
	width: 340px;
	height: 175px;
	float:left;
}

.header .top{
	width: 340px;
	height: 40px;
	float:left;
	padding-top: 10px;
}

.header .top-left{
	text-align:left;
	width: 90px;
	float:left;
	padding-left: 10px;
}

.header .top-right{
	text-align:right;
	width: 230px;
	float:left;
	padding-right: 10px;
}

.header .top p{
	font-size: 18px;
	font-style: italic;
	color: #7d5425;
}

.header .top p img{
	padding-left: 15px;
}

.header .top p a{
	text-decoration: none;
}

.header .bottom{
	width: 340px;
	height: 125px;
	float:left;
}

.header .center{
	width: 260px;
	height: 175px;
	float:left;
	background: url(../images/roar-logo.jpg) no-repeat;
}

.header .right{
	width: 340px;
	height: 175px;
	float:left;
}

ul.menu{padding:0; margin:0; list-style:none; clear:both;}

.menu li{overflow:hidden; text-indent:-9999px; float:left;}

.menu li a{background:url('../images/menu-sprite.jpg') no-repeat; width:100%; height:100%; display:block;}

/* Salon Button */
.menu li.salon{width:93px; height:75px;}
.menu li.salon a{background-position:0 0;}
.menu li.salon a:hover{background-position: 0 -125px;}
.menu li.salon a.selected{background-position: 0 -125px;}

/* Services Button */
.menu li.services{width:88px; height:75px;}
.menu li.services a{background-position:-93px 0;}
.menu li.services a:hover{background-position:-93px -125px;}
.menu li.services a.selected{background-position:-93px -125px;}

/* Awards Button */
.menu li.awards{width:84px; height:75px;}
.menu li.awards a{background-position:-181px 0;}
.menu li.awards a:hover{background-position:-181px -125px;}
.menu li.awards a.selected{background-position:-181px -125px;}

/* Team Button */
.menu li.team{width:72px; height:75px;}
.menu li.team a{background-position:-265px 0;}
.menu li.team a:hover{background-position:-265px -125px;}
.menu li.team a.selected{background-position:-265px -125px;}

/* News Button */
.menu li.news{width:75px; height:75px;}
.menu li.news a{background-position:-340px 0;}
.menu li.news a:hover{background-position: -340px -125px;}
.menu li.news a.selected{background-position:-340px -125px;}

/* Reviews Button */
.menu li.reviews{width:88px; height:75px;}
.menu li.reviews a{background-position:-415px 0;}
.menu li.reviews a:hover{background-position:-415px -125px;}
.menu li.reviews a.selected{background-position:-415px -125px;}

/* Partners Button */
.menu li.partners{width:92px; height:75px;}
.menu li.partners a{background-position:-502px 0;}
.menu li.partners a:hover{background-position:-502px -125px;}
.menu li.partners a.selected{background-position:-502px -125px;}

/* Contact Button */
.menu li.contact{width:85px; height:75px;}
.menu li.contact a{background-position:-593px 0;}
.menu li.contact a:hover{background-position:-593px -125px;}
.menu li.contact a.selected{background-position:-593px -125px;}

.slogan{
	width: 940px;
	height: 50px;
	float:left;
	font-size: 28px;
	font-weight: 500;
	color: #7d5425;
	text-align: center;
	padding-top: 5px;
}

.slideshow {
	clear:both;
	width: 916px;
	height: 250px;
	margin: 0 auto;
	background-color: #cdcdcd;
    border: 1px solid #cc9050;
	padding:12px;
	margin-bottom: 15px;
	position: relative;
}

.kenburns{
	width: 916px;
	height: 250px;
	border: 1px solid #FFF;
	position: absolute;
}

.bookme{
	position: absolute;
	z-index: 10;
	width: 165px;
	height: 167px;
	top: -8px;
	left: -8px;
	float:right;
}

.bodyleft{
	width: 620px;
	margin-right: 80px;
	float:left;
}

.bodyleft img{
	padding: 0 15px 0 0;
	float:left;
}

.bodyright{
	width: 240px;
	float:left;
	padding-top: 25px;
}

.footspace{
	clear:both;
	width: 100%;
	height: 60px;
}

.footer{
	width: 100%;
	height: 120px;
	margin-top: 40px;
	background: #feedc8;
	border-top: 5px solid #CCC;
}

.footer-wrap{
	width: 940px;
	margin: 20px auto 0 auto;
}

.footer .left, .footer .right{
	width: 470px;
	height: 50px;
	float:left;
}

.footer .left p, .footer .right p{
	font-size: 14px;
}

.footer .left{
	text-align:left;
}

.footer .right{
	text-align:right;
}

.footer .right{
}

/* Services */

.serv-head{
	clear:both;
	width: 940px;
}

.serv-head h1{
	font-size: 32px;
	margin: 0;
	padding: 0;
}

.serv-head .left, .serv-head .right{
	width: 470px;
	height: 60px;
	float:left;
}

.serv-head .left{
	text-align:left;
}

.serv-head .right{
	text-align: right;
}

.serv-one, .serv-two, .serv-three{
	background: #f7f7f7;
	width: 300px;
	height: 1050px;
	float:left;
	line-height: 22px;
	color: #8e6a3e;
}

.serv-one, .serv-two{
	margin-right: 20px;
}

.serv-one .heading, .serv-two .heading, .serv-three .heading{
	width: 300px;
	height: 116px;
}

.serv-one .heading{
	background: url(../images/cutting-styling.jpg) no-repeat;
}

.serv-three .service{
	width: 260px;	
	padding: 20px 20px 0 20px;
}

.serv-three .serv-desc{
	margin-top: 10px;
	font-size: 18px;
	color: #8e6a3e;
	line-height: 23px;
}

.book-me{
	text-align:center;
}

.book-me img{
	margin:30px 0 0 0;
}

.serv-two .heading{
	background: url(../images/color-highlights.jpg) no-repeat;
}

.serv-three .heading{
	background: url(../images/specialty-services.jpg) no-repeat;
}

.serv-left{
	width: 170px;
	padding:20px 10px 20px 20px;
	float:left;
}

.serv-right{
	width: 60px;
	padding: 20px;
	float:left;
	text-align: right;
}

.serv-right p{
	text-align:right;
}

.stylists{
	clear: both;
	width: 940px;
	height: 100px;
}

.stylists ul{padding:0; margin:0; list-style:none; clear:both;}

.stylists li{overflow:hidden; text-indent:-9999px; display:inline; float:left;}

.stylists li a{background:url('../images/stylists.jpg') no-repeat; width:100%; height:100%; display:block;}

/* Roar Team Thumbnails */
.stylists li.rory{width:123px; height:116px;}
.stylists li.rory a{background-position:0 0;}

.stylists li.lauren{width:140px; height:116px;}
.stylists li.lauren a{background-position:-123px 0;}

.stylists li.matthew{width:137px; height:116px;}
.stylists li.matthew a{background-position:-263px 0;}

.stylists li.helene{width:140px; height:116px;}
.stylists li.helene a{background-position:-400px 0;}

.stylists li.brian{width:138px; height:116px;}
.stylists li.brian a{background-position:-540px 0;}

.stylists li.elese{width:134px; height:116px;}
.stylists li.elese a{background-position:-678px 0;}

.stylists li.emily{width:128px; height:116px;}
.stylists li.emily a{background-position:-812px 0;}

.team-full{width: 940px; padding: 20px 0 0 0;}

.team-full p, .team-left p, .team-right p {
	padding-top: 10px;
	font-size: 20px;
}

.team-full img, .team-left img, .team-right img {padding: 0 30px 10px 0; float:left;}

.team-full h1{
	margin: 0;
	padding: 0;
}

.team-left{
	width: 450px;
	padding: 15px 40px 40px 0;
	float:left;
}

.team-right{
	width: 450px;
	padding: 15px 0 40px 0;
	float:left;
}

.hrule{
	clear:both;
	width: 940px;
	height: 6px;
	background: url(../images/dotted-line.jpg) repeat-x;
	margin: 15px 0 15px 0;
}

.read-more{
	float:right;
}

ul.read-more{padding:0; margin:0; list-style:none; clear:both;}

.read-more li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin:0; padding:0;}

.read-more li a{background:url('../images/read-more.jpg') no-repeat; width:100%; height:100%; display:block;}

/* Roar Team Thumbnails */
.read-more li.click{width:85px; height:20px;}
.read-more li.click a{background-position:0 0;}
.read-more li.click a:hover {background-position: 0 -20px;}

.partner{
	width: 620px;
	float:left;
	margin-top: 40px;
}

.partner-desc {
	width: 620px;
	float:left;
	margin-top: 15px;
}

.pages {
	width: 620px;
	margin-top: 20px;
}

.pagenum{
	width: 310px;
	text-align:left;
	float:left;
}

.nextpage{
	width: 310px;
	text-align:right;
	float:left;
}

.news-item{
	width: 217px;
	height: 370px;
	float:left;
	padding-bottom: 25px;
	margin-bottom: 25px;
	overflow: hidden;
}

.news-img{
	width: 220px;
	height: 220px;
	float:left;
}

.news-caption{
	width: 220px;
	height: 150px;
	float:left;
	color: #666;
}

.news-caption p{
	padding: 10px 15px 0 15px;
	font-size: 16px;
	line-height: 21px;
}

.pad20{
	margin-right: 20px;
}

.body-full{
	width: 940px;
	padding-bottom: 40px;
	float:left;
}
	

/* Music Player */
div.jp-audio{
	width:80px;
}

div.jp-audio div.jp-type-single div.jp-interface {
	height:15px;
}
 div.jp-type-playlist div.jp-interface {
	height:15px;
}
div.jp-interface ul.jp-controls a {
	position: absolute;
	overflow:hidden;
	text-indent:-9999px;
}

a.jp-mute{
	width: 80px;
	height: 15px;
}
a.jp-unmute {
	width:80px;
	height:15px;
}
a.jp-mute {
	background: url("../skin/player-skin.png") 0 0 no-repeat;
}
a.jp-mute:hover {
	background: url("../skin/player-skin.png") 0 -15px no-repeat;
}
a.jp-unmute {
	background: url("../skin/player-skin.png") 0 -31px no-repeat;
	display: none;
}
a.jp-unmute:hover {
	background: url("../skin/player-skin.png") 0 -47px no-repeat;
}

.clearboth{
	clear:both;
}