/*  This CSS file formats the fonts, colors, links as well as setting how 
certain elements on the page are displayed.  */

/*  colors used: */
/*   #971903 - red orange from Darren    */
/*   #24604a - dark green that came with the site - used for text on light green box background   */
/*   #339966 - happy dark green - used for h2   */
/*   #eeffee - light light green for inside color of boxes (background color)   */
/*   #b22222 - barn red /* not used */
/*   #606060 - a grey that appears when the link is hovered over   */
/*   #3f233a - grey to use instead of dark black for the text -or- try 3f322a   */



html {
	height: 100%; 
	margin-bottom: 1px;}
	
body {
	background: #ffffff url('images/background.jpg') repeat-x;   
	color: #000000;
	font: normal 80% Verdana, Verdana, Geneva, sans-serif;
	margin: 0;
	padding: 0;	
	text-align: center;}


hr {
	background-color: #3a9671;     /* orig #3a9671 = blue green */
	color: #3a9671;
	border: none;
	height: 1px;
	width: 100%;}
	


img {
	border: none;}

/*Jane changed ul to the below */

ul {
	padding: 0 0 0 0;
	margin: 0 0 20px 20px;
	list-style-image: url("images/arrow.gif");
}





/* Original is directly beneath
ul {
	padding: 0 0 0 0;
	margin: 0 0 20px 20px;
	list-style: square;}  
	*/
	
 /* Jane added  */ 
li.bottompad {
   padding: 0 0 20px 0;
   }




/* Jane added  */
ul.sublist {
   padding: 0;
   margin: 0 0 20px 20px;
   list-style:disc;
}



/*  The items below the properties for the links that appear in the
main text area as well as in the sidebar of the pages  */


li {
	list-style-image: url('images/arrow.gif');
	}


/*  The items below the properties for the links that appear in the
main text area as well as in the sidebar of the pages  */

a {
	color: #30A476; /* cheerful green underlined link   */
	text-decoration: underline;
	outline: none;
	font-weight: bold;}

a:hover {
	color: #606060;
	text-decoration: underline;
	outline: none;
	font-weight: bold;}

a:active {
   outline: none;
   overflow: hidden;}

/*  The items below set the properties for the fonts, sizes, and
colors used for headings 1 through 6. Typically h1 - h3 are used
in the main content area and h4 - h6 are used in the sidebar  */



p {
   color: #3f322a;
}


p.sidebar {
color: #3f322a;
font-size: 1em;
padding: 0 0 10px 0;
margin: 0;
}


p.sidebarcenter {
color: #3f322a;
font-size: 1em;
padding: 0 0 10px 0;
margin: 0;
text-align: center;
}


/* Question and Answer added by Jane  */
p.quest {
   color:#30A476;  /* cheerful green */
   font-weight: bold;
   margin-bottom: 0;
}


p.ans {
   color:#3F322A; /*  off-black  */
   font-weight: normal;
   padding: 0 0 10px 0;
   margin-top: 0; 
   margin-left: 3em;
}

/* Jane added  */
p.standoutblue {
   color: navy;  /* cheerful green is #30a476  */
   font-weight: bold;
   font-size: 1.3em;
   text-align: center;
   margin: 0 0 10px 0;
}

p.standoutorange {
	color: #FF6600;
	font-weight: bold;
	font-size: 1.3em;
	text-align: center;
	margin: 0 0 10px 0;
}


p.buynow {
   margin: 3px 0 3px 0;
   text-align: center;
   }

/* Jane added  */
p.noteindent{
margin:0 0 0 2em;
font-size:0.9em;
}

/* Jane added  */
p.noteitalic {
   margin: 0;
   padding: 0;
   font-size: 0.9em;
   font-style: italic;
   }
   
/* Added by Jane to use for testimonials and person's name appearing as one box */
.box1of2 {
   background-color: #eeffee;
   color: #24604a;
   font-style:italic;
   font-weight: bold;
   padding: 15px 15px 0 15px;
   margin: 0 10% 0 10%;
/*   border: 3px ridge #30a476; */
   }

.box2of2 {
   background-color: #eeffee;
   color: #24604a;
   font-style:normal;
   font-weight: bold;
   font-size: 11px;
   text-align: right;
   padding: 0 15px 15px 15px;
   margin: 0 10% 5% 10%;
   }




h1 {
	color: #971903;  /* ff6600=paypal orange   990000 & 993300=brownish cc0000 nice , #cc3300=orange/red  #cc2900' = deep reddish orange barn red = #b22222; orig was #808080; - a grey  */
	font: bold 2em Georgia, Georgia, serif;
	text-align: left;
	letter-spacing: -1px; /*  orig was 1px   */;
	padding: 4px 0 0 4px;
	margin-bottom: 20px;
}

h2{
	/*   background: #ffffff url('images/endcap2.jpg') no-repeat;   */
   color: #339966;  /* #30A476 is a cheerful green */
	font: bold 20px Tahoma, Geneva, sans-serif;
	letter-spacing: 1px; /* orig was 2px  */;
	text-align: left;
	margin: 10px 0 10px 0;
	padding: 7px 0 7px 0;
}

h3{
   /*   background: #ffffff url('images/endcap2.jpg') no-repeat; Padding had left at 40px to leave room for graphic  */
	color: #30A476;
	font: normal 20px Tahoma, Geneva, sans-serif;
	letter-spacing: 1px;  /*  orig was 2px  */
	text-align: left;
	margin: 10px 0 10px 0;  /* orig was 10px 0 30px 0; - too much space at bottom  */
	padding: 7px 0 7px 0;}  /* orig was 7px 0 7px 40px;  */

h4 {
   /*   background: #ffffff url('images/endcap3.jpg') no-repeat;   */
	color: #30a476;    /* cheerful green, orig color was #808080;   */
	font: bold 18px Arial, Helvetica, sans-serif;
	padding: 5px 0 5px 0;  /* orig was 7px 0 7px 40px - for the icon at left (the 40px) and then title  */
	margin: 5px 0 5px 0;  /* orig was 6px 0 0 0;  */
	text-align: left;}

h5 {
	color: #30a476;  /* cheerful green */
	font: bold 14px Arial, Helvetica, sans-serif;
	padding: 5px 0 5px 0; /* I added this  */
	margin: 0 0 5px 0;   /* orig was 6px 0 6px 0;  */

	text-align: left;}

h6 {
color: #30a476;  /* cheerful green */
font: bold 12px Arial, Helvetica, sans-serif;
margin: 5px 0 5px 0;
padding-bottom: 0;
}


/* Standout color for ad product description in right column*/
h6.ad, p.ad {
color: #ff6600;  /* cc0000 nice, also cc3300 orangish red  990000 = brownish */
font: bold 12px Arial, Helvetica, sans-serif;
margin: 6px 0 6px 0;
padding-bottom: 0;
text-align: center;
}


.hilite {
   background-color: #FFFF66; /* orig was #FFFF66;  */
   }



/* You can create your own dropcap effect to a heading or to a
paragraph by spanning the first letter with the dropcap class */	


.center {
	text-align: center;}	

.center-no-margin {
   text-align: center;
   margin: 0 0 0 0;
}

.clear {
	clear: both;}


/*  To keep the content centered on the page, all of the areas
are placed within a wrapper. The item below defines this wrapper.  */

#wrapper {
   background: #ffffff url('images/wrapper.jpg');  
	width: 900px;
	text-align: left;
	margin: 0 auto;}

/* TOP HEADER, GLOBAL, AND MAIN NAVIGATION */
/*  The items below set the properties of the top header as
well as the global navigtion links and the main navigation
link group that sit on top of the header image. */

#header {
	position: relative;
	width: 900px;
	height: 250px;}

#global {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	color: #606060;
	height: 30px;
	line-height: 30px;
	letter-spacing: 1px;
	width: 880px;
	padding-right: 20px;
	text-align: right;
	font-size: 75%;}

#global ul {
   margin: 0;
   padding: 0;
   list-style-type: none;}

#global li {
   display: inline;
   margin: 0;}

#global li a {
   color: #808080;
   font-weight: normal;
   text-decoration: none;}

#global li a:hover {
   color: #24604a;
   font-weight: normal;
   text-decoration: underline;}

/* The items below set the properties for the main
navigation block.*/

#navbar {
   position: absolute;
   left: 0px;
   top: 200px;
   z-index: 2;
   color: #ffffff;
   letter-spacing: 1px;
	line-height: 35px;
	width: 100%;
	text-align: center;}

#navbar ul {
   margin: 0;
   padding: 0;
   list-style-type: none;}

#navbar li {
   display: inline;
   margin: 0;
   padding: 0;}

#navbar li a {
   color: #ffffff;
   font-weight: bold;
   text-decoration: none;
   padding: 0 15px;}

#navbar li a:hover {
   color: #ffffff;
   font-weight: bold;
   text-decoration: underline;}
   

/* TWO COLUMN LAYOUT */
/*  The items below sets the properties for the sidebar and
content blocks as well as a wider content area for the single
column page layout  */

#sidebar {
	font-size: 85%;
	float: left;
	width: 200px;
	padding: 0 10px 0 20px;}

#content {
	float: right;
	width: 640px;
	line-height: 1.5em;
	padding: 0 20px 0 10px;}

/* ONE COLUMN LAYOUT */

#contentwide {
	float: right;
	width: 860px;
	line-height: 1.5em;
	padding: 0 20px 0 20px;}

/* THREE COLUMN LAYOUT */

#sidebar-left {
	width: 200px;
	float: left;
	text-align: left;
	font-size: 85%;
	padding: 0 10px 0 20px;}

#contentmiddle {
	width: 440px;
	float: left;
	text-align: left;
	line-height: 1.5em;
	padding: 0 10px;}

#sidebar-right {
	width: 180px;
	float: right;
	text-align: left;
	font-size: 85%;
	padding: 0 20px 0 10px;}
	
/* I added   */	
#address {
text-align: left;
margin: 0;
}	
	
/*  I added  */	
#phone {
text-align: left;
margin: 0;
}	

/* FOOTER AREA */
/*  The items below set the footer properties as well as the text
and links that appear in this area  */

#footer {
	clear: both;
	background: #ffffff url('images/footer.jpg') no-repeat;
	color: #808080;
	text-align: center;
	letter-spacing: 1px;
	line-height: 2em;
	font-size: 80%;
	padding-top: 40px;
	height: 60px;}

#footer ul {
   margin: 0;
   padding: 0;
   list-style-type: none;}

#footer li {
   display: inline;
   margin: 0;}

#footer li a {
   color: #808080;
   font-weight: normal;
   text-decoration: none;}

#footer li a:hover {
   color: #24604a;
   font-weight: normal;
   text-decoration: underline;}

#footer p {
   margin: 0;
   padding: 0;}

/* If you want to highlight a section of text, you can place it within
a div with the box class applied. This will put the contents within
a block with a light gray background and a thin dashed line around it. */

.box {
	background-color: #eeffee;  /*  eeffee;= lt lt green;   orig = lt grey #f8f8f8;  */
   border: 1px solid #c2c2c2;   /* border-style was grooved, but wouldn't pass validation, so changed to solid  */
	padding: 10px;
	}

.box ul {
   margin: 0 0 0 20px;
   padding: 0;}

/* CONTACT PAGE FORM */
/*  This template contains a form that is set within a fieldset. The
items below set the properties for the form, input fields, the submit
button, etc.  */

fieldset {
	border: 3px double #c2c2c2;
	padding: 5px;
	margin: 10px 0;}

legend {
	background-color: #ffffff;
	color: #3a9671;
	font: bold 16px Arial, Helvetica, sans-serif;
	letter-spacing: 2px;
	padding: 2px 4px;
	margin: 0;}
	
#contactform {
	padding: 5px;
	text-align: left;
	margin: 20px 0 5px 0;}

#contactform label {
	width: 150px; 
	float: left; 
	text-align: right; 
	margin: 3px 5px 5px 5px; 
	clear: both;}

#contactform input {
	margin: 3px 5px 5px 5px; 
	background-color: #ffffff; 
	color: #000000; 
	border: 1px solid #c2c2c2;}

#contactform textarea {
	font: normal 12px Verdana, sans-serif;
	margin: 3px 5px 5px 5px; 
	background-color: #ffffff; 
	color: #000000; 
	border: 1px solid #c2c2c2;}

#contactform .button {
	text-align: center; 
	margin: 5px 0 0 170px; 
	border: none;
	clear: both;}

/* CATALOG DISPLAY TABLE */
/*  The catalog is set into a simple three-column table. The
items below set the properties for the catalog display.  */

table {
	padding: 0px;
	border-collapse: collapse;
	font-size: 100%;
	width: 100%;}

.catalog {
	padding: 8px;
	line-height: 1em;
	text-align: center;
	vertical-align: top;
	width: 33%;}

/* CALENDAR DISPLAY */
/*  The calendar sits within a div so that it can be
centered in the sidebar area.  */

.calendar {
	text-align: center;
	margin: 0 0 20px 0;}

/* IMAGE FLOATS */
/*  Your smaller images can be floated to the left or the
right so your text can flow around them. You can also have
the images appear with or without a small border. The items
below sets the properties for the classes you may apply to
your images.  */

.imagecenter-border {
	border: 3px #c2c2c2 double;
	display: block;
	margin: 0 auto;}
	
.imagecenter-noborder {
   display: block;
	margin: 0 auto;}
	
.imageleft-noborder {
	margin: 0 10px 0 0; 
	float: left;}

.imageright-noborder {
	margin: 0 0 0 10px; 
	float: right;}
	
.imageleft-border {
	margin: 0 10px 0 0; 
	float: left;
	border: 3px #c2c2c2 double;}

.imageright-border {
	margin: 0 0 0 10px; 
	float: right;
	border: 3px #c2c2c2 double;}
	
	
/* added for picture in rt col  */
	
.rightcolpic{
width:80%;
border:solid 1px #ff0000;
}