Converting image to text for “Home” button in navigation

I’m using a theme called “Generic Plus” which is the exact layout I needed, only the colors were wrong. I thought it would be easy to change them, and I got most of them, except for the navigation buttons. Some are text, but the “Home” button is image based. I can’t seem to figure out how to convert it to plain text navigation. The navigation bar needs to be green with white letters. A hover effect would be nice, but not totally necessary.

I found this code within header.php where I have narrowed down the line of code responsible for the images, only I don’t know how to modify it to make it say “Home” in plain text instead of using an image:

<!-- navigation START -->
<div id="navigation">
	<!-- menus START -->
	<ul id="menus">
		<li class="<?php echo($home_menu); ?>"><a class="home" title="<?php _e('Home', 'generic23'); ?>" href="<?php echo get_settings('home'); ?>/"><?php _e('Home', 'generic23'); ?></a></li>
		<?php
			if($options['menu_type'] == 'categories') {
				wp_list_categories('depth=2&title_li=0&orderby=name&show_count=0');
			} else {
				wp_list_pages('depth=2&title_li=0&sort_column=menu_order');
			}
		?>
		<li><a class="lastmenu" href="javascript:void(0);"></a></li>
	</ul>
	<!-- menus END -->

And then here’s the part of the CSS responsible for styling it, only if I change the background color, the “Home” link is invisible, although is still clickable:

/* navigation START */
#navigation {
	background:#8CC63F;
	border-bottom:1px solid #8CC63F;
}
#menus li {
	display:inline;
	list-style:none;
}
#menus li a {
	background:transparent url(img/menu.gif) no-repeat;
	display:block;
	color:#fff;
	height:31px;
	line-height:31px;
	padding:0 20px;
	margin-left:-10px;
	text-decoration:none;
	font-weight:800;
	text-transform:uppercase;
	font-size:11px;
	float:right;
	z-index:1;
}
#menus li a:hover,
#menus li a.current {
	background-position:0 -31px;
}
#menus li.current_page_item a,
#menus li.current-cat a {
	background-position:0 -62px;
}
#menus li a.home {
	background-position:0 -93px;
	width:100px;
	padding:0;
	margin-left:0;
	text-indent:-999em;
}
#menus li a.home:hover {
	background-position:0 -124px;
}
#menus li.current_page_item a.home {
	background-position:0 -155px;
}
#menus li a.lastmenu:hover {
	background-position:0 0;
	cursor:default;
}
#searchbox {
	background: url(img/searchbox.gif) no-repeat;
	width:209px;
	height:23px;
	display:block;
	float:left;
	margin-top:4px;
	margin-left:7px;
	padding:2px;
}
#searchbox .textfield {
	background:none;
	border:0px;
	width:185px;
	float:left;
	margin-right:2px;
	padding-left:2px;
}
#searchbox .button {
	background:none;
	border:0px;
	width:18px;
	height:18px;
	cursor:pointer;
	float:left;
	margin-top:1px;
}
#searchbox .searchtip {
	color:#336699;
}
/* navigation END */

I’ve figured out just about everything else, except this… any suggestions would be greatly appreciated. Thank you in advance for any feedback. ??