// JavaScript Document
$(document).ready(function(){

$("a#sobre").click(function(){
  $(".contato2").hide("fast",function(){$(".contato1").html("<a href='index.html' style='text-decoration:none;color:#fff'>Voltar <</span>").css("font-size","20px")});
  $(this).addClass("ativo");
  $(".sidebar1").animate({
    width: "20%"
  	},function(){
	  	$(".content").css("width","80%")
  });
  $(".titulo1").animate({
	  fontSize: "45px"});
  $(".titulo2").animate({
		  fontSize: "45px"});
  $(".subtitulo1").animate({
		  fontSize: "20px", marginTop: "-10px"});
  $(".subtitulo2").animate({
		  fontSize: "20px", marginTop: "-10px"});
  $(".conteudo").animate({
		  fontSize: "20px", marginTop: "10px"});
  $(".conteudo").html('<a href="sobre.html" class="ativo"><span>Sobre</span></a>&nbsp;&nbsp;&nbsp;<a href="websites.html">Websites</a>&nbsp;&nbsp;&nbsp;<a href="sistemas.html">Sistemas</a>&nbsp;&nbsp;&nbsp;<a href="/contato.html">Contato</a>').fadeIn();
  $("a.ativo").animate({fontSize: "45px"}).css("color","white").css("font-weight","300").html("<span>Sobre</span>");
  $(".conteudo-main").css("height","70%").load("000sobre.html");
});

$("a#websites").click(function(){
$(".contato2").hide("fast",function(){$(".contato1").html("<a href='index.html' style='text-decoration:none;color:#fff'>Voltar <</span>").css("font-size","20px")});
  $(this).addClass("ativo");
  $(".sidebar1").animate({
    width: "20%"
  	},function(){
	  	$(".content").css("width","80%")
  });
  $(".titulo1").animate({
	  fontSize: "45px"});
  $(".titulo2").animate({
		  fontSize: "45px"});
  $(".subtitulo1").animate({
		  fontSize: "20px", marginTop: "-10px"});
  $(".subtitulo2").animate({
		  fontSize: "20px", marginTop: "-10px"});
  $(".conteudo").animate({
		  fontSize: "20px", marginTop: "10px"});
  $(".conteudo").html('<a href="sobre.html">Sobre</a>&nbsp;&nbsp;&nbsp;<a href="websites.html" class="ativo"><span>Websites</span></a>&nbsp;&nbsp;&nbsp;<a href="sistemas.html">Sistemas</a>&nbsp;&nbsp;&nbsp;<a href="/contato.html">Contato</a>').fadeIn();
  $("a.ativo").animate({fontSize: "45px"}).css("color","white").css("font-weight","300").html("<span>Websites</span>");
  $(".conteudo-main").css("height","70%").load("000websites.html");
});

$("a#sistemas").click(function(){
$(".contato2").hide("fast",function(){$(".contato1").html("<a href='index.html' style='text-decoration:none;color:#fff'>Voltar <</span>").css("font-size","20px")});
  $(this).addClass("ativo");
  $(".sidebar1").animate({
    width: "20%"
  	},function(){
	  	$(".content").css("width","80%")
  });
  $(".titulo1").animate({
	  fontSize: "45px"});
  $(".titulo2").animate({
		  fontSize: "45px"});
  $(".subtitulo1").animate({
		  fontSize: "20px", marginTop: "-10px"});
  $(".subtitulo2").animate({
		  fontSize: "20px", marginTop: "-10px"});
  $(".conteudo").animate({
		  fontSize: "20px", marginTop: "10px"});
  $(".conteudo").html('<a href="sobre.html">Sobre</a>&nbsp;&nbsp;&nbsp;<a href="websites.html">Websites</a>&nbsp;&nbsp;&nbsp;<a href="sistemas.html" class="ativo"><span>Sistemas</span></a>&nbsp;&nbsp;&nbsp;<a href="/contato.html">Contato</a>').fadeIn();
  $("a.ativo").animate({fontSize: "45px"}).css("color","white").css("font-weight","300").html("<span>Sistemas</span>");
  $(".conteudo-main").css("height","70%").load("000sistemas.html");
});

});