body{
	margin: 0;
	padding: 0;
	background: #f4f9ee;
	background-image: url(../img/kb_bg.gif);
	background-repeat: repeat-x;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 1.4em;
	color: #666666;
}
h2, h3{
	color: #76c15c;
}
a:link, a:visited {outline-style:none;}
#wrapper{
	width: 850px;
	margin-left: auto;
	margin-right: auto;

}
#logo{
	float: left;
	background-image: url(../img/kb_logo.gif);
	background-repeat: no-repeat;
	width: 187px;
	height: 166px;
	margin: 22px 0 0 0;
	position: absolute;
	z-index: 5;
	*top: 0px;
}
#header{
	height: 142px;
}
#phone_no{
	float:right;
	margin-top: 6px;
	background-image: url(../img/phone_no.gif);
	height: 27px;
	width: 390px;
	text-indent: -9999px;
}
#navigation{
	position:relative;
	width: 630px;
	height:100px;

	float: right;
}	
#navigation .content {
	padding:50px 0 10px;
	position:relative;
	height:100px;
	overflow:hidden;
}

#navigation ul {
	position:relative;
	margin:0;
	list-style:none;
	top: -10px;
	z-index: 1;
}
#navigation li {
	float:left;
	position:relative;
	margin-right:2px;
}
#navigation li a {
	display:block;
	text-decoration:none;
}
#navigation li strong {
	display:block;
	overflow:hidden;
	text-indent:-9999em;
	cursor:pointer;
}
#navigation li span {
	/*background:url(../images/text-here.gif) no-repeat;*/
	position:absolute;
	top:-44px;
	/*left:-9999em;*/
}
#navigation li.here strong {
	width:145px;
	height:75px;/*change this to make slide work*/
	background:url(../img/home.png) no-repeat 0 100%;
}
#navigation li.hair strong {
	width:145px;
	height:75px;/*change this to make slide work*/
	background:url(../img/hair_salon.png) no-repeat 0 100%;
}
#navigation li.find_us strong {
	width:145px;
	height:75px;/*change this to make slide work*/
	background:url(../img/find_us.png) no-repeat 0 100%;
}
#navigation li.here span {
	background:url(../images/text-here.gif) no-repeat;
	width:106px;
	height:29px;
}

#navigation li.here span.home {
	background:url(../img/hair_salon.png) no-repeat;
		}
#navigation li.beauty strong {
	width:145px;
	height:75px;
	background:url(../img/beauty_spa.png) no-repeat 0 100%;
}
#navigation li.beauty span {
	background:url(../images/text-contact.gif) no-repeat;
	width:106px;
	height:29px;
}
#navigation li a:hover span, #navigation li.active a span, #navigation li.home a span{left:23px;}
#navigation li.home a span {top:-80px;}
#navigation li.here a:hover span { left:40px;}
#navigation li a:hover {border:0;}

/************************ MAIN CONTENT *******************************/
#content{
	clear: both;
	width: 100%;
	position: relative;
}
#page_text{
	clear: both;
	display: block;
}
.right{
	float: right;
	margin-top: 15px;
}
.left{
	float: left;
	margin-top: 50px;
}
.clear{
	clear: both;
}
#voucher{
	background-image: url(../img/voucher.jpg);
	background-repeat: no-repeat;
	width: 327px;
	height: 250px;
	float: right;
	position: relative;
	text-indent: -9999px;
}
.voucher_btn{
	background-image: url(../img/download.jpg);
	height: 45px;
	width: 182px;
}
.voucher_btn:hover{
	background-position: 0 -45px;
}
#voucher a{
	float: right;
	margin-top: 210px;
	font-size: 1.4em;
	color: #76C15C;
	top: 140px;
	right: -40px;

}
.box_right{
	float: right;
	margin-right: 20px;
	opacity: 1;
	-moz-opacity:1;
	filter:alpha(opacity=100);
	cursor: pointer;
}
.box_right:hover{
	opacity: 0.5;
	-moz-opacity:0.5;
	filter:alpha(opacity=50);
}
.box_left{
	float: left;
	margin-left: 20px;
	opacity: 1;
	-moz-opacity:1;
	filter:alpha(opacity=100);
	cursor: pointer;
}
.box_left:hover{
	opacity: 0.5;
	-moz-opacity:0.5;
	filter:alpha(opacity=50);
}
ul#portfolio li img{
	padding: 4px;
	border: 0px;
}
ul#portfolio2 li img{
	padding: 4px;
	border: 0px;
	z-index: 0;
	position: relative;
}

.fade{
	margin-bottom: 2em;
}

.fade p{
	margin-bottom: 2em;
	text-align: center;
	width: 100%;
	background: #fff;
}

#anim a.linkClass8 { background:url(/img/download.jpg) top left no-repeat;	width:182px;height: 45px;}
#anim a.linkClass9 { background:url(/img/hair_pricelist_btn.jpg) top left no-repeat; width:182px; height: 45px;}
#anim a.linkClass10 { background:url(/img/salon_pricelist_btn.jpg) top left no-repeat; width:182px; height: 45px;}
#gallery_horizontal{
	margin-top: 15px;
	width: 585px;
	height: 348px;
	background-image: url(../img/gallery_horiz.gif);
	background-repeat: no-repeat;
	background-position: 0 30px;
	padding-top: 50px;
	*padding-top: 62px;
	padding-left: 5px;
}
#gallery_horizontal li{
	list-style: none;
}
#gallery_vertical{
	width: 246px;
	height: 386px;
	background-image: url(../img/gallery_vert.gif);
	background-repeat: no-repeat;
	float: right;
	*background-position: 0 30px;
	*padding-top: 42px;
	padding-left: -55px;

}
#gallery_vertical li{
	list-style: none;
	left: 10px;
	top: -2px;
	*left: -30px;
}
#price_list li{
	list-style: none;
	margin-bottom: 1px;
	margin-left: 0px;
}
#price_list ul {
	padding: 0px;
	margin: 0px;
	margin-left:-40px;
	display: block;
}
#price_list label{
	width: 230px;
	display: inline-block;
}
.p_list{
	float: left; 
	font-size: 0.9em;
	color: #666666;
}
.p_list ul{
	padding-left: 0px;
}
.p_list i{
	color: #76C15C;
}
.p_list h4{
	margin: 0px;
	color: #76C15C;
	*font-size: 1em;
}
.p_list span{
	padding-left: 5px;

}
.p_list img{
	float: left;
	border: 1px solid #efefef;
	margin: 5px;
	margin-left: -5px;
	
}
.half{
	width: 44%;
	margin-right: 15px;
	margin-left: 20px;
	
}
.head{
	background-image: url(../img/green_star.jpg);
	background-repeat: no-repeat;
	background-position: middle left;
	height: 22px;
	padding-left: 26px;
	padding-top: 5px;
}

.tab_list{
	float: left; 
	font-size: 0.8em;
	color: #666666;
}
.tab_list ul{
	padding-left: 0px;
}
.tab_list i{
	color: #76C15C;
}
.tab_list h4{
	margin: 0px;
	color: #76C15C;
	*font-size: 1em;
	margin-top: 5px;
}
.tab_list span{
	padding-left: 5px;

}
.general li{
	color: #76C15C;
	margin-left: 30px;
}
.general span{
	color: #666666;
}
#price_table{
	border: 1px solid #efefef;
	*padding: 20px 35px;
	padding:10px 35px;
	margin: 0 20px;
	width: 94%;
	margin-bottom: 10px;
}
#price_table th{
	color: #76C15C;
	padding: 0 20px;
	text-align: center;
}
#price_table td{
	text-align: center;
}
#price_table span{
	text-align: right;
	color: #76C15C;
}
.img_frame{
	background-image: url(../img/img_bg.jpg);
	background-repeat: no-repeat;
	width: 190px;
	height: 227px;
	display: block;
	float: left;
	margin-left: 0px;
}
.img_frame img{
	padding: 17px;
}
#space{
	height: 5px;
}
.pricelist_spacing{
	margin-left: 232px;
	top: -54px;
}

/************************ FIND US **************************************/
#map_bg{
	background: transparent;
	width:426px;
	height: 391px;
	float: right;
	position: relative;
	background-image: url(../img/map_bg.jpg);
	background-repeat: no-repeat;
	padding: 44px 37px;
}
.contact td{
	padding-left:1em; 
}
.contact_modes{
	color: #76C15C;
	text-align: right;
	width: 45px;
}
/************************ CODA SLIDER **********************************/
.stripViewer .panelContainer .panel ul {
	text-align: left;
	margin: 0px;
}

.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
	margin: 20px 0;
	position: relative;
	width: 100%;
}

/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
.csw .loading {margin: 200px 0 300px 0; text-align: center}

.stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden; 
	border:0px solid #6FA93A; /* this is the border. should have the same value for the links */
	margin: auto;
	width: 740px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height: auto;
	clear: both;
	background: #fff;
}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;
	left: 0; top: 0;
	width: 100%;
	list-style-type: none;
	/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	float:left;
	height: 100%;
	position: relative;
	width: 740px; /* Also specified in  .stripViewer  above */
}

.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
	padding: 10px;
}

.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
	margin: auto;
}

.stripNav ul { /* The auto-generated set of links */
	list-style: none;
	margin-left: -32px;
	*margin-left: 0px;
	width: 707px;
}

.stripNav ul li {
	float: left;
	margin-right: 0px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
	margin-bottom: 5px;
}

.stripNav a { /* The nav links */
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	line-height: 15px;
	background: #c6e3ff;
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 2px 20px;
	height: 32px;
	border: 1px solid #76C15C;

}

.stripNav li.tab1 a { background: #76C15C }
.stripNav li.tab2 a { background: #76C15C }
.stripNav li.tab3 a { background: #76C15C }
.stripNav li.tab4 a { background: #76C15C }
.stripNav li.tab5 a { background: #76C15C }
.stripNav li.tab6 a { background: #76C15C }

.stripNav li a:hover {
	background: #acd48a;
	border-color: #acd48a;
}

.stripNav li a.current {
	background: #fff;
	color: #76C15C;
	border-color:#76C15C;
	
}

.stripNavL, .stripNavR { /* The left and right arrows */
	position: absolute;
	top: 230px;
	text-indent: -9000em;
}

.stripNavL a, .stripNavR a {
	display: block;
	height: 46px;
	width: 46px;
}

.stripNavL {
	left: 0;
}

.stripNavR {
	right: 0;
}

.stripNavL {
	background: url("../img/left_btn.jpg") no-repeat center;
}

.stripNavR {
	background: url("../img/right_btn.jpg") no-repeat center;
}
/************************ PAGE CURL ************************************/
#pageflip {
	position: static;
	display: none;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
	z-index: 101;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	position: absolute;
	z-index: 50;
	right: 0; top: 0;
	background: #fff;
	background: url(../img/subscribe.png) no-repeat right top;
	text-indent: -9999px;
}
.tip{
	width: 50px; height: 50px;
	position: static;
	z-index: 50;
	right: 0; top: 0;
	background: #fff;
}
/************************ FOOTER ***************************************/
#footer{
	clear: both;
	height: 100px;
	background-image: url(../img/footer.jpg);
	background-repeat: no-repeat;
	width: 982px;
	height: 130px;
	margin-left: -64px;
	margin-bottom: -12px;
}

#floral_right{
	background-image: url(../img/floral_right.jpg);
	background-repeat: no-repeat;
	position: relative;
	right: -50px;
	height: 129px;
	width: 102px;
	float: right;
}
#floral_left{
	background-image: url(../img/floral_left.jpg);
	background-repeat: no-repeat;
	position: relative;
	left: -50px;
	height: 129px;
	width: 102px;
	float: left;
}
#affiliates{
	background: red;
	width: 850px;
}
.stopper{
	background-image: url(../img/stopper.gif);
	background-repeat: no-repeat;
	width: 40px;
	height: 55px;
	position: relative;
	display: block;
	float: left;
}
.stop_l{
	float: left;
}
.stop_r{
	float: right;
}
#anim{
	float: left;
	width: 780px;
	margin-left: 105px;
	margin-top: 50px;
}
.link{
	width: 182px;
	margin: 0;
	padding: 0;
}
.link a{
	margin:0;
	padding:0;
}
.link a:hover{
	background-position: -45px;
}

#anim a {
	float:left;
	position:relative;
	cursor:pointer;
	text-indent:-10000px;
	margin-top: 12px;
}
#anim a.linkClass { background:url(/img/aveda_thumb.gif) top left no-repeat;	width:106px;height: 45px;}
#anim a.linkClass2 { background:url(/img/ghd_thumb.gif) top left no-repeat; width:108px; height: 45px;}
#anim a.linkClass3 { background:url(/img/alterna_thumb.gif) top left no-repeat; width:108px; height: 45px;}
#anim a.linkClass4 { background:url(/img/great_lengths_thumb.gif) top left no-repeat; width:108px; height: 45px;}
#anim a.linkClass5 { background:url(/img/ethos_thumb.gif) top left no-repeat; width:108px; height: 45px;}
#anim a.linkClass6 { background:url(/img/st_p_thumb.gif) top left no-repeat; width:108px; height: 45px;}
#anim a.linkClass7 { background:url(/img/dermaquest_thumb.gif) top left no-repeat; width:108px; height: 45px;}
#anim a:hover {background-position:left bottom;}
#anim a.open {background-position:left bottom !important;}	

.right_foot{
	float: right;
	text-align: right;
	margin-right: 5px;
	margin-bottom: 50px;
	color: #76C15C;
	font-weight: bold;
}