#head_graphic {
    position: relative; top:  0px;  left:0px; 
	width:790px;
	height:218px;
	background-image:url('../images/head_graphic.jpg');
	background-repeat: no-repeat;
	margin-left: auto; 
    margin-right: auto
}

/* Add and position parent navigation bar */
 #nav  {
	position: relative;      /* This moves the nav bar to desired location */
	top: 0px;
	width: 790px;
	left:0px;
    margin: 0;   /* Needed to anchor graphic to left edge */
	padding: 0;  /* Needed to anchor graphic to left edge */
	border: 0;   /* Needed to anchor graphic to left edge */
	height: 0;
	background: #81b3b6 url(../images/rusty_beam.jpg) no-repeat left; /*contains hover states*/
}

#nav

 li { /*float the parent bar items and space the display blocks */
	margin: 0;
	width: auto;
	float: left;
	display: block;
}

/* mouse over bar */
#nav

 li ul   {               /*put the child bar below*/
	position: absolute;
	top: 50px;           /* Drop mouse over bar down the hieght of parent so mouse over dosen't cover parent */
	left: 0;             /* Align left end of mouse over with parent */
	padding-top: 0px;    /* Space above selections */
	background: #ffffff; /* set same as web page color. */
	height: 50px;        /* Background for mouse over selections.  THIS IS A TRICK: by making this 
	                        extra heigh and the background color the same as the web page, 
	                        the selections will not disapear when the cursor strays low. */
	right: 0;
	padding-left:  0px; /* move mouse over bar selections to the right. Incompatable with FF.  Will add this to lenghth
	                       of child bar, IE will not.  The fix is to add spaces to html unordered list. */
}

/*do the image replacement*/
#nav

 li span {
	position: absolute;
	left: -9384px;
}
/* List each link in menu bar */
	#lispace a,
	#licouncil a, 
	#lilocal14 a, 
	#lilocal29 a, 
	#lilocal86 a, 
	#lilocal751 a, 
	#lilocal506 a,
	#lilocal516 a, 
    #liendspace a {
		display: block;
		align: left;
		height:50px; /* Display height of graphic parent bar */
		background : url(../images/rusty_beam.jpg) no-repeat left; /*contains hover graphic bar*/
	}

/* Visible Nav Bar -- Set width and starting position of parent bar links.  This is a funny math. 
   Widths are actual, but starting points require some guess work. 
   To move starting point left, add to start number -- to move right subtract from start number.
   Match background position to Hidden Nav Bar background position.*/
#lispace a {
    width: 10px;
	background-position: 0 0;
}
#licouncil a {
    width: 150px;
	background-position: -10px 0;
}

#lilocal14 a {
    width: 115px;
	background-position: -160px 0;
}

#lilocal29 a {
    width: 95px;
	background-position: -275px 0;
}

#lilocal86 a {
    width: 95px;
	background-position: -370px 0;
}

#lilocal751 a {
    width: 105px;
	background-position: -465px 0;
}

#lilocal506 a {
    width: 110px; 
	background-position: -570px 0;
}

#lilocal516 a {
    width: 100px; 
	background-position: -680px 0;
}

#liendspace a {
    width: 10px; 
	background-position: -780px 0;
}

/* HIdden Nav Bar --Set width and starting position of mouse over links 
   Also reach down negitive number of pixals to position hover link over parent link  */

#lispace a:hover, #lispace :hover a, #lispace.over a{
	background-position: 10 -0px;     /* Skip over first pixels of nav bar, then grab hidden mouse over nav bar*/
}
#licouncil a:hover, #lihome:hover a, #lihome.over a{
	background-position: -10px -60px; 
}

#lilocal14 a:hover, #lilocal14:hover a, #lilocal14.over a  {
	background-position: -160px -60px;
}

#lilocal29 a:hover, #lilocal29:hover a, #lilocal29.over a  {
	background-position: -275px -60px; 
}

#lilocal86 a:hover, #lilocal86:hover a, #lilocal86.over a {
	background-position: -370px -60px;
}

 #lilocal751 a:hover, #lilocal751:hover a, #lilocal751.over a {
	background-position: -465px -60px;
}

 #lilocal506 a:hover, #lilocal506:hover a, #lilocal506.over a{
	background-position: -570px -60px;
}

 #lilocal516 a:hover, #lilocal516:hover a, #lilocal516.over a{
	background-position: -680px -60px;
}

 #liendspace a:hover, #liendspace:hover a, #liendspace.over a{
	background-position: -780px -0px;
}

 /* -------------------- Side Menu ----------------------- */

 
ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
	
#sidemenu {
	width: 160px;
	border-style: solid solid none solid;
	border-color: #000000;
	border-size: 1px;
	border-width: 1px;
	margin: 0px;
	}
	
#sidemenu li a {
  	height: 43px;
  	height: 21px;
	text-decoration: none;
	}
	
#sidemenu li a:link, #sidemenu li a:visited {
	color: #ffedc9;
	display: block;
	background: url('../images/sidekmenu.gif');
	padding-left:30px; padding-right:0; padding-top:8px; padding-bottom:0
	}
	
#sidemenu li a:hover {
	color: #ffffff;
	background: url('../images/sidekmenu.gif') 0 -29px;
	padding-left:30px; padding-right:0; padding-top:8px; padding-bottom:0
	}
	
#sidemenu li a:active {
	color: #d0ccc4;
	background: url('../images/sidekmenu.gif') 0 -58px;
	padding-left:30px; padding-right:0; padding-top:8px; padding-bottom:0
	}