@charset "utf-8";
/* CSS Document */

/* ------------------------------------------------- */

#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0 0 0 14px;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  margin: 0 .5em 0 0;
}

#tabs a {
  position: relative;
  background: #278786;
  padding: 0.7em 3em;
  float: left;
  text-decoration: none;
  color: #fff;
  font-size: 95%;
  font-weight: 600;
  /* text-shadow: 0 1px 0 rgba(255,255,255,.8); */
  -webkit-border-radius: 8px 0 0 0;
  -moz-border-radius: 8px 0 0 0;
  border-radius: 8px 0 0 0;
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,.4);
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4);
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after {
  background: #34a2a1;
}

#tabs a:focus {
  outline: 0;
}

#tabs a::after {
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -.5em;
  bottom: 0;
  width: 1em;
  background: #278786;
  -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  -webkit-transform: skew(10deg);
  -moz-transform: skew(10deg);
  -ms-transform: skew(10deg);
  -o-transform: skew(10deg);
  transform: skew(10deg);
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  border-radius: 0 5px 0 0;
}

#tabs .realce a {
  background: #165a59;
  z-index: 3;
}

#tabs .realce a::after {
  background: #165a59;
  z-index: 3;
}

/* ------------------------------------------------- */

#content {

  background: #fff;
  /*background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  background-image: -webkit-linear-gradient(top, #fff, #ddd);
  background-image: -moz-linear-gradient(top, #fff, #ddd);
  background-image: -ms-linear-gradient(top, #fff, #ddd);
  background-image: -o-linear-gradient(top, #fff, #ddd);
  background-image: linear-gradient(to bottom, #fff, #ddd); */

	width: 100%;
	display: table;
	border: 1px solid #e2e2e2;
	/*padding-bottom: 8em;
	padding-bottom: 3em;*/
	margin-bottom: 3em;

	/*padding: 3em 2em; */
	/* padding: 0em 2em 2em 2em; */
    height: 100%;
    position: relative;
    z-index: 2;
	border-top:13px solid #165a59;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    -moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------- */

p{
	font-size: 90%;
}

h2{
	font-size: 105%;
	font-weight: bold;
	margin-bottom: 40px;
}

.negativo{
	color: #FFF;
}

.positivo{
	color: #FFF;
}

.bg_green{
	background-color: #318F8E;
	color: #fff;
}

.highlight{
	color: #f60;
}

#tab1 .left, #tab2 .left, #tab3 .left{
	/* background: blue; */
	/* margin: 0 auto; */
	float: left;
}

/* VIS�O GERAL */

#mediaAnual{
	width: 45%;
	padding: 20px;
	text-align: justify;
}

#mediaAnual #spanMedia{
	font-size: 800%;
	letter-spacing: -2px;
}

.ranking{
	width: 44%;
	padding: 20px;
	color: #fff;
	margin-left: 15px;
}

#visaoGeralRankingUp {
	/* display: none; */
	height: 290px;
	background-image: url(../img/bg_ranking_up.png);
    background-repeat: no-repeat;
    background-position: top center;
}

#visaoGeralRankingUp div{
	margin-top: 50px;
	height: 60px;
	margin-left: 1px;	
	background-color: #318F8E;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;	
}


#visaoGeralRankingUp  span.rankPerc {
	margin: 110px 20px 0 20px;
	display: block;
	font-size: 57px;
	float: left;
	min-width: 91px;
}

#visaoGeralRankingUp > p{	
	font-size: 105%;
	line-height: 1.2em;
	margin-right: 20px;
	margin-top: 120px;
}

#visaoGeralRankingUp div span:not(.anoSelecionado)  {
	margin: 10px 20px 0 15px;
	display: block;
	font-size: 250%;
	float: left;
}

#visaoGeralRankingUp  div p{
	font-size: 90%;	
	margin-right: 10px;
	padding-top:20px;
}

#visaoGeralRankingDown {
	display: none;
	padding-left: 20px;
	height: 290px;
	background-image: url(../img/bg_ranking_down.png);
    background-repeat: no-repeat;
    background-position: bottom center;
	margin-bottom: 50px;
}

#visaoGeralRankingDown div{
	height: 60px;
	
	background-color: #318F8E;	
	margin-top:21px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

#visaoGeralRankingDown div span:not(.anoSelecionado){
	margin: 10px 20px 0 15px;
	display: block;
	font-size: 250%;
	float: left;
}

#visaoGeralRankingDown div p{
	font-size: 90%;	
	margin-right: 10px;
	padding-top:21px;
}

#visaoGeralRankingDown span:nth-child(2){
	margin: 50px 11px 0 10px;
	display: block;
	font-size: 57px;
	float: left;
}

#visaoGeralRankingDown p:nth-child(3){
	font-size: 105%;
	margin-right: 10px;
	margin-top: 60px;
}


#graficoParticipacao{
	width: 45%;
	padding: 0px 20px 0 20px;
	text-align: justify;
}

#graficoParticipacao h2{
	margin-bottom: 50px;
}

#graficoParticipacao h3{
	margin-top: 50px;
}

#graficoParticipacao table{
	font-size: 90%;
	margin-bottom: 20px;
	border-collapse: separate;
}

#graficoParticipacao table tr:first-child td:first-child { border-top-left-radius: 10px; }
#graficoParticipacao table tr:first-child td:last-child { border-top-right-radius: 10px; }
#graficoParticipacao table tr:last-child td:first-child { border-bottom-left-radius: 10px; }
#graficoParticipacao table tr:last-child td:last-child { border-bottom-right-radius: 10px; }

#rankingPorRegioes{
	width: 44%;
	padding: 20px;
	padding-left: 35px;
}

#graficoParticipacao table tr  th{
	vertical-align: middle;
	text-align: center;
	padding: 16px;
	line-height: 1.3em;
	border: 1px solid #318F8E;
}

#graficoParticipacao span.number{
	font-size: 30px;
}

#graficoParticipacao table tr td{
	text-align: center;
	padding: 8px;
	border-right: 1px solid #318F8E;
}

#rankingPorRegioes span {
	color: #fff;
	font-size: 250%;
}

#rankingPorRegioes table{
	margin-top: 20px;
	font-size: 80%;
}

#rankingPorRegioes table tr td {
	text-align: center;
	padding: 8px;
	border: 1px solid #fff;
}

#rankingPorRegioes table tr td.textoRegioes {
	line-height: 1.4em;
}



.tdDia{
	border: 1px solid #318F8E;
}

#rankingPorRegioes img{
	margin-bottom: 5px;
}

#quartis{
	margin-top: 40px;
	padding: 0px 20px 0 20px;
	height: 100%;
	width: 45%;
}

#quartis h2{
	margin-bottom: 10px;
}

/*  DIAGN�STICO / �REAS DE CONHECIMENTO */

#graficoAC1{
	margin-left: 25px;
	height: 500px;
	width: 45%;
	padding: 30px 0px 20px 0px;
	float:left;
}


#graficoAC1 table tr td:first-child{
	background-repeat: no-repeat;
    background-position: center center;
	height: 50px;
	width: 140px;
}

#graficoAC1 table tr td:last-child{
	font-size: 80%;
}

#graficoAC1 table tr td#bg_CH {
	background-image: url(../img/icone_CH.png);
}

#graficoAC1 table tr td#bg_LC {
	background-image: url(../img/icone_LC.png);
}

#graficoAC1 table tr td#bg_MAT {
	background-image: url(../img/icone_MAT.png);
}

#graficoAC1 table tr td#bg_RED {
	background-image: url(../img/icone_RED.png);
}

#graficoAC1 table tr td#bg_CN {
	background-image: url(../img/icone_CN.png);
}

#graficoAC1 table tr td{
	border-top: 1px solid #fff;
	padding: 10px;
	vertical-align: middle;
	font-size: 90%;
}

#graficoAC1 table tr td.AC1{
	font-size: 160%;
}


#graficoAC2{
	
    height: 500px;
    left: 368px;
    position: absolute;
    top: 140px;
    width: 700px;
}

#graficoAC3{
	display: none;
	margin: 25px 25px;
	height: 300px;
	width: 91%;
	border: 1px solid #318F8E;
	padding: 20px;
}


/*  DIAGN�STICO / COMPET�NCIAS */

#textoCompetencia{
	margin-left: 10px;
	text-align: justify;
	width: 26%;
	padding: 20px;
	padding-bottom: 0;
	float:left;
}
#textoCompetencia img{
	margin: 0 15px 10px 0;
	float: left;
}

#textoCompetencia span#mediaAreaConhecimento{
	font-size: 140%;
}
#textoCompetenciaQuestoes{
	margin-left: 10px;
	text-align: justify;
	width: 40%;
	//padding: 20px;
	padding-bottom: 0;
	float:left;
}
#textoCompetenciaQuestoes img{
	margin: 0 15px 10px 0;
	//float: left;
}

#textoCompetenciaQuestoes span#mediaAreaConhecimento{
	font-size: 140%;
}


#graficoBarraAreaConhecimentoDiagnostic{
	padding: 90px 0px 0px 20px;
	margin-left: 5px;
	width: 68%;
	height: 400px;
}

#graficoPizzaAreaConhecimentoDiagnostico{
	width: 50%;
	float:left;
}

.greenBar {		
	width: 300px;
	text-align: left;
	letter-spacing: -1px;
	/* padding: 0 10px;	*/
	padding-right: 5px;
}

.greenBar  p{
	font-weight: normal;
	font-size: 0.8em;	
}

.margin2{
	font-size: 10px;
}

#graficoPizzaCompetencia{
	padding: 20px;
	width: 45%;
	height: 450px;
}

#diagnosticoRanking {
	margin-top: 25px;
}


#diagnosticoRankingUp {
	/* display: none; */
	padding-top: 100px;
	background-image: url(../img/bg_ranking_up.png);
    background-repeat: no-repeat;
    background-position: 20px 80px;
	float:left;
}

#diagnosticoRankingUp div{
	margin-top: 62px;
	height: 60px;
	background-color: #318F8E;
}

#diagnosticoRankingUp  > span {
	margin: 90px 20px 0 15px;
	display: block;
	font-size: 57px;
	float: left;
	 min-width: 87px;
}

#diagnosticoRankingUp > p{
	font-size: 70%;
	margin-right: 10px;
	margin-top: 100px;
}

#diagnosticoRankingUp div span {
	margin: 10px 20px 0 15px;
	display: block;
	font-size: 250%;
	float: left;
}

#diagnosticoRankingUp  div p{
	font-size: 80%;
	margin-top: 15px;
	margin-right: 10px;
	padding-top: 11px;
}

#diagnosticoRankingDown {
	display: none;
	padding-left: 20px;
	height: 270px;
	padding-top: 100px;
	background-image: url(../img/bg_ranking_down.png);
    background-repeat: no-repeat;
    background-position: bottom center;
	float:left;
}

#diagnosticoRankingDown div{
	height: 60px;
	background-color: #318F8E;
	margin-top: -13px;
}

#diagnosticoRankingDown div span{
	margin: 10px 20px 0 15px;
	display: block;
	font-size: 250%;
	float: left;
}

#diagnosticoRankingDown div p{
	font-size: 80%;
	margin-top: 15px;
	margin-right: 10px;
	padding-top:12px;
}

#diagnosticoRankingDown span:nth-child(2){
	margin: 30px 5px 0 4px;
	display: block;
	font-size: 57px;
	float: left;
}

#diagnosticoRankingDown p:nth-child(3){
	font-size: 70%;
	margin-right: 10px;
	margin-top: 36px;
}

.cabecalhoQuestoes {
    background-color: #2f8483;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
    color: #FFF;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
}

.menuAreaConhecimentoQuestoes {    
    font-weight: bold;
    font-size: 16px;
    color: #318F8E;
    padding: 16px 5px 16px 5px;
    text-align: center;
    border-radius: 5px;
    margin-top: 16px;
    margin-right: 10px;
	margin-bottom: 15px;
}

#cabecalhoFraficoDistribuicaoAproveitamentoQuestoes {
    background-color: #2f8483;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
    color: #FFF;
    padding: 15px 0 15px 0;
    text-align: center;
    border-radius: 5px;
    width:100%;
    position: relative;
    float: right;
    //margin-top: 940px;
}

.alinhaMeio {
    vertical-align: middle;
}

.cursorPointer {
    cursor: pointer;
}

.cursorPointer:hover {
    color: #f60;
}

.alteraCor{
	color: #f60;
}
