/*comments
To easily change the color tones on the website: first- do not use black-ffffff, white-000000, red-ff0000, or blue-0000ff 
because these colors are already text colors and the text will disappear if you have the same color in the background.
A good rule to follow is use your darkest color as the body background and the hover background color for both menus.
Your lightest color for the content table background and the background for both menus.
Another color a shade darker than your lightest color for the background to both menu tables.
A find and replace on each of the three colors will work fast and effecient to build another CSS with new colors.
Body Background- 00a400, Menu Table background- a1ff7b, lightest content background- eeffcf
*/
body 	{background-color: #00a400;
	font-family: "arial", georgia, verdana, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
      color: white;
	padding-left: 8px;
	padding-right: 8px;
		}
img {margin: 3px; border:#00ff00; border-width:medium;}
	
h1 {margin: 0; text-align: center; font-size:x-large; color: #ffffff;}	
h2 {margin: 0; text-align: right; font-size:large; color: #ffffff;}
h3 {margin: 0; text-align: center; color: #ffffff;}

a {color: #0000ff; text-decoration: none;}
a:hover {color: #0000ff; text-decoration: underline;}
.style3 {color: #FF0000}
.style4 {color: #0000ff}
.style5 {font-size: 12px; font-weight: bold}
.style6 {font-size: 10px; font-weight: bold}

.menu ul {margin: 5px; margin-top: 4px; margin-bottom: 10px; padding: 0; list-style: none;}
.menu a {width: 93%; margin: 1px; padding: 2px; display: block; border: solid 1px #000000; background-color: #eeffcf; color: #000000;}
.menu a:hover {background-color: #00a400; color: #ffffff; text-decoration: none;}

.rightmenu {margin: 10px;}
.rightmenu ul {margin: 5px; margin-top: 3px; margin-bottom: 10px; padding: 0; list-style: none;}
.rightmenu a {width: 93%; margin: 1px; padding: 2px; display: block; border: solid 1px #000000; background-color: #eeffcf; color: #000000;}
.rightmenu a:hover {background-color: #00a400; color: #ffffff; text-decoration: none;}

#header  {float: left; width: 1000px; height: 15%;}
#left {float: left; width: 18%; margin-bottom: 25px; padding: 5px; background-color: #a1ff7b; border: solid 3px #000000;}
#left h3 {color: #000000; }
#right {float: right; width: 19%; background-color: #a1ff7b; border: solid 3px #000000;}
#right h3 {color: #000000;}
#content {margin-left: 21%; margin-right: 21%; padding: 3px; padding-left: 7px; padding-right:7px; padding-top: 2px; background-image: img="http://www.ceeamerica.com/1com/butterfly.jpg"; border: solid 3px #000000;}
#content p {text-align: left;}
#footer {clear: both; margin-top: 25px; text-align: center; color: #000000;}