$(document).ready(function()
{
   //$("#p").hide();
   
   	$("#p1").hover(
		function(){$("#d1").stop(); $("#d1").animate( { backgroundColor: "#0079ba" }, 100 ).animate( { width:"60px"}, 1000);},
		function(){$("#d1").stop(); $("#d1").animate( {  width:"0px"}, 1000 ).animate( { backgroundColor: "#FFFFFF"  }, 1000);}
	);
	
	$("#p2").hover(
		function(){$("#d2").stop(); $("#d2").animate( { backgroundColor: "#0079ba" }, 100 ).animate( { width:"155px"}, 2500);},
		function(){$("#d2").stop(); $("#d2").animate( {  width:"0px"}, 1800 ).animate( { backgroundColor: "#FFFFFF"  }, 1000);}
	);
	
	$("#p3").hover(
		function(){$("#d3").stop();$("#d3").animate( { backgroundColor: "#0079ba" }, 100 ).animate( { width:"135px"}, 2150);},
		function(){$("#d3").stop();$("#d3").animate( {  width:"0px"}, 1500 ).animate( { backgroundColor: "#FFFFFF"  }, 1000);}
	);
	
	$("#p4").hover(
		function(){$("#d4").stop();$("#d4").animate( { backgroundColor: "#0079ba" }, 100 ).animate( { width:"40px"}, 800);},
		function(){$("#d4").stop();$("#d4").animate( {  width:"0px"}, 1000 ).animate( { backgroundColor: "#FFFFFF"  }, 1000);}
	);
	
	$("#p5").hover(
		function(){$("#d5").animate( { backgroundColor: "#0079ba" }, 100 ).animate( { width:"120px"}, 2000);},
		function(){$("#d5").stop();$("#d5").animate( {  width:"0px"}, 1500 ).animate( { backgroundColor: "#FFFFFF"  }, 1000);}
	);
});