#navBar {
margin-left:auto;
margin-right:auto;
width:90%;
margin-bottom:1px;
}

                            /* Basic code - don't modify */
 
 #topMenu { display: block; margin: 0; padding: 0; position: relative; }
  #topMenu li { display: block; list-style: none; margin: 0; padding: 0; float: left; position: relative; }
  #topMenu a { display: block; font-weight:bold;}
  #topMenu ul { display: none; position: absolute; left: 0; margin: 0; padding: 0; }
  * html #topMenu ul { line-height: 0; } /* IE6 "fix" */
  	#topMenu ul a { zoom: 1; } /* IE6/7 fix */
    #topMenu ul li { float: none; }
    #topMenu ul ul { top: 0; }
  
/* Essentials - configure this */

#topMenu ul { width: 200px; }
#topMenu ul ul { left: 202px; }

#topMenu li.submenu-li a{
background: transparent url('arrow-black.gif') right center no-repeat;
padding-right:25px;
}



#topMenu li.hover a{
background-image: url('arrow-white.gif');
}


#topMenu li.no-submenu-li a{
background-image:none;
padding-right:25px;
}

#topMenu li.submenu-li. ul li a{
background-image:none;
}    
/* Everything else is theming */
 
#topMenu { /*background-color:#EDD6B1;*/ height: 30px; 
background: #EDD6B1 url('topMenu-bg.jpg') repeat-x;}
#topMenu *:hover { background-color: none; }
#topMenu a { border-right: 1px solid #fff; color: #111; font-size: 12px; padding-left: 8px; padding-right: 8px; line-height: 30px; }
  #topMenu li.hover a { background-color: #5E5A5A; color:#fff}
  #topMenu ul { top: 30px; }
    #topMenu ul li a { background-color: #5E5A5A; }
      #topMenu ul a.hover { background-color: #336699; color:#fff;}
   #topMenu ul a { border-bottom: 1px solid white; border-right: none;  }
/* #topMenu ul a { border-bottom: none; } - I also needed this for IE6/7 */

#topMenu ul li a{
font-size:11px;
font-weight:none;
}