@charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	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;  /* Default text color (black) */
}
#container { 
	width: 940px;  /* Width of the overall site container */
	background: #FFFFFF;   /* Background color or image */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	padding:0;
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
#header {
	height:192px;
	background: url(images/img02.jpg) no-repeat;   /* This is where your header image is set */
	padding: 0 10px 0 0px;  /* 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. */
} 

#navBar {
	margin:12;
	padding:0;
	width:940px;
	height:26px;
	background:#000;  /* This is the background color of the navBar */
	color:#FFFFFF;   /* This is the non-link text color of the navBar (probably won't ever be needed) */
}

#navBar ul {
	margin: 0 6px 0 15px;
	padding: 0 11;
	list-style-type: none;
}

#navBar li {
	margin: 0px 18px 0 30px;
	padding: 0;
	float: left;
	height:26px;     /* This is the height of the nav Bar */
	list-style-type:none;
	font-family:Arial, Helvetica, sans-serif;  /* Font face of the nav Bar */
	font-size: 11px;  /* Fixed font size for the nav Bar */
	font-weight:bold;   /* Font weight of the nav Bar */
}

#navBar  a {
	padding-top:6px;
	padding-bottom:6px;
      display: block;
      width: 100%;
      text-decoration: none;  /* This makes it so the links don't have underlines */
	  color:#FFFFFF;		 /* This is the color of link text in the nav Bar; change this if you want the nav links a different color */
}
	
#navBar  a:hover {
      color:#ffff00;   /* This is the color of the nav links when someone mouses over them */
}

#mainContent { margin:0; padding:0; }   /* This div contains the table with the three columns; needed to make sure there's no gap between nav Bar and table */

#leftCol {
	margin:0;
	padding: 24px 10px 15px 20px;  /* Use this to control the margins of the left column; The four numbers are: top margin, right margin, bottom margin, left margin */
	width: 130px; 				  /* This is the width of the left column. Keep in mind the full width includes the left and right margins above (eg, 130+10+20=160px) */
	background: #FFFFFF;		/* This is the background color of the left column */
	font-size:.65em;			/* This is the default font size for the left column */
	font-weight:bold;			/* Default font weight for the left column */
}
td.rightColMan11a {
	color:#497823;
	text-decoration:none;
}		/* Left column links color and removing the underline */
td.rightColMan14 {
	color: #93F;
}  /* Left column links color when moused over */

#centerCol {
	margin:0;
	padding: 10px 20px 15px 20px;   /* Use this to control the margins of the center column; The four numbers are: top margin, right margin, bottom margin, left margin */
	width:500px; 				/* The width of the center column. Keep in mind the full width includes the left and right margins above (eg, 500+20+20=540px) */
	border-left: 1px solid #999999;
	color: #93F;
}

#rightCol {
	margin:0;
	padding: 12px 10px 15px 20px;  /* Use this to control the margins of the right column; The four numbers are: top margin, right margin, bottom margin, left margin */
	width: 200px;		/* The width of the right column. Keep in mind the full width includes the left and right margins above (eg, 210+10+20=240px) */
	min-height:500px;   /* This should create a minimum height so the image in the right column will fully display even if 
						there isn't enough text in the center column to make the page height. However, it doesn't display right on all browsers.  */
	font-size:0.8em; 	/* This makes the text in the right column slighter smaller than the default page text */
	font-weight: bold;
	color: #000;
}

td.rightColMan01 {
	height:300px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/banners/asgard.jpg) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */
}

td.rightColMan02a {
	height:300px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/banners/Buildings.jpg) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */
}td.rightColMan03a {
	height:350px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/banners/peter.jpg) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */
																				
}td.rightColManTree {
	height:350px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/banners/tree.jpg) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */
}td.rightColMan04a {
	height:500px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/banners/dice.jpg) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */
}td.rightColMan05a {
	height:400px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/banners/blue.jpg) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */
																				for this image to show up. */
}td.rightColMan05b {
	height:900px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/banners/longshark.gif) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */																				
}td.rightColMan06 {
	height:350px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/banners/dsc.jpg) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */
}td.rightColMan07 {
	height:500px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/banners/cube.jpg) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */
}td.rightColMan08 {
	height:400px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/banners/Buildings.jpg) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */
}td.rightColMan09 {
	height:100px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/banners/lock.jpg) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */
}td.rightColMan10 {
	height:500px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/banners/peter.jpg) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */
					
																								for this image to show up. */
}td.rightColMan10a {
	height:500px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/banners/helen.jpg) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */
																																							for this image to show up. */
}td.rightColMan11 {
	height:500px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/applesideimage.jpg) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */
																				
																				
																																																										for this image to show up. */
}td.rightColMan11a {
	height:100px; 			/* This helps other browsers to display the minimum height properly */
	background: #FFFFFF url(images/banners/ManImage.jpg) no-repeat right top;  /* This is the background color and image used in the right column.
																				You have to set the TD tag in the table ON THE PAGE to this class 
																				for this image to show up. */																				

																							


}

td.rightColWoman11 {
	height:540px;
	background: #FFF url(images/imagefulbright01.jpg) no-repeat right top;
}  /* same idea here - purple background and woman pic */

td.rightColMan02 {
	height:500px;
	background: #FFFFFF url(images/r-sidebar-woman02.gif) no-repeat right bottom;
}  /* This pic (r-sidebar-man02.jpg) doesn't exist, but use this as a template
																													for creating alternative pics for right 
																											
																													
																													columns on various pages */	

td.rightColWoman05 {
	height:520px;
	background: #FFFFFF url(images/otherwoman.gif) no-repeat right bottom;
}
td.rightColMan03 {
	height:500px;
	background: #FFFFFF url(images/newwoman.gif) no-repeat right top;
}  /* This pic (r-sidebar-man02.jpg) doesn't exist, but use this as a template
																													for creating alternative pics for right columns on various pages */
td.rightColMan04 {
	height:500px;
	background: #FFFFFF url(images/r-sidebar-image02.gif) no-repeat right top;
}  /* This pic (r-sidebar-man02.jpg) doesn't exist, but use this as a template
right columns on various pages */

td.rightColFlower04 {
	height:500px;
	background: #FFFFFF url(images/DogwoodFlowerPS.gif) no-repeat right top;
}  /* This pic (r-sidebar-man02.jpg) doesn't exist, but use this as a template
																													for creating alternative pics for right columns on various pages */

td.rightColFlower05 {
	height:1300px;
	background: #FFFFFF url(images/DogwoodFlowerPSlong.gif) no-repeat right top;
}  /* This pic (r-sidebar-man02.jpg) doesn't exist, but use this as a template
																													for creating alternative pics for right columns on various pages */
																													
	td.rightColFlower06 {
	height:800px;
	background: #FFFFFF url(images/DogwoodFlowerPSsemilong.gif) no-repeat right top;
}  /* This pic (r-sidebar-man02.jpg) doesn't exist, but use this as a template
																													for creating alternative pics for right columns on various pages */																												
																													

#footer { 
	margin:0;
	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#000000;
	color:#999999;  /* Footer text color */
	font-size:.8em;  /* Footer text size - smaller than default page text */
	font-weight:bold;  /* Footer text weight */
} 
#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: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	color:#999999;  /* Footer text color */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
}
.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 */
	margin:0;
	padding:0;
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/************** OTHER TEXT FORMATTING *********************/

h1 { margin: 0;	padding: 15px 0; font-size:1.5em; }  /* There should be only one of these per page -- it's for use as the Page Title at the top of the page */

h2 { margin: 5px 0px; font-size:1.3em; } /* This is for use in sub-headings through out the page as needed */

.lighterText { color:#999999; }  /* Currently gray. Used currently in the left column, you can use this anywhere to make lighter-colored text */

.emphasizedText {
	color: #497823;
}  /* Currently red. Used currently in the left column, you can use this anywhere to draw attention to text. */