$(document).ready(function() {
    // top blue nav
    $('#primaryNav a').each(
        function(index, ele){
            hoverColor(index, ele, '#b88e10' );
        }
    );
    // bottom blue nav
    $('#catchNav a').each(
        function(index, ele){
            hoverColor(index, ele, '#b88e10' );
        }
    );
    //$('a.goldHover').each( function(index, ele){ $(ele).css('font-size', '40px');});
});
function hoverColor(index, ele, hoverColor ){
    // function requires UI effects core
    // this class replaces the default CSS hover to that the color remains constaint and then it can be animated
    $(ele).addClass("jQueryHover");
    var myColor = '';
    // get the current color:
    myColor = $(ele).css('color'),
    $(ele).hover(
        function(){ 
            $(this).animate({'color': hoverColor/*'#b88e10'*/}, 350); 
            //alert("Color: ");
        },
        function(){ 
            $(this).animate({'color': myColor/*'#FFFFFF'*/}, 350);
        }
    );
}