$(function(){
		
			$("#dos-button").css({
				opacity: 0.3
			});
			$("#tres-button").css({
				opacity: 0.3
			});
			$("#cuatro-button").css({
				opacity: 0.3
			});
			$("#cinco-button").css({
				opacity: 0.3
			});
			$("#seis-button").css({
				opacity: 0.3
			});
			$("#siete-button").css({
				opacity: 0.3
			});
			$("#ocho-button").css({
				opacity: 0.3
			});
			$("#nueve-button").css({
				opacity: 0.3
			});
			$("#diez-button").css({
				opacity: 0.3
			});
		
			$("#nav div.button").click(function(){
				
				$clicked = $(this);
				
				/* if the button is not already "transformed" AND is not animated*/
				if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
					
					$clicked.animate({
						opacity: 1
						
					}, 600 );
					
					/* each button div MUST have a "xx-button" and the target div must have an id "xx" */
					var idToLoad = $clicked.attr("id").split('-');
					
					/*we search trough the content for the visible div and we fade it out*/
					$(".submenucont").find("div:visible").fadeOut("slow", function(){
						/*once the fade out is completed, we start to fade in the right div*/
						$(this).parent().find("#"+idToLoad[0]).fadeIn();
					})
				}
				
				/*we reset the other buttons to default style*/


$(".button").animate({
opacity: 0.3

}, 600 );
$clicked.animate({
opacity: 1

}, 600 );
});
});


	
		$(function(){
		
			$("#once-button").css({
				opacity: 0.3
			});
			$("#doce-button").css({
				opacity: 0.3
			});
			$("#trece-button").css({
				opacity: 0.3
			});
			$("#catorce-button").css({
				opacity: 0.3
			});
	
			$("#nav2 div.button").click(function(){
				
				$clicked = $(this);
				
				/* if the button is not already "transformed" AND is not animated*/
				if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
					
					$clicked.animate({
						opacity: 1
						
					}, 600 );
					
					/* each button div MUST have a "xx-button" and the target div must have an id "xx" */
					var idToLoad = $clicked.attr("id").split('-');
					
					/*we search trough the content for the visible div and we fade it out*/
					$(".submenucont").find("div:visible").fadeOut("slow", function(){
						/*once the fade out is completed, we start to fade in the right div*/
						$(this).parent().find("#"+idToLoad[0]).fadeIn();
					})
				}
				
				/*we reset the other buttons to default style*/


$(".button").animate({
opacity: 0.3

}, 600 );
$clicked.animate({
opacity: 1

}, 600 );
});
});

		$(function(){
		
			$("#quince-button").css({
				opacity: 0.3
			});
			$("#dieciseis-button").css({
				opacity: 0.3
			});
			$("#diecisiete-button").css({
				opacity: 0.3
			});
			$("#dieciocho-button").css({
				opacity: 0.3
			});
			$("#diecinueve-button").css({
				opacity: 0.3
			});			
			$("#nav3 div.button").click(function(){
				
				$clicked = $(this);
				
				/* if the button is not already "transformed" AND is not animated*/
				if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
					
					$clicked.animate({
						opacity: 1
						
					}, 600 );
					
					/* each button div MUST have a "xx-button" and the target div must have an id "xx" */
					var idToLoad = $clicked.attr("id").split('-');
					
					/*we search trough the content for the visible div and we fade it out*/
					$(".submenucont").find("div:visible").fadeOut("slow", function(){
						/*once the fade out is completed, we start to fade in the right div*/
						$(this).parent().find("#"+idToLoad[0]).fadeIn();
					})
				}
				
				/*we reset the other buttons to default style*/


$(".button").animate({
opacity: 0.3

}, 600 );
$clicked.animate({
opacity: 1

}, 600 );
});
});

	$(function(){
		
			$("#veinte-button").css({
				opacity: 0.3
			});
			$("#veintiuno-button").css({
				opacity: 0.3
			});
			$("#veintidos-button").css({
				opacity: 0.3
			});
			$("#veintitres-button").css({
				opacity: 0.3
			});
			$("#veinticuatro-button").css({
				opacity: 0.3
			});			
			$("#nav4 div.button").click(function(){
				
				$clicked = $(this);
				
				/* if the button is not already "transformed" AND is not animated*/
				if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
					
					$clicked.animate({
						opacity: 1
						
					}, 600 );
					
					/* each button div MUST have a "xx-button" and the target div must have an id "xx" */
					var idToLoad = $clicked.attr("id").split('-');
					
					/*we search trough the content for the visible div and we fade it out*/
					$(".submenucont").find("div:visible").fadeOut("slow", function(){
						/*once the fade out is completed, we start to fade in the right div*/
						$(this).parent().find("#"+idToLoad[0]).fadeIn();
					})
				}
				
				/*we reset the other buttons to default style*/


$(".button").animate({
opacity: 0.3

}, 600 );
$clicked.animate({
opacity: 1

}, 600 );
});
});