html, body { 
    height: 100%;
    width: 100%;
}

#layout-content {
    height: 100%;
    width: 100%;
}


#layout, #layout * { 
    padding: 0;
    margin: 0;
    line-height: 1;
}

#layout {
    height: 100%;
    width: 100%;
}

#separador {
    height: 65px;
    height: 0vh;
}

#relogio-container {
    padding-top: 0%;
    left: 15%;  /* p/ ficar centralizada TODO: fazer um método melhor */
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

#relogio {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#barra-lateral {
    position: relative;
    z-index: 2;
    float: right;
    width: 30%;
    width: 30vw;
    height: 80.1vh;
    overflow: hidden;
    padding-bottom: 0.5%;

}
#slides-container {
    position: relative;
    width: 68.5%;
    width: 68.5vw;
    height: 80.1%;
    height: 80.1vh;
    z-index: 0;
    overflow: hidden;
    margin-top: 0vh;
}


/* 
 * Senha Atual - Ultima senha chamada
 */
#mensagem {
    padding-bottom: 20px;
    padding-left: 20px;
    text-align: center;
}

#mensagem span {
    padding: 10px 29px;
    display: inline-block;
}

#senha {
    font-weight: bold;
    text-align: center;
}

/* local */

#local {
    text-align: center;
    margin: 0 auto;
}

#local-numero {    
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
}

/*
 * Ultimas senhas chamadas
 */
#historico {
    height: 20%;
    width: 100%;
    position: absolute;
    bottom: 0;
}

#historico .senhas {
    padding-top: 10px;
    padding-bottom: 10px;
    overflow: hidden;
    height: 100%;
}

#historico .senhas div.senha-chamada {
    text-align: center;
    display: inline-block;
}

#historico .senhas div.senha-chamada div.senha { 
    font-weight: bold; 
    text-align: center; 
}

#historico .senhas div.senha-chamada div.local {
    text-align: center;
}


/* cores - atendimento normal */
#layout.normal { background-color: #00FF99; }
#layout.normal #mensagem span { color: #000; }
#layout.normal #senha span { color: #00029; font-size: 12em;}
#layout.normal #local span { color: #000; }
#layout.normal #local-numero span { color: #000; }
#layout.normal #historico .senhas { background: rgba(0, 0, 0, .4); }
#layout.normal #historico .senhas * { color: #000; }

/* cores - atendimento prioritario */
#layout.prioridade { background-color:#00FF99; }
#layout.prioridade #senha-container span { color: #ed3237;}
#layout.prioridade #senha span { color: #ed3237; font-size: 13em;}
#layout.prioridade #historico .senhas { background-color: rgba(0, 0, 0, .4); }
#layout.prioridade #historico .senhas * { color: #333; }

/* cores - atendimento prioritario quando no historico */
#historico .senhas .prioridade * { color: #ed3237 !important; }

/* fonts */

#mensagem span {
    font-size: 3.0em; /* gambiarra pra funcionar em navegadores que não suportem css3 */
    font-size: 6vmin;
}

#senha span {
    font-size: 5.0em; /* gambiarra pra funcionar em navegadores que não suportem css3 */
    font-size: 14vmin;
}

#local span {
    font-size: 4.0em; /* gambiarra pra funcionar em navegadores que não suportem css3 */
    font-size: 8vmin;
}

#local-numero span {
    font-size: 5.0em; /* gambiarra pra funcionar em navegadores que não suportem css3 */
    font-size: 14vmin;
}

.senha-chamada .senha span {
    font-size: 4.5em; /* gambiarra pra funcionar em navegadores que não suportem css3 */
    font-size: 13vmin;
}

.senha-chamada .local span {
    font-size: 3.8em; /* gambiarra pra funcionar em navegadores que não suportem css3 */
    font-size: 5vmin;
}


/* 800x600 */
@media only screen and (max-width: 800px) {

    #barra-lateral {
        width: 100%;
        height: 100%;
    }


    #historico {
        display: none;
    }

    #slides-container {
        display: none;
    }

    #senha-container {
        float: none;
    }

    #relogio-container {
        display: none;
    }

    /* textos */

    #mensagem span {
        font-size: 10vw;
    }

    #senha span {
        font-size: 25vw;
    }

    #local span {
        font-size: 10vw;
    }

    #local-numero span {
        font-size: 14em;
    }

}
