/********************* MAIN DOCUMENT STYLES ********************/
body {
	margin: 0px;
	padding: 0px;
	background: #F1FBFC url(images/bg-top.jpg) repeat-x 0px 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
/* Clearfix for Floating Divs - When You Have One or More Floating Columns Inside a Div, Use this to Make It Appear Correctly in AOL and IE Browsers \*/
.clear {clear:both;}
/* Paragraph style in the content area */
#content #colLwide p {
	font-size: 11pt;
	color: #532F21;
	margin: 12px 0px 0px 0px;
	padding: 0px;
}
#content #colLwide h1 {
	font-size: 14pt;
	font-weight: bold;
	color: #006677;
	margin: 22px 0px 4px 0px;
	padding: 0px;
}
#content #colLwide h2 {
	font-size: 13pt;
	font-weight: bold;
	color: #06ABC7;
	margin: 20px 0px 4px 0px;
	padding: 0px;
}
#content #colLwide h3 {
	font-size: 13pt;
	font-weight: bold;
	color: #532F21;
	margin: 18px 0px 4px 0px;
	padding: 0px;
}
#content h4 {
	font-size: 12pt;
	color: #06ABC7;
	font-weight: bold;
	margin: 12px 0px 0px 0px;
	padding: 0px;
}
#content h5 {
	color: #D2DE32;
	font-weight: bold;
	margin: 12px 0px 0px 0px;
	padding: 0px;
}
#content h6 {
	margin: 0px;
	padding: 0px;
}

/* Style of link text in the content area */
#content a:link, #content a:visited {
	color: #06ABC7;
	text-decoration: underline;
}
#content a:hover, #content a:active {
	color: #532F21;
	text-decoration: none;
}
hr {
	border: dashed 1px #D9F2F7;
}
/* Makes selected text large, bold, and bright aqua */
.highlight {
	color: #06ABC7;
	font-size: 12pt;
	font-weight: bold;
}
.highlight2 {
	color: #006677;
	font-size: 13pt;
	font-weight: bold;
}
/* Reduces spacing between paragraphs for smaller text, such as caption text or name and title text */
#content #colLwide p.caption {
	font-size: 11pt;
	font-style: italic;
	margin: 0px 0px 11px 0px;
	padding: 0px;
}
/* Puts a quote bubble to the left of the text */
h4#qa {
	padding-left: 32px;
	height: 29px;
	background: url(images/ico_qa.gif) no-repeat 0px 0px;
}
/* Puts brown shading behind text, changes h2 color to white */
#content h2#title {
	background: #532F21;
	color: #FFFFFF;
	padding: 3px 3px 3px 3px;
}
#content h4#know {
	font-size: 12pt;
	color: #532F21;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
}
/* Style of link text in the content area on upcoming seminars page */
body#seminars #content a:link, body#seminars #content a:visited {
	color: #532F21;
	text-decoration: underline;
}
body#seminars #content a:hover, body#seminars #content a:active {
	color: #532F21;
	text-decoration: none;
}
/* Bullet styles in the content area */
#content ul {
	margin: 0px 0px 0px 15px;
	padding: 0px;
}
#content ul li {
	font-size: 11pt;
	color: #532F21;
	margin: 0px;
	padding: 0px;
	list-style-image: url(images/bullet.jpg);
}
body#home #content ul li {
	font-size: 11pt;
	color: #532F21;
	margin: 0px;
	padding: 3px 0px 3px 0px;
	list-style-image: url(images/bullet.jpg);
}
#content ol {
	margin: 0px 0px 0px 25px;
	padding: 0px;
}
#content ol li {
	font-size: 11pt;
	color: #532F21;
	margin: 0px;
	padding: 0px;
}
/* Generic image float styles */
.floatL {
	float: left;
	margin-right: 8px;
}
.floatR {
	float: right;
	margin-left: 5px;
}

/******************** TOP LOGO/NAVIGATION STYLES ********************/
/* Top area containing top portion of logo and main navigation bar */
#top {
	margin: 0px;
	padding: 21px 0px 0px 0px;
}
/* Makes the contents wrap to 800 pixels wide */
#header {
	width: 800px;
	margin: 0px auto 0px auto;
	padding: 0px;
}
/* Top portion of logo - replaces text on non-screen readers */
#logo {
	float: left;
}
#logo h1 {
	background: transparent url(images/logo-1.jpg) no-repeat 0px 0px;
	width: 125px;
	height: 83px;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}
#logo h1 span {
	display: none;
}
/* Navigation bar styles and image replacement - this is seen as text on screen readers */
#nav {
	width: 640px;
	height: 31px;
	margin-top: 52px;
	float: right;
}
#nav ul	{
	width: 640px;
	height: 31px;
	background: url(images/nav.jpg);
	margin: 0px;
	padding: 0px;
	position: relative;
}
#nav ul li	{
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: absolute;
	top: 0px;
}
#nav ul li, #nav a	{
	height: 31px;
	display: block;
}
#nav ul li a	{
	text-indent: -9999px; 
	text-decoration: none;
}
/* Link coordinates on navigation bar buttons */
#b1 {
	left: 0px;
	width: 107px;
}
#b2 {
	left: 107px;
	width: 107px;
}
#b3 {
	left: 214px;
	width: 106px;
}
#b4 {
	left: 320px;
	width: 106px;
}
#b5 {
	left: 426px;
	width: 107px;
}
#b6 {
	left: 533px;
	width: 107px;
}
#b1 a:hover {background: transparent url(images/nav.jpg) 0px -31px no-repeat;}
#b2 a:hover {background: transparent url(images/nav.jpg) -107px -31px no-repeat;}
#b3 a:hover {background: transparent url(images/nav.jpg) -214px -31px no-repeat;}
#b4 a:hover {background: transparent url(images/nav.jpg) -320px -31px no-repeat;}
#b5 a:hover {background: transparent url(images/nav.jpg) -426px -31px no-repeat;}
#b6 a:hover {background: transparent url(images/nav.jpg) -533px -31px no-repeat;}
/* Highlights the active navigation button based on body id name (home, about services, kudos, contact)*/
body#home #b1 {background: transparent url(images/nav.jpg) 0px -31px no-repeat;}
body#about #b2 {background: transparent url(images/nav.jpg) -107px -31px no-repeat;}
body#services #b3 {background: transparent url(images/nav.jpg) -214px -31px no-repeat;}
body#kudos #b4 {background: transparent url(images/nav.jpg) -320px -31px no-repeat;}
body#qa #b5 {background: transparent url(images/nav.jpg) -426px -31px no-repeat;}
body#contact #b6 {background: transparent url(images/nav.jpg) -533px -31px no-repeat;}


/******************** MIDDLE BANNER/QUICKLINKS STYLES ********************/
/* Middle area containing middle section with banner, tagline, and quicklinks side navigation */
#middle {
	background: url(images/bg-banner.jpg) repeat-x 0px 20px;
	height: 225px;
}
/* Middle area for landing page-style pages */
body#about #middle, body#services #middle, body#kudos #middle, body#qa #middle, body#contact #middle, body#landing #middle, body#seminars #middle {
	background: url(images/bg-banner.jpg) repeat-x 0px 20px;
	height: 80px;
}
/* Banner container to wrap to 800 pixels wide and 225 pixels high with student and teacher image in background */
#banner {
	width: 800px;
	height: 225px;
	margin: 0px auto 0px auto;
	padding: 0px;
	background: url(images/learning.jpg) no-repeat center bottom;
}
/* Banner area for landing page-style pages - less height, no image */
body#about #banner, body#services #banner, body#kudos #banner, body#qa #banner, body#contact #banner, body#landing #banner, body#seminars #banner {
	width: 800px;
	height: 80px;
	margin: 0px auto 0px auto;
	padding: 0px;
	background: none;
}
/* Bottom portion of logo */
#banner h2 {
	float: left;
	background: transparent url(images/logo-2.jpg) no-repeat 0px 0px;
	width: 125px;
	height: 50px;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}
#banner h2 span {
	display: none;
}
/* Tagline styles for "We can help you to put reading first" text */
#tag {
	float: left;
	margin: 10px 0px 0px 0px;
	width: 550px;
}
body#about #tag, body#services #tag, body#kudos #tag, body#qa #tag, body#contact #tag, body#landing #tag, body#seminars #tag {
	float: right;
	margin: 30px 0px 0px 0px;
	width: 640px;
}
#tag h1 {
	margin: 0px;
	padding: 0px;
	font-weight: bold;
	font-size: 20pt;
	color: #FFFFFF;
}
#tag h1 .highlight {
	margin: 0px;
	padding: 0px;
	font-weight: bold;
	font-size: 26pt;
	color: #FFFFFF;
}
#tag p {
	margin: 0px;
	padding: 0px;
	font-weight: bold;
	font-size: 12pt;
	color: #FFFFFF;
	line-height: 20pt;
}
/* Side navigation container */
#quicklinks {
	float: right;
	width: 215px;
	padding: 0px;
	background: url(images/banner-bullets.jpg) no-repeat;
	margin: 41px 0px 0px 0px;
}
/* Side navigation container for landing-style pages */
#content #colR #quicklinks {
	float: none;
	width: 215px;
	padding: 0px;
	background: url(images/side-bullets.jpg) no-repeat;
	margin: 0px 0px 20px 0px;
}
/* Top curve of side navigation box */
#quicklinks h3 {
	height: 13px;
	width: 215px;
	margin-top: 0px;
	padding: 0px;
	margin-bottom: 0px;
	background-image: url(images/banner-box-t.jpg);
	background-repeat: no-repeat;
	background-position: right top;
}
/* Top curve of side navigation box for landing-style pages */
#content #colR #quicklinks h3 {
	height: 13px;
	width: 215px;
	margin-top: 0px;
	padding: 0px;
	margin-bottom: 0px;
	background-image: url(images/side-box-t.jpg);
	background-repeat: no-repeat;
	background-position: right top;
}
/* Bottom curve of side navigation box */
#quicklinks h4 {
	height: 13px;
	width: 215px;
	margin-top: 0px;
	padding: 0px;
	margin-bottom: 0px;
	background-image: url(images/banner-box-b.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
}
/* Bottom curve of side navigation box for landing-style pages */
#content #colR #quicklinks h4 {
	height: 13px;
	width: 215px;
	margin-top: 0px;
	padding: 0px;
	margin-bottom: 0px;
	background-image: url(images/side-box-b.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
}
/* Text styling within side navigation box */
#quicklinks a, #content #colR #quicklinks a {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12pt;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	line-height: 12px;
	background-color: #016678;
	border-bottom: 2px dashed #FFFFFF;
	margin: 0px 0px 0px 20px;
	padding: 13px 5px 13px 5px;
}
#quicklinks a:hover, #content #colR #quicklinks a:hover {
	color: #D2DE32;
}
/* Selected link within side navigation box */
#quicklinks #current, #content #colR #quicklinks #current {
	color: #D2DE32;
}
#quicklinks a.p1, #content #colR #quicklinks a.p1 {
	padding-top: 3px;
	padding-bottom: 12px;
}
#quicklinks a.p2, #content #colR #quicklinks a.p2 {
	padding-bottom: 4px;
	border-bottom: none;
}
#quicklinks span, #content #colR #quicklinks span {
	display: none;
}


/******************** BOTTOM CONTENT AREA/FOOTER STYLES ********************/
/* Bottom area containing portion with web page content */
#bottom {
	background-color: #FFFFFF;
}
/* Wraps content within bottom portion to 800 pixels wide */
#content {
	width: 800px;
	margin: 0px auto 0px auto;
	padding: 20px 0px 20px 0px;
}
/* Wide left floating column within content area */
#colLwide {
	float: left;
	width: 520px;
}
/* Left floating column within content area */
#colL {
	float: left;
	width: 240px;
	margin: 0px;
	padding: 0px;
}
/* Middle floating column within content area */
#colM {
	float: left;
	width: 240px;
	margin: 0px 0px 0px 40px;
	padding: 0px;
}
/* Right floating column within content area */
#colR {
	float: right;
	width: 215px;
	margin: 0px;
	padding: 0px;
}
/* Title portion of rounded edge light blue gradient box */
.boxLtitle {
	width: 100%;
	height: 45px;
	background: url(images/box-top-mid.jpg);
	margin: 0px;
	padding: 0px;
}
/* Applies the left rounded edge to the box */
.boxLtitle .cornerL {
	background: url(images/box-top.jpg) no-repeat top left;
	width: 15px;
	float: left;
}
/* Applies the right rounded edge to the box */
.boxLtitle .cornerR {
	background: url(images/box-top.jpg) no-repeat top right;
	float: right;
	width: 15px;
}
/* Text style of title with the box */
#content #colLwide .boxLtitle h2 {
	width: 210px;
	float: left;
	margin: 0px;
	padding: 3px 0px 6px 0px;
	font-size: 12pt;
	font-weight: bold;
	color: #006677;
}
/* Copy area of box with remaining light blue gradient background */
#boxL {
	margin: 0px;
	padding: 0px;
	background: url(images/box-bg.jpg) repeat-x;
}
#content #colLwide #boxL p {
	margin: 0px 15px 0px 15px;
	font-family: "Times New Roman", Times, serif;
	font-size: 10pt;
	font-weight: bold;
	color: #532F21;
}
/* Used for lists, left floating column within content area */
#colL-list {
	float: left;
	width: 270px;
	margin: 0px;
	padding: 0px;
}
/* Used for lists, middle floating column within content area */
#colM-list {
	float: left;
	width: 220px;
	margin: 0px 0px 0px 30px;
	padding: 0px;
}
/* Used for lists, bullet styles */
#content #colL-list ul li, #content #colM-list ul li {
	font-size: 9pt;
	color: #532F21;
	margin: 0px;
	padding: 0px 0px 4px 0px;
	list-style-image: url(images/bullet.jpg);
}
/* Right side kudos/quote styles - places a large light blue quote mark to the left of the block of text */
#colR blockquote {
	background: url(images/quotes.gif) no-repeat 0px 0px;
	margin: 0px;
	padding: 0px 0px 0px 26px;
	color: #00ABC7;
	cursor: pointer;
}
#colR blockquote h2 {
	font-size: 11px;
	line-height: 20px;
}
#colR blockquote p {
	color: #00ABC7;
	font-size: 11px;
}
/* Region map and mouse over hover styles */
#map {
	width: 515px;
	height: 330px;
	background: url(images/map_up.gif);
	margin: 0px auto; 
	padding: 0;
	position: relative;
}
#map li {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	position: absolute;
}
#map a {display: block;}
#mapWest {
	left: 1px;
	top: 0px;
	width: 214px;
	height: 333px;
}
#mapMidwest {
	left: 188px;
	top: 29px;
	width: 219px;
	height: 172px;
}
#mapNortheast {
	left: 402px;
	top: 16px;
	width: 112px;
	height: 127px;
}
#mapSouth {
	left: 154px;
	top: 134px;
	width: 314px;
	height: 197px;
}
#mapWest a {height: 333px;}
#mapMidwest a {height: 172px;}
#mapNortheast a {height: 127px;}
#mapSouth a {height: 197px;}
#mapWest a:hover {background: url(images/map_up.gif) -1px -329px no-repeat;}
#mapMidwest a:hover {background: url(images/map_up.gif) -188px -1013px no-repeat;}
#mapNortheast a:hover {background: url(images/map_up.gif) -402px -344px no-repeat;}
#mapSouth a:hover {background: url(images/map_up.gif) -154px -791px no-repeat;}
/* Region popups on map mouse over */
div#tipDiv {
  position: absolute;
  visibility: hidden;
  left: 0;
  top: 0;
  z-index: 10000;
  background-color: #F1FBFC;
  border: 1px solid #00ABC7; 
  width: 300px;
  height: 300px;
  overflow: scroll;
  padding:5px;
  color: #532F21;
  font-size:10px;
}
div#tipDiv ul {
	padding: 0px 0px 0px 10px;
	margin: 0px 0px 0px 10px;
}
div#tipDiv p {
	margin: 6px 0px 0px 0px;
	padding: 0px;
}
div#tipDiv a:link {
	color: #016678;
	text-decoration: underline;
}
div#tipDiv a:visited {
	color: #00ABC7;
	text-decoration: none;
}
/* Form styles and formatting */
label, form .label {	
	padding: 2px 5px;
	color: #006677;
	font-size: 12px;
	font-weight: bold;
	margin: 0;
}
textarea {
	padding: 0px;
	vertical-align: top;
	margin: 2px 2px 1px 0;
	color: #532F21;
	font-size: 12px;
}
input {
	font-family: Georgia, "Times New Roman", Times, serif;
	margin: 0px 2px 0px 0px;
	color: #532F21;
	font-size: 12px;
	font-weight: normal;
}
select {
	font-family: Georgia, "Times New Roman", Times, serif;
	margin: 2px 2px 1px 0px;
	padding: 0px;
}
/* Text inputs / Select label */
label.preField {
	display: -moz-inline-box;
	display: inline-block;	
	margin: 6px 4px 0 0;
	padding: 0 2px;
	min-width: 6em;
	width: 6em;
}
form .actions {
	text-align: center;
	margin: 20px 0 10px 0;	
}
/* Submit button */
form .primaryAction {
	font-weight: bold;
}
/* Apply this class to p to insert greater top padding between lines */
#content #colLwide #colM #boxL form p.space {
	margin: 12px 0px 0px 0px;
}
/* IE6 form formatting bug fixes */
form {
	height:expression('1%'); /* IE Pick-a-boo bug fix */
	padding: 0px;
	margin: 0px;
}
form fieldset {
	position:expression('relative'); /* Fixes IE problem with fieldset+legend boundaries */
	margin-top:expression('1em');
	padding-top:expression('1.5em');
	overflow: expression('visible');
}
form fieldset legend {
	position: expression('absolute'); 
	top: expression('-.5em'); /* Fixes IE problem with fieldset+legend boundaries */
	left:expression('.5em');
}
/* Table styles */
td {
	font-size: 11pt;
	color: #532F21;
	margin: 6px 0px 0px 0px;
	padding: 0px 5px 0px 5px;
	background-color: #F7F5F2;
	border: solid 1px #FFFFFF;
}
/* Copyright footer styles */
#footer {
	padding: 10px 0px 0px 0px;
	margin: 0px;
	text-align: center;
	background: #F1FBFC;
}
#footer p {
	font-size: 10px;
	padding: 0px 0px 10px 0px;
	margin: 10px 0px 10px 0px;
	color: #006677;
}
#footer a:link, #footer a:visited {
	color: #006677;
	text-decoration: none;
}
#footer a:hover, #footer a:active {
	color: #006677;
	text-decoration: underline;
}