.topmenu {
	position: relative; /* for positioning 'skip' link */
	border: 0px solid #cacaca;
	margin-top: .1em;
	margin: 0;
	padding: 0;


}
.topmenu ul {
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 12px;  /* eventually will be % */
	width: 100%;      /* required for IE */
	border-bottom: 2px solid #cacaca;
	letter-spacing:0.03em;
	font-weight:600;
	
}
/* any li element within .topmenu container */
.topmenu li {
	float: left;      /* widths are set farther below */
	margin: 0;
	padding: 0;
	list-style: none; /* don't show bullet markers */
	border-left: 1px solid #cacaca; /* separator between list items */
	/*border-top: 1px solid #cacaca;*/
	
	background: url("/menu/images/button_off.gif") ;
	background-repeat: repeat;
	
	display: block;
}
/* any anchor in a .topmenu list item element */
.topmenu li a {
	display: block;         /* expand to fill parent li */
	margin: 0;              /* no space between anchors */
	padding: .6em 0 0em 0; /* space above and below text */
	text-decoration: none;  /* no underline */
	color: #717071;        /* override default link color */
	
	letter-spacing:0.03em;
	

/* position bg image so it's not visible */
/*	background: #fff url(mArrow.gif) 0 -20px no-repeat;*/
/*	border-top: 5px solid #ffbc57;  default orange */
	width: 100%;          /* required for IE */
}
/* hide overflowing text, except in MacIE \*/
.topmenu li a {

	/*overflow: hidden;*/
} /* end hack */

/* both mouseovers and the menu item for the active page
   get the same rollover effect */
.topmenu li a:hover { background: url("/menu/images/button_on.gif");
background-repeat: repeat;
color: #ffffff;
}
.topmenu li a:focus,
.topmenu li a:active,
.pHome li#mHome a,
.pAbout li#mAbout a,
.pMember li#mMember a,
.pState li#mState a,
.pNewsEvents li#mNewsEvents a,
.pContact li#mContact a,
.pLink li#mLink a 
{
	background: url("/menu/images/button_on.gif");
	background-repeat: no-repeat;
	color: #ffffff;
}


/* .topmenu menu item widths, values are ~same as old
   image widths (for compatibility), but should change
   to em or % units in the future. */
#mHome a{
	height: 22px;
	width: 90px;

	    /* 1st list item has no left border */
}
#mAbout a{
	height: 22px;
	width: 110px;
}
#mMember a{

	height: 22px;
	width: 155px;
}
#mState a{
	height: 22px;
	width: 158px;
}
#mNewsEvents a{
	width: 160px;
	height: 22px;
}
#mContact a{
	width: 123px;
	height: 22px;
	
	
}
#mLink a{
	width: 90px;
	height: 22px;
	border-right: 1px solid #cacaca;
}