BODY {
background-color:#006600;
color:#FFFFFF;
font-family: verdana, sans-serif;
font-size: small;
}
#divNav {
position: relative;
background: transparent url(/FootpathFilmsLogonav.jpg) no-repeat top left;
margin: 0px;
padding: 0px;
width: 800px;
height: 170px;
}

#nav {
position: relative;
top: 160px;
left: 0px;
height: 170px;
width: 800px;
}

#nav li ul, #nav li ul {
margin: 0px;
padding: 0px;
}

#nav a {
text-decoration: none;
}

#nav li { /*float the main list items*/
margin-top: 0px;
float: left;
display: block;
padding-right: 15px;
}

#nav li ul {
display: none;
}

#nav li.off ul, #nav li.on ul { /*put the subnav below*/
position: absolute;
top: 25px;
left: 0px;
padding-top: 15px;
background: #009900;
height: 28px;
width: 745px;
margin-left: 40px;
padding-left: 20px;
}

#nav li.on ul {
background: #009900;
}

#nav li.on:hover ul, #nav li.over ul { /*for ie*/
background: #009900;
}

#nav li a {
color: #009900;
font-family: verdana, sans-serif;
display: block;
width: 93px;
padding: 0;
}

#nav li.on a {
color: #009900;
}

#nav li.on ul a, #nav li.off ul a {
border: 0;
float: left; /*ie doesn't inherit the float*/
color: #009900;
width: auto;
margin-right: 15px;
}

#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
background: #009900;
}

#nav li.on ul {
display: block;
}

#nav li.off:hover ul, #nav li.over ul {
display: block;
z-index: 6000;
}

#nav li.off a:hover, #nav li.on a:hover { 
color: #FFFFFF;
text-decoration: underline;
}

/*do the image replacement*/

#nav li span {
position: absolute;
left: -9384px;
}

#liHome a, #liWorkshops a, #liProjects a, #liAboutus a, #liVideos a {
display: block;
position: relative;
height: 26px;
background: url(/bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
}

/*first, put the initial states in place*/

#liHome a {
background-position: 0 0;
}

#liWorkshops a {
background-position: -102px 0;
}

#liProjects a {
background-position: -204px 0;
}

#liAboutus a {
background-position: -306px 0;
}

#liVideos a {
background-position: -408px 0;
}


/*active area - for this demo - the code could be based on a body class, and probably work better.*/

#liHome.on a {
background-position: 0px -37px;
} /*add selectors for the other li's and background-positions*/

/*hover states*/

#liHome a:hover, #liHome:hover a, #liHome.over a {
background-position: 0 -73px;
}

#liWorkshops a:hover, #liWorkshops:hover a, #liWorkshops.over a {
background-position: -102px -73px;
}

#liProjects a:hover, #liProjects:hover a, #liProjects.over a {
background-position: -204px -73px;
}

#liAboutus a:hover, #liAboutus:hover a, #liAboutus.over a {
background-position: -306px -73px;
}

#liVideos a:hover, #liVideos:hover a, #liVideos.over a {
background-position: -408px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
font-size: small;
display: block;
background: #009900;
color: #ffffff;
} 

#nav li.on ul a {
background: #009900;
font-size: small;
}

a.homelinks:link {
color: white;
text-decoration: none;
}

a.homelinks:visited {
color: white;
text-decoration: none;
}
a.homelinks:hover{
color: white;
text-decoration: underline;
}