.menubg {
	height: 36px; 
	margin-left: 0;
	margin-right: 0;
}
.menualign {
	margin-left: auto; 
	margin-right: auto;
}

ul.menu {list-style:none; margin:0; padding:0;}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#fff; text-decoration:none}
ul.menu li {z-index: 1999; position:relative; float:left; margin-right:2px; text-align:left;}

ul.menu ul {position:absolute; top:36px; left:0; display:none; opacity:0; list-style:none} /* For horizontal menu do -> top:26px; For vertical do -> top:0px; */

ul.menu ul li {z-index: 1999; position:relative; border:1px solid #305d73; border-top:none; width:131px; margin:0; text-align:left;} /* Make the width the same as below 2 places (sort of) and in the .js file. Also, reposition the sub-menu arrow below. */
ul.menu ul li a {font-size: 12px; display:block; padding:3px 7px 3px; background-color:#305d73}
ul.menu ul li a:hover {background-color:#93aab6; color:#fff;}

ul.menu ul ul {left:131px; top:-1px} /* Make the width the same as above and in the .js file, also make sure arrow gif is within the width via param after url bein 12 px less than width */

ul.menu .menulink {font-family: Verdana; font-size: 14px; font-weight: normal; padding:9px 0px 11px 0px; color: #fff;} /* padding keeps the link the same height as the button & also keeps sub-menus connected*/
ul.menu .menulink:hover, ul.menu .menuhover {color: #fff;}

ul.menu .menulinkSelected {font-family: Verdana; font-size: 14px; font-weight: normal; padding:9px 0px 11px 0px; color: #973232;} /*ditto above on padding*/
ul.menu .menulinkSelected:hover, ul.menu .menuhover {color: #fff;}

ul.menu .sub {background:#305d73 url(/img/arrow-white.gif) 121px 8px no-repeat}
ul.menu .topline {border-top:1px solid #305d73}


ul.menu li.headitem {

		text-align: center ;
						
                  display: inline ;  
                  list-style: none ;
                  margin: 0 ;
                  padding: 0 ;  
                  /*border: 1px solid black;*/  /* re-enable for testing*/
                 }

ul.menu li.headitem a.menulink,ul.menu li.headitem a.menulinkSelected {                      /* added per interpretation of Spartanicus */
                 display: table-cell ;      /* For old Gekko browsers (border alignment problems) */
                 display: inline-table ;    /* For other old browsers */
                 display: inline-block ;    /* For modern browsers */
                 width: 133px ;  /* Make the width the same as above +2px and in the .js file*/
                }


/* Experimental style per interpretation of Spartanicus pointer */
 
ul.X2menulist {
               margin: 0 ;
               padding: 0 ;
               text-align: center ;
               line-height: 150% ;   /* avoid overlap when stacking */
              }
ul.X2menulist li {

		text-align: center ;
						
                  display: inline ;  
                  list-style: none ;
                  margin: 0 ;
                  padding: 0 ;
                  border: 1px solid black ;
                 }