ul.MenuBarVertical {
	border: none;
}

/*background of the main menu */
ul.MenuBarHorizontal li,ul.MenuBarVertical li {
background: #D6A7FF url(bg.gif) repeat-x center;
}

ul.MenuBarHorizontal li,ul.MenuBarVertical li a:hover {
background: #FCC246;
}

/*you may want to add sparator border between main menu item*/

ul.MenuBarHorizontal li {
border-right: 1px solid #fff; /*border is on top in horizontal mode*/
}
ul.MenuBarVertical li {
border-top: 2px solid #fff; /*border is on top in vertical mode*/
}


ul.MenuBarVertical a, ul.MenuBarHorizontal a, ul.MenuBarHorizontal li.MenuBarItemIE, ul.MenuBarVertical li.MenuBarItemIE {
color: #000000; font-weight:normal; /* text color in normal */
}

ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible,
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
color: #000000; /*text color when hovered */
}


/* set the padding of list menu here*/
ul.MenuBarHorizontal a, ul.MenuBarVertical a { 
	padding: 0.3em 0.75em;
}

ul.MenuBarVertical li {
	width: 11.5em; 
}

/* uncomment this to add border around sub menu */

ul.children {
/*border: 1px solid #fff;*/ 
}

/* this is the width of child menu */
ul.children li {
	width: 10em; 
	border-top: 2px solid #fff; /*to add border between child menu, remove it if you don't want to*/
}

/* children background,font-size, padding here */
ul.children a {
font-size: .85em;
background: #D6A7FF;
padding:3px
}

/* children on hover */
ul.children li a:hover {
background: #FCC246;
color:#000000
}