jQuery(function(){  
	// for the main nav
	jQuery('#nav_list li a').append('<span class="hover"></span>');  // span whose opacity will animate when mouse hovers.  
   
	jQuery('#nav_list li a').hover(  
    	function() {  
        	jQuery('.hover', this).stop().animate({'opacity': 1}, 250,'easeInSine')
        },  
        function() {  
            jQuery('.hover', this).stop().animate({'opacity': 0}, 500, 'easeOutSine')
     	}
     )
     // for the slide show arrows
	jQuery('#slideshow .ss_arrow').hover(  
    	function() {  
        	jQuery(this).stop().animate({'opacity': 1}, 250,'easeInSine');
        },  
        function() {  
          jQuery(this).stop().animate({'opacity': .8}, 250, 'easeOutSine')
     	}
     )
    // for the manu grid
    jQuery('#manu_grid ul li').append('<span class="hover"></span>');  // span whose opacity will animate when mouse hovers.
	jQuery('#manu_grid ul li').hover(  
    	function() {  
        	jQuery('.hover', this).stop().animate({'opacity': 1}, 250,'easeInSine');
        },  
        function() {  
          jQuery('.hover', this).stop().animate({'opacity': 0}, 1000, 'easeOutSine')
     	}
     )
     
	// for the product grid
    jQuery('#product_grid ul li').append('<span class="hover"></span>');  // span whose opacity will animate when mouse hovers.
	jQuery('#product_grid ul li').hover(  
    	function() {  
        	jQuery('.hover', this).stop().animate({'opacity': 1}, 200,'easeInSine');
        },  
        function() {  
          jQuery('.hover', this).stop().animate({'opacity': 0}, 1000, 'easeOutSine')
     	}
     )         
});