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

/* basic elements */
html {
	margin: 0;
	padding: 0;
	}
body  {
	font: 85%/1.6 Verdana, Arial, Helvetica, sans-serif;
	background: #fff;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
h1, h2, h3, h4 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: /*#80a055*/ #7b7a5a;
	letter-spacing: -0.04em;
	padding-bottom: 0px;
	margin-bottom: 0px;
	}

h1 {
	letter-spacing: -.05em;
	}	
h3 {
	font-size: 130%;
}

h3.fish {
	margin-top: -10px;
	font-variant: small-caps;
	text-align: left;
	padding-top: 0px;
	position: relative;
	font-weight: bolder;
	background-image:url(IMAGES/fish-w-bg.jpg);
	height: 112px;
	width: 215px;
	text-indent: -99999px;
	margin-left: -14px;
}

/*h3.fish {
	margin-top: -10px;
	background-image:url(IMAGES/fish-w-bg.jpg) no repeat;
	height: 112px;
	width: 215px;
	padding: 0px;
	position: relative;
	
	}*/

h5 {
	color: /*#80a055*/ #5e5d45;
	margin-left: 60px;
	font-size: 1.2em;
	font-variant: small-caps;
	padding: 0;
	margin: 0;
}

 .loctm {
	padding: 0 0 88px;
	margin: 0 auto 0;
	position: relative;
	text-align: center;
	height: 80px;
	width: 900px;
	z-index: 99;
	color: #666666;
	font: small-caps 100%/125% Verdana, Arial, Helvetica, sans-serif;
	}


/* experiment #1  ====THIS WORKS================== */

#wrapper {
	background: url(IMAGES/page_bottom2.jpg) no-repeat center bottom;
	margin: 0px auto 15px;
	width: 700px;
	/*height: 10px;*/
	position: relative;
	padding-bottom: 10px;	/*overflow: visible;*/
	/*z-index: 200;*/
	/*padding-bottom: 120px;*/
	}
	


/*#bottomGraphic .index {
	background:  url(IMAGES/page_bottom4_right-image.jpg) no-repeat right bottom;
	margin: 0px auto 15px;
	width: 372px;
	height: 322px;
	position: absolute;
	padding-bottom: 10px;
}*/

#bottomGraphic {
	padding-bottom: 10px;
	}*/

/*  bottom lower right graphic image needs to be resized for each image -- INDEX*/

/*#container #image2.index2 {
	position:absolute;
	/*background:  /*url(IMAGES/crop_circle_bg.png)*/ /*url(IMAGES/page_bottom4_right-image.jpg) no-repeat;
	left: 466px;
	top: /*//**457px;*/ /*557px;
	height: 372px;
	width: 322px;
	padding-bottom: 120px;
	z-index: 100;
	}**//*/*/

/*#loctm  {
	background: #fff /*url(IMAGES/crop_circle_bg.png)*//* url(IMAGES/loctm.jpg) no-repeat center;*/
	/*	left: 216px;
	top: 580px;*/
	/*left: 216px;*/
	/*top: 200px*/
	/*height: 80px;
	width: 273px;
	z-index: 200;
	padding: 0;
	margin: 0;
	left:416px;
	}*/
	
	
/*.pagebottom h1 {
	background:  url(IMAGES/page_bottom2a.jpg) no-repeat center;
	margin: 0px auto 15px;
	width: 700px;
	height:120px;
	position: relative;
	padding-bottom: 120px;	/*overflow: visible;*/
	/*z-index: 200;
	font-size: 3em;

}*/	


													/* ================ bottom graphic  =================== */

/*#bottomGraphic .index {
	margin: 0px auto 15px;
	background:  url(IMAGES/page_bottom4_right-image.jpg) no-repeat right bottom;
	width: 372px;
	height: 322px;
	position: absolute;
	/*padding-bottom: 120px;*/





													/* ================ footer graphic  =================== */

#wrapper {
	margin: 0px auto 15px;
	width: 700px;
	background:  url(IMAGES/page_bottom2.jpg) no-repeat center bottom;
	position: relative;
	padding-bottom: 10px;	/*overflow: visible;*/
	/*z-index: 200;*/
}

													/* =============  faux column background =============== */


#container {
	background: #FFFFFF url(IMAGES/body_back2.jpg) repeat-y;
	padding-right: 9px;
	padding-left: 9px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	position: relative;
	font-size: 85%;
	font: 90%/1.7 Verdana, Arial, Helvetica, sans-serif;
	} 
	
													/* =========== lower right graphic =====================*/	

/*index - about us PAGE*/
	
#container #footer .overhangIndex						{
	padding: 0;
	margin: 0px auto 15px;
	background:  url(IMAGES/page_bottom_index_right-image.jpg) no-repeat right bottom;
	width: 329px;
	height: 320px;
	position: absolute;
	z-index:300;
	left: 466px;
	top: 485px;
}

#container #footer .overhangServices  						{
	padding: 0;
	margin: 0px auto 15px;
	background:  url(IMAGES/page_bottom_calc_right-image.jpg) no-repeat right bottom;
	width: 444px;
	height: 347px;
	position: absolute;
	z-index:300;
	left: 465px;
	top: 516px;
}

#container #footer .overhangAboutus						{
	padding: 0;
	margin: 0px auto 15px;
	background:  url(IMAGES/page_bottom_coffee_right-image.jpg) no-repeat right bottom;
	width: 398px;
	height: 418px;
	position: absolute;
	z-index:300;
	left: 466px;
	top: 620px;
}

#container #footer .overhangFaq						{
	padding: 0;
	margin: 0px auto 15px;
	background:  url(IMAGES/page_bottom_fishy2_right-image.jpg) no-repeat right bottom;
	width: 314px;
	height: 582px;
	position: absolute;
	z-index:300;
	left: 466px;
	top: 1056px;
}

#container #footer .overhangStarthere						{
	padding: 0;
	margin: 0px auto 15px;
	background:  url(IMAGES/page_bottom_stamper_right-image.jpg) no-repeat right bottom;
	width: 444px;
	height: 329px;
	position: absolute;
	z-index:300;
	left: 466px;
	top: 773px;
}

#container #footer .overhangNews						{
	padding: 0;
	margin: 0px auto 15px;
	background:  url(IMAGES/page_bottom_mag_right-image.jpg) no-repeat right bottom;
	width: 478px;
	height: 369px;
	position: absolute;
	z-index:300;
	left: 466px;
	top: 796px;
}


#container #footer .overhangGoodideas						{
	padding: 0;
	margin: 0px auto 15px;
	background:  url(IMAGES/page_bottom_bluebulb_right-image.jpg) no-repeat right bottom;
	width: 295px;
	height: 550px;
	position: absolute;
	z-index:300;
	left: 466px;
	top: 860px;
}


#container #footer .overhangOurmission						{
	padding: 0;
	margin: 0px auto 15px;
	background:  url(IMAGES/page_bottom_butterfly_right-image.jpg) no-repeat right bottom;
	width: 444px;
	height: 466px;
	position: absolute;
	z-index:300;
	left: 466px;
	top: 750px;
}

/*#container #footer .overhangBubbly {
	background: url(IMAGES/bubbly_CROP_smaller.png) no-repeat;
	height:432px;
	width: 313px;
	left: 538px;
	top: -121px;
	z-index:200;
}*/

/*CALCULATOR - SERVICES PAGE*/

/*#container #footer .overhangServices					{
	background: url(IMAGES/calc_relief.png) no-repeat;
	height:201px;
	width: 449px;
	left: 469px;
	top: -75px;
	z-index:200;
}*/

/*coffee - about us PAGE*

/*
#container #footer .overhangAboutus						/{
	background: url(IMAGES/xx_coffee.png) no-repeat;
	height:400px;
	width: 356px;
	left: 469px;
	top: -180px;
	z-index:300;
}

/*vase - FAQ PAGE*/

/*#container #footer .overhangFaq							{
	background: url(IMAGES/vase2.png) no-repeat;	
	height:725px;
	width:257px;
	left: 489px;
	top: -670px;
	z-index:300;
}*/

/*stamp - start here PAGE*/

/*#container #footer .overhangstarthere					{
	background: url(IMAGES/paidStamp_FINAL.png) no-repeat;
	height:325px;
	width:406px;
	left: 429px;
	top: -180px;
	z-index:300;
}*/

/*magnifier - news PAGE*/

/*#container #footer .overhangNews					{
	background: url(IMAGES/magnified_only.png) no-repeat;
	height:288px;
	width:487px;
	left: 393px;
	top: -90px;
	z-index:300;
}*/







/*#container #footer .overhanggoodideas					/*bulb - good ideas PAGE*/
	/*background: url(IMAGES/lightbulb.png) no-repeat;
	height:374px;
	width:211px;
	left: 549px;
	top: -280px;*/
	/*z-index:300;*/


/*#container #footer .overhangOurmission					/*butterfly - our mission PAGE*/
	/*background: url(IMAGES/butterfly.png) no-repeat;
	height:364px;
	width:379px;
	left: 459px;
	top: -180px;
	z-index:300;
}**/


/*#container .index .overhangIndex .overhangServices .overhangAboutus .overhangFaq .overhangstarthere .overhangNews .overhanggoodideas .overhangOurmission {
	margin: 0;
	padding: 0;
	position: absolute;
	left: -65px;
	top: 0px;
}*/

/*#container .overhangServices {
	position: absolute;
	left: -65px;
	top: 0px;
}

#container .overhangAboutus {
	position: absolute;
	left: -65px;
	top: 0px;
}

#container .overhangFaq {
	position: absolute;
	left: -65px;
	top: 0px;
}

#container .overhangstarthere {
	position: absolute;
	left: -65px;
	top: 0px;
}


#container .overhangNews {
	position: absolute;
	left: -65px;
	top: 0px;
}


#container .overhanggoodideas {
	position: absolute;
	left: -65px;
	top: 0px;
}

#container .overhangOurmission {
	position: absolute;
	left: -65px;
	top: 0px;
}*/

									/* =============logo graphic on index page ===========*/

#container #image1.index {
	position:absolute;
	background:  /*url(IMAGES/crop_circle_bg.png)*/ url(IMAGES/mandala-BLUE-GRADIENT.png) no-repeat;
	left: 50px;
	top: 36px;
	height: 192px;
	width: 194px;
	/*z-index: 100;*/
	}
	
		
			
#header {
	background: #FFF url(IMAGES/8header_bg.jpg) no-repeat 220px 40px;
	height:130px;
	width:530px;
	padding: 40px 0 40px 150px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	} 
	
								/* =============logo graphic on the rest of the pages page =======*/
	

#container #image1 {
	position:absolute;
	background:  /*url(IMAGES/crop_circle_bg.png)*/ url(IMAGES/Color-Logo-with-words.jpg) no-repeat;
	left: 50px;
	top: 36px;
	height: 192px;
	width: 194px;
	/*z-index: 100;*/
	}	
	

	
	
								/* =============  charles bottom footer address ============= */	
	
/*#loctm {
	position:relative;
	background:  #fff;
	font-variant: small-caps;
	text-align: center;	/*height: 192px;
	width: 194px;*/
	/*padding-top: 0px;
	z-index: 99;
	color: #333333;
	}
	
*/	

	
/*h1.shortLeading  {
	line-height: 1em;
	font-weight: bold;
	
}*/	

.blue {
	color: #217ed5;
	}
	
.blackbold {
	color:#000000;
	font-weight: bold;
	}

.blue h5 {
	/*color: /*#80a055*/
	color: #217ed5;
	margin-left: 60px;
	font-size: 1.4em;
	font-variant: small-caps;
	padding: 0;
	margin: 0;
}
h1.services {
	background: #FFF url(IMAGES/x_services_header_bg.jpg) no-repeat 220px 40px;
	height:103px;
	width:530px;
	padding: 40px 0 40px 150px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	margin-top: -210px;
	margin-left: -30px;
	text-indent: -99999px;
	} 	

h1.aboutus {
	background: #FFF url(IMAGES/x_aboutus_header_bg.jpg) no-repeat 220px 40px;
	height:103px;
	width:530px;
	padding: 40px 0 40px 150px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	margin-top: -210px;
	margin-left: -30px;
	text-indent: -99999px;
	} 	
	
h1.faq {
	background: #FFF url(IMAGES/x_faq_header_bg.jpg) no-repeat 220px 40px;
	height:103px;
	width:530px;
	padding: 40px 0 40px 150px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	margin-top: -210px;
	margin-left: -30px;
	text-indent: -99999px;
	} 	
	
h1.starthere {
	background: #FFF url(IMAGES/x_starthere_header_bg.jpg) no-repeat 220px 40px;
	height:103px;
	width:530px;
	padding: 40px 0 40px 150px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	margin-top: -210px;
	margin-left: -30px;
	text-indent: -99999px;
	}
	
h1.news {
	background: #FFF url(IMAGES/x_news_header_bg.jpg) no-repeat 220px 40px;
	height:103px;
	width:530px;
	padding: 40px 0 40px 150px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	margin-top: -210px;
	margin-left: -30px;
	text-indent: -99999px;
	} 	

		
	
	h1.goodideas {
	background: #FFF url(IMAGES/x_goodideas_header_bg.jpg) no-repeat 220px 40px;
	height:103px;
	width:530px;
	padding: 40px 0 40px 150px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	margin-top: -210px;
	margin-left: -30px;
	text-indent: -99999px;
	} 	
	
	
h1.ourmission {
	background: #FFF url(IMAGES/x_ourmission_header_bg.jpg) no-repeat 220px 40px;
	height:103px;
	width:530px;
	padding: 40px 0 40px 150px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	margin-top: -210px;
	margin-left: -30px;
	text-indent: -99999px;
	} 		
	
/*<div id="sidebar1">
      <h3 class="firstSmallCaps"><span>Get Relief Now</span></h3>*/
/*#preamble h3 span {
	display: none;}*/

h2.second {
	/*margin-top: -120px;
	padding-top: -20px;*/
	position: relative;
	font-variant: small-caps;
	text-transform: none;
	width: 300px;
	z-index: 99;
}

h3.firstSmallCaps {
	margin-top: -10px;
	font-variant: small-caps;
	text-align: left;
	padding-top: 0px;
	position: relative;
	font-weight: bolder;
	background: url(IMAGES/sidebar_header_grnow.jpg);
	height: 54px;
	width: 200px;
	text-indent: -99999px;
	margin-left: -14px;
}
	
#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	display:none;
	}
#mainContent {
	margin: 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0 20px 0 30px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	width: 408px;
	float:left;
	color: #666666;
	} 
#mainContent h1 {
	font-size: 180%;
	text-align: right;
	margin-right: 20px;
}
#mainContent h2 {
	font-size: 150%;
	text-align: right;
	margin-top: 0px;
	margin-right: 24px;
	padding-top: -100px;
	position: absolute;
	left: 19px;
	width: 406px;
	top: 243px;
	height: 38px;
}
#sidebar1 {
	float: right; /* since this element is floated, a width must be given */
	width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 8px 10px 0px;
}
#
 {
	padding: 0px 0px 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#fff ;
	position: relative;
} 
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 0px 70px 0px 30px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	font-size: 85%;
	color: #666666;
	text-align: center;
}

.blue {
	color: #486d90;
	}
	
.bold {	
	font-weight: bold;
	}	

.blueBold {
	color: #486d90;
	font-weight: bold;
	}	

.dropcap {
	font:  5em/.9em Georgia, "Times New Roman", Times, serif;
	color: /*e43611*//*#217ed5*/#7b7a5a;
	display: block;
	padding-right: 0.07em;
	float:left;
	background: 1.85px;
}

.dropcap_sml {
	font:  3em/.9em Georgia, "Times New Roman", Times, serif;
	color: /*e43611*//*#217ed5*/#7b7a5a;
	display: block;
	padding-right: 0.07em;
	float:left;
	background: 1.85px;
}
.first {
	margin-top: 0px;
}
.firstSmallCaps{
	margin-top: 0px;
	font-variant: small-caps;
	text-align: center;
	padding-top: 0px;
	position: relative;
	font-weight: bolder;
}


p.italic {
	font-style: italic;
}

.pquote {
	font-style: italic;
/*	float: left;
	width: 8em;
	background: #ddf;
	font-weight: bold;
	padding: 1em;
	margin: 0 0.5em 0.5em 0;*/
}


.services h2 {
	margin-top: -100px;
	padding-top: -20px;
	position: relative;
	font-variant: small-caps;
	text-transform: none;
	width: 300px;
	z-index: 100;
	
}
.startContent {
	margin-top: 30px;
	position: relative;
}


.bulletList li {
	margin-left: 0px;
}
    
.extraTopspace li {
	padding-top: 15px;
}


.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
	
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/* definition list formatting
-----------------------------------------------*/

dl {
	/*border: 3px double #ccc;*/
	padding: 0.5em 0.5em 0 0.5em;
}
	  
dt { float: left;
	clear: left;
	width: 100px;
	text-align: right;
	font-weight: bold;
	color: #5e5d45;
} 

/*dt:after {
	content: ":";
}*/

dd {
	margin: 0 0 0 110px;
	padding: 0 0 0.5em 0;
   }





/* navigation (horizontal subnavigation)
----------------------------------------------- */
ul.navMain,
ul.navMain * { margin:0;padding:0;}
ul.navMain {
	position: relative;
	background:#FFF;
	max-width:100%;
	/*  height:2.5em;*/
  height:2.4em;
	top: -44px;
	font-size: 95%;
	position: center;
	
  }
  
#navbar {
	left: -150px;
	position: relative;
	width: 126%;
	}
  
  
ul.navMain li {
	cursor:pointer;
	float:left;
	text-align:center;
	list-style-type:none;
	font-weight:normal;
	font: 200%;
	}
ul.navMain li ul {
	cursor:default;
	width:100%;
	max-width:100%;
	position:absolute;
	height:auto;
	top:2.5em;
	background-position:0 0 !important;
	left:-9000px;
}
ul.navMain li ul li {
	padding:0;
	border:none;
	width:auto;
	max-width:none;
}
ul.navMain li a {
	color:#5e5d45;
	background:#FFF;
	font-weight:bold;
	text-decoration:none;
	display:block;
	float:left;
	padding:0 1em;
	height:2.4em;
	line-height:2.5em;
	
}
ul.navMain li ul li a {
	position:relative !important; /* ie Mac */
	cursor:pointer !important;
	white-space:nowrap;
	line-height:2em;
	height:2em;
	font-weight:normal;
	color:#666;
	background-position:0 50% !important;
}

ul.navMain li:hover a,
ul.navMain li a:hover,
/*ul.navMain li a:focus {color:#000; background:#ccc;}*/
ul.navMain li a:focus {color:#0057a0; background:/*#ffbe5b*/#cfcfba;}
ul.navMain li a:active {color:#666; background:#fff;}
ul.navMain li:hover ul {left:0;z-index:10}
ul.navMain li ul,
ul.navMain li {background:#ccc !important;}
ul.navMain li:hover ul li a {color:#444;}
ul.navMain li:hover ul li a:hover {color:#000; background:#fff;}
ul.navMain li:hover ul li a:active {color:#666; background:#fff;}

/*ul.navMain li.current a {color:#666; background:#fff; cursor:default; font-weight:bold;}
ul.navMain li.current ul {left:0;z-index:5}
ul.navMain li.current ul,
ul.navMain li.current {background:#ccc !important}
ul.navMain li.current ul li a {color:#444; background:#ccc; font-weight:normal;}
ul.navMain li.current ul li a:hover {color:#000; background:#fff;}
ul.navMain li ul li.current a,
ul.navMain li ul li.current a:hover,
ul.navMain li.current:hover ul li a:active {color:#666; background:#fff;}*/

ul.navMain li.current a {color:#fff; background:#217ed5; cursor:default; font-weight:bold;}
ul.navMain li.current ul {left:0;z-index:5}
ul.navMain li.current ul,
ul.navMain li.current {/*background:#ccc;*/
	border-top: thin none #FFFFFF;
	border-right: thin none #FFFFFF;
	border-bottom: thin none #FFFFFF;
	border-left: thin none #FFFFFF;
}
ul.navMain li.current ul li a {color:#444; background:#ccc; font-weight:normal;}
ul.navMain li.current ul li a:hover {color:#000; background:#fff;}
ul.navMain li ul li.current a,
ul.navMain li ul li.current a:hover,
ul.navMain li.current:hover ul li a:active {color:#666; background:#fff;}