/* @override http://strandzsalonaustin.com/resources/css/master.css */

*{
	margin:		0;
	padding:	0;
	text-decoration:	none;
}

img{	color:	#555;	}
a {		border-bottom: 1px solid #75359b; color: #75359b;}
a:hover { color: #333;	}
a:visited{ border-bottom: 1px dashed #75359b;}
.clear{	clear: both;	}

body{
	background: #242424 url("../images/background.jpg") no-repeat center 150px;
	font: .9em/1.6em "Lucida Sans", "Lucida Grande", Helvetica, Arial, sans-serif;
	height:	100%;
	color: #404040;
}

#headerWrapper{
	background-color: #000;
	color: #fff;
	height: 110px;
}

#header{
	margin: 0 auto;
	height: 110px;
	width: 1000px;
	overflow: hidden;
}

#header #logo{
	float: left;
	margin: 20px;
	height: 70px;
	width: 180px;
	background: transparent url("../images/strandzLogo.png") 0 0 no-repeat;
	text-indent: -9000px;
}

#header #headerContact{
	float: right;
	margin: 25px;
	text-align: center;
}

#fbHeader{
	float: right;
	width: 55px;
	margin: 25px 0 25px 25px;
	overflow: hidden;
}

#header #headerContact #toBook{
	text-transform: uppercase;
	font-size: .8em;
}

#header #headerContact strong{
	font-size: 1.1em;
	text-transform: uppercase;
}

#navigationWrapper{
	background-color: #311442;
	color: #fff;
}

#navigation{
	margin: 0 auto;
	width: 1046px;
	height: 40px;
	text-align: center;
}

#navigation li{
	display: inline;
}

#navigation a{
	color: #fff;
	float: left;
	height: 0;
	padding-top: 40px;
	overflow: hidden;
	background: #311442 url("../images/navSprite.png") no-repeat;
	border: none;
}

#navigation #navHome a{ background-position: 0 0 ; width: 133px;}
#navigation #navServices a{ background-position: -133px 0 ; width: 220px;}
#navigation #navProducts a{ background-position: -353px 0 ; width: 147px;}
#navigation #navGallery a{ background-position: -500px 0 ; width: 138px;}
#navigation #navStylists a{ background-position: -638px 0 ; width: 134px;}
#navigation #navContact a{ background-position: -772px 0 ; width: 136px;}
#navigation #navAbout a{ background-position: -908px 0 ; width: 138px;}

#navigation #navHome a:hover{ background-position: 0 -40px ; width: 133px;}
#navigation #navServices a:hover{ background-position: -133px -40px ; width: 220px;}
#navigation #navProducts a:hover{ background-position: -353px -40px ; width: 147px;}
#navigation #navGallery a:hover{ background-position: -500px -40px ; width: 138px;}
#navigation #navStylists a:hover{ background-position: -638px -40px ; width: 134px;}
#navigation #navContact a:hover{ background-position: -772px -40px ; width: 136px;}
#navigation #navAbout a:hover{ background-position: -908px -40px ; width: 138px;}

#navigation #navHome a.navActive{ background-position: 0 -80px ; width: 133px;}
#navigation #navServices a.navActive{ background-position: -133px -80px ; width: 220px;}
#navigation #navProducts a.navActive{ background-position: -353px -80px ; width: 147px;}
#navigation #navGallery a.navActive{ background-position: -500px -80px ; width: 138px;}
#navigation #navStylists a.navActive{ background-position: -638px -80px ; width: 134px;}
#navigation #navContact a.navActive{ background-position: -772px -80px ; width: 136px;}
#navigation #navAbout a.navActive{ background-position: -908px -80px ; width: 138px;}

#contentWrapper{
	color: #000;
	background: transparent url("../images/contentBackground.jpg") no-repeat center top;
}

#contentWrapperRepeat{
	height: 100%;
	width: 100%;
	background: transparent url("../images/contentBackgroundRepeat.png") repeat-y center top;
	z-index: -1;
	
}

#content{
	margin: 0 auto;
	width: 944px;
	background: #fff;
	padding: 40px 28px;
}

#introduction h2{
	margin-top: 40px;
	padding-bottom: 20px;
	height: 49px;
	background: transparent url("../images/welcomeToStrandz.png") center 0 no-repeat;
	text-indent: -9000px;
}

#introLeft{
	float: left;
	width: 452px;
	margin: 20px 20px 0 0;
	padding: 20px 0 0;
	border-top: 2px solid #5b4468;
}

#introLeft p{
	padding-bottom: 10px;
}

#introRight{
	float: left;
	width: 452px;
	margin: 20px 0 0 20px;
	padding: 20px 0 0;
	border-top: 2px solid #5b4468;
}

#servicesLeft, #servicesCenter, #servicesRight{
	float: left;
	width: 288px;
	margin: 0 0 0 0;
	padding: 20px 0 0;
	border-top: 2px solid #5b4468;
}

#servicesFull{
	margin: 20px 0 0 0;
	padding: 20px 0 0;
	border-top: 2px solid #5b4468;
}

#servicesCenter, #servicesRight{
	margin-left: 40px;
}

dt.serviceTitle{
	text-transform: uppercase;
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 1px solid #eee;
	width: 100%;
}

#servicesLeft dt, #servicesCenter dt, #servicesRight dt, #servicesFull dt{
	height: 2em;
	float: left;
	clear: both;
}

#servicesLeft dd, #servicesCenter dd, #servicesRight dd, #servicesFull dd{
	float: right;
}

#productsList li{
	padding: 0 40px 40px 0;
	float: left;
}

#productsList li.productsThird{
	padding-right: 0;
}

#productsList li img{
	background: transparent url("../images/products/genericProduct.jpg") no-repeat 0 0;
	padding: 8px 8px 8px 8px;
	width: 272px;
	height: 312px;
	float: left;
}

#productsList p.productName{
	display: none;
}

#productsList li.productsBottomRow{
	padding-bottom: 0;
}

.gal img{ width: 100%;}
.gal { width: 33.33333333%; margin-bottom: 5px; overflow: hidden;}
.gal.w2 { width: 66.66666667%; }
.gal.w3 { width: 100%; }

.contactContent img{
	padding: 8px 48px 8px 8px;
	background: transparent url("../images/imageBackground.jpg") no-repeat 0 0;
	float: left;
}

.aboutContent #aboutImg{
	float: left;
	padding: 0 40px 0 0;
}

.aboutContent p{
	padding-bottom: 20px;
}

.stylistsContent ul li{
	padding-bottom: 40px;
	clear: both;
	float: left;
}

.stylistsContent ul li img{
	background: transparent url("../images/stylists/genericFemale.jpg") no-repeat 0 0;
	padding: 8px 48px 8px 8px;
	width: 159px;
	height: 240px;
	float: left;
}

.stylistsContent ul li.stylistOdd img{
	background-position: 40px;
	padding: 8px 8px 8px 48px;
	float: right;
}

.stylistsContent p{
	width: 728px;
	float: right;
	text-align: justify;
}

stylistsContent ul li.stylistOdd p{
	float: left;
}

.stylistsContent p.stylistName{
	color: #4d345c;
	font-weight: bold;
	font-size: 1.5em;
	line-height: 1.5em;
	padding: 8px 0 10px 0;
}

.stylistsContent span.title{
	font-size: .6em;
	line-height: 1em;
}

.contactContent p{
	padding-bottom: 20px;
}

.contactContent span.contactMethod{
	width: 332px;
	padding: 10px 20px;
	margin: 10px 0 20px;
	border-left: 3px solid #723994;
	float: left;
}

#contentBottom{
	height: 10px;
	background: transparent url("../images/contentBottom.png") top center no-repeat;
}

#footerBottom{
	background: transparent url("../images/footerBottom.png") bottom center no-repeat;
	width: 910px;
	padding: 20px 80px 40px;
	height: 87px;
	overflow: hidden;
	margin: 0 auto 15px auto;
	color: #999;
	font-size: .85em;
	line-height: 1.6em;
}

#footerBottom a{
	border: none;
	color: #fff;
}

#footerBottom a:hover{
	border-bottom: 1px solid #ddd;
	color: #ddd;
}

#footerNavigation li a{
	color: #fff;
	text-decoration: none;
}

#footerBottom ul li{
	display: inline;
	padding-right: 30px;
}

p#footerCopyright{
	padding-top: 15px;
	color: #4c4c4c;
}

p#footerCopyright a{
	color: #4c4c4c;
}

#footerLeft{
	width: 817px;
	float: left;
}

#footerRight{
	width: 93px;
	float: right;
	padding-top: 15px ;
}

#footer{
	background: #000;
	margin: 0 auto 10px;
	padding: 20px 40px;
	width: 920px;
	color: #eee;
}