/* 
    Document   : styles.css
    Created on : 29/08/2011, 10:11:11
    Author     : paulotrajano
    Description:
        Folha de estilo comum para todas as páginas do projeto.
*/

@import 'https://fonts.googleapis.com/css?family=Roboto+Slab:400,500';

/*** ESTILOS PARA INFOGRÁFICO E EXPLICAÇÃO DA CLASSIFICAÇÃO PARCIAL DE ISENÇÃO ***/

@media screen and (max-width: 400px) { 
    .notasDisciplina{
        width: 100% !important;
        clear: both;
        display: block;
        padding: 2%;
        margin-bottom: 1em;

    }
}

.notasDisciplina{
    width: 32%;
    float: left;
    padding: 2%;
    /*margin-left: -1em;*/

}
.notasDisciplina.portugues{
    background-color: rgba(80, 161, 216, 0.2);
    margin-right: 2%;
}

.notasDisciplina.matematica{
    background-color: rgba(241, 197, 14, 0.2);
    margin-right: 2%;
}

.notasDisciplina.geral{
    background-color: rgba(26, 187, 154, 0.2);    
}

.notasDisciplina-cabecalho{
    width: 100%;
    height: auto;
    display: block;

    padding: 3%;
    font-family: 'Roboto Slab', serif;
    font-size: 1.5em;
    font-weight: 500;
    text-align: center;
    color: white;

}

.notasDisciplina-cabecalho.portugues{
    background-color: rgba(80, 161, 216, 1);
    color: #fff;
}

.notasDisciplina-cabecalho.matematica{
    background-color: rgba(241, 197, 14, 1);
}

.notasDisciplina-cabecalho.geral{
    background-color: rgba(26, 187, 154, 1);
}

.ano{
    width: 4.5em;
    height: 4em;
    /*border-radius: 50%;*/
    text-align: center;
    font-weight: 400;
    float: left;
    margin-right: 1.32%;
    /*border: 1px solid red;*/        

}

.media-anos{
    width: 7em;
    height: 6em;
    text-align: center;
    font-weight: 500;
    margin: 0 auto;

    clear: left;
    /*margin-right: 0.3%;*/
    /*border: 1px solid red;*/


}
.ano.portugues, 
.media-anos.portugues {
    height: 1.7em;
    /*border: 1px solid green;*/
    color: #fff;
    background-color: rgba(80, 161, 216, 0.2);
    color: rgba(56, 132, 182, 1);
    line-height: 1.6em;
    padding: 3%;
    font-size: 80%;
    display: block;
    width: 100%;
}

.ano.matematica, 
.media-anos.matematica {
    height: 1.7em;
    /*border: 1px solid green;*/
    color: #fff;
    background-color: rgba(241, 197, 14, 0.3);
    color: rgba(169, 137, 7, 1);
    line-height: 1.6em;
    padding: 3%;
    font-size: 80%;
    display: block;
    width: 100%;
}

.ano.geral, 
.media-anos.geral {
    height: 1.7em;
    /*border: 1px solid green;*/
    color: #fff;
    background-color: rgba(26, 187, 154, 0.3);
    color: rgba(14, 97, 80, 1);
    line-height: 1.6em;
    padding: 0 10% 0 10%;
    font-size: 80%;
    display: block;
    width: 100%;
    margin-right: 2em;

}

.media-anos.portugues,
.media-anos.matematica,
.media-anos.geral{
    background-color: transparent;
    padding-top: 0.5em;
}

.nota, 
.media{
    color: #666666;
    font-weight: 500;
    font-size: 180%;

}
.media{
    color: #444;
    background-color: rgba(80, 161, 216, 0.2);
    padding: 20%;
    border-radius: 50%;      
    font-size: 250%;



}
.media.portugues{
    background-color: rgba(80, 161, 216, 0.2);
}

.media.matematica{
    background-color: rgba(241, 197, 14, 0.2);
}

.media.geral{
    background-color: rgba(26, 187, 154, 0.2);
    border-radius: 50%;
    /*border: 1px solid red;*/    
    padding: 40% 20% 15% 20%;

}

.instrucoes-passos{
    clear: both;
    margin-bottom: 2%;
    min-height: 2.5em;
    height: auto;   

}

.instrucoes-passos-numero{
    width: 1.8em;
    height: 1.8em;
    background-color: rgba(26, 187, 154, 1);
    padding: 0.25em;
    border-radius: 50%;      
    text-align: center;
    font-size: 200%;   
    font-weight: 500;
    color: #fff;
    font-family: 'Roboto Slab', serif;
    float: left;
}

.instrucoes-passos-numero.menor{
    width: 1.4em;
    height: 1.4em;
    padding: 0.05em;
    border-radius: 50%;      
    font-size: 140%;   
    font-weight: 500;
}

.instrucoes-passos-descricao{
    width: 85%;
    text-align: left;
    font-size: 100%;   
    float: left;
    margin-left: 3%;
    /*height: 5em;*/

}

.instrucoes-passos-descricao.maior{
    height: 6em;
}


@media only screen and (max-device-width: 500px){
    .instrucoes-passos-descricao.maior{
        height: 7em;
    }
}