/* COMPONENTES.CSS

   Contém o CSS usado para componentes que acontecem
	 em várias elementos -- por exemplo, o menu drop-down
	 padrão.

 */

/************************************************************
 ******************* Drop-down menu *************************
 ************************************************************/

/* PARA CRIAR UM DROP-DOWN EM QUALQUER LUGAR, USE O SEGUINTE CÓDIGO:

<div class="{nome de class para identificar esse menu, por exemplo 'dropDownHorarios'}">

	 Não mude o class deste div nunca 
	<div class="menuDropDown" onmouseover="this.className='menuDropDown menuDropDownHover';" onmouseout="this.className='menuDropDown';">

		{título do menu, por exemplo 'Todos os Horários'}

		 Precisa deste div exatamente assim 
		<div class="menuDropDownLigacao">
		</div>

		<div class="menuDropDownConteudo menuDropDownEsquerda">

			{Insere o conteúdo do seu menu aqui}

		</div>
	</div>
</div>

E PODE SUBSTITUIR "menuDropDownEsequera" por "menuDropDownDireita" PARA ABRIR
COM ALINHAMENTO OPOSTO.

O MENU FUNCIONA PERFEITMANTE EM TODOS OS BROWSERS MODERNOS.
FUNCIONA EM IE6 TAMBÉM COM UMA LINHA EXTRA QUE APARECE.

*/

.componenteMenuDropDown {
	position: relative;
	padding: 6px 21px 6px 6px;
	margin: -6px -5px -5px -5px;
	cursor: default;
	font-weight: bold;
	background-repeat: no-repeat;
	background-position: right center;
}

.componenteMenuDropDownHover {
	/* Este imagem precisa ter 1 px a menos no lado direito para compensar a nova borda de 1px */
	background: white url('/images_v3/common/seta_dropdown_escura_hilite.gif') no-repeat center right !important;
	border: 1px solid #aaa !important;
	padding: 5px 20px 5px 5px;	/* Precisamos compensar pela border diferente. Se não fosse
	                               por IE6, poderiamos usar border: 1px solid transparent; no
																 .menuDropDown, mas transparent não funciona em IE6. */
}

	.componenteMenuDropDown .menuDropDownLigacao {
		display: none;
		position: absolute;
		width: 100%;
		top: 19px;
		right: 0;
		height: 2px;
		background: white;
		z-index: 2;
	}


	.componenteMenuDropDownHover .menuDropDownLigacao {
		display: block;
		_display: none;	/* IE6 não consegue posicionar corretamente, então não use */
		z-index: 1000005;
	}

	.componenteMenuDropDown .menuDropDownEsquerda {
		right: -1px;
		_right: 10px;	/* Bug IE6 */
	}

	.componenteMenuDropDown .menuDropDownDireita {
		left: -1px;
		_left: -6px;	/* Bug IE6 */
	}


	/* Precisa ter o class .menuDropDownEsquerda ou .menuDropDownDireita também */
	.componenteMenuDropDown .menuDropDownConteudo {
		display: none;
		position: absolute;
		top: 20px;
		background: white;
		color: black;
		border: 1px solid #aaa;
		z-index: 1000000;	/* Para funcionar em IE */
		min-width: 100%;	/* Não funciona em IE, mas sem problema */
	}

	.componenteMenuDropDownHover .menuDropDownConteudo {
		display: block;
	}

/************************************************************
 ******************* Programa Horarios *************************
 ************************************************************/

.componenteProgramaHorarios {
}

	.componenteProgramaHorarios .horario {
		float: left;
		margin-top: 20px;
		/*padding: 0 15px;*/
	}

		.componenteProgramaHorarios .horario .titulo {
			font-size: 10px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.componenteProgramaHorarios .horario .descricao {
			font-size: 12px;
			font-weight: bold;
		}

	.componenteProgramaHorarios .horarioPrincipal {
		border-right: 1px solid #888;
		padding:0 8px 0 0;
	}

	.componenteProgramaHorarios .horariosAlternativos {
		padding:0 12px 0 8px;
	}

	.componenteProgramaHorarios .horario .descricao .componenteMenuDropDown {
		font-size: 12px;
		font-weight: bold;
	}

		.componenteProgramaHorarios .horario .descricao .componenteMenuDropDown .menuDropDownConteudo {
			padding: 10px 0 10px 15px;
		}

.componenteProgramaHorarios table.tabelaHorariosPrograma {
	vertical-align: top;
	table-layout: fixed;	/* So funciona em IE com isso */
}

	.componenteProgramaHorarios table.tabelaHorariosPrograma td.tabelaCelulaHorario {
		width: 60px;
		min-width: 60px;	/* So funciona em FF com isso */
		/* margin-right: 15px; NAO FUNCIONA, em vez disso usa: */
		padding-right: 15px;
		clear: both;
	}

	.componenteProgramaHorarios table.tabelaHorariosPrograma .horaEdia {
		/* border-top: 1px solid #ccc; */
		border-bottom: 1px solid #ccc;
		padding: 5px 0;
	}

	.componenteProgramaHorarios table.tabelaHorariosPrograma td.primeiro .horaEdia {
		border-top: none;
	}

		.componenteProgramaHorarios table.tabelaHorariosPrograma .dia {
			font-size: 11px;
			color: #333;
			font-weight: bold;
		}

		.componenteProgramaHorarios table.tabelaHorariosPrograma .hora {
			float: right;
			font-size: 11px;
			color: #333;
			font-weight: bold;
		}

/************************************************************
 ******************* Link Elemento **************************
 ************************************************************/

/* Como usar, dois modelos:

	Sem seta:

	<div class="componenteLinkElemento"><a href="#">TEXTO DO LINK</a></div>

	Com seta:

	<div class="componenteLinkElemento"><a href="#">TEXTO DO LINK SEM ESPAÇO DEPOIS<span class="seta">&raquo;</span></a></div>

	*/

.elemento div.componenteLinkElemento {
	display: block;
	margin-top: 10px;
	padding: 9px 0;	/* PRECISA porque o padding do link dentro é inline */
}

	.elemento div.componenteLinkElemento a {
		display: inline;
		padding: 8px 10px;
		font-size: 12px;
		font-weight: bold;
		color: white;
		letter-spacing: -0.25px;

		/* background-color: pilar.css */
	}

		.elemento div.componenteLinkElemento a:hover {
			text-decoration: none;
			/* background-color: pilar.css */
		}

		.elemento div.componenteLinkElemento a span.seta {
			padding-left: 5px;
			/* color: pilar.css */
		}

		.elemento div.componenteLinkElemento a:hover span.seta {
			color: white !important;
		}

/************************************************************
 ****************** Header elemento *************************
 ************************************************************/

div.componenteHeaderElemento {
	border-top: 7px solid #bbb;
	border-bottom: 1px solid #bbb;
	padding: 7px 0 9px 0;
}

	div.componenteHeaderElemento div.headerExtra {
			font-size: 12px;
			float: right;
		}

	div.componenteHeaderElemento h3 {
			font-weight: bold;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 18px;
			letter-spacing: -1px;
			display: block;
			text-transform: lowercase;
			/* color: pilar.css; */
		}

/************************************************************
 ******************* Link Programa **************************
 ************************************************************/

.elemento a.componenteLinkPrograma {
	background: white url('/images_v3/common/seta_link_programa.gif') no-repeat top right;
	display: block;
	font-size: 20px;
	font-weight: bold;
	padding: 12px 0 12px 5px;
	margin-bottom: 2px;
	letter-spacing: -1px;
	text-transform: lowercase;
}

	.elemento a.componenteLinkPrograma:hover {
			text-decoration: none;
			color: white;
			/* background-color: pilar.css */
	}

/************************************************************
 ******************* Titulo Grande **************************
 ************************************************************/

h2.componenteTituloGrande {
	/* color: pilar.css */
	font-size: 33px;
	letter-spacing: -2px;
	line-height: 29px;
	font-weight: bold;
	margin-bottom: 12px;
}

/************************************************************
 ******************* Subtitulo ******************************
 ************************************************************/

.componenteSubtitulo {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #333;
	margin-bottom: 18px;
	font-size: 16px;
}

/************************************************************
 ******************* Data Quadrada **************************
 ************************************************************/

.componenteDataQuadrada {
	/* background: pilar.css */
	padding: 4px;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	float: left;
	text-align: center;
	margin-right: 10px;
	display: inline;	/* IE6 */
}

	.componenteDataQuadrada .dia {
		font-size: 20px;
		font-weight: bold;
	}

	.componenteDataQuadrada .mes {
		font-size: 11px;
	}

/************************************************************
 ******************* Texto Grande ***************************
 ************************************************************/

.componenteTextoGrande, .componenteTextoGrande p {
	font-size: 13px;
	line-height: 19px;
	color: #333;
}

	.componenteTextoGrande p {
		margin-bottom: 13px;
	}

/************************************************************
 ************** Link Materia Com Foto ***********************
 ************************************************************/

a.componenteLinkMateriaComFoto {
	margin: 10px 0;
	display: block;

	color: #333;	/* Define cor de sublinhar o texto de link */
}

	a.componenteLinkMateriaComFoto img.thumb {
		float: left;
	}

	/* Obs: esta linha do componente nem sempre tem; então
	   o CSS precisa funcionar bem com ou sem ela */
	a.componenteLinkMateriaComFoto .programa {
		margin-left: 95px;
		font-size: 10px;
		margin-bottom: 5px;
		color: #333;
		text-transform: uppercase;
	}

	a.componenteLinkMateriaComFoto .titulo {
		margin-left: 95px;
		font-size: 12px;
		margin-bottom: 5px;
		/* color: pilar.css 9c153f */
	}

	a.componenteLinkMateriaComFoto .data {
		color: #666;
		font-size: 11px;
		margin-left: 95px;
	}

/************************************************************
 ********* Divisor entre listas com "more" ******************
 ************************************************************/

div.componenteDivisorMais {
	height: 0px;
	border-top: 1px solid #aaa;
}

/************************************************************
 *************** COMPONENTE Botão "mais" *********************
 ************************************************************/

div.componenteBarraBotaoMais {
	background: #dadacf;
	padding: 15px;
	text-align: center;
	zoom: 1;	/* as vezes IE da problema */
}

	div.componenteBarraBotaoMais a {
		border: 1px solid #bbb;
		background: white;
		padding: 6px 15px;
		font-size: 12px;
		font-weight: bold;
	}

	div.componenteBarraBotaoMais a:hover {
		color: white;
		text-decoration: none;
		/* background: pilar.css */
	}

/************************************************************
 ***************** Componente busca "mais" ******************
 ************************************************************/

.componenteBuscaMais {
	background: #DADACF;
	margin-top: 20px;
	padding: 20px;
}

	.componenteBuscaMais input.campoBusca {
		height: 24px;
		border: 1px solid #ccc;
		-moz-border-radius: 5px 0 0 5px;	  /* FF */
		-webkit-border-radius: 5px 0 0 5px; /* Safari */
		-webkit-border-top-left-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
		border-radius: 5px 0 0 5px;				  /* CSS3 no futuro */
		vertical-align: top;
		padding: 9px 0 0 5px;
		font-size: 12px;
		font-weight: bold;
	}

	.elementoLarguraUma .componenteBuscaMais input.campoBusca {
		width: 200px;
	}

	.elementoLarguraDuas .componenteBuscaMais input.campoBusca {
		width: 520px;
	}

	.elementoLarguraTres .componenteBuscaMais input.campoBusca {
		color: #333;
		width: 840px;
	}

	.componenteBuscaMais input.btnBuscar {
		width: 47px;
		height: 35px;
		/* background: pilar.css; */
		border: 0;
		vertical-align: top;
	}

		.componenteBuscaMais input.btnBuscar:hover {
			cursor: pointer;
		}

/************************************************************
 ************ componenteLinkGaleriaFotosPequeno *************
 ************************************************************/

.componenteLinkGaleriaFotosPequeno {
	width: 140px;
	height: 105px;
	position: relative;
	overflow: hidden;
	display: block;
}

	.componenteLinkGaleriaFotosPequeno * {
		cursor: pointer;
	}

	.componenteLinkGaleriaFotosPequeno img.thumb {
	}

	.componenteLinkGaleriaFotosPequeno .detalhesHover {
		position: absolute;
		top: 105px;
		left: 0;
		width: 100%;
		height: 100%;
	}

		.componenteLinkGaleriaFotosPequeno .detalhesHover .fundoSemitransparente {
			filter:alpha(opacity=80);
			opacity: 0.80;
			-moz-opacity: 0.80;
			background: black;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.componenteLinkGaleriaFotosPequeno .detalhesHover .detalhes {
			padding: 10px;
			position: relative;	/* não esconder embaixa do preto */
		}

			.componenteLinkGaleriaFotosPequeno .detalhesHover .detalhes .nomePrograma {
				color: white;
				font-size: 10px;
				text-transform: uppercase;
				font-weight: bold;
				margin-bottom: 5px;
			}

			.componenteLinkGaleriaFotosPequeno .detalhesHover .detalhes .numFotos {
				margin: 5px 0;
				padding-left: 20px;
				background: url('/images_v3/common/icone_camera.png') no-repeat top left;
				_background: url('/images_v3/common/icone_camera.gif') no-repeat top left;	/* IE6 transparencia */
				font-size: 10px;
				font-weight: bold;
				color: white;
				padding-top: 1px;
				height: 12px;	/* mostrar a imagem inteiro */
			}

			.componenteLinkGaleriaFotosPequeno .detalhesHover .detalhes .titulo {
				font-size: 14px;
				font-weight: bold;
				margin-top: 5px;
				letter-spacing: -1px;
				display: block;	/* Porque pode ser um link */
			}

		.componenteLinkGaleriaFotosPequeno a.linkMouseMove {
			position: absolute;
			top: 0;
			left: 0;
			width: 140px;
			height: 105px;
		}

			.componenteLinkGaleriaFotosPequeno a.linkMouseMove:hover {
				text-decoration: none;
			}

/************************************************************
 ************ componentePlaylist *************
 ************************************************************/

.componentePlaylist {
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	width: 250px;
}

	.componentePlaylist ul.musicas {
		/* Esconder a linha do header */
		margin-top: -1px;
	}

		.componentePlaylist ul.musicas li.musica {
			zoom: 1;	/* IE */
		}

		.componentePlaylist ul.musicas li.par {
			background: #f3eff0;
		}

		.componentePlaylist ul.musicas li.impar {
			background: white;
		}

			/* Obs: nem sempre presente! */
			.componentePlaylist ul.musicas li.musica a {
				display: block;
			}

				.componentePlaylist ul.musicas li.musica a:hover {
					/* background-color: pilar.css; */
					background-image: url('../images_v3/common/playlist_play.png');
					_background-image: url('../images_v3/common/playlist_play.gif');	/* IE6 */
					background-repeat: no-repeat;
					background-position: top right;
				}

				.componentePlaylist ul.musicas li.musica a:hover * {
					color: white !important;
					cursor: pointer;
				}

			.componentePlaylist ul.musicas li.musica .faixa {
				float: left;
				padding: 8px 10px 8px 15px;
				font-size: 16px;
				font-weight: bold;
				/* Color: pilar.css */
			}

			.componentePlaylist ul.musicas li.musica .musica {
				padding-top: 6px;
				padding-right: 15px;
				font-size: 12px;
				line-height: 12px;
				color: #333;
				font-weight: bold;
			}

				.componentePlaylist ul.musicas li.musica a .musica {
					/* color: pilar.css -- cor de link quando for link */
				}

			.componentePlaylist ul.musicas li.musica .artista {
				padding-bottom: 6px;
				padding-right: 15px;
				font-size: 11px;
				line-height: 11px;
				color: #333;
				margin-top: 1px;
			}

/************************************************************
 ************ componenteAbas *************
 ************************************************************/

.componenteAbas {
	font-size: 12px;
	font-weight: bold;
	border-left: 1px solid #ccc;
	height: 30px;
	position: relative;
  overflow-x: hidden;
}

	.componenteAbas .linha {
		position: absolute;
		width: 100%;
		border-bottom: 1px solid #ccc;
		height: 29px;
	}

	.componenteAbas .aba {
		background: white;
		border: 1px solid #ccc;
		border-left: none;
		float: left;
		height: 21px;
		padding-top: 7px;
		padding-left: 10px;
		padding-right: 10px;
		position: relative;
	}

		.componenteAbas a.aba:hover {
			color: white;
			text-decoration: none;
			/* background: pilar.css; */
			cursor: pointer;
		}

	.componenteAbas a.selecionada {
		background: transparent;
		border-bottom: 1px solid #e8e8df;
		color: #333;
		height: 21px;
		position: relative;
	}

		.componenteAbas a.selecionada:hover {
			background: transparent !important;
			border-bottom: 1px solid #e8e8df;
			color: #333;
			cursor: default;
		}

/************************************************************
 ************ componente Modos de Visualizacao*************
 ************************************************************/
 /*
incluir eventos javascript para alternar entre 'ativo' e 'inativo'

<div class="componenteModosVisualizacao">
	<div class="itens">
		<div class="ativo opcaoImagem" title="Imagem"></div>
		<div class="inativo opcaoTexto" title="Texto"></div>
	</div>
	<div style="clear:both;"></div>
</div>
*/

.componenteModosVisualizacao {
	float: right;
	width: 48px;
}

	.componenteModosVisualizacao .itens {
		float: left;
	}

		.componenteModosVisualizacao .itens .opcaoImagem {
			background: url(../images_v3/common/bg_imagem.png) no-repeat 0px 3px;
			_background: url(../images_v3/common/bg_imagem.gif) no-repeat;
			height: 20px;
			width: 20px;
			float: left;
			display: block;
			cursor: pointer;
			margin-right: 8px;
		}

		.componenteModosVisualizacao .itens .opcaoTexto {
			background: url(../images_v3/common/bg_texto.png) no-repeat -1px 2px;
			_background: url(../images_v3/common/bg_texto.gif) no-repeat;
			height: 20px;
			width: 20px;
			float: left;
			display: block;
			cursor: pointer;
		}

		.componenteModosVisualizacao .itens .ativo {
			/*background-color: PILAR CSS*/
			cursor: default;
		}

		.componenteModosVisualizacao .itens .inativo {
			background-color: #ccc;
		}