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

/* general typography*/
body {
	margin: 0 auto;
	width: 900px;
	font: 75%/120% Arial, Helvetica, sans-serif;
    text-align: left;
	position:relative;
	
}
h1 {
	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bolder;
	margin-bottom: -5px;

}
h2 {
	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bolder;
	font-variant:small-caps;
	color:798f7d;

}
#purple{
	color:#8b82b3;
}
#green{
	color:#798f7d;
}
.purple{
	color:#8b82b3;
}
.green{
	color:#738977;

}
a:focus {
	outline: none;
	text-decoration: none;
}
#mainwrapper{
	width: 900px;
	background: #ece1f6;
	vertical-align:top;
	 margin: 0 auto; 
	 text-align: left;
	 position:relative;

}
.btn-slide01 {
/*background: url(../images/bps/white-arrow.gif) no-repeat right -50px; */
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 0px 0px 5px 25px;
	margin: 0 auto;
	display: block;
	font: bold 105%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}
.btn-slide02 {
	/*background: url(../images/bps/white-arrow.gif) no-repeat right -50px;*/
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 0px 0px 0px 7px;
	margin: 0 auto;
	display: block;
	font: bold 105%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}
.btn-slide03 {
	/*background: url(../images/bps/white-arrow.gif) no-repeat right -50px;/*/
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 0px 0px 10px 23px;
	margin: 0 auto;
	display: block;
	font: bold 105%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}
#panel {
	background: #8b82b3;
	height: 170px;
	display: none;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	padding: 10px 20px 10px 10px;
	color:#FFFFFF;
	font-size:90%;
}
#panel a{
	color:#FFFFFF;
	text-decoration:underline;
}
#panel a:hover{
	color:#009966;
	text-decoration:underline;
}
.white a{
	color:#FFFFFF;
	

}
#panel2 {
	background: #8b82b3;
	height: 265px;
	display: none;
	font-family:Arial, Helvetica, sans-serif;
	padding: 10px 20px 10px 10px;
	color:#FFFFFF;
	font-size:90%;
}
#panel2 a{
	color:#FFFFFF;
	text-decoration:underline;
}
#panel2 a:hover{
	color:#009966;
	text-decoration:underline;
}
#panel3 {
	background: #8b82b3;
	height: 140px;
	display: none;
	font-family:Arial, Helvetica, sans-serif;
	padding: 10px 20px 10px 10px;
	color:#FFFFFF;
	font-size:90%;
}
#panel3 a{
	color:#FFFFFF;
	text-decoration:underline;
}
#panel3 a:hover{
	color:#009966;
	text-decoration:underline;
}

ul#topnav {
	margin: 0;
	padding: 0;
	border-bottom: solid 1px #c0bdc6;
	background-color:#ece1f6;
	text-decoration: none;
	color: #c0bdc6;
	float: right;
	text-align:center;
	
}
ul#topnav li a{
	margin: 0;
	padding: 0;
	border-bottom: solid 1px #422410;
	background-color:#000000;
	text-decoration: underline;
	color: #c0bdc6;
		 
}

.topnav{color: #B6B6B6 ;}

ul#main-nav li{
	list-style: none;
	display: inline;
	font: 115% Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding: 5px 0px 0px 0px;
	margin: 0px 20px 0px 0px;
	float: right;
	text-align:center;
	font-stretch:ultra-expanded;
	height:31px;
	color: #8b82b3;
	text-decoration: none;
	position:relative;

}
#main-nav {
	height:31px;
	position:relative;
	top:-15px;
	 margin: 0 auto; 
	 text-align: left;
	 width:auto;
	
}
ul#main-nav li a{
	list-style: none;
	display: inline;
	font: 115% Arial, Helvetica, sans-serif;
	font-weight: bold;
	height:31px;
	color: #8b82b3;
	text-decoration: none;
}
ul#main-nav li a: hover{
	list-style: none;
	display: inline;
	font: 115% Arial, Helvetica, sans-serif;
	font-weight: bold;
	height:31px;
	color: #000;
	text-decoration: none;
}


#slide {
	margin: 0;
	padding: 0;	
	background: url(http://www.beachplumspa.com/images/bps/slidesbg-2.png) no-repeat right top;
	text-decoration: none;
	height:35px;
	width:900px;
}
.bold{
	font-weight:bold;
}
.italics{
	font-style:italic;

}
.active {
	background-position: right 12px;
	text-decoration: none;
}
.active2 {
	background-position: right 12px;
	text-decoration: none;
}
.active3 {
	background-position: right 12px;
	text-decoration: none;
}
.pstyle {
	font-family:Arial, Helvetica, sans-serif;
	padding: 10px 10px 10px 10px;
	margin: 10px 10px 10px 10px;
	text-decoration: none;
	font-size:12px;

}

ul#nav li{
	list-style: none;
	display: inline;
	font: 105% Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding: 5px 9px 0px 0px;
	float: right;
	text-align:center;
	height:31px;
	text-decoration: none;
}
ul#nav li a{
	list-style: none;
	display: inline;
	font: 105% Arial, Helvetica, sans-serif;
	font-weight: bold;
	height:31px;
	text-decoration: none;
}
ul#nav li a: hover{
	list-style: none;
	display: inline;
	font: 105% Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#003399;
	height:31px;
	text-decoration: none;
}
a {
text-decoration: none;
}
.underline a{
	text-decoration:underline;
}
#top {
	background: #ece1f6;
	height: 128px;
	width:900px;
	margin: 0 auto; 
	 text-align: left;

}
.pink {
	background: #ece1f6;

}
#top-logo {
	width:900px;
	height:128px;
	background: #ece1f6;
	vertical-align:top;
	margin-top:20px;

	
	
}
#top-line{
	background: #d0cae3;
	height:6px;
	width:900px;
	position:relative;
	top:-35px;
	vertical-align:top;
	margin: 0 auto; 
	 text-align: left;

}
.logo {
	margin-top:-50px;
	z-index:1;
	
}

/*main action area of level 2 page*/
#gradient{
	background:url(http://www.beachplumspa.com/images/bps/gradient2.jpg) no-repeat;
	height:342px;
	width:900px;
	top:-35px;
	position:relative;
	vertical-align:top;
	 margin: 0 auto; 
	 text-align: left;
	 z-index:0;
}
#gradient-long{
	background:url(http://www.beachplumspa.com/images/bps/big-gradient2.jpg) no-repeat;
	height:900px;
	width:900px;
	top:-35px;
	position:relative;
	vertical-align:top;
	 margin: 0 auto; 
	 text-align: left;
	 z-index:0;
}
#service-gradient{
	background:url(http://www.beachplumspa.com/images/bps/big-gradient2.jpg) no-repeat;
	height:400px;
	width:900px;
	top:-35px;
	position:relative;
	vertical-align:top;
	 margin: 0 auto; 
	 text-align: left;
	 z-index:0;
}
/*left nav concerns*/
#leftnav{
	background-color:#8b82b3;
	width:220px;
	height:311px;
	float:left;
	margin: 0 auto; 
	text-align: left;
	position:relative;


}
#left-nav {
	position:relative;
	padding: 5px 5px 5px 5px;
	margin: 5px 5px 5px 5px;
	height:290px;
	float: left;
	width: 200px;
	background-color:#ece1f6;
	z-index:6;
}
#left-nav ul {
	margin:0px; 
	padding:0px; 
	background-color:#e6c4f8;
	font-size: 11px;
	font-weight:600;
	font-family:Georgia, "Times New Roman", Times, serif;
}
#left-nav ul li {
	height:24px;
	line-height:22px; 
	list-style:none; 
	padding-left:10px;

	color:#FFF; 
	border-top:#fff solid; 
	border-bottom:#fff solid; 
	border-width:1px;

}   
#left-nav ul li a{
	list-style:none; 
	color:#8b82b3;  
}
  
#left-nav ul li a:hover {
	color:#5e6961; 
	position:relative;
}
#left-nav #down a:link, #left-nav #down a:visited, #left-nav #down a:hover{
		color:#262a27;

}
/*left nav service */
#leftnav-service {
	background-color:#8b82b3;
	width:242px;
	height:226px;
	float:left;
	margin: 0 auto; 
	text-align: left;
	position:relative;
}
#left-nav-service {
	position:relative;
	padding: 5px 5px 5px 5px;
	margin: 5px 5px 5px 5px;
	height:205px;
	float: left;
	width: 223px;
	background-color:#ece1f6;
	z-index:6;
}
#left-nav-service ul {
	margin:0px; 
	padding:0px; 
	background-color:#e6c4f8;
	font-size: 11px;
	font-weight:600;
	font-family:Georgia, "Times New Roman", Times, serif;
}
#left-nav-service ul li {
	height:27px;
	line-height:26px; 
	list-style:none; 
	padding-left:1px;

	color:#FFF; 
	border-top:#fff solid; 
	border-bottom:#fff solid; 
	border-width:1px;

}   
#left-nav-service ul li a{
	list-style:none; 
	color:#8b82b3;
}
  
#left-nav-service ul li a:hover {
	color:#5e6961; 
	position:relative;
}
#left-nav-service #down a:link, #left-nav-service #down a:visited, #left-nav-service #down a:hover{
		color:#262a27;

}
.tight{
	letter-spacing:-.5px;
	
}
.small{
	font-size:smaller;
	
}

/*main copy*/
#main-copy{
	
	width:380px;
	height:295px;
	color:#433380;
	position:relative;
	margin: 0px 0px 10px 0px;
	padding: 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	float:left;
	line-height:16px;
}
#service-copy{
	width:358px;
	color:#433380;
	position:relative;
	margin: 0px 0px 10px 0px;
	padding: 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	float:left;
	line-height:16px;
}
#service-copy-2{
	width:880px;
	color:#433380;
	position:relative;
	margin: 0px 10px 10px 0px;
	padding: 0px 10px 10px 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	float:left;
	line-height:16px;
}
#main-copy-wide{
	
	width:600px;
	height:295px;
	color:#433380;
	position:relative;
	margin: 0px 0px 10px 0px;
	padding: 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	float:left;
	line-height:18px;
}
#main-copy-expanded{
	
	width:600px;
	color:#433380;
	position:relative;
	margin: 0px 0px 10px 0px;
	padding: 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	float:left;
	line-height:18px;
}
/*consult box*/
#consult-request{
	width:250px;
	height:295px;
	background:url(../../images/bps/consult-box.png) no-repeat;
	position:relative;
	margin: 10px 5px 10px 10px;
	padding: 0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	float:left;
}
#consult-service{
	width:250px;
	height:226px;
	background:url(../../images/bps/consult-box.png) no-repeat;
	position:relative;
	margin: 10px 5px 10px 10px;
	padding: 0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	float:left;
}
.consult-request-heaeder{
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	text-align:center;
	color:#400a64;
	font-weight:bold;
}
.consult-request-form{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	text-align:right;
	color:#400a64;
	font-weight:400;
}
/*little circles*/
#little-circle{
	/*background:url(../images/bps/little-circle.png) no-repeat;height:30px;*/
	
	width:200px;
	vertical-align:middle;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	line-height:14px;
	text-align:center;
	color:#b1cccf;
	margin: -15px 250px 0px 0px;
	padding:5px 0px 5px 0px;
	border: 1px solid;   
  	border-color: #696 #f2f2f2 #363 #f2f2f2;  
	z-index:1;
	position:relative;
	float:right;
	
}


input.btn {   
  color:#8b82b3;   
  font: bold 84% 'trebuchet ms',helvetica,sans-serif;   
  background-color:#d7eada;   
  border: 1px solid;   
  border-color: #696 #363 #363 #696;   
  filter:progid:DXImageTransform.Microsoft.Gradient   
  (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#d7eada'); 
 }   
 input.btn:hover {   
  color:#000;   
  font: bold 84% 'trebuchet ms',helvetica,sans-serif;   
  background-color:#d7eada;   
  border: 1px solid;   
  border-color: #363 #696 #696 #363;   
  filter:progid:DXImageTransform.Microsoft.Gradient   
  (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#d7eada'); 
 } 



/*footer *****************/

#footer{
	width:900px;
	height:118px;
	margin: 0 auto; 
	text-align: left;
	color:#677372;
	font-size: 11px;
	font-weight:600;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:relative;
	background:url(http://www.beachplumspa.com/images/bps/footer-bar.gif) no-repeat;
	z-index:0;

}

#footernav {

	width:auto;
	position:relative;
	vertical-align:bottom;
	padding: 50px 0px 0px 0px;



} 
ul#footernav li{
	list-style: none;
	display: inline;
	float: right;
	text-align:left;
	padding: 20px 25px 20px 10px;
	
	
}


ul#footernav li a{
	list-style: none;
	display: inline;
	font: 100% Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #8b82b3;
	text-decoration: none;

}
ul#footernav li a: hover{
	list-style: none;
	display: inline;
	font: 100% Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000;
	text-decoration: none;
}/*
.footer{
	margin: 0px 10px 10px 0px;
	color:#677372;
	font-size: 11px;
	font-weight:600;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
end footer ********************/

#inject-picture{
	margin-top:-60px;
	padding-left: 20px;


}
#lower-concern-nav {
font-size: 85%; /* set the font size */
font-weight:bolder;
padding: 0px 0px 0px 0px; /* set the padding */
margin: 99px 0px 0px -114px;
position:relative;
z-index:5;
}
#lower-action {
font-size: 85%; /* set the font size */
font-weight:bolder;
padding: 0px 0px 0px 0px; /* set the padding */
margin: 0px 0px 0px -20px;
position:relative;
z-index:5;
}
#lower-action ul {
line-height: 1em; /* setting the line height now so we don’t have any headaches*/
margin: 0px; /* let’s keep the margin set to 0 for the same reasons as above*/
list-style-type: none; /* we remove the UL’s default disc bullets */
float: left; /* we float the list to the left like we will all the elements inside*/
padding: 0px 0px 0px 5px; /* give it a left padding of 5px to counter the effect of margin -5px below */
}
#lower-action ul li {
float: left; /* floatin’ left */
}
#lower-action ul li a {
text-decoration: none; /* remove the default underline off the anchor text */
display: block; /* we display this text as block so that we can apply padding/margin without problems */
float: left; /* floatin’ left, to make the menu horizontal */
padding: 0px 0px 0px 10px;  /* we give it a left padding of 10px to show the first 10 pixels of the tabs image. you can also use padding-left: 10px; */
background: url(../../images/bps/tabs.gif) no-repeat left top;  /* we link to the tabs image, no tiling, showing the top left part of it */
margin-left: -5px;  /* this is important for the overlapping part - we are overlapping the tabs by 5 px */
z-index: 0; /* keep it on layer 0 (default) */
position: relative;  /* very important as this enables the z-index to work for us and keeps the tabs where they should be */
color:#333366;  /* color of the tab text */
}
#lower-action ul li a strong {
font-weight: normal;   /* remove the bold effect */
display: block;   /* display the strong element as a block so we can pad it, etc. */
float: left;   /* float it left as well */
background: url(../../images/bps/tabs.gif) no-repeat right top;  /* now we show the right part of the tab and we complete the "puzzle" */
padding: 6px 10px 9px 5px;  /* important, as through this you define the position of the text within the tab */
cursor: pointer;  /* this makes the browser show the "hand" cursor when hovering over the tab */
}
#lower-action ul li a:hover {
position: relative; /* again, keep things relative */
z-index: 5; /* we show this tab over all other tabs in the menu, which would be on layer 0, thus overlapping occurs */
background: url(../../images/bps/tabs.gif) no-repeat left bottom;  /* now we show the bottom part of the tabs image, the "hover" instance */
color: #000000;   /* we color the hovered tab’s text black */
}
#lower-action ul li a:hover strong {
background-image: url(../../images/bps/tabs.gif) no-repeat; 
position: relative; /* keep it relative */
z-index: 5; /* show this on layer 5 as well */
background-position: right bottom; /* we show the right bottom part of the tabs image (the hover instance) */
}
/*********lower action divs*********/
#what-to-expect{
	padding: 30px 50px 30px 50px;
	margin: -40px 33px 20px 33px;
	line-height:18px;
	background-color:#f2f2f2;
	border: 3px solid #8b82b3;
	z-index:0;

}
#benefits{
	padding: 30px 50px 30px 50px;
	margin: -40px 33px 20px 33px;
	line-height:18px;
	background-color:#f2f2f2;
	border: 3px solid #8b82b3;
	z-index:0;

}
#things-to-know{
	padding: 30px 50px 30px 50px;
	margin: -40px 33px 20px 33px;
	line-height:18px;
	background-color:#f2f2f2;
	border: 3px solid #8b82b3;
	z-index:0;

}