$(document).ready(function(){  
      
        $("ul.subnav_1").parent().append(); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)  
        $("ul.subnav_2").parent().append();
        $("ul.subnav_3").parent().append();
        $("ul.topnav li a").mouseover(function() { //When trigger is hovered...
      
            //Following events are applied to the subnav itself (moving subnav up and down)  
            $(this).parent().find("ul.subnav_1").slideDown('fast').show(); //Drop down the subnav on hover 
            
            $(this).parent().find("ul.subnav_2").slideDown('fast').show(); //Drop down the subnav on hover 
            
            $(this).parent().find("ul.subnav_3").slideDown('fast').show(); //Drop down the subnav on hover  
      
            $(this).parent().hover(function() {  
            }, function(){  
                $(this).parent().find("ul.subnav_1").css({'display' : 'none'}); //When the mouse hovers out of the subnav, move it back up  
            });  
            
            $(this).parent().hover(function() {  
            }, function(){  
                $(this).parent().find("ul.subnav_2").css({'display' : 'none'}); //When the mouse hovers out of the subnav, move it back up  
            });  
            
            $(this).parent().hover(function() {  
            }, function(){  
                $(this).parent().find("ul.subnav_3").css({'display' : 'none'}); //When the mouse hovers out of the subnav, move it back up  
            });  
      
      
            //Following events are applied to the trigger (Hover events for the trigger)  
            }).hover(function() {  
                $(this).addClass("subhover"); //On hover over, add class "subhover"  
            }, function(){  //On Hover Out  
                $(this).removeClass("subhover"); //On hover out, remove class "subhover"  
							}); 

						$('.topnav li.light').hover(function(){
							$('.topnav li.light a img.zoom').stop().animate({width: "203px", height: "47px", left: "-12px", right: "0", top: "-10px"}, 200);
              $('.topnav li.light span').stop().animate({width: "203px", height: "47px", left: "-12px", right: "-10px", top: "-10px"}, 200);
            
							},
							function() {
							$('.topnav li.light a img.zoom').stop().animate({width: "163px", height: "38px",  left: "0", right: "0", top: "0"}, 100);
              $('.topnav li.light span').stop().animate({width: "163px", height: "25px",  left: "0", right: "0", top: "0"}, 100);
             
   
							}
						);			
      
						$('.topnav li.gri').hover(function(){
							$('.topnav li.gri a img.zoom').stop().animate({width: "189px", height: "77px", left: "0", top: "-10px"}, 200);
              $('.topnav li.gri span ').stop().animate({width: "189px", height: "77px", left: "0", top: "-15px"}, 200);

							},
							function() {
							$('.topnav li.gri a img.zoom').stop().animate({width: "152px", height: "62px", left: "0", top: "0"}, 100);
              $('.topnav li.gri span ').stop().animate({width: "152px", height: "25px", left: "0", top: "0"}, 100);

							}
						);	
						
						$('.topnav li.safety').hover(function(){
							$('.topnav li.safety a img.zoom').stop().animate({width: "113px", height: "97px", right: "12px", top: "-20px"}, 200);
              $('.topnav li.safety span ').stop().animate({width: "115px", height: "97px", right: "0", top: "-20px"}, 200);

							},
							function() {
							$('.topnav li.safety a img.zoom').stop().animate({width: "91px", height: "78px", right: "0", top: "0"}, 100);
              $('.topnav li.safety span ').stop().animate({width: "115px", height: "25px", right: "0", top: "0"}, 100);

							}
						);	
});