QueryGirl on "Custom Colors in Menu Bar"

Here is my primary menu code.

/* Menu Primary
----------------------------*/

.menu-primary-container {
    float: left;
    padding:0 0 0 10px;
    position:relative;
    height: 32px;
    background: #; left top;
    z-index: 400;
    -moz-border-radius: 5px 5px 0 0;
    -khtml-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

.menu-primary {
}

.menu-primary ul {
	min-width: 160px;
}

/* First Level - Menu Primary */

.menu-primary li a {
    color: #FFFFFF;
    padding: 11px 15px 10px 15px;
	text-decoration: none;
    font-family: Century Gothic;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: normal;
}

.menu-primary li a:hover, .menu-primary li a:active, .menu-primary li a:focus,
.menu-primary li:hover > a, .menu-primary li.current-cat > a, .menu-primary li.current_page_item > a, .menu-primary li.current-menu-item > a {
    color: #FFFFFF;
    outline: 0;
    background: #ffffff left -132px repeat-x;
}

/* Child Levels - Menu Primary */

.menu-primary li li a {
	color: #FFFFFF;
    text-transform: none;
    background: #7F7F7F;
    padding: 10px 15px;
    margin: 0;
    border: 0;
    font-weight: normal;
}

.menu-primary li li a:hover, .menu-primary li li a:active, .menu-primary li li a:focus,
.menu-primary li li:hover > a, .menu-primary li li.current-cat > a, .menu-primary li li.current_page_item > a, .menu-primary li li.current-menu-item > a {
	color: #FFFFFF;
    background: #35B3E6;
    outline: 0;
    border-bottom:0;
    text-decoration: none;
}

/* Arrows Menu Primary */

.menu-primary a.sf-with-ul {
    padding-right: 20px;
    min-width: 1px;
}
.menu-primary  .sf-sub-indicator {
    position: absolute;
    display: block;
    overflow: hidden;
    right: 0;
    top:  0;
    padding: 9px 10px 0 0;
}

.menu-primary  li li .sf-sub-indicator {
    padding: 9px 10px 0 0;
}

/* Shadows Menu Primary */

.wrap-menu-primary .sf-shadow ul {
    background:	url('images/menu-primary-shadow.png') no-repeat bottom right;
}

I want to be able to make each individual menu item on the primary navigation bar to appear in a different color, and hover in a different color. Meaning, for example: the page "News" appears in lime green, and hovers in a darker green. THe item "About" appears in A light blue, and hovers in a deeper blue. Etc.

I have absolutely scoured the internet probably in excess of six hours combined over the last few days and nothing works. Nothing. Also, if your advice includes the use of menu ID numbers, I'm not sure I know what they are. This COULD be the problem, but I've tried things like 'menu-item-news' and 'menu-item-6' (When I edit the news page, it url displays "wp-admin/post.php?post=6&action=edit" so that is the post number, by my best guess.

Please help me.