@CHARSET "UTF-8";

/**
 * @projeto Website cidadeplena.com.br
 * @cliente Instituto Cidade Plena.
 * @autor STUDIO
 * @copyright 2009 Instituto Cidade Plena.
 * 
 * Folha de estilos global.
 */

/** Regra de mídia para monitores e dispositivos de vizualização semelhantes. */
@media screen {
    /** Estilos globais. */
    html {
        overflow-y: scroll;
    }
    
    * {
        margin: 0;
    }
    
    body {
        background-color: #b7c1b8;
    }
    
    body a, body a:link {
        color: #06C;
        text-decoration: none;
    }
    
    body a:hover {
        color: #06C;
    }
    
    body a:visited {
        color: #3F484E;
    }
        /** Contêiner. */
        body div.conteiner {
            position: relative;
            
            margin-left: auto;
            margin-right: auto;
            
            padding: 0 20px;
            
            width: 954px;
            
            min-height: 900px;
            height: auto !important;
            height: 900px;

            
            background: url("/imagens/interfaces/global/fundo.png") repeat-y;
        }
        
        body div.conteiner-2 {
            position: relative;
            
            padding: 0 175px;
        }
            /** Cabeçalho. */
            body div.conteiner div.cabecalho {
                position: relative;
                
                height: 209px;
                
                z-index: 2;
                
                background: url("/imagens/interfaces/global/cabecalho/fundo.png") no-repeat;
            }
            
            body div.conteiner div.cabecalho h1 {
                position: absolute;
                top: 20px;
                left: 20px;
                
                width: 174px;
                height: 133px;
            }
            
            body div.conteiner div.cabecalho h1 a {
                display: block;
                
                width: 174px;
                height: 133px;
                
                text-indent: -1999px;
                
                overflow: hidden;
                
                background: url("/imagens/interfaces/global/cabecalho/logo.png") no-repeat;
            }
            
            body div.conteiner div.cabecalho div.slide-show {
                position: absolute;
                top: 0;
                right: 0;
                
                width: 393px;
                height: 187px; 
            }
            
            body div.conteiner div.cabecalho div.slide-show.imagem-0 {
                background: url("/imagens/interfaces/global/cabecalho/imagem-slide-show-0.png") no-repeat;
            }
            
            body div.conteiner div.cabecalho div.slide-show.imagem-1 {
                background: url("/imagens/interfaces/global/cabecalho/imagem-slide-show-1.png") no-repeat;
            }
            
            body div.conteiner div.cabecalho div.slide-show.imagem-2 {
                background: url("/imagens/interfaces/global/cabecalho/imagem-slide-show-2.png") no-repeat;
            }
            
            body div.conteiner div.cabecalho div.slide-show.imagem-3 {
                background: url("/imagens/interfaces/global/cabecalho/imagem-slide-show-3.png") no-repeat;
            }
            
            body div.conteiner div.cabecalho div.slide-show.imagem-4 {
                background: url("/imagens/interfaces/global/cabecalho/imagem-slide-show-4.png") no-repeat;
            }
            
            body div.conteiner div.cabecalho div.slide-show.imagem-5 {
                background: url("/imagens/interfaces/global/cabecalho/imagem-slide-show-5.png") no-repeat;
            }
            
                /** Navegação. */
                body div.conteiner div.cabecalho ul.navegacao {
                    position: relative;
                    top: 187px;
                    
                    padding: 0;
                    
                    text-align: center;
                    
                    width: auto;
                    height: 22px;
                    
                    list-style: none;
                    
                    background-color: #3F484E;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li {
                    display: inline;
                    
                    height: 22px;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li a {
                    float: left;
                    display: block;
                    
                    height: 22px;
                    
                    text-indent: -1999px;
                    
                    overflow: hidden;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li.voltar-a-pagina-inicial a {
                    margin-left: 10px;
                    margin-right: 116px;
                    
                    width: 38px;
                    
                    background: url("/imagens/interfaces/global/cabecalho/navegacao/circulos.png") no-repeat;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li.programas-e-servicos a {
                    width: 161px;
                    
                    background: url("/imagens/interfaces/global/cabecalho/navegacao/programas-e-servicos.png") no-repeat;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li.programas-e-servicos a:hover {
                    background: url("/imagens/interfaces/global/cabecalho/navegacao/programas-e-servicos-over.png") no-repeat;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li.pesquisas a {
                    width: 86px;
                    
                    background: url("/imagens/interfaces/global/cabecalho/navegacao/pesquisas.png") no-repeat;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li.pesquisas a:hover {
                    background: url("/imagens/interfaces/global/cabecalho/navegacao/pesquisas-over.png") no-repeat;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li.capacitacao a {
                    width: 102px;
                    
                    background: url("/imagens/interfaces/global/cabecalho/navegacao/capacitacao.png") no-repeat;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li.capacitacao a:hover {
                    background: url("/imagens/interfaces/global/cabecalho/navegacao/capacitacao-over.png") no-repeat;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li.cursos a {
                    width: 68px;
                    
                    background: url("/imagens/interfaces/global/cabecalho/navegacao/cursos.png") no-repeat;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li.cursos a:hover {
                    background: url("/imagens/interfaces/global/cabecalho/navegacao/cursos-over.png") no-repeat;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li.artigos a {
                    width: 72px;
                    
                    background: url("/imagens/interfaces/global/cabecalho/navegacao/artigos.png") no-repeat;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li.artigos a:hover {
                    background: url("/imagens/interfaces/global/cabecalho/navegacao/artigos-over.png") no-repeat;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li.corpo-consultivo a {
                    width: 137px;
                    
                    background: url("/imagens/interfaces/global/cabecalho/navegacao/corpo-consultivo.png") no-repeat;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li.corpo-consultivo a:hover {
                    background: url("/imagens/interfaces/global/cabecalho/navegacao/corpo-consultivo-over.png") no-repeat;
                }
                
                body div.conteiner div.cabecalho ul.navegacao li.contato a {
                    margin-left: 76px;
                    
                    width: 88px;
                    
                    background: url("/imagens/interfaces/global/cabecalho/navegacao/contato.png") no-repeat right;
                }
                /** ENDOF Navegação. */
                
                /** Contato */
                body div.conteiner div.contato {
                    position: absolute;
                    top: 209px;
                    right: 0;
                    
                    width: 409px;
                    height: 150px;
                    
                    overflow: hidden;
                    
                    background: url("/imagens/interfaces/global/cabecalho/fundo-box-contato.png") no-repeat;
                }
                
                body div.conteiner div.contato form {
                    width: 409px;
                    height: 142px;
                    
                    background: url("/imagens/interfaces/global/cabecalho/box-contato.png") no-repeat top right;
                }
                
                body div.conteiner div.contato div.fechar {
                    position: absolute;
                    top: 4px;
                    right: 5px;
                    
                    width: 12px;
                    height: 12px;
                }
                
                body div.conteiner div.contato div.fechar a {
                    display: block;
                    
                    width: 11px;
                    height: 10px;
                    
                    text-indent: -1999px;
                    
                    overflow: hidden;
                }
                
                body div.conteiner div.contato div.status {
                    position: absolute;
                    top: 0;
                    left: 15px;
                    
                    padding: 60px 0 0;
                    
                    width: 390px;
                    height: 75px;
                    
                    font: 12px Arial;
                    
                    text-align: center;
                    
                    background: #FFF2D5;
                }
                
                body div.conteiner div.contato label {
                    display: none;
                }
                
                body div.conteiner div.contato input {
                    position: absolute;
                    
                    font: 9px Arial;
                    
                    background: none;
                    border: 0;
                }
                
                body div.conteiner div.contato input.nome {
                    top: 18px;
                    left: 57px;
                    
                    width: 340px;
                }
                
                body div.conteiner div.contato input.email {
                    top: 37px;
                    left: 57px;
                    
                    width: 340px;
                }
                
                body div.conteiner div.contato input.cidade {
                    top: 56px;
                    left: 57px;
                    
                    width: 175px;
                }
                
                body div.conteiner div.contato input.uf {
                    top: 57px;
                    left: 265px;
                    
                    width: 135px;
                }
                
                body div.conteiner div.contato input.cargo {
                    top: 76px;
                    left: 57px;
                    
                    width: 175px;
                }
                
                body div.conteiner div.contato input.orgao {
                    top: 77px;
                    left: 285px;
                    
                    width: 115px;
                }
                
                body div.conteiner div.contato input.ddd {
                    top: 96px;
                    left: 45px;
                    
                    width: 40px;
                }
                
                body div.conteiner div.contato input.telefone {
                    top: 96px;
                    left: 120px;
                    
                    width: 112px;
                }
                
                body div.conteiner div.contato input.area-de-interesse {
                    top: 117px;
                    left: 120px;
                    
                    width: 197px;
                }
                
                body div.conteiner div.contato input.enviar {
                    top: 114px;
                    left: 335px;
                    
                    width: 59px;
                    height: 20px;
                    
                    cursor: pointer;
                    
                    background: url("/imagens/interfaces/global/cabecalho/botao-enviar-contato.png");
                }
                /** ENDOF Contato. */
            /** ENDOF Cabeçalho. */
            
            /** Navegação esquerda. */
            body div.conteiner div.navegacao-esquerda {
                position: absolute;
                top: 0;
                left: 0;
                
                width: 169px;
                height: 500px;
                
                z-index: 1;
                
                background: #FFF;
            }
            /** ENDOF Navegação esquerda. */
            
            /** Navegação direita. */
            body div.conteiner div.navegacao-direita {
                position: absolute;
                top: 0;
                right: 0;
                
                width: 169px;
                height: 500px;
                
                background: #FFF;
            }
            /** ENDOF Navegação direita. */
            
            /** Conteúdo. */
            body.pagina div.conteiner div.conteudo {
                padding: 0 20px 10px;
                
                font: 12px "Trebuchet MS", Arial;
            }
            
            body.pagina div.conteiner div.conteudo h1.titulo {
                margin: 40px 0 20px;
                
                width: 147px;
                height: 30px;
                
                text-indent: -1999px;
                
                overflow: hidden;
            }
            
            body.pagina div.conteiner div.conteudo h2 {
                margin: 10px 0;
                
                font: bold 14px "Trebuchet MS", Arial;
                
                color: #798992;
            }
            
            body.pagina div.conteiner div.conteudo p {
                margin: 10px 0;
            }
            
            body.pagina div.conteiner div.conteudo ul {
                padding: 0 0 0 25px;
            }
            
                /** Institucional. */
                body#institucional div.conteiner div.conteudo h1.titulo {
                    width: 147px;
                    
                    background: url("/imagens/interfaces/paginas/institucional/titulo.png") no-repeat;
                }
                /** ENDOF Institucional. */
                
                /** Programas e serviços. */
                body#programas-e-servicos div.conteiner div.conteudo h1.titulo {
                    width: 243px;
                    
                    background: url("/imagens/interfaces/paginas/programas-e-servicos/titulo.png") no-repeat;
                }
                /** ENDOF Programas e serviços. */
                
                /** Pesquisas. */
                body#pesquisas div.conteiner div.conteudo h1.titulo {
                    width: 147px;
                    
                    background: url("/imagens/interfaces/paginas/pesquisas/titulo.png") no-repeat;
                }
                /** ENDOF Pesquisas. */
                
                /** Capacitação. */
                body#capacitacao div.conteiner div.conteudo h1.titulo {
                    margin: 36px 0 24px;
                    
                    width: 147px;
                    
                    background: url("/imagens/interfaces/paginas/capacitacao/titulo.png") no-repeat;
                }
                /** ENDOF Capacitação. */
                
                /** Artigos. */
                body#artigos div.conteiner div.conteudo h1, body.artigos div.conteiner div.conteudo h1 {
                    font: 35px "Trebuchet MS", Arial;
                    color: #798992;
                    
                    letter-spacing: -3px;
                }
                
                body#artigos div.conteiner div.conteudo div.autor, body.artigos div.conteiner div.conteudo div.autor {
                    font: italic 14px "Trebuchet MS", Arial;
                }
                
                body#artigos div.conteiner div.conteudo div.outros-artigos h4, body.artigos div.conteiner div.conteudo div.outros-artigos h4 {
                    font: bold 14px "Trebuchet MS", Arial;
                }
                
                body#artigos div.conteiner div.conteudo h1.titulo, body.artigos div.conteiner div.conteudo h1.titulo {
                    width: 147px;
                    
                    background: url("/imagens/interfaces/paginas/artigos/titulo.png") no-repeat;
                }
                
                
                /** ENDOF Artigos. */
                
                /** Corpo Consultivo. */
                body#corpo-consultivo div.conteiner div.conteudo h1.titulo {
                    width: 147px;
                    
                    background: url("/imagens/interfaces/paginas/corpo-consultivo/titulo.png") no-repeat;
                }
                /** ENDOF Corpo Consultivo. */
            /** ENDOF Conteúdo. */
        /** ENDOF Contêiner. */
}