body {
	font: 80% Verdana, Arial, Helvetica, sans-serif;
	background: #000099;
	background-image:url(images/bkg.gif);
	background-position:top;
	background-repeat:no-repeat;
	margin: 116px 0 0 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
}
.oneColFixCtr #container {
	width: 690px; 
	background: #FFFFFF;
	margin: 0 auto; 
	text-align: left;
	border:5px solid #99ccff;
}
.oneColFixCtr #mainContent {
	padding: 50px 20px 20px 20px; 
}

h1 {
	color:#000099;
	}
h2 {
	color:#3366CC;
	}
img {
	border:0;
}

a:link {
	color: #000099;
}

a:hover, a:active {
	text-decoration: none;
	color: #6467ff;
}


div#footer {
	font-size:85%;
	text-align:center;
	padding-bottom:20px;
	}

	
#sidebar {
display: block;
float:right;
margin:0 0 8px 10px;
padding: 0 10px 6px 10px;
width:190px;
background-color:#99ccff;
clear:right;
}
#sidebar h1 {
color:#000066;
font-size:120%;
}
#sidebar ul, li {
list-style:none;
padding-bottom:3px;
margin-left:0;
padding-left:0;
}

/* set UL defaults to 0 */
div#navh ul {
  padding: 0; 
  margin: 0;
}

div#navh li {
  position: relative; 
  list-style: none; 
  float: left; 
  margin: 0; /* give slight margin to the right of toplevel buttons */
  background: #6467ff; /* darkgreen */
  width: 115px; /* did some simple math to decide widths; with a fluid 
                  width page you can use % but should keep the total 
                  a tad under 100% to keep IE happy. */
  height: 38px;
  font-size:90%;
  background-image:url(images/wave.gif);
  background-position:bottom;
  background-repeat:no-repeat;
}

div#navh li:hover {
  background: #4549ef; 
  border:0;
  background-image:url(images/wave.gif);
  background-position:bottom;
  background-repeat:no-repeat;
}

div#navh li a {
  display: block; 
  text-decoration: none; 
  text-align:center;
  color: #FFFFFF; 
  text-align: left;
  width: auto;
  height: 25px;
  padding: 2px 0 0 12px;
  margin-top: 0;
  /* I did a little messing with the height, margins and padding to obtain
  the fake olive bar on the button lefts. */
}

div#navh li a:hover {
  color: #ffffcc;
}

div#navh>ul a {
  width: auto;
  color: #fff; 
}

div#navh ul ul {
   position: absolute; 
   width: 100%;
   display: none;
}

div#navh ul ul li {
   width: 100%;
}

div#navh li.submenu {
/* reserved for whatever ... */
}

div#navh ul ul li.submenu {
/* reserved for whatever ... */
}

div#navh li.submenu:hover {
  z-index: 100; /* not needed here but maybe with your site */
}

div#navh li.submenu li.submenu:hover {
}

div#navh ul.level1 li.submenu:hover ul.level2, div#navh ul.level2 
  li.submenu:hover ul.rollover, div#navh ul.level2 
  li.submenu:hover ul.level3 {
   display:block;
}
div#navh ul.level1 li.contact:hover ul.level2, div#navh ul.level2 
  li.contact:hover ul.rollover, div#navh ul.level2 
  li.contact:hover ul.level3 {
   display:block;
}

div#navh ul.level2 li {
  background: #6467ff;
}

div#navh ul.level2 li:hover {
  background: #9999ff;
}

div#navh ul.level2 {
  top: 25px;
  left: 0px;
}

div#navh ul.level3 {
  top: 0;  
  left: 140px;
  /* reserved for implementation of second level sub menus */
}

/* To make the last menu item a tad narrower and remove extra border if there is one */
#navh .contact { 
  width: 172px; 
  border-right: none; 
}

#navh .home { 
  width: 181px; 
  border-right: none; 
} 

/*   CUSTOM SUBMENU WIDTHS:
    Sometimes you have to make a menu or submenu wider to accomodate 
    an overabundance of label. Leave the classes empty or set to auto
    if not required and/or delete in the menu HTML code.  
*/

#navh .subone { width: 151px; }
#navh .subtwo { width: 151px; }
#navh .subthree { width: 240px; } 
#navh .subfour { width: 240px; }
