/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 04/11/2013, 09:22:41
    Author     : mauricio.junior
*/

/*
    *** IMPORTS ***

 Ex: @import url("estilo.css");

*/
@import url("http://ned.unifenas.br/startead/css/normalize.css");
@import url("http://ned.unifenas.br/startead/css/startead.css");
@import url("http://ned.unifenas.br/startead/css/animate.min.css");
@import url("http://ned.unifenas.br/startead/plugins/magnific-popup.css");

a.disabled { 
        pointer-events: none;
        cursor: default;  
    }
.sombraInferior{
        box-shadow: black -1px 15px 22px -14px;
    }

#progresso{
    max-width: 768px;
    margin: 0 auto;

}



.background{
    max-width: 1024px;
    min-height: 768px;
    background-image: url("img/fundo_licao1.jpg");
    background-repeat: no-repeat;
    margin: 0 auto;
    border-bottom: 1px solid #CCC;
    position: relative;
}

.background-a{
    max-width: 1024px;
    min-height: 768px;
    background-image: url("img/fundo_licao1-a.jpg");
    background-repeat: no-repeat;
    margin: 0 auto;
    border-bottom: 1px solid #CCC;
    position: relative;
}

.background2{
    max-width: 1024px;
    min-height: 768px;
    background-image: url("img/fundo_licao2.jpg");
    background-repeat: no-repeat;
    margin: 0 auto;
    border-bottom: 1px solid #CCC;
    position: relative;
}

.background2-a{
    max-width: 1024px;
    min-height: 768px;
    background-image: url("img/fundo_licao2-a.jpg");
    background-repeat: no-repeat;
    margin: 0 auto;
    border-bottom: 1px solid #CCC;
    position: relative;
}

.background3{
    max-width: 1024px;
    min-height: 768px;
    background-image: url("img/fundo_licao3.jpg");
    background-repeat: no-repeat;
    margin: 0 auto;
    border-bottom: 1px solid #CCC;
    position: relative;
}

.background3-a{
    max-width: 1024px;
    min-height: 768px;
    background-image: url("img/fundo_licao3-a.jpg");
    background-repeat: no-repeat;
    margin: 0 auto;
    border-bottom: 1px solid #CCC;
    position: relative;
}

.background4{
    max-width: 1024px;
    min-height: 768px;
    background-image: url("img/fundo_licao4.jpg");
    background-repeat: no-repeat;
    margin: 0 auto;
    border-bottom: 1px solid #CCC;
    position: relative;
}

.background4-a{
    max-width: 1024px;
    min-height: 768px;
    background-image: url("img/fundo_licao4-a.jpg");
    background-repeat: no-repeat;
    margin: 0 auto;
    border-bottom: 1px solid #CCC;
    position: relative;
}

.background5{
    max-width: 1024px;
    min-height: 768px;
    background-image: url("img/fundo_licao5.jpg");
    background-repeat: no-repeat;
    margin: 0 auto;
    border-bottom: 1px solid #CCC;
    position: relative;
}

.background5-a{
    max-width: 1024px;
    min-height: 768px;
    background-image: url("img/fundo_licao5-a.jpg");
    background-repeat: no-repeat;
    margin: 0 auto;
    border-bottom: 1px solid #CCC;
    position: relative;
}

#content{
    padding-top: 5%;
    margin-left: 20%;
    margin-right: 10%;
}

#footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 5% 2% 2% 0;
    display: none;
}
#footer #btn-voltar{ float: left;margin-left: 10%; }
#footer #btn-avancar{ float: right;margin-right: 30% }
#footer #btn-sair{ float: right;margin-right: 30% }

.span-destaque{
    font-size: 130%;
    letter-spacing: -.04em;
}
.span-pergunta{
    font-size: 130%;
    letter-spacing: -.04em;
    color: #201038;
}

.white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 600px;
    margin: 20px auto;
    -moz-box-shadow:    3px 3px 3px 3px #454545;
    -webkit-box-shadow: 3px 3px 3px 3px #454545;
    box-shadow:         3px 3px 3px 3px #454545;
}

.white-popup-roll {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 600px;
    max-height: 500px;
    margin: 20px auto;
    overflow-y:scroll;
    -moz-box-shadow:    3px 3px 3px 3px #454545;
    -webkit-box-shadow: 3px 3px 3px 3px #454545;
    box-shadow:         3px 3px 3px 3px #454545;
}

.h-link{cursor: pointer;}

h1{
    letter-spacing: -.05em;
    color: #0A4116;
    line-height: 110%
}

h2{
    color: #201038;
    letter-spacing: -.05em;
}

h3{
    color: #201038;
    letter-spacing: -.05em;
}

.div-conjuntos{
    clear: left;

    min-height: 120px;
}
.div-conjuntos img{
    float: left;
    margin-right: 2%;
}
.div-conjuntos p{
    padding: 0.5%;
    min-height: 100px;
}

.div-direita{float:right; display:none; width: 70%;}

.div-esquerda{float:left; display:none; width:80%}
/* CSS para Botão */
.botao{
    display: block;
    width: 150px;
    height: 40px;

    text-align: center;
}
.botao a{ 
    background-color: #3399ff;
    width: 100%; height: 100%;
    display: block;  
    border-radius: 5px;
    position: relative;
    z-index: 2;
    color: #FFF;
    font-weight: bold;
    letter-spacing: -0.04em;
    cursor: default;
}
.botao span{ 
    background-color: #006bd7; 
    display: block; 
    width: 100%;height: 100%; 
    box-shadow: 2px 2px 6px -1px #666;
    border-radius: 5px;
    position: relative;
    bottom: 85%;
    z-index: 1;
}
.botao a:hover{
    bottom: -5%;
}
.botao a:active{
    bottom: -10%;
}


@media (max-width: 768px) {
    .background{
        background-image: url("img/fundo-p.jpg");
    }  
    
    .background2{
        background-image: url("img/fundo-p.jpg");
    } 
    
    .background3{
        background-image: url("img/fundo-p.jpg");
    } 
    
    .background4{
        background-image: url("img/fundo-p.jpg");
    } 
    
    .background5{
        background-image: url("img/fundo-p.jpg");
    } 

    .div-direita{float:none; display:none; width: auto;}
    .div-esquerda{float:none; display:none; width:auto;}


    #content{
        padding-top: 1%;
        margin-left: 1%;
        margin-right: 1%;
        
    }
    h1 {font-size: 22px}

    #footer{
        position:relative;
        
    }

    #footer #btn-voltar{ float: left;margin-left: 2%; }
    #footer #btn-avancar{ float: right;margin-right: 2% }
    #footer #btn-sair{ float: right;margin-right: 2% }
}

@media (min-width: 770px) {

}