Change Navigation Color Using Css Please Help,, using website tonight

Hey im a having trouble figuring out how to change the color of my navigation bar using css in website tonight. Im pretty noobish to HTML so could some one please help me out with a css color code for the navigation bar, and were about i paste it on the css. i hope this makes some sense.
Thanks.
this is the thing i want to change the color of it. http://s613.photobucket.com/albums/t...21productions/

and here is all the navigation html i think if this helps. maybe some one can located on hear were im to put the code in.


/*--------------------------------
Top Navigation
---------------------------------*/

.sf_navigation_top {
display: none;
}

.sf_navigation_top ul{

}

.sf_navigation_top ul:after{

}

.sf_navigation_top ul li {

}

.sf_navigation_top ul li.sf_last_nav_item{

}

.sf_navigation_top ul li.sf_first_nav_item{

}

.sf_navigation_top ul li a {
}

.sf_navigation_top ul li a:visited {

}

.sf_navigation_top ul li a:hover{
}

/*--------------------------------
End Top Navigation
---------------------------------*/


.sf_extra10 {

}


/*--------------------------------
Header
---------------------------------*/

.sf_header_wrapper {
top: 0;
left: 0;
height:200px;
position:relative;
width:850px;

}

.sf_extra2 {

}

.sf_main_header {
text-align: left;
height: 125px;
overflow: hidden;
width: 300px;
font-family: verdana, helvetica, Arial, sans-serif;
font-size: 28px;
font-weight: normal;
font-variant: normal;
padding: 40px 0 0 40px;
}

.sf_extra3 {
sf_edit: true;
}

.sf_sub_header {
display: none;
}

.sf_main_header p, .sf_sub_header p {
margin: 0;
padding: 0;
}

/*--------------------------
End Header
--------------------------*/


.sf_extra4 {

}


/*--------------------------------
Bottom Navigation
---------------------------------*/

.sf_navigation{
font-family: Verdana, Arial, Helvetica, sans-serif;
float: left;
display: inline;
width: 170px;
height: auto !important;
margin-left: 7px;
margin-bottom: 10px;
}

.sf_navigation ul{
font-size:11px;
list-style-type: none;
margin: 10px 0 0 0;
padding: 0;
}

.sf_navigation ul:after{
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}

.sf_navigation ul li {
font-weight: bold;
}
.sf_navigation ul li.sf_last_nav_item{
}

.sf_navigation ul li.sf_first_nav_item{

}

.sf_navigation ul li a {
text-decoration: none;
text-align: left;
padding: 4px 3px 4px 6px;
display: block;
margin-top: 2px;
width:161px;

}

.sf_navigation ul li a:visited {

}

.sf_navigation ul li a:hover{
}
/*------------------------------------
Flyout - Left Aligned Menu
------------------------------------*/
#Nav1 iframe {
position: absolute;
/* account for the border */
left: -0.25em;
top: -0.25em;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,op acity=0);
margin-left: 3px;
}
.sf_subnavigation, .sf_subnavigation2 {
display:none;
}

#Nav1 li ul {
position:absolute;
left: -999em;
width:132px;
background:#000000;
padding:2px 5px 5px 5px;
margin:-25px 0 0 125px;
z-index:1000;
}
#Nav1 li a {
display : block;
}
#Nav1 li {
float:left;
width:170px;
}
#Nav1 li ul li {
margin:0;
padding:0;
width:120px;
float:left;
}
#Nav1 li ul li a {
display : block;
width:120px;
height:auto;
padding:3px 5px;
white-space:normal;
}
#Nav1 li ul li a:hover {
}
#Nav1 li:hover ul,
#Nav1 li.sfhover ul {
left: auto;
}
/*--------------------------------
End Bottom Navigation
---------------------------------*/



.sf_extra5 {
}