#main-menu {
width:150px; /* width of menu, not needed if it's already in a container */
font-family:verdana;
font-size:1em;
}

#main-menu ul {
list-style:none;		/* removes bullets */
margin:0;
padding:0;
}

#main-menu li {
line-height:normal;
}

#main-menu li a {
display:block;
padding:3px 4px 3px 30px;	/* the last number (16px) must be big enough to accomodate the width of your rollover image */
margin-bottom:0px;
border:1px solid;	/* a border if you fancy */
border-color: #54011F #54011F #666 #54011F;
/* you can change background color of button here (#ddd). the pixel measurement (3px) is x-axis of your rollover image */
background:#063 url(images/g.gif) 3px 50% no-repeat;
color:#F9F0D1;	/* color of button text */
text-decoration:none;
}

/* nasty hack for IE/pc (you must leave all of this in including comments)*/

/* hide from Mac IE \*/
* html #main-menu li a {
height:1%;
}
/* end hack */


/* the magic bit */
#main-menu li a:hover {
/* this line MUST be the same as the one above except with your rollover image in it instead */
background:#fff url(images/g2.gif) 3px 50% no-repeat; font-family: Verdana, Arial, Helvetica, sans-serif; color: #54011F;  text-decoration: none; font-weight: bold; 
		
}


#sub-menu {
width:150px; /* width of menu, not needed if it's already in a container */
font-family:verdana;
font-size:1em;
}

#sub-menu ul {
list-style:none;		/* removes bullets */
margin:0;
padding:0;
}

#sub-menu li {
line-height:normal;
}

#sub-menu li a {
display:block;
padding:3px 4px 3px 25px;	/* the last number (16px) must be big enough to accomodate the width of your rollover image */
margin-bottom:0px;
border:1px solid;	/* a border if you fancy */
border-color: #F9F0D1 #ccc #666 #F9F0D1;
/* you can change background color of button here (#ddd). the pixel measurement (3px) is x-axis of your rollover image */
background:#54011F 10px 50% no-repeat;
color:#F9F0D1;	/* color of button text */
text-decoration:none;
}

/* nasty hack for IE/pc (you must leave all of this in including comments)*/

/* hide from Mac IE \*/
* html #sub-menu li a {
height:1%;
}
/* end hack */


/* the magic bit */
#sub-menu li a:hover {
/* this line MUST be the same as the one above except with your rollover image in it instead */
background:#000099 3px 50% no-repeat; font-family: Verdana, Arial, Helvetica, sans-serif; color: #603;  text-decoration: none; font-weight: bold; 
		
}