$(document).ready(function(){
	$('#nav').find('a').hover(function(){
		
		if($(this).hasClass('active') == false)
			{
				$(this).stop().animate({'backgroundPosition': '50% 0'},300)
			}
	},
	function(){
	if($(this).hasClass('active') == false)
		{
			$(this).stop().animate({'backgroundPosition': '50% -42px'},300)
		}
	})
	.click(function(){ //reset background so hilite doesn't show up on clicking back
		$(this).blur()
		$(this).css('backgroundPosition', '50% -42px')
	})
	//background postion must be set to numeric value for animation
	.each(function(){
		if($(this).hasClass('active') == false)
		{
			$(this).css('backgroundPosition', '50% -42px')
		}
	})
	
	
	
})