@CHARSET "ISO-8859-1";

/*************************************************
FRAME.CSS
Utilizado para estabelecer posicionamento dos elementos na página
*************************************************/

/*************************************************
Indice

1. Elementos Padrao
	1.1 Geral
	1.2 Inputs
	1.3 Botões
2. Layout padrão (layout/script/Layout.phtml)
	2.1 Cabeçalho
	2.2 Menu horizontal principal
	2.3 Breadcrumb
	2.4 Rodapé
3. Página principal (views/scripts/index/index.phtml)
	3.1 Formatação Geral
	3.2 Destaques
	3.3 Notícias
	4.4 Complementos
	4.5 Divulgação	
4. Página de programas (views/scripts/index/programa.phtml)
	4.1 Abas
	4.2 Conteúdo	
5. Página de programação (views/scripts/index/programacao.phtml)
	5.1 Grade de Programação
6. Página de notícias (views/scripts/index/noticia.phtml)
	6.1 Estilos gerais da página
	6.2 Conteudo
	6.3 Notícias				
	6.4 Paginação
7. Página de detalhamento de notícias (views/scripts/index/detalhar-noticia.phtml)
	7.1 Estilos gerais da página
	7.2 Conteudo
8. Página Conheça a TVJustiça (views/scripts/index/conheca.phtml)
9. Página de detalhamento de programas (views/scripts/index/detalhar-programa.phtml)
	9.1 Estilos gerais da página
	9.2 Conteúdo	
10. Página de Pesquisa (views/scripts/index/pesquisar.phtml)
	10.1 Estilos gerais da página
	10.2 Conteúdo
11. Página Sintonize (views/scripts/index/sintonize.phtml)
	11.1 Estilos gerais da página
12. Página de detalhamento de Contatos (views/scripts/index/contato.phtml)
	12.1 Estilos gerais da página
	12.2 Conteúdo	


*************************************************/

/*************************************************
1. Elementos Padrao
*************************************************/

/*1.1 Geral*/
.wrapper {width:960px; margin:0 auto;}
.clear {clear:both;}
.areaPesquisa {width:225px; height:42px; float:left; }
.areaNewsletter {width:240px; height:42px; float:left; margin-left:10px; }

/*1.1 Inputs*/
input[type='submit'] {cursor:pointer;}
input.pesquisa {width:200px; vertical-align: middle; margin:10px;}
input.newsletter {width:215px; vertical-align: middle; margin:10px;} 

/*1.2 Botões*/
input[type='submit'].botaoPesquisa {width:60px; height:42px; vertical-align: middle; margin-left:-3px;}
input[type='submit'].botaoOk {width:60px; height:42px; vertical-align: middle; margin-left:-3px;}



/*************************************************
2.Layout padrão (layout/script/Layout.phtml)
*************************************************/

/*2.1 Estilos Gerais da página*/
#conteudo .tituloConteudoInterno {margin-bottom:20px;}
#conteudo .imagemTituloPagina {width:40px; height:34px; float:left; margin-top:2px}
#conteudo .tituloPagina {margin-left:40px; margin-top:15px;}

/*2.2 Cabeçalho*/
#cabecalho {height:135px;}
#cabecalho #logoTvJustica {padding:21px 0px; float:left;}
#cabecalho #complementosCabecalho {float:right; width:285px; height:85px; padding-top:50px;}
#cabecalho #complementosCabecalho #pesquisaPrincipal {float:left; margin-bottom:7px;}
#cabecalho #complementosCabecalho #outrasMidias {float:left; height:25px; width:173px; clear:both;}
#divisorMidiaAcessibilidade { margin-left: 10px;}
#cabecalho #complementosCabecalho #acessibilidade {float:right; height:25px; width:105px; text-align:right; margin-right:3px; }

/*2.3 Menu horizontal principal*/
#navegacao {height:53px; clear:both;}
#navegacao #menu ul.menuHorizontal li {float: left; padding: 15px 19px 0px 19px; z-index: 1; height:37px}
#navegacao #menu ul.menuHorizontal li a {text-decoration: none; font-weight:bold;}

/*2.4 Breadcrumb*/
.breadcrumb {margin:10px 0px;}

/*2.5 Rodapé*/
#rodape {clear:both;}
#rodape #mapa { height:150px; }/*150px*/
#rodape #mapa #wrapperRodapeMapa {width:600px; margin:0 auto; padding:20px 0px; }

#rodape #mapa ul.itemMenor li{padding:0px 15px; }
#rodape #mapa li {padding:6px 4px; }
#rodape #mapa .rodapeCinza{float:left; width:170px; padding:0px 10px; }


#rodape #links {padding:10px 0px;}
#rodape #links img {padding:0px 32px; float:left}
/* Descomentar, caso sejam necessários divisores entre as imagens
#rodape #links img {padding:0px 22px; float:left}*/
#rodape #links .textoRodape{float:left; margin:12px 12px;}


/*************************************************
3. Página principal (views/scripts/index/index.phtml)
*************************************************/

/*3.1 Formatação Geral*/
#conteudo .imagemTituloHome {float:left; width:30px; height:28px;}
#conteudo .tituloHome {margin-left:30px; margin-bottom:30px;}
#conteudo .tituloHome-complemento {margin:0px 0px 15px 30px;}
/*#conteudo .imagemTituloHome-complemento {margin-top:20px;} */

/*3.2 Destaques*/
#destaque {height:305px; }
#destaque .destaqueSlider .ilustracaoDestaque {float:left; padding-top:8px; }

#destaque .linhaDestaque {position:relative;}

#destaque .destaqueSlider .textoDestaque {float:left; width: 460px; padding-top:20px; margin-left:25px; height:260px; text-align: justify;  overflow: hidden;}
#destaque .destaqueSlider .textoDestaque .linhaTituloDestaque {clear:both; padding-bottom:40px; }
#destaque .destaqueSlider .textoDestaque .linhaDataHoraDestaque {clear:both; margin-bottom:10px;}
#destaque .destaqueSlider .textoDestaque .tituloDestaque{float: left; width:400px;}
#destaque .destaqueSlider .textoDestaque .contadorDestaque{float: right;}
#destaque .destaqueSlider .textoDestaque .diaDestaque{float: right; width:45px }
#destaque .destaqueSlider .textoDestaque .horarioDestaque{float: right;}
#destaque .destaqueSlider .textoDestaque .dscDestaque{padding-top: 0px; clear:both; padding-top:15px; }
#destaque .destaqueSlider .textoDestaque .tamanhoDia{height:17px;}

#destaque #destaqueSelecionador {z-index: 1000; float:right; position: relative; margin:-13px 30px 0px 0px;}
#destaque #destaqueSelecionador a {margin:0px 2px; width:11px; height:10px; display: block;  }
#destaque #destaqueSelecionador a:focus { outline: none;}
#destaque #destaqueSelecionador li { width: 11px; float: left; list-style: none; margin:0px 2px; }

/*3.3 Notícias*/
#conteudo #noticiasDestaque .blocoNoticia {height:200px; overflow: hidden;}
#conteudo #noticiasDestaque {margin-top:18px; width: 610px;  float:left;  }
#conteudo #noticiasDestaque img { float:left; }

#conteudo #noticiasDestaque #destaquePrincipal {border-bottom: 1px solid #DEDEDE; height:220px; margin-bottom:15px;}
#conteudo #noticiasDestaque #imagemNoticiaPrincipal {margin-right:30px;} 

#conteudo #noticiasDestaque #destaquesSecundarios {clear:both;}

#conteudo #noticiasDestaque #destaquesSecundarios #destaqueSecundario1  {float:left; }
#conteudo #noticiasDestaque #destaquesSecundarios #destaqueSecundario2  {float:left; margin-left: 30px;}

#conteudo #noticiasDestaque .blocoNoticia {float:left; width: 290px; }
#conteudo #noticiasDestaque .blocoNoticia .origemNoticia {float:left;}
#conteudo #noticiasDestaque .blocoNoticia .dataHoraNoticia  {float:left;}
#conteudo #noticiasDestaque .blocoNoticia .tituloNoticia  {clear:both;  padding:10px 0px 10px 0px;}
#conteudo #noticiasDestaque .blocoNoticia .conteudoNoticia  {}

#conteudo #noticiasDestaque #botaoMaisNoticias{width:110px; height: 30px;  margin-top:0px; cursor:pointer;}

/*3.4 Complementos*/
#conteudo #conteudosComplementares {margin-top:18px;  float:left; width:310px; margin-left:40px;}
#conteudo #conteudosComplementares #conteudoNewsletter {padding:4px 0px 10px 10px;}
#conteudo #conteudosComplementares .blocoAssistaAoVivo {padding:10px 0px; }
#conteudo #conteudosComplementares .blocoCoberturasEspeciais .imagemCoberturasEspeciais {float:left; }
#conteudo #conteudosComplementares .blocoCoberturasEspeciais #conteudoCoberturasEspeciais {float:left; width:180px; margin-left:10px; height:90px; overflow:hidden;}
#conteudo #conteudosComplementares .blocoCoberturasEspeciais #tituloCoberturaEspecial {font-weight:bold;padding-bottom:5px;}

#conteudo #conteudosComplementares .blocoComplemento-inferior {margin-top:20px;}


/*3.5 Divulgação*/

#conteudo #conteudoDivulgacaoInferior {height:180px; clear:both; padding-top:30px}
#conteudo #conteudoDivulgacaoInferior .imagemDivulgacao .imgDivulgacaoLeft{padding-right:44px;}
#conteudo #conteudoDivulgacaoInferior .imagemDivulgacao .imgDivulgacaoRight{padding-left:44px;}

/*************************************************
4. Página de programas (views/scripts/index/programa.phtml)
*************************************************/

/*4.1 Abas*/
#conteudo .menuAbas {margin:40px 0px;}
#conteudo .menuAbas ul {margin:0px 40px 10px 20px; }
#conteudo .menuAbas ul li {display: inline; padding: 10px 20px; }		

/*4.2 Conteúdo*/
#programas .programa {height:95px; margin-bottom:20px; clear:both; padding-bottom:20px;}
#programas .programa .logoPrograma img {width:130px; height:92px; }
#programas .logoPrograma {float:left; margin-right:20px;}
#programas .descricao {float:left; margin:10px 0px; width:800px; text-align: justify; }

/*************************************************
5. Página de programação (views/scripts/index/programacao.phtml)
*************************************************/

/*5.1 Grade de Programação*/

#conteudo #diasGrade .setaVoltar {float:left; width:46px; margin-right:0px;}
#conteudo #diasGrade .setaAvançar {float:left; width:46px; margin-left:0px;}
#conteudo #diasGrade .dataSelecionar {float:left; width:120px; margin:0px 1px; height:77px;}
#conteudo #diasGrade .dataSelecionar .diaSelecionar {padding-top:20px;}

#conteudo #conteudoGrade {padding: 25px 20px; margin-bottom:30px;}
#conteudo #conteudoGrade .itemGrade {padding:10px 0px; min-height:15px;}
#conteudo #conteudoGrade .itemGrade .horaInicioPrograma {float:left; width:110px;}
#conteudo #conteudoGrade .itemGrade .tituloPrograma {float:left; width:810px; margin-bottom:15px;}

#conteudo #conteudoGrade .itemGrade .itemExpandido {clear:both; margin-left:110px;display:table;}
#conteudo #conteudoGrade .itemGrade .logoPrograma {float:left;}
#conteudo #conteudoGrade .itemGrade .textoProgramaExpandido {width:585px; float:left; margin-left:15px; }
#conteudo #conteudoGrade .itemGrade .textoProgramaExpandido .tituloEdicaoPrograma { padding-bottom:20px; }

/*************************************************
6. Página de notícias (views/scripts/index/noticia.phtml)
*************************************************/

/*6.1 Estilos Gerais da página*/
#clear{padding-top: 50px;}
#conteudo #noticiaDestaquePagina .wrapperInterno{padding-left: 40px;}

/*6.2 Conteúdo*/
#conteudo .imagemTituloPagina-Noticia {}

/*6.3 Notícias*/
#noticiaDestaquePagina #imagemNoticiaDestaquePagina {float: left;}
#noticiaDestaquePagina #imagemNoticiaDestaquePagina a {}
#noticiaDestaquePagina #conteudoCentralDestaqueNoticiaPagina {float: left; margin-left: 20px; width: 655px;}
#noticiaDestaquePagina #conteudoCentralDestaqueNoticiaPagina #tituloConteudoCentralDestaqueNoticiaPagina{}
#noticiaDestaquePagina #conteudoCentralDestaqueNoticiaPagina #tituloConteudoCentralDestaqueNoticiaPagina a {}
#noticiaDestaquePagina #conteudoCentralDestaqueNoticiaPagina #tituloConteudoCentralDestaqueNoticiaPagina a:hover {}
#noticiaDestaquePagina #conteudoCentralDestaqueNoticiaPagina #horaEdiaConteudoCentralDestaqueNoticiaPagina{margin-top: 5px;}
#noticiaDestaquePagina #conteudoCentralDestaqueNoticiaPagina #textoConteudoCentralDestaqueNoticiaPagina{margin-top: 5px; clear: both;}
#noticiaDestaquePagina #conteudoCentralDestaqueNoticiaPagina #textoConteudoCentralDestaqueNoticiaPagina a{}
#noticiaDestaquePagina #conteudoCentralDestaqueNoticiaPagina #textoConteudoCentralDestaqueNoticiaPagina a:hover{}
#noticiaDestaquePagina .subNoticiaDestaquePagina{clear: both; margin-top: 10px;}
#noticiaDestaquePagina .subNoticiaDestaquePagina .subColunaNoticiaPagina{float: left;}
#noticiaDestaquePagina .subNoticiaDestaquePagina .subHorarioNoticiaPagina{float: left;}
#noticiaDestaquePagina .subNoticiaDestaquePagina .subTituloNoticiaDestaquePagina{clear: both; padding-top: 10px; padding-bottom:8px; }
#noticiaDestaquePagina .subNoticiaDestaquePagina .subTituloNoticiaDestaquePagina a{}
#noticiaDestaquePagina .subNoticiaDestaquePagina .subTituloNoticiaDestaquePagina a:hover{}
#noticiaDestaquePagina .subNoticiaDestaquePagina .subTextoNoticiaPagina{padding-top: 10px;}
#noticiaDestaquePagina .subNoticiaDestaquePagina .conteudoEspacado a{}
#noticiaDestaquePagina .subNoticiaDestaquePagina .conteudoEspacado a:hover{}

/*6.4 Paginação  */
.pagination {padding: 0px; vertical-align: middle;float: right;width: 165px; margin-bottom: 15px;}
.pagination .imagemPaginador{border:0px; padding: 0px;}
.pagination #paginationTexto{float:left; padding: 2px;}
.pagination #paginationImagens #paginationImagensEsquerda{float:left; padding: 0px;}
.pagination #paginationImagens #paginationImagensDireita{padding: 0px;}

/*************************************************
7. Página de detalhamento de notícias (views/scripts/index/detalhar-noticia.phtml)
*************************************************/

/*7.1 Estilos Gerais da página*/
#clear{padding-top: 50px;}

/*7.2 Conteúdo*/
#conteudo .imagemTituloPagina-Noticia {background:url(../imagens/icone_noticias.png) no-repeat; width:40px; height:32px; float:left;}

/*7.3 Notícias*/
#conteudo #noticia #imagemNoticia {padding-top: 31px;margin-right: 10px;float:left;}
#conteudo #noticia #textoNoticia {padding-top: 23px;}
#conteudo #noticia #textoNoticia p{margin-top: 7px;}
#conteudo #noticia #tituloNoticia{padding-top: 30px;}
#conteudo #noticia #editoria {padding-top: 3px;}
#conteudo #noticia #editoria .subColunaNoticiaPagina{float: left;}
#conteudo #noticia #editoria .subHorarioNoticiaPagina{float: left;}
#conteudo #noticia .wrapperInterno{padding-left: 40px;}
#conteudo .back{padding-top: 10px;text-align: right;}
#conteudo .back a{}
#conteudo .back a:hover{}

/*************************************************
8. Página Conheça a TVJustiça (views/scripts/index/conheca.phtml)
*************************************************/

/*8.1 Estilos Gerais da página*/

/*************************************************
9. Página de detalhamento de programas (views/scripts/index/detalhar-programa.phtml)
*************************************************/

/*9.1 Estilos Gerais da página*/
#clear{padding-top: 50px;}
#conteudo #noticiaDestaquePagina .wrapperInterno{padding-left: 40px;}
#conteudo .tituloConteudoInternoProgramacao {margin-bottom:0px;}
#conteudo #definicaoConteudoPesquisa{padding-left: 40px;}

/*9.2 Conteúdo*/
#conteudo #programaDestaqueTopo{clear: both; min-height: 219px;}
#conteudo #tituloDoConteudoTextualDoVideoPrincipalDoPrograma{clear: both;}
#conteudo #programaDestaqueTopo #separadorProgramaDestaqueTopo{width: 960px; margin: 0 auto;}
#conteudo #programaDestaqueTopo #imagemDoProgramaTopo{margin: 15px 20px 20px 60px; float: left;}
#conteudo #programaDestaqueTopo #textoProgramaTopo{ width: 640px; float: left; margin-top: 15px;}
#conteudo #programaDestaqueTopo #imgDoProgramaTopo{margin: 15px 50px 20px 60px; float: left; }
#conteudo #conteudoTextualDoPrograma{margin-top: 40px; clear:both; width: 960px;}
#conteudo #conteudoTextualEsquerdoDoPrograma{float: left; width: 450px;}
#conteudo #conteudoTextualEsquerdoDoPrograma #conteudoVideoPrincialDoPrograma{width: 450px;}
#conteudo #conteudoTextualEsquerdoDoPrograma #conteudoTextualDoVideoPrincipalDoPrograma{margin-top: 30px;}
#conteudo .conteudoTextualExibido{float: left;}
#conteudo .conteudoTextualHora{float: left;}
#conteudo #conteudoTextualDireitoDoPrograma{float: left; margin-left: 20px; width: 490px;}
#conteudo #tituloDoConteudoTextualDoVideoPrincipalDoPrograma{clear: both; padding-top: 10px;}
#conteudo .listagemDeChamadaPrograma .conteudoImagemDaListagem{float: left; width: 100px; clear: both; margin-top: 10px;}
#conteudo .listagemDeChamadaPrograma .conteudoTextoDaListagem{width: 370px; float: left; margin-top: 10px; margin-left: 20px;}
#conteudo .conteudoBordaDaListagem{clear: both; padding-top: 10px; margin-bottom: 10px;}
#conteudo #textoDoConteudoTextuaoDoVideoPrincipalDoPrograma{margin-top: 10px;}
#conteudo #conteudoImagemImpressoraEmail{float: left;}
#conteudo #conteudoImagemRedeSocial{padding-left: 360px;}
#conteudo #conteudoPaginacaoDoPrograma{float: right; padding-bottom: 10px; padding-top: 20px;}
#conteudo #conteudoNumeracao{margin-top: 5px; float: left; margin-right: 10px;}


/*9.2 Conteúdo*/

#conteudo #programaDestaqueTopo{background: none repeat scroll 0 0 #F2F2F2; border-top: 2px solid #CBCBCB; border-bottom: 2px solid #CBCBCB; padding-top:15px;}
#conteudo .conteudoTextualExibido{color: #015CAB;}
#conteudo #tituloDoConteudoTextualDoVideoPrincipalDoPrograma{color: #015CAB; font-size: 18px; font-weight: bold;line-height: 130%; text-decoration: none;}
#conteudo .listagemDeChamadaPrograma .conteudoTextoDaListagem{color: #015CAB; font-size: 18px; font-weight: bold;line-height: 130%; text-decoration: none;}
#conteudo .listagemDeChamadaPrograma .conteudoTextoDaListagem a{color: #015CAB; }
#conteudo .conteudoBordaDaListagem{border-bottom: dotted 2px #CBCBCB; clear: both;}
#conteudo #textoDoConteudoTextuaoDoVideoPrincipalDoPrograma{font-size: 14px;}
#conteudo #conteudoPaginacaoDoPrograma{color: #015CAB; font-size: 18px; font-weight: bold;}

/*************************************************
10. Página de detalhamento de pesquisa (views/scripts/index/pesquisa.phtml)
*************************************************/

/*10.1 Estilos Gerais da página*/

/*10.2 Conteúdo*/
#conteudo #definicaoDeParemetros{float: left; width: 590px;}
#conteudo #definicaoDeParemetrosYoutube{float: left; width: 625px;}
#conteudo #definicaoDePeriodo{width: 272px; float: left; padding-left: 40px;}
#conteudo #exibicaoDeResultados{padding-left: 40px; padding-top: 5px;}
#conteudo .tituloDaPesquisa{margin-bottom: 10px;}
#conteudo .tituloDaPesquisaComD{float: left; margin-top: 20px; margin-right: 10px;}
#conteudo .tituloDaPesquisaComA{float: left; margin-top: 20px; margin-right: 10px; margin-left: 10px;}
#conteudo .areaCampoPesquisa{}
#conteudo .areaCampoPesquisaData{width: 100px; float: left;}
#conteudo .pesquisaData{border: 0 none; margin-top:10px; margin-left:6px; margin-right:6px; margin-bottom:10px; vertical-align: middle; width: 90px;}
#conteudo #exemploData{clear: both;padding-top: 10px;}
#conteudo #botaoBuscar{height: 30px; margin-top: 0; width: 110px;}
#conteudo #campoDoBotao{margin-top: 20px;}
#conteudo .argumentosPesquisa{background: none repeat scroll 0 0 #CBCBCB; border: 0 none; padding: 3px 2px;}
#conteudo #campoDePalavrasChaves{margin-top: 10px; margin-bottom: 10px;}
#conteudo #resultadoDaBuscaPesquisa{clear: both; padding-top: 20px;}
#conteudo #resultadoDaBuscaPesquisa .resultadoTexto {margin-left:140px;}
#conteudo .conteudoTituloDaBusca{}
#conteudo .conteudoTituloDaBusca a{}
#conteudo .listagemDeBuscaPesquisa{clear: both; margin-bottom: 15px; display:table;}
#conteudo #conteudoBordaDaListagemDaPesquisa{border-bottom: 1px solid #CBCBCB; clear: both;}
#conteudo #conteudoPaginacaoDaPesquisa{float: right; margin-top: 10px;}
#conteudo #conteudoDaFraseBusca{clear: both; padding-top: 30px;}
#conteudo .busca{ border: 0 none; margin: 10px; vertical-align: middle; width: 560px;}
#conteudo .imagemResultadoBusca{float: left;}
#conteudo .conteudoDaPesquisaData{clear: both;}
#conteudo .conteudoTextoDaBusca{}
#conteudo .buscaExibicoes  {margin-top:25px; margin-left:140px; }

/*************************************************
11. Página Sintonize (views/scripts/index/sintonize.phtml)
*************************************************/

/*11.1 Estilos Gerais da página*/
#conteudo .imagemTituloPagina-Sintonize {width:40px; height:32px; float:left;}
#texto #avisoMapa{padding-left: 40px;padding-bottom: 15px;}
#texto #mapa{float: left; width: 595px;}
#texto #textoSintonizeComum{float: right; width: 365px; padding-bottom: 10px; }
#texto #textoSintonizeEstado{float: right; width: 365px; padding-top: 10px;}


/*************************************************
12. Página Contato (views/scripts/index/contato.phtml)
*************************************************/

/*12.1 Estilos Gerais da página*/
#conteudo .imagemTituloPagina-Conheca {width:40px; height:32px; float:left;}
#texto .captchaColunaEsquerda {float: left}
#texto .captchaColunaDireita {padding-right: 5px; padding-top:6px; float: right}
#texto #painelEsquerdo {width:320px; padding: 0px 0px 30px 45px; float:left;}
#texto #painelDireito { width:540px; padding-top:15px; float:right;}
#texto #painelDireito #caixaAzul {height:297px; padding:78px; padding-left: 99px}