// function to apply drop-down styles in browsers not supporting the HOVER pseudo class
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);




//////////////////////////// REPEAT FOR EACH TOP-LEVEL LIST ITEM THAT HAS A DROPDOWN /////////////////////////////////
// Grab references to the nav elements
var nav_item = document.getElementById("nav_item_1"); // The first menu item with subs
var nav_item_link = document.getElementById("nav_item_1_link"); // The link inside that menu item

// Add some event listeners to make the parent LI's rollover styles "sticky"
if(nav_item.addEventListener) { // Add mouseover listener
	nav_item.addEventListener("mouseover", navItemOn, false);	
} else if (nav_item.attachEvent) { // Otherwise, add mouseover listener for IE
	nav_item.attachEvent('onmouseover',navItemOn);
}
//////////////////////////////////////////////


var nav_item_2 = document.getElementById("nav_item_2"); // The first menu item with subs
var nav_item_link_2 = document.getElementById("nav_item_2_link"); // The link inside that menu item

if(nav_item_2.addEventListener) { // Add mouseover listener
	nav_item_2.addEventListener("mouseover", navItemOn2, false);	
} else if (nav_item_2.attachEvent) { // Otherwise, add mouseover listener for IE
	nav_item_2.attachEvent('onmouseover',navItemOn2);
}


var nav_item_3 = document.getElementById("nav_item_3"); // The first menu item with subs
var nav_item_link_3 = document.getElementById("nav_item_3_link"); // The link inside that menu item

if(nav_item_3.addEventListener) { // Add mouseover listener
	nav_item_3.addEventListener("mouseover", navItemOn3, false);	
} else if (nav_item_3.attachEvent) { // Otherwise, add mouseover listener for IE
	nav_item_3.attachEvent('onmouseover',navItemOn3);
}




///////// NAV ITEM 1 ///////////////////////
// Function to switch the rollover style on
function navItemOn(e) {

	nav_item_link.style.color = "#ffffff";
	
	// Now set the mouseout listener
	if(nav_item.addEventListener) {
		nav_item.addEventListener("mouseout", navItemOff, false);	
	} else if (nav_item.attachEvent) { // IE
		nav_item.attachEvent('onmouseout',navItemOff);
	} // End if/else

} // End function

// Function to swtch the rollover style off
function navItemOff(e) {

	nav_item_link.style.color = "#000000";
	
	// remove the mouseout listener
	if(nav_item.removeEventListener) {
		nav_item.removeEventListener("mouseout", navItemOff, false);	
	} else if (nav_item.detachEvent) { // IE
		nav_item.detachEvent('onmouseout',navItemOff);
	} // End if/else

} // End function



///////// NAV ITEM 2 ///////////////////////
// Function to switch the rollover style on
function navItemOn2(e) {

	nav_item_link_2.style.color = "#ffffff";
	
	// Now set the mouseout listener
	if(nav_item_2.addEventListener) {
		nav_item_2.addEventListener("mouseout", navItemOff2, false);	
	} else if (nav_item_2.attachEvent) { // IE
		nav_item_2.attachEvent('onmouseout',navItemOff2);
	} // End if/else

} // End function

// Function to swtch the rollover style off
function navItemOff2(e) {
	
	nav_item_link_2.style.color = "#000000";
	
	// remove the mouseout listener
	if(nav_item_2.removeEventListener) {
		nav_item_2.removeEventListener("mouseout", navItemOff2, false);	
	} else if (nav_item_2.detachEvent) { // IE
		nav_item_2.detachEvent('onmouseout',navItemOff2);
	} // End if/else

} // End function



///////// NAV ITEM 3 ///////////////////////
// Function to switch the rollover style on
function navItemOn3(e) {


	nav_item_link_3.style.color = "#ffffff";
	
	// Now set the mouseout listener
	if(nav_item_3.addEventListener) {
		nav_item_3.addEventListener("mouseout", navItemOff3, false);	
	} else if (nav_item_3.attachEvent) { // IE
		nav_item_3.attachEvent('onmouseout',navItemOff3);
	} // End if/else

} // End function

// Function to swtch the rollover style off
function navItemOff3(e) {
	

	nav_item_link_3.style.color = "#000000";
	
	// remove the mouseout listener
	if(nav_item_3.removeEventListener) {
		nav_item_3.removeEventListener("mouseout", navItemOff3, false);	
	} else if (nav_item_3.detachEvent) { // IE
		nav_item_3.detachEvent('onmouseout',navItemOff3);
	} // End if/else

} // End function