I'm trying to style the page menu into separate 'buttons' with different colours for hover, active etc. I just can't figure out where to put styling in the ul, li, a sections of the CSS. Could someone explain where these go?

Currently CSS inserts looks like this (I'm assuming CSS inserts override the settings in ata options):

site is at http://eastasiastudent.net

/* ================================================ */
/* Page menu background                             */
/* ================================================ */
div#menu1 { 
	height: 40px;  
	margin-top:0px; 
	background: white; 
}
/* ================================================ */
/* Page Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
	background: white;
	border: none 0px; 
}

/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */

ul.rMenu li,
ul.rMenu li a:link,
ul.rMenu li a:visited {
	background: #aaaaff;
	color: #000000;
	border: 1px solid #5555ff;
	padding:0.2em;
	margin:0.2em;
}

ul.rMenu li a:hover {
	background: #8888ff;
}

ul.rMenu li a:active {
	background: #5555ff;
}

Yes the CSS inserts get tacked to the end of the themes CSS so it takes precedence over another CSS with the same selectors.