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



body 		{ background: url(images/beautography-background.jpg); background-repeat:repeat-x; padding: 0; margin: 25px 0 70px 0}
a 			{ text-decoration: none; color: #7b6f7f; font-weight: bold}
a:hover 			{ color: #9e9fa2}
p 			{ font: normal 12px/18px Arial, Helvetica, sans-serif; color: #7b6f7f; padding:0}
p.second		{ font: normal 16px Arial, Helvetica, sans-serif; color: #7b6f7f; padding:0}
h1 			{ font: normal 16px/25px Arial, Helvetica, sans-serif; color: #650360; padding:0}
h2 			{ font: normal 16px/19px Arial, Helvetica, sans-serif; color: #9e9fa2; padding: 0}
h3 			{ font: oblique normal 16px Georgia, "Times New Roman", Times, serif; color: #99cc66; padding: 0}
a.second		{ font: normal 10px Georgia, "Times New Roman", Times, serif}
img 			{ border: none}

/********** CLASSES **********/

.paddingzero		{ padding: 0;}
.16arial			{ font: normal 16px Arial, Helvetica, sans-serif; color: #7b6f7f}

#footer-fourthcraw	p 	{ font: normal 11px Arial, Helvetica, sans-serif; color: #9e9fa2; padding:0}
#footer-fourthcraw	a	{ font: bold 11px Arial, Helvetica, sans-serif; color: #9e9fa2; padding:0}
#footer-address	p 	{ font: normal 11px Arial, Helvetica, sans-serif; color: #9e9fa2; padding:0; margin: 0}


.li-treatment	{height: 17px; width: 141px; background:url(images/li-treatments.png) no-repeat}
.li-facials	{height: 14px; width: 66px; background:url(images/li-facials.png) no-repeat}
.li-peels		{height: 14px; width: 53px; background:url(images/li-peels.png) no-repeat}
.li-makeup	{height: 17px; width: 73px; background:url(images/li-makeup.png) no-repeat}
.li-waxing	{height: 17px; width: 68px; background:url(images/li-waxing.png) no-repeat}
.li-eyecare	{height: 17px; width: 72px; background:url(images/li-eyecare.png) no-repeat; margin-bottom:-3px}
.li-nails		{height: 17px; width: 50px; background:url(images/li-nails.png) no-repeat}
.li-tanning	{height: 17px; width: 73px; background:url(images/li-tanning.png) no-repeat}


/********** DIVS **********/

#wrap			{ position: relative; width: 900px; margin: 0 auto; padding: 0}
#header			{ height: 171px; margin: 0 auto 38px auto; padding: 0; background:url(images/beautography-logo.jpg) no-repeat center}
#navigation		{ position: relative; height: 71px; width: 900px; margin: 0 0 0 4px; padding: 0}
#content, #content-about, #content-photography, #content-packages, #content-wpackages, #content-beautyspa, #content-contact, #content-success, #content-error		{ width: 817px; margin: 42px 0 0 41px; padding: 0}

#h2				{ float: left; width: 600px; margin: 0; padding: 37px 0 0 17px}
#contentleft		{ float: left; width: 368px; margin: 26px 0 0 0; padding: 0 0 0 18px}
#contentright		{ float: right; width: 347px; margin: 26px 0 40px 0; padding: 0 18px 0 0}
#about-intro		{ width: 505px; margin: 40px 0 0; padding: 0 0 0 18px}
#book-appointment1	{ height: 32px; width: 360px; margin: 0; padding: 0}
#book-appointment2	{ float: right; height: 32px; width: 360px; margin: 0; padding: 0}
#treatments		{ width: 325px; height: 135px; margin: 0; padding: 0}
#galleryview		{}
#footer			{ height: 60px; width: 781px; margin: 15px auto 0 auto; padding: 0; background:url(images/footer.png); background-repeat: no-repeat}
#find-us-on		{ float: right; height: 18px; width: 96px; margin: 0; padding: 0}
#openinghours		{ position:relative; width: 250px; margin: 0; padding: 0}
#footer-address	{ height: 16px; width: 475px; margin: 0; padding:0}
#footer-fourthcraw	{ float: right; height: 16px; width: 160px; margin: -15px 0 0 ; padding: 0; text-align:right}

#clear			{ clear:both}

/********** UL'S **********/

#navigation ul				{ margin: 0; padding: 0 0 0 16px} 
#navigation ul li 			{ text-indent: -99999px; float:left; display: inline; list-style-type:none; padding:0; margin:0 0 0 22px; overflow: hidden} 
#navigation ul li a			{ display:block } 

#about-container			 {margin: 0 auto; padding: 0 0 0 39px; width:900px; height:205px; position:relative}
#bspa-container			 { background: url(images/beautyspa-container2.jpg) no-repeat; margin: 0 42px 0 42px; padding: 9px 30px 0 320px; width:465px; height:205px; position:relative}
#about-page-container { background: url(images/about-container2.jpg) no-repeat; margin: 0 42px 0 42px; padding: 9px 30px 0 320px; width:465px; height:205px; position:relative}
#photography-container { background: url(images/photography-container2.jpg) no-repeat; margin: 0 42px 0 42px; padding: 9px 30px 0 320px; width:465px; height:205px; position:relative}
#packages-container { background: #816e81; margin: 0 42px 0 42px; padding: 9px 30px 0 20px; width:765px; height:196px; position:relative}
#contact-container { background: url(images/appointment-container2.jpg) no-repeat; margin: 0 42px 0 42px; padding: 9px 30px 0 320px; width:465px; height:205px; position:relative}
#bspa-container p, #about-page-container p, #photography-container p, #packages-container p, #contact-container p {color:#FFF;  font: italic 12px/125% Arial, Helvetica, sans-serif}

#book-appointment1 ul 		{ margin: 40px 0 0 0; padding: 0} 
#book-appointment1 ul li 	{ display: inline; list-style-type: none; padding: 0; margin: 0} 
#book-appointment1 ul li a	{ display: block; float: left; padding: 0 18px 0 0; margin: 0} 

#book-appointment2 ul 		{ margin: 0; padding: 0} 
#book-appointment2 ul li 	{ display: inline; list-style-type: none; padding: 0; margin: 0} 
#book-appointment2 ul li a	{ display: block; float: right; padding: 0 0 0 18px; margin: 0} 

#treatments ul				{ float: left; display: inline; width: 145px; margin: 0; padding: 0}
#treatments ul li 			{ list-style-type: none; margin: 0; padding: 0 0 10px} 
#treatments span			{ margin: -99999px}

a.home 				{ background: url(images/nav-home.jpg) repeat 0 0; width: 75px; height: 47px; margin: 0; padding:0; display: block} 
a.home:hover 			{ background: url(images/nav-home.jpg) repeat 0 -47px} 
a.home.active			{ background: url(images/nav-home.jpg) repeat 0 -94px} 

a.aboutus				{ background: url(images/nav-aboutus.jpg) repeat 0 0; width: 106px; height: 47px; margin: 0; padding:0; display: block} 
a.aboutus:hover 		{ background: url(images/nav-aboutus.jpg) repeat 0 -47px}
a.aboutus.active		{ background: url(images/nav-aboutus.jpg) repeat 0 -94px} 

a.photography			{ background: url(images/nav-photography.jpg) repeat 0 0; width: 129px; height: 47px; margin: 0; padding:0; display: block} 
a.photography:hover 	{ background: url(images/nav-photography.jpg) repeat 0 -47px}
a.photography.active 	{ background: url(images/nav-photography.jpg) repeat 0 -94px} 

a.packages			{ background: url(images/nav-packages.jpg) repeat 0 0; width: 115px; height: 47px; margin: 0; padding:0; display: block} 
a.packages:hover 		{ background: url(images/nav-packages.jpg) repeat 0 -47px}
a.packages.active	 	{ background: url(images/nav-packages.jpg) repeat 0 -94px} 

a.beautpackages			{ background: url(images/nav-packages.jpg) repeat 0 0; width: 115px; height: 47px; margin: 0; padding:0; display: block} 
a.beautpackages:hover 		{ background: url(images/nav-packages.jpg) repeat 0 -47px}
a.beautpackages.active	 	{ background: url(images/nav-packages.jpg) repeat 0 -94px} 

a.makepack			{ background: url(images/nav-make-pack.jpg) repeat 0 0; width: 115px; height: 15px; margin: 0; padding:0; display: block} 
a.makepack:hover 		{ background: url(images/nav-make-pack.jpg) repeat 0 -15px}
a.makepack.active	 	{ background: url(images/nav-make-pack.jpg) repeat 0 -30px} 

a.weddpack			{ background: url(images/nav-wedd-pack.jpg) repeat 0 0; width: 115px; height: 13px; margin: 0; padding:0; display: block} 
a.weddpack:hover 		{ background: url(images/nav-wedd-pack.jpg) repeat 0 -13px}
a.weddpack.active	 	{ background: url(images/nav-wedd-pack.jpg) repeat 0 -26px} 

a.beautyspa			{ background: url(images/nav-beautyspa.jpg) repeat 0 0; width: 121px; height: 47px; margin: 0; padding:0; display: block} 
a.beautyspa:hover		{ background: url(images/nav-beautyspa.jpg) repeat 0 -47px}
a.beautyspa.active		{ background: url(images/nav-beautyspa.jpg) repeat 0 -94px}
 
a.contactus			{ background: url(images/nav-contact.jpg) repeat 0 0; width: 159px; height: 47px; margin: 0; padding:0; display: block} 
a.contactus:hover		{ background: url(images/nav-contact.jpg) repeat 0 -47px}
a.contactus.active		{ background: url(images/nav-contact.jpg) repeat 0 -94px} 


#content h1 			{ background-image: url(images/h1-welcome.png); height: 67px; width: 354px; background-repeat: no-repeat; margin-top: 0; position: absolute}
#content h1 span 		{ position: absolute; left: -999em}
#content-about h1 		{ float: left; background-image: url(images/h1-aboutus.png); height: 25px; width: 261px; background-repeat: no-repeat; margin-top: 0; position: absolute}
#content-about h1 span 	{ position: absolute; left: -999em}
#content-photography h1 		{ float: left; background-image: url(images/h1-photography.png); height:31px; width: 304px; background-repeat: no-repeat; margin-top: 0; position: absolute}
#content-photography h1 span 	{ position: absolute; left: -999em}
#content-packages h1 		{ float: left; background-image: url(images/h1-beautography-packages.png); height:30px; width: 330px; background-repeat: no-repeat; margin-top: 0; position: absolute}
#content-packages h1 span 	{ position: absolute; left: -999em}
#content-wpackages h1 		{ float: left; background-image: url(images/h1-wedding-packages.png); height:30px; width: 330px; background-repeat: no-repeat; margin-top: 0; position: absolute}
#content-wpackages h1 span 	{ position: absolute; left: -999em}
#content-beautyspa h1 		{ float: left; background-image: url(images/h1-beauty-spa.png); height:82px; width: 162px; background-repeat: no-repeat; margin-top: 0; position: absolute}
#content-beautyspa h1 span 	{ position: absolute; left: -999em}
#content-contact h1 		{ float: left; background-image: url(images/h1-appointment.png); height:30px; width: 300px; background-repeat: no-repeat; margin-top: 0; position: absolute}
#content-contact h1 span 	{ position: absolute; left: -999em}
#content-success h1 		{ float: left; background-image: url(images/h1-success.png); height:30px; width: 300px; background-repeat: no-repeat; margin-top: 0; position: absolute}
#content-success h1 span 	{ position: absolute; left: -999em}
#content-error h1 		{ float: left; background-image: url(images/h1-error.png); height:30px; width: 300px; background-repeat: no-repeat; margin-top: 0; position: absolute}
#content-error h1 span 	{ position: absolute; left: -999em}

#h2 span				{ font: bold 20px/19px Arial, Helvetica, sans-serif; color: #7b6f7f; padding: 0}

#contentleft	img	{ margin: 0 0 20px 0; padding: 0}
#contentright	img	{ margin: 0 0 20px 0; padding: 0}


 /********** Slideshow **********/

#home-slideshow {
	margin:0 auto;
	padding: 0;
	width:844px;
	height:205px;
	background:transparent url(dev/img/bg_slideshow.jpg) no-repeat 0 0;
	position:relative}

#home-slideshow #home-slideshow-container{
  padding: 0;
  margin:0 auto;
  width:816px;
  height:205px;
  overflow:auto; /* allow scrollbar */
  position:relative}

#home-slideshow #home-slidshow-container .slide {
  margin:0 auto;
  width:796px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:205px}


 /********** Slideshow controls **********/

.control {
  display:block;
  width:14px;
  height:205px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer}
#leftControl {
  top:0;
  left:0;
  background:transparent url(images/control-left.jpg) no-repeat 0 0}
#rightControl {
  top:0;
  right:0;
  background:transparent url(images/control-right.jpg) no-repeat 0 0}