@charset "UTF-8";
/* CSS Document */

/*** some people may not like to clear all of their padding and margin spacing but I do, I want to have full control ****/

*{
	margin:0px;
	padding:0px;
}

html{
	background:url(images/body-bg.jpg);
}

body{
	background:url(images/footer-repeat-bg.jpg) bottom repeat-x;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#554221;
}

body p{
	line-height:20px;
}

a{
	outline:none;
}

a:link, a:visited{
	color:#56729C;
	text-decoration:none;
}

a:hover, a:active{
	color:#56729C;
	text-decoration:underline;
}

.clear{
	clear:both;
}

h1 span, h2 span, h3 span{
	display:none;
}	

#spam{
	display:none;
}

.img-left{
	float:left;
	margin:10px 10px 0px 35px;
}

#practitioners .img-left{
	float:left;
	margin:0px 10px 0px 20px !important;
}

#studio-hair .img-left{
	float:left;
	margin:0px 10px 0px 35px;
}

/*** I usually do center aligned designs so I am going to set the container to sit in the middle of the page ****/

#pearl-wrap{
	width:1058px;
	margin:0px auto;
}

#pearls{
	background:url(images/pearls.png) no-repeat;
	width:166px;
	height:528px;
	position:absolute;
}

#container{
	width:977px;
	margin:0px auto; /**** learn css shortcuts, it will make your life easier ****/
	padding-left:81px;
}

#logo{
	background:url(images/logo-bg.jpg) no-repeat;
	width:400px;
	height:180px;
	float:left;
}

	#homelink{
		display:block;
		width:150px;
		height:156px;
		float:left;
	}
	
	#maplink{
		display:block;
		width:207px;
		height:42px;
		position:relative;
		left:160px;
		top:95px;
	}
	
#nav-contain{
	width:514px;
	float:left;
}
	
#nav { 
	background:url("images/nav.jpg") no-repeat; 
	height:121px; 
	margin:0;
	padding:59px 0px 0px 43px; 
	}

#nav span { display: none; }

#nav li, #nav a { height:37px; display:block; 	z-index:10; } /* change height here also */

#nav li {
	float:left;
	list-style:none;
	_display:inline;
	position:relative;
	margin:0;
	}

#nav-01 { width: 74px;}
#nav-02 { width: 84px;}
#nav-03 { width: 103px;}
#nav-04 { width: 74px;}
#nav-05 { width: 98px;}
#nav-06 { width: 134px;}
#nav-07 { width: 175px;}
#nav-08 { width: 103px;}

/*-------------- (-79px) X position of button / (-30px) height of image from above ------------- */

#nav-01 a:hover { background:url("images/nav.jpg")  -43px -239px no-repeat; }
#nav-02 a:hover { background:url("images/nav.jpg")  -117px -239px no-repeat; }
#nav-03 a:hover { background:url("images/nav.jpg")  -201px -239px no-repeat; }
#nav-04 a:hover { background:url("images/nav.jpg")  -304px -239px no-repeat; }
#nav-05 a:hover { background:url("images/nav.jpg")  -378px -239px no-repeat; }
#nav-06 a:hover { background:url("images/nav.jpg")  -43px -276px no-repeat; }
#nav-07 a:hover { background:url("images/nav.jpg")  -177px -276px no-repeat; }
#nav-08 a:hover { background:url("images/nav.jpg")  -352px -276px no-repeat; }

/*-------------- Keeps the hover state on each page based on body id ------------- */

body#index #nav-01 { background:url("images/nav.jpg")  -43px -239px no-repeat; }
body#about #nav-02 { background:url("images/nav.jpg")  -117px -239px no-repeat; }
body#services #nav-03 { background:url("images/nav.jpg")  -201px -239px no-repeat; }
body#tour #nav-04 { background:url("images/nav.jpg")  -304px -239px no-repeat; }
body#contact #nav-05, body#thankyou #nav-05 { background:url("images/nav.jpg")  -378px -239px no-repeat; }
body#studio-hair #nav-06 { background:url("images/nav.jpg")  -43px -276px no-repeat; }
body#massage-to-go #nav-07 { background:url("images/nav.jpg")  -177px -276px no-repeat; }
body#specials #nav-08  { background:url("images/nav.jpg")  -352px -276px no-repeat; }	

#banner{
	background:url(images/banner-june.jpg) no-repeat;
	width:649px;
	height:379px;
	float:left;
}

#banner-inside{
	background:url(images/header-about.jpg) no-repeat;
	width:649px;
	height:260px;
	float:left;
}

#services #banner-inside{
	background:url(images/header-services.jpg) no-repeat;
	width:649px;
	height:260px;
	float:left;
}

#tour #banner-inside{
	background:url(images/header-tour.jpg) no-repeat;
	width:649px;
	height:260px;
	float:left;
}

#contact #banner-inside, #thankyou #banner-inside{
	background:url(images/header-contact.jpg) no-repeat;
	width:649px;
	height:260px;
	float:left;
}

#studio-hair #banner-inside{
	background:url(images/header-studio-hair.jpg) no-repeat;
	width:649px;
	height:260px;
	float:left;
}

#specials #banner-inside, #gift-certificates-blackfriday #banner-inside, #gift-certificates-december #banner-inside{
	background:url(images/header-specials.jpg) no-repeat;
	width:649px;
	height:260px;
	float:left;
}

#massage-to-go #banner-inside{
	background:url(images/header-massage-to-go.jpg) no-repeat;
	width:649px;
	height:260px;
	float:left;
}

#practitioners #banner-inside{
	background:url(images/header-about.jpg) no-repeat;
	width:649px;
	height:260px;
	float:left;
}

#btn-contain{
	width:265px;
	float:left;
}

	#gift-certs-btn{
		background:url(images/buy-giftcerts-btn.jpg) no-repeat;
		width:265px;
		height:129px;
		display:block;
	}
	
	#featured-btn{
		background:url(images/feature-service-btn.jpg) no-repeat;
		width:265px;
		height:120px;
		display:block;
	}

	#featured-btn-inside{
		background:url(images/featured-inside.png) no-repeat;
		width:263px;
		height:80px;
		display:block;
	}
	#featured-btn-inside2{
		background:url(images/featured-inside2.png) no-repeat;
		width:263px;
		height:80px;
		display:block;
	}
	
	#massage-to-go-btn{
		background:url(images/massage-to-go-btn.jpg) no-repeat;
		width:265px;
		height:130px;
		display:block;
	}

#content-contain{
	background:url(images/content-bg.jpg) repeat-y;
}

	#content-contain-top{
		background:url(images/content-contain-top.jpg) no-repeat;
		height:10px;
	}

	#content-contain-bottom{
		background:url(images/clear.jpg) no-repeat;
		height:30px;
	}

#centercol p{
	margin:15px 105px 15px 35px;
	font-weight: bold;
}

	#centercol #pearl-day-spa-heading{
		background:url(images/pearl-day-spa-heading.jpg) no-repeat;
		width:265px;
		height:27px;
		margin:15px 0px 0px 0px;
	}

	#centercol #inspiration-heading{
		background:url(images/inspiration-heading.jpg) no-repeat;
		width:387px;
		height:27px;
	}

#leftcol{
	width:627px;
	float:left;
}

	#leftcol h3{
		margin:15px 15px 15px 35px;
		font-size:18px;
		border-bottom:1px #5B390B dotted;
		padding-bottom:5px;
	}

	#leftcol h4{
		margin:15px 15px 15px 35px;
		font-size:15px;
		color:#56729C;
	}

	#leftcol p{
		margin:15px 15px 15px 35px;
	}
	
	#leftcol ul{
		margin:15px 15px 15px 35px;
	}
	
		#leftcol ul li{
			margin:15px 15px 15px 35px;
		}
	
	#leftcol #about-pearl-heading{
		background:url(images/about-retreat.jpg) no-repeat;
		width:484px;
		height:29px;
		margin:15px 0px 0px 0px;
	}
	
	#leftcol #services-pearl-heading{
		background:url(images/services-heading.jpg) no-repeat;
		width:484px;
		height:29px;
		margin:15px 0px 0px 0px;
	}
	
	.waxing-items{
		float:left;
		width:150px; 
	}
		
		.waxing-items ul{
			margin:0px 0px 0px 35px !important;
		}
		
		.waxing-items li{
			margin:0px 0px 0px 13px !important;
		}
	
	#leftcol #tour-pearl-heading{
		background:url(images/tour-see-heading.jpg) no-repeat;
		width:484px;
		height:29px;
		margin:15px 0px 0px 0px;
	}
	
	#leftcol #tour-your-pearl-heading{
		background:url(images/tour-your-heading.jpg) no-repeat;
		width:484px;
		height:29px;
		margin:15px 0px 0px 0px;
	}

	#leftcol #contact-pearl-heading{
		background:url(images/contact-heading.jpg) no-repeat;
		width:484px;
		height:29px;
		margin:15px 0px 0px 0px;
	}

	#leftcol #studio-hair-pearl-heading{
		background:url(images/studio-hair-heading.jpg) no-repeat;
		width:484px;
		height:29px;
		margin:15px 0px 0px 0px;
	}

	#leftcol #massage-to-go-pearl-heading{
		background:url(images/massage-to-go-heading.jpg) no-repeat;
		width:484px;
		height:29px;
		margin:15px 0px 0px 0px;
	}
	
	#leftcol #practitioners-heading{
		background:url(images/practitioners-heading.jpg) no-repeat;
		width:484px;
		height:29px;
		margin:15px 0px 0px 0px;
	}
	
	#leftcol #specials-pearl-heading{
		background:url(images/specials-heading.jpg) no-repeat;
		width:484px;
		height:29px;
		margin:15px 0px 0px 0px;
	}

	#leftcol #gift-certificates-pearl-heading{
		background:url(images/gift-certificates-heading.jpg) no-repeat;
		width:484px;
		height:29px;
		margin:15px 0px 0px 0px;
	}
		
	.back-to-top{
		display:block;
		background:url(images/back-to-top.jpg) no-repeat;
		width:165px;
		height:50px;
		margin-left:35px;
	}
	
	.gallery-contain{
		margin:8px 0px 0px 35px;
	}

	form{
		margin:8px 0px 10px 35px;
	}
	
	form input{
		border:3px solid #5B390B;
		padding:5px;
		margin-bottom:7px;
		width:300px;
	}

	form#paypal input{
		border:3px solid #5B390B;
		padding:5px;
		margin-bottom:7px;
		width:165px;
	}
	
	form#paypal textarea{
		border:3px solid #5B390B;
		padding:5px;
		margin-bottom:7px;
		width:165px;
		height:150px;
	}

	form select{
		background:#FFF:
	}
	
	form textarea{
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		border:3px solid #5B390B;
		padding:5px;
		margin-bottom:7px;
		width:300px;
	}
	
	form input#Submit{
		width:60px;
	}
	
	form input#recipient-field{
		width:165px;
		height:100px;
	}	
	form input#buy-btn{
		border:none;
		width:191px;
		height:189px;
		padding:0px;
	}

	#thankyou-graphic{
		background:url(images/thankyou-graphic.jpg) no-repeat;
		width:588px;
		height:460px;
		margin:7px 0px 0px 22px;
	}
	
	#featured-specials{
		background:url(images/hotstone_note.jpg) no-repeat;
		width:220px;
		height:217px;
		margin-left:30px;
		float:left;
	}
	
	#featured-specials-temp{
		background:url(images/featured-service-temp.jpg) no-repeat;
		width:220px;
		height:217px;
		margin-left:250px;
	}
	
	#brazilians{
		background:url(images/brazilians.jpg) no-repeat;
		width:220px;
		height:217px;
		margin-left:250px;
	}
	
	#student-id{
		background:url(images/student-id.jpg) no-repeat;
		width:220px;
		height:217px;
		margin-left:250px;
	}
	
	#student-id2{
		background:url(images/featured-service-temp.jpg) no-repeat;
		width:220px;
		height:217px;
		margin-left:30px;
	}
	
	#uo-alumni{
		background:url(images/oregon-alumni.jpg) no-repeat;
		width:220px;
		height:217px;
		margin-left:30px;
		float:left;
	}
	
	#spa-bucks{
		display:block;
		background:url(images/spabucks.jpg) no-repeat;
		width:220px;
		height:217px;
		margin-left:250px;
	}
	
	#referral-rewards-icon{
		background:url(images/referal-rewards.jpg) no-repeat;
		width:220px;
		height:217px;
		margin-left:250px;
	}
	
	#spring-madness{
		background:url(images/spring-madness.jpg) no-repeat;
		width:220px;
		height:217px;
		margin-left:250px;
	}
	
	#threebythree{
		background:url(images/3x3.jpg) no-repeat;
		width:220px;
		height:217px;
		margin-left:30px;
	}

#rightcol{
	width:289px;
	float:left;
	
}

	#features-specials{
		background:url(images/features-specials.jpg) no-repeat;
		width:246px;
		height:55px;
	}
	
	#practitioner-spotlight{
		background:url(images/practitioner-spotlight.jpg) no-repeat;
		width:246px;
		height:55px;
	}

		#practitioner-1{
			display:block;
			background:url(images/practitioner-1.jpg) no-repeat;
			width:263px;
			height:123px;
		}
		
		#practitioner-2{
			display:block;
			background:url(images/practitioner-2.jpg) no-repeat;
			width:263px;
			height:123px;
		}
		
		#practitioner-3{
			display:block;
			background:url(images/practitioner-3.jpg) no-repeat;
			width:263px;
			height:123px;
		}
	
	#services-navigation{
		background:url(images/services-navigation.jpg) no-repeat;
		width:246px;
		height:55px;
	}

	#spa-details{
		background:url(images/spa-details.jpg) no-repeat;
		width:246px;
		height:55px;
	}
	
	#rightcol ul{
		margin-left:40px;
	}

#clear{
	clear:both; /*** this stops the floating ***/
}

#footer{
	height:50px;
}

#footer p{
	padding:15px 0px 13px 15px;
}