/* Imports
----------------------------------------*/
@import url("css/reset.css");
@import url("css/externalLinks.css");


/* Elements
----------------------------------------*/
body { background:#000000 url(../images/hairon_bg.jpg) top center no-repeat; }

body, p, td, th, li { font-family: Arial, Helvetica, sans-serif; font-size:.875em; line-height:1.5em; color:#fff; }

#mainContainer { width:988px; margin: 0px auto; }

p { margin: 0px 0px 1em 0px; }

a:link, a:visited { color:#fff; text-decoration:none; outline:none; }
a:hover, a:active { color:#e41c23; text-decoration:none; outline:none; }

h1 { color:#E41C23; margin:.825em 0 .5em 0; font-size:2.125em; }
h2 { color:#fff; margin:0; font-size:1.2em; line-height:1.7em; }
h3 { color:#E41C23; margin:.825em 0 .5em 0; font-size:1.5em; }
h4 { color:#E41C23; margin:.825em 0 .5em 0; font-size:1.25em; }
h5 { color:#E41C23; margin:.825em 0 .5em 0; font-size:1.125em; }

ul { margin-left:25px; list-style-type:none;}

ol { margin-left:25px; }

a img{border:none !important;}

blockquote	{margin: 0 0 18px 18px; color:#666666; font-style: italic;}
strong		{font-weight:bold;}
em		{font-style:italic;}

/* Standard Definitions
----------------------------------------*/
.left 		{float:left;}
.right 		{float:right;}
.clearThis 	{clear:both;}
.small		{font-size:.625em;}
.large		{font-size:1em;}
.soft		{color:#D3D3D3;}
.hide		{display:none;}
p.last		{margin-bottom:0px;}

fieldset { border:none; }

/* Header
----------------------------------------*/
#header { width:988px; height:137px; position:relative; }

#logo { position:absolute; top:35px; left:27px; width:210px; height:77px; }

	/* Nav
	----------------------------------------*/
ul#nav
	{ display:block; float:right;  margin-top:95px; margin-right:28px; }
	
ul#nav li 
    { display:inline; list-style-type:none; margin-left:22px; text-transform:uppercase; font-size:0.8em; font-weight:bold;}
	
	/* Image Replacement 
	----------------------------------------*/
	ul#nav li a {/*Set to height of image*/ height:20px; display:inline; text-indent:-9999px; outline:none; text-decoration:none; color:#fff;}
	ul#nav li.current a { color:#e41c23 !important;}
	ul#nav li a:hover {text-decoration:underline;}
	
	
	/* CSS Rollover (Sprites) - Advanced Users!
	----------------------------------------*/
	
	/*Each link must have a unique ID - Include all of your links here - Remove if not using!*/
	li#navHome a:hover, li#navWork a:hover, li#navServices a:hover, li#navContact a:hover {background-position:0 -20px; /*Set to height of image !must be negative!*/}
		
/* Main Content
----------------------------------------*/
#mainContent { width:988px; background:none; display:inline-block; }
#insideContent { width:935px; background:none; display:inline-block; padding-left:30px; }
#innerContent { width:935px; background:none; display:inline-block; }


#slider {display:block; width:935px; height:350px; margin:4px auto 15px auto;}

#introtext {width:935px; margin:10px auto 20px auto; font-size:1.55em;}
#introtext h2 {font-size:0.95em !important; line-height:1.5em;}

#homehooks {width:935px; margin:10px auto 20px auto; padding-left:28px; font-size:12px; display:inline-block;}
#hook1, #hook2, #hook3 {float:left; width:204px; margin:0px 39px 0px 0px}
#hook4 {float:left; margin:0px; width:204px;}


/* Inside pages
----------------------------------------*/

#innercontent {width:955px; margin:10px auto 20px auto; display: inline-block; background:url(../images/innercontent_bg.png) top right no-repeat; }
#innercontent p { margin:0 0 1em 0;}

.aboutphoto { margin:10px 10px 0px 0px; float:left;}
.testimonialphoto { margin:0px 10px 0px 0px; float:left;}

.aboutcontent {float:left; display:block; width:610px; margin:0; padding:10px 0px 0px 0px;}
.producttitle { font-size:1.1em; margin:20px 0px 0px 0px !important;}
.firstproducttitle { font-size:1.1em; margin:-4px 0px 0px 0px !important;}

a.productlink { color:#E41C23; font-size:0.9em; text-decoration:none;}
a:hover.productlink { text-decoration:underline; }

#gallerycontainer { width:654px; float:right; margin-right:25px; }

#galleryselection { float:left; width:200px; margin-top:20px; border-bottom:solid 1px #ee2130; }
span.select { border-bottom:solid 1px #ee2130; border-top:solid 1px #ee2130; display:block; padding:3px 0px; font-size:0.87em; color:#fff; }

ul#gallerylist li a { margin-left:-45px; font-size:1.2em; line-height:1.6em; background:url(../images/listicon.gif) 0px 6px no-repeat; padding-left:15px; color:#fff}
ul#gallerylist li.current a{ color:#E41C23; }

#map_canvas { color:#000; border:solid 3px #333; font-size:0.85em; line-height:1.2em; float:left; margin-right:17px;}
#map_canvas span { display:none;}

#salons { float:right; width:475px;}
#salons p.state { display:block; text-transform:uppercase; color:#ccc; font-weight:bold; font-size:1.1em; margin-bottom:5px;}
#salons p.state2 { display:block; text-transform:uppercase; color:#ccc; font-weight:bold; font-size:1.1em; margin:15px 0px 5px 0px;}
.locations { float:left; width:220px; margin:5px 10px 15px 0px; font-size:0.9em;}
.locations span.locationtitle { font-size:1.1em !important; font-weight:bold;}
.locations a { color:#ee2130; text-decoration:none;}
.locations a:hover { text-decoration:underline;}

#contactdetails { width:270px; float:left;}
#contactdetails p { line-height:2.0em; color:#fff;}
#contactdetails p a { color:#ee2130; text-decoration:none; }
#contactdetails p a:hover { text-decoration:underline; }

#contactform {float:left; border-left:solid 1px #fff; padding-left:20px;}
#contactform h2 {margin:3px 0px 0px 0px !important; line-height:1em;}
#contactform label { font-size:0.8em;}
#contactform input, #contactform textarea { font-size:0.8em; padding:2px; font-family:Arial,Helvetica,sans-serif;}

.product { float:left; height:auto; margin:10px 15px 10px 0px; position:relative; width:329px;}
.product h2 { margin-top:2px; line-height:normal; display:block;}
.productphoto { float:left; margin:0px 20px 7px 0px;} 
.product form { margin-top:10px;}

#shoppinginfo { background-color:#272727; width: 228px; height:auto; float:left; margin:10px 0px; padding:10px;}
#shoppinginfo p { font-size:11px; line-height:18px;}
#shoppinginfo p a { text-decoration:underline;}

/* Footer
----------------------------------------*/

#footer { width:988px; height:70px; position:relative;}
#footer ul#footerlinks {display:block; position:absolute; top:10px; left:-10px;width:500px;}
#footer ul#footerlinks li { display:inline; list-style-type:none; color:#665e5e; font-size:0.8em; margin-right:10px;}
#footer ul#footerlinks li a {color:#665e5e; text-decoration:none;}
#footer ul#footerlinks li a:hover {color:#665e5e; text-decoration:underline;}
#footer p { font-size:.625em; }

#copyright {float:right; font-size:0.7em; margin-right:10px; color:#665e5e;}



/* Easy slider
----------------------------------------*/

#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		 width:935px; 
		 height:350px; 
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		/* display:block; */
		display:none;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:696px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		/* display:block; */
		display:none;
		position:relative;
		width:30px;
		height:77px;
		background:url(../images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../images/btn_next.gif) no-repeat 0 0;	
		}	
		
	/* numeric controls */	

	ol#controls{
		margin:1em 0;
		padding:0;
		height:28px;	
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	ol#controls li a{
		float:left;
		height:28px;
		line-height:28px;
		border:1px solid #ccc;
		background:#DAF3F8;
		color:#555;
		padding:0 10px;
		text-decoration:none;
		}
	ol#controls li.current a{
		background:#5DC9E1;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
	
	
/* Gallery slideshow
----------------------------------------*/

#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:654px; margin:20px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:654px; height:433px; }
#information {position:absolute; bottom:0; width:654px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70); display:none; }
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px;}
#image {width:654px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:400px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(../images/left.gif) left center no-repeat}
#imgnext {right:0; background:url(../images/right.gif) right center no-repeat}
#imglink {position:absolute; height:433px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(/images/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(../images/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(../images/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:600px; margin-left:5px; height:81px; overflow:hidden}
#shifter {position:absolute; left:0; height:81px}
#shifter img {cursor:pointer; border:1px solid #666; padding:2px}

	
/* FAQ slider
----------------------------------------*/

#insideContent .qa {padding-bottom:10px; margin:10px 0px 10px 0px;}
#insideContent .question {margin:0px 0px 5px 20px; padding:0px 20px 3px 20px;font-weight:bold; font-size:0.9em; cursor:pointer; border-bottom:1px solid #a9a9a9; background:url(../images/faqdown.gif) 7px 7px no-repeat;}
#insideContent .question_active {background:url(../images/faqup.gif) 7px 7px no-repeat !important;}
#insideContent .answer {padding:0 20px 0 40px;display:none;}


/* Testimonial Slider 
---------------------------------------- */

.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		
		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			margin: 20px 0;
			position: relative;
			width: 935px;
		}
		
		.slider-wrap p {
			color:#fff !important;
		}

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

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			border: none; /* this is the border. should have the same value for the links */
			margin: auto;
			width: 800px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 430px;
			clear: both;
			
		}
		
		.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: 800px; /* 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;
			width:500px;
			margin-left:-272px;
			
		}
		
		.stripNav ul li {
			float: left;
			margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
		}
		
		.stripNav a { /* The nav links */
			font-size: 10px;
			font-weight: bold;
			text-align: center;
			line-height: 32px;
			background: #c6e3ff;
			color: #fff;
			text-decoration: none;
			display: block;
			padding: 0 15px;
		}
		
		.stripNav li.tab1 a { background: #111 }
		.stripNav li.tab2 a { background: #111 }
		.stripNav li.tab3 a { background: #111 }
		.stripNav li.tab4 a { background: #111 }
		.stripNav li.tab5 a { background: #111 }
		.stripNav li.tab6 a { background: #111 }
		.stripNav li.tab7 a { background: #111 }
		
		.stripNav li a:hover {
			background: #333;
		}
		
		.stripNav li a.current {
			background: #E41C23;
			color: #fff;
		}
		
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 160px;
			text-indent: -9000em;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 40px;
			width: 40px;
		}
		
		.stripNavL {
			left: 0;
		}
		
		.stripNavR {
			right: 0;
		}
		
		.stripNavL {
			background: url("../images/arrow-left.gif") no-repeat center;
		}
		
		.stripNavR {
			background: url("../images/arrow-right.gif") no-repeat center;
		}