//When the DOM is ready
//This is to add animation functionality to navigation menu. 
$(function() {
    $("nav a").append("<span>&nbsp</span>");
    
 $(document).ready(function() {
	$("nav ul li:nth-child(2) a").css ("border-color", "#ff5523");
        $("nav ul li:nth-child(2) a span").css("border-color", "#ff5523");
        
        $("nav ul li:nth-child(3) a").css ("border-color", "#efbf19");
        $("nav ul li:nth-child(3) a span").css("border-color", "#efbf19");
        
        $("nav ul li:nth-child(4) a").css ("border-color", "#93c83d");
        $("nav ul li:nth-child(4) a span").css("border-color", "#93c83d");
        
        $("nav ul li:nth-child(5) a").css ("border-color", "#3f4da0");
        $("nav ul li:nth-child(5) a span").css("border-color", "#3f4da0");
        
        $("nav ul li:nth-child(6) a").css ("border-color", "#8252a2");
        $("nav ul li:nth-child(6) a span").css("border-color", "#8252a2");
	
});  
    
    $("nav a").hover(function(e){
        
        $(this)
            .hoverFlow(e.type, {width:180}, 100)
            .css('overflow', 'visible')
            .find('span')
            .hoverFlow(e.type, {width:5}, 100)
            
    }, function(e) {
        
       $(this)
            .hoverFlow(e.type, {width:168}, 100)
            .css('overflow', 'visible')
            .find('span')
            .hoverFlow(e.type, {width:15}, 100) 
    });
})