@charset "utf-8";

ul { /* dummy so that CSS rules will process correctly in IE 
 The reason for this is unknown */
}
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #69C;
	margin: 0;
	padding: 0;
	color: #6CF;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 15px;
	padding-left: 15px;  /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */ 
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
 	color: #000;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited, a:focus {
	color: #000 ;
	text-decoration: underline;
}
a:hover, a:active { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #FFF;
	background: #990;
	text-decoration: none;
}

/* ~~this fixed width container surrounds the other divs~~ */
.container {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	width: 1200px;
	background: #69C;
	height: 900px;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
	background-image: url(background2.jpg);
	font-size: 12pt;
	color: #000;
}

/* ~~ The header extends the full width of the layout and contains an empty image placeholder so the background image shows through. ~~ */
.header {
	height: 180px;
}
.content {
	width: 760px;
	margin: 0 auto; /*  the auto value on the sides, coupled with the width, centers the layout */
	color: #000;
	/* padding-left: 100px;*/ /*	padding-right: 100px; */
}
.content2 {
	width: 1200px; 
 	height: 490px;
	margin-top: 10px;
}
.content3 {
	width: 330px; 
 	height: 490px; 
	background-color: #777;
	float: left;
}
.content3nc {
	width: 400px; 
 	height: 490px; 
	margin-top: 0px;
	float: left;
	line-height: normal;
}
.content3nc2 {
	width: 400px; 
 	height: 40px; 
	margin-top: 0px;
	font-size: 18px;
	line-height: normal;
}   
.content3nc2b {
	width: 200px; 
 	height: 40px;
	margin-top: 0px;
	font-size: 18px;
	line-height: normal;
	
}.content3nc3 {
	width: 350px; 
 	height: 40px; 
	margin-top: 0px;
	line-height: normal;
}
.content4 {
	width: 660px; 
 	height: 490px; 
	font-size: 12pt;
	float: left;
	line-height: normal;
}
.content4A {
	width: 200px; 
 	height: 490px; 
	float: left;
	line-height: normal;
}
.content4B {
	width: 350px; 
 	height: 490px; 
	margin-top: 0px;
	float: left;
	line-height: normal;
}
.content5 {
	width: 550px; 
 	height: 490px; 
	margin-top: 10px;
	font-size: 12pt;
	float: left;
}
.content6 {
	width: 1000px; 
 	height: 520px; 
	font-size: 12pt;
	margin: 0 auto;
}
.content7 {
	width: 1000px; 
 	height: 40px; 
	font-size: 12pt;
	margin: 0 auto;
}
.spacer {
	width: 1200px;
	height: 140px;
	font-size: 12pt;
	/* float: right; */
}
.spacer2 {
	width: 1200px;
	height: 80px;
	font-size: 12pt;
	/* float: right; */
}
.spacer3 {
	width: 1200px;
	height: 30px;
	/* float: right; */
}
.spacer4 {
	width: 1200px;
	height: 60px;
	/* float: right; */
}
.spacerh {
	width: 100px;
	height: 40px;
	float:left;
}
.spacerh2 {
	width: 40px;
	height: 40px;
	float:left;
}
.spacerh3 {
	width: 160px;
	height: 500px;
	float:left;
}
.spacerh4 {
	width: 40px;
	height: 70px;
	float:left;
}
.spacerh5 {
	width: 40px;
	height: 500px;
	float:left;
}/* CSS to build a horizontal menu bar */
/* the buttons are styled for width, height, and spacing */
/* HORIZONTAL NAVAGATION BUTTONS CREATED USING <DIV> 7/7/10 JTW */
/* SO THAT BUTTON BACKGROUND AND TEXT COLORS COULD BE DIFFERENT */
/* ON EACH PAGE */
/* create buttons with <div> styles 140 pixels wide*/
div.nav {
/*	border-bottom: 1px solid #3FF;
	border-top: 1px solid #3FF;
	border-left: 1px solid #3FF; */
	width: 140px;
/*	height: 34px; */
	float: left;	/* transparent background color for buttons not for current page unless hovered (see below, a:hover)  */
}
div.navl { /* for different foreground color for LOGO button
			to match background in picture */
	width: 140px;
/*	height: 34px; */
	float: left;	/* transparent background color for buttons not for current page unless hovered (see below, a:hover)  */
}
div.navh { /* for different background to show current page name */
	width: 140px;
/*	height: 34px; */
	float: left;
	background: #CC0;  /* light up background for current page button tag  */	
}
/* compound styles see page 148-149 in 'Dreamweaver CS5 for Dummies" */

div.nav a:link { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 5px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 130px;   /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
/*	color: #336288; color for invisibility */
	color: #000;
	text-decoration: none;
/*	background: #C6D580; transparent background instead */
}
div.nav a:visited, div.nav a:focus { /* change button look after being visited */
	padding: 5px 5px 5px 5px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 130px;   /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
/*	color: #336288; color for invisibility */
	color: #000;
	text-decoration: none;
/*	background: #C6D580; transparent background instead */
}
div.navl a:link {
	padding: 5px 5px 5px 5px;
	display: block;
  	width: 130px;  
/*	color: #5e8099; color for invisibility */
	color: #000;
	text-decoration: none;
/* transparent background */
}
div.navl a:visited, div.navl a:focus {
	padding: 5px 5px 5px 5px;
	display: block;
  	width: 130px;  
/*	color: #5e8099; color for invisibility */
	color: #000;
	text-decoration: none;
/* transparent background */
}
div.navh a:link { 
/* background highlighted to show current page name */
	padding: 5px 5px 5px 5px;
	display: block;
  	width: 130px;   
	color: #000;
	text-decoration: none;
	background: #CC0;
}
div.navh a:visited, div.navh a:focus { 
/* background highlighted to show current page name */
	padding: 5px 5px 5px 5px;
	display: block;
  	width: 130px;   
	color: #000;  /* text highlight not needed since background is highlighted  */
	text-decoration: none;
	background: #CC0;
}
div.nav a:hover, div.nav a:active { /* this changes the text color for both mouse and keyboard navigators */
	color: #FFF;
	background: #990;  /* this changes the background color when hovering over a tag  */
}
div.navl a:hover, div.navl a:active {
	color: #FFF;
	background: #990;
}
div.navh a:hover, div.navh a:active { /* change both the background and text colors for the tag of the current page */
	background: #990; 
	color: #FFF;
}

/* create second set of wide buttons with <div> styles for book pages 170 pixels wide*/

div.nav2 {
/*	border-bottom: 1px solid #3FF;
	border-top: 1px solid #3FF;
	border-left: 1px solid #3FF; */
	width: 170px;
/*	height: 34px; */
	float: left;	
}
div.navl2 { /* for different foreground color for LOGO button
			to match background in picture */
	width: 170px;
/*	height: 34px; */
	float: left;	
}
div.navh2 { /* for different background to show current page name */
	width: 170px;
/*	height: 34px; */
	float: left;
	background: #CC0;	
}
/* compound styles see page 148-149 in 'Dreamweaver CS5 for Dummies" */

div.nav2 a:link { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 5px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px;   /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
/*	color: #336288; color for invisibility */
	color: #000;
	text-decoration: none;
/*	background: #C6D580; transparent background instead */
}
div.nav2 a:visited, div.nav2 a:focus { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 5px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px;   /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
/*	color: #336288; color for invisibility */
	color: #000;
	text-decoration: none;
/*	background: #C6D580; transparent background instead */
}
div.navl2 a:link {
	padding: 5px 5px 5px 5px;
	display: block;
  	width: 160px;  
/*	color: #5e8099; color for invisibility */
	color: #000;
	text-decoration: none;
/* transparent background */
}
, div.navl2 a:visited, div.navl2 a:focus {
	padding: 5px 5px 5px 5px;
	display: block;
  	width: 160px;  
/*	color: #5e8099; color for invisibility */
	color: #000;
	text-decoration: none;
/* transparent background */
}
div.navh2 a:link { 
/* background highlighted to show current page name */
	padding: 5px 5px 5px 5px;
	display: block;
  	width: 160px;   
	color: #000;
	text-decoration: none;
	background: #CC0;
}
div.navh2 a:visited, div.navh2 a:focus { 
/* background highlighted to show current page name */
	padding: 5px 5px 5px 5px;
	display: block;
  	width: 160px;   
	color: #000;
	text-decoration: none;
	background: #CC0;
}
div.nav2 a:hover, div.nav2 a:active { /* this changes the text color for both mouse and keyboard navigators */
	color: #FFF;
	background: #990;  /* this changes the background color when hovering over a tag  */
}
div.navl2 a:hover, div.navl2 a:active {
	color: #FFF;
	background: #990;  /* this changes the background color when hovering over a tag  */
}
div.navh2 a:hover, div.navh2 a:active { /* change both the background and text colors for the tag of the current page */
	background: #990; 
	color: #FFF;
}

/* create third set of wide buttons with <div> styles for book pages 110 pixels wide*/

div.nav3 {
/*	border-bottom: 1px solid #3FF;
	border-top: 1px solid #3FF;
	border-left: 1px solid #3FF; */
	width: 110px;
/*	height: 34px; */
	float: left;	
}
div.navl3 { /* for different foreground color for LOGO button
			to match background in picture */
	width: 110px;
/*	height: 34px; */
	float: left;	
}
div.navh3 { /* for different background to show current page name */
	width: 110px;
/*	height: 34px; */
	float: left;
	background: #CC0;	
}
/* compound styles see page 148-149 in 'Dreamweaver CS5 for Dummies" */

div.nav3 a:link { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 5px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 100px;   /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
/*	color: #336288; color for invisibility */
	color: #000;
	text-decoration: none;
/*	background: #C6D580; transparent background instead */
}
div.nav3 a:visited, div.nav3 a:focus { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 5px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 100px;   /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
/*	color: #336288; color for invisibility */
	color: #000;
	text-decoration: none;
/*	background: #C6D580; transparent background instead */
}
div.navl3 a:link {
	padding: 5px 5px 5px 5px;
	display: block;
  	width: 100px;  
/*	color: #5e8099; color for invisibility */
	color: #000;
	text-decoration: none;
/* transparent background */
}
div.navl3 a:visited, div.navl3 a:focus {
	padding: 5px 5px 5px 5px;
	display: block;
  	width: 100px;  
/*	color: #5e8099; color for invisibility */
	color: #000;
	text-decoration: none;
/* transparent background */
}
div.navh3 a:link { 
/* background highlighted to show current page name */
	padding: 5px 5px 5px 5px;
	display: block;
  	width: 100px;   
	color: #000;
	text-decoration: none;
	background: #CC0;
}
div.navh3 a:visited, div.navh3 a:focus { 
/* background highlighted to show current page name */
	padding: 5px 5px 5px 5px;
	display: block;
  	width: 100px;   
	color: #000;
	text-decoration: none;
	background: #CC0;
}
div.nav3 a:hover, div.nav3 a:active { /* this changes the text color for both mouse and keyboard navigators */
	color: #FFF;
	background: #990;  /* this changes the background color when hovering over a tag  */
}
div.navl3 a:hover, div.navl3 a:active {
	color: #FFF;
	background: #990;  /* this changes the background color when hovering over a tag  */
}
div.navh3 a:hover, div.navh3 a:active { /* change both the background and text colors for the tag of the current page */
	background: #990; 
	color: #FFF;
}


/* ~~ miscellaneous float/clear classes ~~ */
.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. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
/* ~~ The footer ~~ */ /* NOT USED - USED CLEARFLOAT BELOW INSTEAD */
.footer {
	padding: 10px 0;
	background: #CCC49F;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}

.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
 
.sitemap {
	line-height: normal;
}