/** very pale blue: #C6D2F1; baby blue: #9AB1EC; logo blue:  #7490D7; text cobalt blue: #0440D8;  top of sugg box:  #4961B7;dark blue: #2C3CB8; 
navy:  #1E3279; yellow: #F5DA6D **/
<style>
<!--
  .just1          	             {font-family: Arial, sans-serif; font-size:  1pt;}
  .just2                       {font-family: Arial, sans-serif; font-size:  2pt;}
  .just3                       {font-family: Arial, sans-serif; font-size:  3pt;}
  .spacer                  {font-family: Verdana, Arial, sans-serif; font-size: 3px; color: #103ABB;}
  .footnote                  {font-family: Verdana, Arial, sans-serif; font-size: 5px; color: #103ABB;}
  .credit                     {font-family: Verdana, Arial, sans-serif; font-size: 8px; color: #0440D8;}
  .graph                       {font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #0440D8;}
  .text-sm-blue         {font-family: Verdana, Arial, sans-serif; font-size: 11px; color: #0440D8;}
  .text-reg-blue       {font-family: Verdana, Arial, sans-serif; font-size: 12px; color: #0440D8;}
  .text-reg-white     {font-family: Verdana, Arial, sans-serif; font-size: 12px; color: #FFFFFF;}
  .text-reg-ylw         {font-family: Verdana, Arial, sans-serif; font-size: 12px; color: #F5DA6D;}
  .text-big-blue       {font-family: Verdana, Arial, sans-serif; font-size: 14px; color: #0440D8;}
  .text-big-navy       {font-family: Verdana, Arial, sans-serif; font-size: 14px; color: #132C69;}
  .text-big-white    {font-family: Verdana, Arial, sans-serif; font-size: 14px; color: #FFFFFF;}
  .text-big-ylw       {font-family: Verdana, Arial, sans-serif; font-size: 14px; color: #F5DA6D;}
  .subhead            {font-family: Verdana, Arial, sans-serif; font-size: 14px; color: #0440DB; font-weight: bold;} html>body {font-size: 15px;}
  .subhead-blue    {font-family: Verdana, Arial, sans-serif; font-size: 14px; color: #0440DB; font-weight: bold;} html>body {font-size: 15px;}
  .subhead-navy   {font-family: Verdana, Arial, sans-serif; font-size: 14px; color: #132C69; font-weight: bold;} html>body {font-size: 15px;}
  .subhead-white  {font-family: Verdana, Arial, sans-serif; font-size: 14px; color: #FFFFFF; font-weight: bold;} html>body {font-size: 15px;}
  .colhead              {font-family: Verdana, Arial, sans-serif; font-size: 16px; color: #0440DB; font-weight: bold;}
  .colhead-blue        {font-family: Verdana, Arial, sans-serif; font-size: 16px; color: #0440DB; font-weight: bold;}
  .colhead-navy       {font-family: Verdana, Arial, sans-serif; font-size: 16px; color: #132C69; font-weight: bold;}
	
  .extra-space {font-size: 12px; line-height: 0px; }html>body .extra-space { line-height: 25px; }
  .text-size  { width: 45px; } html>body .text-size {width: 55px; }
  .quote {color:  #0440D8; font-family:  Courier, serif; font-size: 12px;  padding:  0 15px; }

body { 	background: #FFFFFF; 	margin: 0px;    width: 100%; }

/** ========================================= PAGE COMPONENTS =========================================== **/
#page {
	background: #FFFFFF;
	height: auto;
	margin: 0px;
	position: relative;
	width: 100%;  	}

#content {
         background: #FFFFFF;
	 color: #0440D8;
	 display: inline;
	 float: left;
         font-family: Verdana, Arial, sans-serif; 
	 font-size: 12px; 
	 height: auto;
	 margin-left: 370px;
	 margin-top: -1350px;  /** this goes up & down depending on height of side bar -- why???  decreasing moves page content UP **/
	 padding-bottom: 7px;
	 padding-left: 7px;
	 padding-right: 5px;
	 padding-top: 5px;
	 position: absolute;   
         width: 675px;     }  html>body #content { margin-left: 373px; margin-top: -1300px; }

#side-bar {
	 height: auto;
         margin-left: 150px;
	 margin-top:  175px;
	 position: relative;
         width: 210px; }
	 html>body #side-bar {  margin-top: 155px;  	 }

#btm-nav   {
      background: #7490D7;
			float: left;
      font-family: Verdana, Arial, sans-serif;
      color:  #FFFFFF;
      font-size:  12px;
			height: 125px;
			margin-top: 200px;
			position: absolute;
			text-align: center;
      width:100%;
   }

/** ========================================= BOXES =========================================== **/
.baby-blue-box {
   background: #7490D7;
   border: 1px solid #0440D8; 
   color: #FFFFFF;
   font-family: Verdana, Arial, sans-serif; 
   font-size: 12px;
   height: auto;
   padding: 7px;
   width: 200px;
   } html>body .baby-blue-box { padding: 9px; } 

.bright-blue-box {
   background: #4961B7;
   border: 1px solid #1E3279; 
   color: #FFFFFF;
   font-family: Verdana, Arial, sans-serif; 
   font-size: 12px;
   height: auto;
   padding: 7px;
   width: 200px;
   } html>body .bright-blue-box { padding: 9px; } 

.navy-box {
   background: #1E3279;
   border: 1px solid #F5DA6D; 
   color: #FFFFFF;
   font-family: Verdana, Arial, sans-serif; 
	font-size: 12px;
	height: auto;
	padding: 7px;
	width: 200px;
   } html>body .navy-box { padding: 9px; } 
	
.white-box {
   background: #FFFFFF;
   border: 1px solid #0440D8; 
   color: #0440D8;
   font-family: Verdana, Arial, sans-serif; 
	font-size: 12px;
	height: auto;
	padding: 7px;
	width: 200px;
   } html>body .white-box { padding: 9px; } 
	    	 
.yellow-box {
   background: #F5DA6D;
   border: 1px solid #0440D8; 
   color: #0440D8;
   font-family:  Verdana, sans-serif; 
   font-size: 12px;
   height: auto;
   padding: 7px;
   width: 200px;
   } html>body .yellow-box { padding: 9px; }  		 

.blog-box {  /** this is the format for reporting the comments, not accepting them **/
   background: #FFFFFF;
   border: 4px solid #0440D8; 
   color: #0440D8;
   font-family:  Times Roman, serif; 
	 font-size: 14px;
	 height: auto;
	 padding: 10px;
	 width: auto;
   } html>body .blog-box {  font-size: 13px; 	padding: 9px; } 

.form-box {  
   background: #FFFFFF;
   border: 2px solid #0440D8; 
   color: #0440D8;
   font-family:  Verdana, sans-serif; 
	 font-size: 12px;
	 height: auto;
	 padding: 8px;
	 width: auto;
   } html>body .form-box { 	 padding: 10px; } 

	
/**======================================== BACKGROUNDS ===================================**/
.bulletin-board {
	 background: #F5DA6D;
/**	 background-image:  url(http://www.four-hills-village.org/four-hills-village-images/corkboard-600x803.gif); **/
   border: #0440D8 4px solid; 
   color: #0440D8;
	 height:  auto;
	 padding: 10px;
	 width: auto;
   } html>body .bulletin-board { 		 padding-right: 10px; 	   width: auto; 	   } 
		 
		 
/**======================================== top-level styles ===================================**/
#top-nav   {
      background: #FFFFFF;
			display: inline;
			margin: 0px;  /** don't change margin, since it affects logo, must be at top **/
      position: absolute;
			text-align: center;
      width:100%;     }

/** 
  this determines the color, placement and width of the bar that contains the links in the list elts; can't set height here, use
	padding to widen bar
**/
#tablist {     
	background: #F5DA6D;   /* yellow */
	color: #000000;
	font-family: Verdana, Arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	margin-left: 0px;
	margin-top: 3px;
	padding-bottom: 3px;
	padding-top: 3px; }
	html>body #tablist {  	margin-left: -100px;  	}

/** this determines the look of list elts; creates wider band behind each list elt; can't set width or height **/
#tablist li {    
	background-color: #F5DA6D;
	display: inline;  /** list goes horizontal instead of vertical **/
	list-style: none;
	margin: 15px;   }

/** what each link in the top-level colored boxes will look like **/
#tablist li a {  /** IE **/
	background: #F5DA6D;
	color: #0440D8; 
	margin-left: 0px;
	text-decoration: none;  }

#tablist li a:hover {
	font-weight: bold;
	color: #7490D7;   }

/** ===================================== end:  top-level styles ========================================**/

/** ++++++++++++++++++++++++++++++++++++++++ second-level styles ++++++++++++++++++++++++++++++++++++++ **/
/** this determines the look of the colored cell behind the second-level link/text, used in expandcontent to determine look 
of sublinks **/
.tabcontent {
	background:  #C6D2F1;
	color: #0440D8;
	display: none;
	font-family: Arial, Verdana, sans-serif;
	margin-left: 0px;
	margin-top: 400px; }
	
a.tabconlink:link{   /** this determines what the TEXT will look like **/ /** was tabconlink **/
	color: #0440D89;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 11.5px;
text-decoration: none;  } html>body a.tabconlink:link {font-size: 11px;}

a.tabconlink:hover, a.tabconlink:visited:hover {
	color: #132C69;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 11.5px;
	text-decoration: underline;  }html>body a.tabconlink:hover, a.tabconlink:visited:hover  {font-size: 11px;}

a.tabconlink:visited {
	color: #2C3CB8;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 11.5px;
	text-decoration: none;  }html>body a.tabconlink:visited {font-size: 11px;}

#about {  /** IE **/
	margin-left: -415px;
	margin-top: 0px;
  padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
  padding-top: 2px;
	position: absolute;
	width: auto;  }
html>body  #about {  	margin-left: 125px;  }

#news {  /** IE **/
	margin-left: -415px;
	margin-top: 0px;
  padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 2px;
  padding-top: 2px;
	position: absolute;
	width: auto;  }
html>body  #news {   	margin-left: 125px; }

#resources {  /** IE **/
	margin-left: 300px;
	margin-top: 0px;
  padding-bottom: 2px;
  padding-top: 2px;
	position: relative;
	width: 600px;  }
	html>body #resources {  	margin-left: 300px;  width: 650px;	}
	
#bulletin {  /** IE **/
	margin-left: 500px;
	margin-top: 0px;
  padding-bottom: 2px;
  padding-top: 2px;
	position: relative;
	width: 200px;  }
html>body  #bulletin {   	margin-left: 750px;   width: 220px;  }
	
/** ++++++++++++++++++++++++++++++++++++++++ end: second-level styles +++++++++++++++++++++++++++++++++**/
/** ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ end: top nav bar ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ **/
	 
.footer   {
      background: #transparent;
      font-family: Verdana, Arial, sans-serif;
      color:  #FFFFFF;
      font-size:  12px;
      width:100%;     }

.line-yellow  {
      height: 4px;
      background: #F5DA6D;
	   display: inline-table;
      width:100%;     }

.line-white {
   background: #FFFFFF;
   width:100%;
   height: 2px;     } 
	 
.logo   {
      background: #7490D7;
			text-align: center;
      width:100%;  }
	 html>body .logo { 			padding-bottom: 3px;   /** creates slim blue bottom border **/  	 }

/** ===================================== LISTS ========================================**/
.none {
	color: #0440D8;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	list-style: none;
	margin-left: 4px;  } 
html>body .none { 	margin-left: -37px;  	   } 
   
.none li a{
	color: #0440D8;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	list-style: none;
	margin-left: 10px;
	text-decoration: underline;  } 

.none a:hover {
  color: #7490D7;
  text-decoration: none;	}

.small-space { 	line-height: 1px; }
html>body .small-space { 	line-height: 3px; }	

.big-space { 	line-height: 50px; }
html>body .big-space { 	line-height: 45px; }	

ol {padding; 0px; margin: 0px;}
ul {padding; 0px; margin: 0px;}

ol {margin-left: 30px; padding-left: 0;}  html>body ol {margin-left: 5px;}
ol>li  { 
  margin-left: 2em; 
  padding-left:10px; 
}  html>body ol>li {margin-left: 2.5em; padding-left: 0px;}

li.square-white    {
  list-style-type: square; 
  font-family: Verdana, Arial, sans-serif; 
  font-size: 12px; color: #FFFFFF; margin-left: 1.5em; 
}  html>body    li.square-white    {margin-left: -2em;}   /** for better browsers **/

li.square        {   list-style-type: square;    margin-left: 2em; }   /** for IE **/
html>body    li.square    {list-style-type: square; margin-left: 2em;}   /** for better browsers **/

li.square-small  {list-style-type: square; list-style-size: 5pt;}

li.square-in    {font-weight: normal; list-style-type: square; margin-left: 1.5em; }   /** for IE **/
html>body    li.square-in    {list-style-type: square; margin-left: -2em;}   /** for better browsers **/

/** ===================================== LINKS ========================================**/
a.blue         {text-decoration: none; font-weight: bold; color: #0440D8;}   /** no underline **/
a:link.blue   {text-decoration: none; font-weight: bold; color: #0440D8;}
a:hover.blue {text-decoration: underline; font-weight: bold; color: #7490D7;} 

a.blue-u              {color: #0440D8; text-decoration: underline;}   
a:link.blue-u       {color: #0440D8; text-decoration: underline;}   
a:hover.blue-u {color: #7490D7; text-decoration: underline;}   

a.navy-u               {text-decoration: underline; font-weight: normal; color: #0440D8;}
a:link.navy-u        {text-decoration: underline; font-weight: normal; color: #0440D8;}
a:hover.navy-u   {text-decoration: underline; font-weight: normal; color: #7490D7;} 

a.white          {text-decoration: none; font-weight: bold; color: #FFFFFF;}             /** no underline **/
a:link.white    {text-decoration: none; font-weight: bold; color: #FFFFFF;}
a:hover.white {text-decoration: underline; font-weight: bold; color: #F5DA6D;} 

a.white-u          {text-decoration: underline; font-weight: normal; color: #FFFFFF;}
a:link.white-u    {text-decoration: underline; font-weight: normal; color: #FFFFFF;}
a:hover.white-u {text-decoration: underline; font-weight: normal; color: #F5DA6D;} 

a.top             {text-decoration: none; font-weight: bold; color: #0440D8;}
a:link.top      {text-decoration: none; font-weight: bold; color: #0440D8;}
a:hover.top   {text-decoration: underline; font-weight: bold; color: #456ED7;} 

a.ylw          {text-decoration: none; font-weight: bold; color: #F5DA6D;}
a:link.ylw    {text-decoration: none; font-weight: bold; color: #F5DA6D;}
a:hover.ylw {text-decoration: underline; font-weight: bold; color: #FFFFFF;} 

a.btm        {text-decoration: underline; color: #FFFFFF} 
a:hover.btm  {text-decoration: underline; color: #F5DA6D} 

-->
</style>