<link rel="stylesheet" href="/css/styles.css" type="text/css" media="all"/>  
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>  
<script type="text/javascript" src="/js/jquery.delay.js"></script>  
<script type="text/javascript" src="/js/jquery.backgroundPosition.js"></script>  
<script>  
  $(document).ready(function() {  
  $("#menu, #white_line").css("opacity","0");  
  $("#menu").stop().animate({  
  opacity: 0.9,  
  marginLeft: '50px'  
  }, 2400, 'easeInSine');  
  $('#white_line').stop().animate(  
  {opacity: 0.7},  
  {duration:2400,easing: 'easeInSine'  
  })  
   
  $('#menu span').mouseenter(function(element) {  
  $("#menu ul li").css("opacity","1");  
  $('#white_line').stop().animate(  
  {top: 40, height:290},  
  {duration:500,easing: 'easeOutBack'}  
  )  
  $("#menu ul li").eachDelay(function(){  
  $(this).stop().animate({  
  opacity: 1,  
  marginLeft: '0px',  
  backgroundPosition: "150px 0px"  
  }, 600, 'easeOutBack');  
  }, 30);  
  });  
   
  $('#menu').mouseleave(function(element) {  
  $("#menu ul li").eachDelay(function(index){  
  $(this).stop().animate({  
  opacity: 0,  
  marginLeft: '-200px',  
  backgroundPosition: "150px 0px"  
  }, 600, 'linear');  
  if(index == $("#menu ul li").size() -1){  
  $('#white_line').stop().animate(  
  {top: 79, height:1},  
  {duration:600,easing: 'easeInBack'  
  })  
  }  
  }, 30);  
   
   
  });  
   
   
  $('#menu ul li').mouseenter(function(element) {  
  $('#menu ul li').not(this).stop().animate({  
  backgroundPosition: "150px 0px",  
  opacity: '0.5'  
  }, 500, 'linear');  
  $(this).stop().animate({  
  backgroundPosition: "300px 0px",  
  opacity: '1'  
  }, 600, 'easeOutBounce');  
  $(this).find('a').css("color","#916153");  
  });  
   
  $('#menu ul li').mouseleave(function(element) {  
  $(this).stop().animate({  
  backgroundPosition: "150px 0px",  
  opacity: '1'  
  }, 200, 'linear');  
  $(this).find('a').css("color","#000");  
  });  
   
   
   
   
  });  
</script>