/*------------------------------------------------------------

Basic Style Sheet (with filters / hacks included)

version:	1.1
author:		derek allard
email:		derek@tunnel7.com
website:	http://www.tunnel7.com

------------------------------------------------------------*/

/* ======= GLOBAL STYLES ======= */


/* COLORS
	body background:		#ece8e4
	main text:				#4c4c4b
	links:					#5387aa
	light green header:		#7e8b7a
	green header:			#313f11
	footer text:			#fefefe
*/


/* begin css reset here */

* {
	margin: 0;
	padding: 0;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  
	margin: 0; 
	padding: 0; 
} 

table { 
	border-collapse: collapse; 
	border-spacing: 0; 
} 

fieldset,img {  
	border: 0; 
} 

address,caption,cite,code,dfn,em,strong,th,var { 
   font-style: normal; 
	font-weight: normal; 
} 

ol,ul { 
	list-style: none; 
} 

caption,th { 
   text-align: left; 
} 

h1,h2,h3,h4,h5,h6 { 
   font-size: 100%; 
   font-weight: normal; 
} 

q:before,q:after { 
	content:''; 
} 

abbr,acronym { 
	border: 0; 
} 

/* end css reset here */


body {
	position: relative;
	font-size: 62.5%; /* another popular method is to set this to 62.5% which then makes default text 10px and then go from there */
	font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
	background-color: #ece8e4;
	color: #4c4c4b 
}

#topStripe {  
	width: 100%; 
	background-color: #e86711;
	border-bottom: 1px solid #ece8e4;  
}

#wrapHeader {  
	width: 100%; 
	height: 219px;
	background: #ece8e4 url('../i/bg_header.jpg') repeat-x top left; 
}

#wrapBody {  
	width: 100%; 
	/* background: #fff url('../i/wrap_shadow.png') no-repeat bottom right; */
	background-color: #ece8e4;  
	background: transparent url('../i/bg_body.png') no-repeat bottom center;
}

#wrapFooter {  
	position: relative;
	/*top: -10px;  moves the wrap up 10 pixels to hide the space between wrapBody and wrapFooter */ 
	width: 100%;
	height: 424px; 
	background: transparent url('../i/bg_footer.jpg') repeat-x bottom left;  
}

h1 {  
	font: normal 3em "lucida sans", verdana, arial, helvetica, sans-serif;
	color: #7e8b7a;  
	letter-spacing: -.1em;
}

h2 {  
	font: normal 1.8em "lucida sans", verdana, arial, helvetica, sans-serif;
	color: #313f11; 
	letter-spacing: -.1em;
	margin: 1em 0;
}

h3 {  
	font: normal 1.8em "lucida sans", verdana, arial, helvetica, sans-serif;
	letter-spacing: -.1em;
	margin: 1em 0;
	color: #e4ded9;  
}

h4 {  
	font: bold 1.2em "lucida sans", verdana, arial, helvetica, sans-serif;
	margin: 1em 0;
	color: #313f11;  
}

p { 
	font-size: 1.2em; /* sets all these elements to 12 pixels */
	line-height: 2.4em; 
}

dt { 
	font-weight: bold;
	font-size: 1.4em; /* sets all these elements to 12 pixels */
	line-height: 2.4em; 
	color: #313f11;
}

a:link, a:visited {  
	color: #5387aa; 
	text-decoration: none;
}

a:hover, a:active { 
	text-decoration: underline;
}

#stripe, #header, #content, #footer { /* sets elements within wraps to 960 pixels */
	margin: auto;
	width: 960px;
}

#wrapHeader:after, #header:after, #wrapBody:after, #content:after, #wrapFooter:after, #footer:after { /* self clearing so that element contains floated elements */
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/*
input.test { /* to hide test field on forms to prevent spam - may want to text indent it into oblivion - think i read that some browsers choke on display none 
	display: none;
}

*/

/* for forms */

#mainContent input, #mainContent select, #mainContent textarea {
	font-family: courier, monospace;
	font-weight: bold; 
	color: #a4b6b9;
	background-color: #f9f7f8;
	border: 1px solid #e4ded9;
	padding: 3px; 
}

#mainContent input:focus, #mainContent select:focus, #mainContent textarea:focus {
	background-color: #fff;
	color: #4c4c4b;
}

#mainContent textarea {
	font-size: 100%;
}

#mainContent select {
	width: 150px;
}

#mainContent input.button, #mainContent input[type="button"], #mainContent input[type="submit"]  {
	border: 0;
	padding: 4px;
	margin-top: 1em;
	width: 200px;
	text-align: center;
	color: #fff;
	font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	background: #fe7012 url('../i/bg_button_orange.png') repeat-x top left; 
}

#mainContent input.button:hover, #mainContent input[type="button"]:hover, #mainContent input[type="submit"]:hover {
	text-decoration: none;
	background: #fe7012 url('../i/bg_button_blue.png') repeat-x top left;
}


#footer form {
	margin-top: 1em; 
}

#footer input[type="text"] {
	width: 215px;
	font-family: courier, monospace;
	font-weight: bold;
	color: #7e8b7a;
	background-color: #f6f4f2;
	border: none;
	padding: 4px;
	
}

#footer input.button, #footer input[type="submit"]  {
	float: left;
	margin-top: 1em;
	padding: 5px; 
	width: 140px;
	background: #fe7012 url('../i/bg_button_blue.png') repeat-x top left;
	border: 0;  
	color: #f4f5f2;
	font-weight: bold;
	font-size: 1.1em;
	font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
}

input.test { /* to hide test field on forms to prevent spam */
	display: none;
}

.feedback { /* for error messages */
	font-weight: bold;
	color: #ed1c24;
}

/* ======= TOP STIPE STYLES ======= */

#stripe p { 
	color: #fff;
	font-weight: bold;
	margin-left: 17px;
}

/* ======= HEADER STYLES ======= */

#header img {
	margin: 37px 0 0 20px;
	float: left;
}

ul#topNav {
	float: right;
	margin-right: 3px; /* positions the top nav with the second main nav row */
	display: block;
	width: 421px;
	height: 54px;
	color: #fefefe;
	background-color: transparent;
	background-image: url(../i/bg_top_nav-trans_404.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}

ul#topNav li {
	float: left;
	display: block; 
	margin: 15px 0 0 8px; 
	font-weight: bold;
	font-size: 1.1em; 
}

ul#topNav li:first-child {
	margin-left: 25px;
}

#topNav li.line { 
	padding-right: 8px; /* this has to match the left margin in the statement above */
	border-right: 1px solid #fefefe;
}

#topNav a:link, #topNav a:visited {
	color: #3c4f5c; 
}

#topNav a:hover, #topNav a:active { 
	color: #fefefe; 
	text-decoration: none; 
}

ul#mainNav {
	float: right;
	display: block;
	margin-top: 39px;
	width: 520px;
	color: #fefefe;
	font-size: 1.4em;
	font-family: ocrb, courier, monospace;
	text-transform: uppercase;
}

ul#mainNav li {
	float: left;
	display: block;
	width: 220px;
	height: 30px;
}

/* phark image replacement - the a definition is to get the link clickable */

li#about {
	text-indent: -50000px; 
}

li#about a {
	display: block;
	height: 12px;
	width: 66px; /* width of bg image - important for underline mouseover*/
	background: transparent url('../i/nav_about-trans.png') no-repeat top left;  
}

li#holistic {
	text-indent: -5000px; 
}

li#holistic a {
	display: block;
	height: 12px;
	width: 159px; /* width of bg image - important for underline mouseover*/
	background: transparent url('../i/nav_holistic-trans.png') no-repeat top left;
}

li#wellness {
	text-indent: -5000px; 
}

li#wellness a {
	display: block;
	height: 12px;
	width: 142px; /* width of bg image - important for underline mouseover*/
	background: transparent url('../i/nav_wellness-trans.png') no-repeat top left;
}

li#events {
	text-indent: -5000px;
}

li#events a {
	display: block;
	height: 12px;
	width: 220px; /* width of bg image - important for underline mouseover*/
	background: transparent url('../i/nav_events-trans.png') no-repeat top left;
}

li#faq {
	text-indent: -5000px; 
}

li#faq a {
	display: block;
	height: 12px;
	width: 149px; /* width of bg image - important for underline mouseover*/
	background: transparent url('../i/nav_faq-trans.png') no-repeat top left;
}

li#contact {
	text-indent: -5000px; 
}

li#contact a {
	display: block;
	height: 12px;
	width: 84px; /* width of bg image - important for underline mouseover*/
	background: transparent url('../i/nav_contact-trans.png') no-repeat top left;
}

#mainNav a:link, #mainNav a:visited {  
	color: #e4ded9;  
}

#mainNav a:hover, #mainNav a:active {
	color: #fefefe;
	text-decoration: none; 
	border-bottom: 2px dotted #566344;
}

/* to highlight main nav on page */

#ab #mainNav li#about a,
#ht #mainNav li#holistic a,
#wp #mainNav li#wellness a,
#ev #mainNav li#events a,
#fq #mainNav li#faq a,
#ct #mainNav li#contact a {
	border-bottom: 2px solid #acd6f2;
}


#hdcontent ul {
	float: right;
	display: block; 
	list-style-type: none;
	width: 450px;  
	padding: 83px 0 37px 0;  
}

#hdcontent ul li { 
	float: left; 
	display: inline; 
	padding: 0 19px 0 19px;
	text-align: right;  
}


/* ======= HOMEPAGE STYLES ======= */

#mainFeature {
	position: relative;
	float: left;
	width: 960px;
	background: #ece8e4 url('../i/bg_home_feature_middle.jpg') repeat top left;
}

#mainFeatureText {
	margin: 20px 30px 15px 30px;
	width: 900px;
	background-color: transparent;
	background-image: url(../i/bg_home_statue2.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	float: left;
}
#mainFeatureTop {
	background-image: url(../i/bg_home_feature_top.jpg);
	background-repeat: no-repeat;
	height: 29px;
	width: 960px;
}
#mainFeatureBottom {
	background-image: url(../i/bg_home_feature_bottom.jpg);
	background-repeat: no-repeat;
	height: 26px;
	width: 960px;
	float: left;
}
#mainFeatureText h1, #mainFeatureText p   {
	margin-left: 350px;
	line-height: 1.5em;
	margin-bottom: 2em;
	margin-right: 30px;
}
#mainFeatureText ul li {
	font-size: 1em;
	list-style: disc inside;
	margin-left: 60px;
}
#mainFeatureText ul {
	font-size: 1.2em;
	margin-left: 350px;
	line-height: 150%;
}



#mainFeatureText h1 { 
	font-size: 2.6em;
	padding-top: 30px;
	margin-bottom: .7em;
	padding-bottom: 30px; 
	background: transparent url('../i/separator_home.png') no-repeat bottom center;
}


#mainFeatureText a.button:link, #mainFeatureText a.button:visited {
	float: left;
	margin-top: 2em;
	margin-right: 20px;
	text-align: center;
	display: block;
	width: 200px;
	color: #fff;
	font-weight: bold;
	background: #fe7012 url('../i/bg_button_orange.png') repeat-x top left;
}

#mainFeatureText a.button:hover, #mainFeatureText a.button:active {
	text-decoration: none;
	background: #fe7012 url('../i/bg_button_blue.png') repeat-x top left;
}
 

#subFeatures {
	float: left;
	margin-top: 20px;
	padding-top: 60px; /* clever use of margin and padding places bg image where it should be */
	background: #ece8e4 url('../i/separator.png') no-repeat top center;
}

#subFeatures img {
	border: 7px solid white;
}

#subFeature1, #subFeature2, #subFeature3 {
	position: relative;
	float: left;
	width: 290px;
	margin-right: 45px;
}

#subFeature3 {
	margin-right: 0;
}

#subFeatures a.button:link, #subFeatures a.button:visited {  
	position: absolute;
	top: 450px;
	left: 0;
	display: block;
	width: 200px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	background: #fe7012 url('../i/bg_button_orange.png') repeat-x top left;
}

#subFeatures a.button:hover, #subFeatures a.button:active {
	text-decoration: none;
	background: #fe7012 url('../i/bg_button_blue.png') repeat-x top left;
}

 


/* ======= BODY STYLES ======= */

#content {
	margin-top: 30px;
	padding-bottom: 300px;  
}

#pageTitle {
	width: 960px;
	height: 188px;
	background: #ece8e4 url('../i/bg_interior_top_hs.jpg') no-repeat top left;
}

#ab #pageTitle { 
	background: #ece8e4 url('../i/bg_interior_top_ab.jpg') no-repeat top left;
}

#ht #pageTitle { 
	background: #ece8e4 url('../i/bg_interior_top_ht.jpg') no-repeat top left;
}

#wp #pageTitle { 
	background: #ece8e4 url('../i/bg_interior_top_wp.jpg') no-repeat top left;
}

#fq #pageTitle { 
	background: #ece8e4 url('../i/bg_interior_top_fq.jpg') no-repeat top left;
}

#ev #pageTitle {
	background: #ece8e4 url('../i/bg_interior_top_ev.jpg') no-repeat top left;
	height: 220px;
}

#ct #pageTitle { 
	background: #ece8e4 url('../i/bg_interior_top_ct.jpg') no-repeat top left;
}

#hs #pageTitle { 
	background: #ece8e4 url('../i/bg_interior_top_hs.jpg') no-repeat top left;
}

#pl #pageTitle { 
	background: #ece8e4 url('../i/bg_interior_top_pl.jpg') no-repeat top left;
}

#pageTitle h1 {
	padding-top: 50px;
	padding-left: 290px; /* width of the subnav bar */

}

#pageTitle p {
	padding: 0 130px 0 290px; /* width of the subnav bar */
}

#subContent, #mainContent {
	margin-top: 40px;
}

#subContent {
	float: left;
	width: 240px;
	margin-right: 50px;
	margin-bottom: 2em;
	padding-top: 45px; /* coordinates with padding-bottom on other subContent elements to place subcontent in the middle */
	text-align: right;
	background: #ece8e4 url('../i/separator_sub.png') no-repeat top right;
}

#subContent ul {
	padding-bottom: 45px;
	background: #ece8e4 url('../i/separator_sub.png') no-repeat bottom right;	
}

#subContent li {
	padding-right: 15px;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 2.4em;
	letter-spacing: -.05em;
}

#subContent ul li ul {
	padding-bottom: 0;
	background: none;	 
}

#subContent ul li ul li {
	padding-right: 0;
	font-size: .8em;
	font-weight: normal;
	line-height: 2.4em;
	letter-spacing: -.02em;
}

#ct #subContent li, #er #subContent li {
	font-size: 1.2em;
	font-weight: normal;
	letter-spacing: 0;
}

#subContent h3 {
	margin: 1em 0;
	padding-right: 15px;
	font-size: 1.4em;
	font-weight: bold;
	color: #313f11;
	letter-spacing: -.05em;
}

#subContent p {
	padding-right: 15px;
}

#subContent a.button:link, #subContent a.button:visited {
	float: right;
	margin-bottom: 2em;
	text-align: center;
	display: block;
	width: 200px;
	color: #fff;
	font-weight: bold;
	background: #fe7012 url('../i/bg_button_orange.png') repeat-x top left;
}

#subContent a.button:hover, #subContent a.button:active {
	text-decoration: none;
	background: #fe7012 url('../i/bg_button_blue.png') repeat-x top left;
}

/* set mainContent to a set width based on the body id for pages that don't need to flow all the way to the right (contact page, etc.) */

#mainContent {
	float: left;
	width: 670px;
}


#mainContent h2 {
	font-size: 2.4em;
	letter-spacing: -.07em;
	margin-top: 0;
}

#mainContent h3 {
	color: #313f11;
}

#mainContent p {
	margin: 1em 0;
}

#mainContent ul { 
	margin-left: 4em;
	list-style: disc inside;
	font-size: 1.2em; /* sets all these elements to 12 pixels */
	line-height: 1.5em; 
}

#mainContent ul.sections { /* added for section jumps on faq page */
	margin-left: 0;
	margin-bottom: 2em; 
	list-style: none;
	font-weight: bold;
}

#mainContent img {
	float: left;
	margin: 0 20px 10px 0; 
	border: 7px solid #fff;
}

 
#mainContent .listColumn {
	width: 50%;
	height: 100%;
	float: left;
	margin-bottom: 1em;
}

#mainContent a.button:link, #mainContent a.button:visited {
	margin-bottom: 2em;
	text-align: center;
	display: block;
	width: 200px;
	color: #fff;
	font-weight: bold;
	background: #fe7012 url('../i/bg_button_orange.png') repeat-x top left;
}

#mainContent a.button:hover, #mainContent a.button:active {
	text-decoration: none;
	background: #fe7012 url('../i/bg_button_blue.png') repeat-x top left;
}

.listColumn li.empty { /* to even out number of items */
	text-indent: -9999px;
}
  
#hs #content h2 { /* specific to herbal supplements page */ 
	margin-top: 2em; 
}

/* ======= FOOTER STYLES ======= */

#footer {
	position: relative; 
	top: 35px;
	padding-top: 30px; 
	color: #f9f8f7;
	background: transparent url('../i/separator_footer-trans.png') no-repeat top center;
}

#footer p, #footer ul {
	font-size: 1.1em;
	line-height: 1.8em;
}

#footer ul {
	margin: 1em 0 1em 1.5em;
}

#footer a {
	font-weight: bold;
}
#foot1, #foot2, #foot3 {
	float: left;
	width: 290px;
	margin-right: 45px; 
}

#foot3 {
	margin-right: 0;
}

#address {
	left: 35px;
	position: absolute;
	top: 320px; /* not sure why this number works but it does */
	width: 430px;
	height: 69px;
	background: transparent url('../i/bg_address.png') no-repeat bottom center; 
}

#address p {
	color:#006;
	font-weight: bold;
	padding-left: 40px;
	margin-top: 40px;
}

#copyright {
	width: 299px;
	height: 69px;
	position: absolute;
	top: 320px; /* not sure why this number works but it does */
	left: 661px; /* 960 - 299 (width of copyright) = 661 */
	background: transparent url('../i/bg_copyright.png') no-repeat bottom center; 
}

#copyright p {
	padding: 25px 15px 0 25px;  
}

#copyright a:link, #copyright a:visited {
	color: #fefefe; 
}

#copyright a:hover, #copyright a:active { 
	color: #3c4f5c; 
	text-decoration: none; 
}.bold_ital {
	font-style: italic;
	font-weight: bold;
}
#ht #mainContent  h4{
	margin-left: 3.5em;
}

.underline {
	text-decoration: underline;
}
#ev #mainContent h2 {
	margin-top: 2em;
	margin-bottom: 0em;
}
#mainContent #fees p {
	line-height: 150%;
	margin: 0px 0px 20px 0px;
	padding: 0px;
}
#mainContent #fees h3 {
	font-size: 1.7em;
	margin-top: 2em;
}
#fq #mainContent dt {
	line-height: 125%;
}
#fq #mainContent h3 {
	font-size: 1.65em;
	margin-bottom: 0px;
}

#mainContent #fees {
	margin-bottom: 4em;
}
#pl #mainContent h2 {
	margin-top: 2em;
	margin-bottom: 1em;
}


.bold {
	font-weight: bold;
}
.italics {
	font-style: italic;
}
#ev #subContent {
	width: 260px;
}
#ev #mainContent {
	float: left;
	width: 650px;
}
#ev #pageTitle a.button:hover , #ev #pageTitle a.button:active {
	text-decoration: none;
	background: #fe7012 url('../i/bg_button_blue.png') repeat-x top left;
}
#pageTitle a.button:link, #pageTitle a.button:visited {
	float: left;
	margin-bottom: 0em;
	text-align: center;
	width: 250px;
	color: #fff;
	font-weight: bold;
	background: #fe7012 url('../i/bg_button_orange.png') repeat-x top left;
	margin-top: 1em;
	display: block;
	margin-left: 1em;
}
#ev #mainContent a.button:link, #ev #mainContent a.button:visited {
	margin-bottom: 0em;
	text-align: center;
	color: #fff;
	font-weight: bold;
	margin-top: 1em;
	display: block;
	margin-left: 1em;
	background-color: #FEA970;
	background-image: url(../i/bg_button_orange.png);
	background-repeat: repeat-x;
	background-position: left top;
	width: 250px;
}
#ev #mainContent a.button:hover, #ev #mainContent a.button:active {
	text-decoration: none;
	background: #fe7012 url('../i/bg_button_blue.png') repeat-x top left;
}