	window.addEvent('domready', function() 
	{
		var accordion = new Accordion('h3.atStart', 'div.atStart', 
			{
				opacity: false,
				onActive: function(toggler, element)
				{
					toggler.setStyle('color', '#f47321');
					//sets the color of a hovered navigation option (dark gray color), need to change below as well
					toggler.setStyle('background-color', '#002a5c');
				},
	 
				onBackground: function(toggler, element)
				{
					toggler.setStyle('color', 'white');
					//sets the color of a non-hovered navigation option (teal color), need to cange below as well
					toggler.setStyle('background-color', '#002a5c');
					
				},
				
				alwaysHide: true,
				display: -1
		
			}, $('navigation')
		); //end var accordian declaration
	
		//This will get all the h3 tags in the navigation element, and loop through and set each one's initial styles and events
		$$('#navigation h3').each(function(item)
		{
		
			item.addEvent('mouseenter', function(){
				//what happens when the mouseover fires (equiv to mouseover="") 
				item.setStyle('color', '#f47321');
				item.setStyle('background-color', '#002a5c');
			});
			item.addEvent('mouseleave', function(){
				//what happens when the mouseout fires (equiv to mouseout="")
				item.setStyle('color', 'white');
				item.setStyle('background-color', '#002a5c');
			});
		}
		);	
	 }
	);
