
/* IMPORTS ______________________________ */

@import url("css/reset.css");


/* ELEMENTS ______________________________ */

body { background:#000000 url(../images/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;}

/* HEADER ______________________________ */

#header { width:988px; height:137px; position:relative;}
#logo { position:absolute; top:46px; left:27px; width:265px; height:70px;}

/* NAV ______________________________ */

ul#nav { display:block; float:right;  margin-top:95px; margin-right:28px;}
ul#nav li { display:inline; list-style-type:none; margin-left:18px; 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:955px; margin:10px auto 20px auto; display: inline-block; background:url(../images/innercontent_bg.png) top right no-repeat;}

#slider { display:block; width:935px; height:414px; margin:4px auto;}

#introtext { width:935px; margin:10px auto 20px auto; font-size:1.55em;}
#introtext h2 { font-size:0.80em !important; line-height:1.9em;}

#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;}
#innercontent p { margin:0 0 1em 0;}

.aboutphoto { margin:0px 10px 10px 0px; float:left;}
.productsmain { margin:0px 10px 10px 0px; float:left;}
.aboutcontent { float:left; display:block; width:610px; margin:0; padding:10px 0px 0px 0px;}
.producttitle { font-size:1.1em; margin:12px 0px 0px 0px !important;}

.productblock { float:left; margin-right:15px; width:300px; padding-top:10px;}
.productblocklast { float:left; margin-right:0px; width:300px; padding-top:10px;}

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:230px; margin-top:20px; border-bottom:solid 1px #ee2130; border-top: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:-55px; 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, #map_canvas2, #map_canvas3, #map_canvas4, #map_canvas5, #map_canvas6 { color:#000; border:solid 3px #333; font-size:0.85em; line-height:1.2em; margin-right:17px; margin-top:12px; float:left;}
#map_canvas2 {}
#map_canvas span, #map_canvas2 span, #map_canvas3 span, #map_canvas4 span, #map_canvas5 span, #map_canvas6 span { }
#map_canvas a, #map_canvas2 a, #map_canvas3 a, #map_canvas4 a, #map_canvas5 a, #map_canvas6 a { color:#666;}

#address_details { display:none;}

#salons { float:left; width:900px; margin-top:10px}
#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:175px; margin:5px 10px 15px 0px; font-size:12px; line-height:17px; display:inline-block;}
.locations span.locationtitle { font-size:1.1em !important; font-weight:bold; color:#E41C23;}
.locations a { color:#ee2130; text-decoration:none;}
.locations a:hover { text-decoration:underline;}
#tabs-2 .locations { width:180px;}

.locations.wider, #tabs-2 .locations.wider { width:215px;}

.gmnoprint a { text-decoration:underline !important;}

#contactdetails { width:250px; 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;}

.testimonials { float:left; width:450px; margin-right:25px; margin-bottom:20px;}
.testimonials h3 { color:#E41C23; font-size:1.2em; line-height:1.7em; margin:0px 0px 15px 0px;}


/* FOOTER ______________________________ */

#footer { width:988px; height:70px; position:relative;}
#footer ul#footerlinks { display:block; position:absolute; top:10px; left:-10px;width:550px;}
#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;}


/* SLIDER ______________________________ */

#slider ul, #slider li, #slider2 ul, #slider2 li{ margin:0; padding:0; list-style:none;}
#slider2{ margin-top:1em;}
#slider li, #slider2 li{ width:935px;  height:414px; overflow:hidden;}	
#prevBtn, #nextBtn, #slider1next, #slider1prev{ 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: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;}


