/* ##### Geral ################################################################################################################### */

/* Aplica essa formatação a TODOS os elementos na página (salvo quando são especificados adiante) */
* {
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
/* Insere a imagem de fundo da página */
body {
	background: #fff url(imagens/bckg.jpg) repeat;
}
/* Retira a borda de TODAS as imagens */
img {
	border: none;
}
/* Formatação dos parágrafos */
p {
	margin: 5px 0;
	padding: 5px 0;
	font-size: 100%;
	text-align: left;
}
/* Formatação dos cabeçalhos de nível 2 (vermelho) */
h2 {
	color: #f00;
	font-size: 200%;
}
/* Formatação dos cabeçalhos de nível 3 (vermelho escuro) */
h3 {
	color: #900;
	font-size: 175%;
}
/* Formatação dos cabeçalhos de nível 4 (vermelho) */
h4 {
	color: #f00;
	font-size: 150%;
}
/* Formatação dos links (azul) */
a {
	color: #00f;
	outline: none;
}
/* Formatação dos links quando o mouse está sobre os mesmos (vermelho) */
a:hover {
	color: #f00;
	text-decoration: none;
}
/* Esconde os hr's */
hr {
	display: none;
}



/* ##### Logotipo - Cia. das Pantufas ############################################################################################ */

h1#cia_das_pantufas {
	position: relative;
	width: 656px;
	height: 128px;
	margin: 20px auto 0;
}
h1#cia_das_pantufas a {
	display: block;
	width: 656px;
	height: 128px;
	text-indent: -90000px;
	overflow: hidden;
	cursor: pointer;
	background-image: url(imagens/logo_cia_das_pantufas.png) !important;
	background-image: none;
	filter: none !important;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=imagens/logo_cia_das_pantufas.png,sizingMethod='scale');
}



/* ##### Menu Principal ########################################################################################################## */

/* Camada que engloba a lista utilizada para o menu */
div#menu {
	position: relative;
	width: 756px;
	height: 86px;
	overflow: hidden;
	margin: 20px auto 0;
	background-image: url(imagens/menu_bckg.gif);
}
/* Remove a marcação da lista utilizada para fazer o menu do topo e aplica o espaçamento entre o menu e a borda */
div#menu ul {
	list-style: none;
	margin: 10px;
}
/* Indica que os elementos ficarão lado a lado */
div#menu ul li {
	display: block;
	float: left;
}

/* Formata os links do menu */
div#menu ul li a {
	float: left;
	display: block;
	width: 184px;
	height: 52px;
	line-height: 36px;
	font-size: 130%;
	color: #fff;
	text-align: center;
	text-decoration: none;
	padding-top: 18px;
}
/* Formata quando o mouse está sobre o link do menu */
div#menu ul li a:hover {text-decoration: underline;}
	
div#menu ul li#menu_pag_inicial {background-color: #3ab408;}
div#menu ul li#menu_pag_inicial a {background: url(imagens/menu_pag_inicial.jpg) 0 0 no-repeat;}
div#menu ul li#menu_pag_inicial a:hover {background-position: 0 -70px;}

div#menu ul li#menu_produtos {background-color: #b40808;}
div#menu ul li#menu_produtos a {background: url(imagens/menu_produtos.jpg) 0 0 no-repeat;}
div#menu ul li#menu_produtos a:hover {background-position: 0 -70px;}

div#menu ul li#menu_midia {background-color: #b49508;}
div#menu ul li#menu_midia a {background: url(imagens/menu_midia.jpg) 0 0 no-repeat;}
div#menu ul li#menu_midia a:hover {background-position: 0 -70px;}

div#menu ul li#menu_contato {background-color: #088eb4;}
div#menu ul li#menu_contato a {background: url(imagens/menu_contato.jpg) 0 0 no-repeat;}
div#menu ul li#menu_contato a:hover {background-position: 0 -70px;}

/* [Active] Formata quando o mouse está sobre o link do menu */
div#menu ul li#menu_pag_inicial a#active_pag_inicial {
	height: 62px;
	color: #ff0;
	padding-top: 8px;
	background-image: url(imagens/menu_pag_inicial_active.jpg);
}
div#menu ul li#menu_produtos a#active_produtos {
	height: 62px;
	color: #ff0;
	padding-top: 8px;
	background-image: url(imagens/menu_produtos_active.jpg);
}
div#menu ul li a#active_midia {
	height: 62px;
	color: #ff0;
	padding-top: 8px;
	background-image: url(imagens/menu_midia_active.jpg);
}
div#menu ul li a#active_contato {
	height: 62px;
	color: #ff0;
	padding-top: 8px;
	background-image: url(imagens/menu_contato_active.jpg);
}



/* ##### Conteúdo ################################################################################################################ */

div#conteudo {
	width: 736px;
	padding: 10px;
	background: #fff url(imagens/conteudo_bckg.gif) repeat-y;
	margin: 0 auto;
}



/* ##### Informações de Rodapé ################################################################################################### */

div#info {
	width: 756px;
	height: 42px;
	margin: 0 auto;
	padding-top: 10px;
	text-align: center;
	line-height: 28px;
	background-image: url(imagens/info_bckg.gif);
}
/* Camada para corrigir problema de quebra de layout no FF e Opera com elementos float */
div#clear {
	clear: both;
	height: 0;
	overflow: hidden;
}
/* Camada para adicionar espaço após a camada info */
div#pos_info {
	clear: both;
	height: 25px;
	overflow: hidden;
}
/* Formata o link do rodapé */
div#info a {
	font-size: 70%;
	color: #666;
	text-decoration: none;
}
/* Formata quando o mouse está sobre o link no rodapé */
div#info a:hover {
	color: #999;
	text-decoration: underline;
}
/* Imagem: xhtml.gif = Validador W3C */
img#xhtml {
	width: 80px;
	height: 15px;
	margin: 5px 0 5px 4px;
	vertical-align: middle;
}



/* ##### Página Inicial ########################################################################################################## */

/* Imagem: zamy.jpg = Imagem da página inicial */
img#foto1 {
	float: left;
	margin-top: 3px;
	margin-right: 7px;
}
/* Formatação da frase: Sejam bem vindos e aproveitem!!! */
h3#bem_vindos {
	text-align: center;
	margin: 20px 0;
}



/* ##### Página Mídia ############################################################################################################ */

/* Vídeos */
ul#videos {
	list-style-type: none;
	margin-left: 20px;
	padding:15px 0;
}
ul#videos li {
	margin-bottom: 15px;
}
ul#videos li h3 {
	overflow: visible;
	font-size: 125%;
	line-height: 20px;
	background: url(imagens/menu_symbol.jpg) no-repeat left -10px;
	padding:3px 0 10px 35px;
	cursor:pointer;
}
ul#videos li h3:hover {
	color: #0c0;
}

ul#videos li div.video { padding:0 0 0 35px; }

/* Formatação da tabela */
table.midia {
	width: 100%;
	margin: 5px 0;
}
/* Formatação das células: tamanho do texto, posição vertical e altura da célula */
table.midia tr td {
	font-size: 70%;
	vertical-align: middle;
	height: 30px;
	border: 1px solid;
	border-color: #ececec #ccc #ccc #ececec;
}
/* Formatação da célula da Data */
table.midia tr td.data {
	width: 100px;
	font-weight: bold;
	text-align: center;
	background-color: #f5f5f5;
}
/* Formatação da célula da descrição do evento */
table.midia tr td.descricao {
	width:633px;
	text-align: left;
	padding: 0 5px;
	border-left: none;
}
/* Célula "vazia" */
table.midia tr td.clear {
	height: 10px;
	border: none;
}

/* Destaques de programas */
table.midia tr td.dataDestaque {
	color:#f00;
	background-color:#ffc;
	border-color: #f00;
}
table.midia tr td.programaDestaque {
	background-color:#ffc;
	border-color: #f00;
}


/* Ano */
h3.ano {
	display:block;
	height:28px;
	line-height:28px;
	padding-top:15px;
}
h3.ano a {
	display:block;
	height:28px;
	line-height:28px;
	text-decoration:none;
	color:#c00;
	padding-left:40px;
}
h3.ano a:hover {
	text-decoration:underline;
	color:#f00;
}
h3.ano a.mostra { background:url(imagens/mostraAno.gif) no-repeat left top; }
h3.ano a.esconde { background:url(imagens/escondeAno.gif) no-repeat left top; }


/* ##### Página Produtos ######################################################################################################### */

ul#produtos {
	list-style-type: none;
	margin-left: 20px;
}
ul#produtos li {
	margin-bottom: 15px;
}
ul#produtos li a {
	overflow: visible;
	padding-left: 35px;
	font-size: 125%;
	line-height: 40px;
	background: url(imagens/menu_symbol.jpg) left no-repeat;
}
ul#produtos li a:hover {
	color: #0c0;
}



/* ##### Página Apostilas ######################################################################################################## */

/* Lista - Apostilas disponíveis */
div#conteudo ul#list li {
	font-size: 90%;
	font-style: italic;
	margin: 5px 0 5px 20px;
}
/* Observações */
div#obs {
	width: 396px;
	padding: 5px;
	background-color: #ffc;
	border: 2px solid #f00;
	margin-top: 10px;
}
/* Lista das observações */
div#obs ul {
	list-style: inside disc;
}
div#obs ul li {
	font-size: 70%;
	margin: 5px;
}
/* Formatação dos dados bancários */
div#obs ul li div {
	width: 376px;
	display: block;
	background-color: #fff;
	margin: 3px auto;
	padding: 3px;
	border: 1px dashed #ccc;
}
/* Formatação do nome do banco */
div#obs ul li div span.red {
	color: #f00;
	font-weight: bold;
}



/* ##### Páginas dos produtos #################################################################################################### */

h2.titulo {
	display: block;
	clear: both;
	margin-bottom: -5px;
	padding-top: 15px;
}
div#botao_voltar {
	width: 90px;
	height: 35px;
	margin-bottom: 10px;
}
div#botao_voltar a {
	display: block;
	width: 90px;
	height: 35px;
	text-indent: -9999px;
	background-image: url(imagens/botao_voltar.gif);
	background-position: 0 0;
}
div#botao_voltar a:hover {
	background-position: 0 -35px;
}

/* Miniaturas */
ul.miniaturas {
	list-style: none;
	width: 696px;
	margin: 10px auto;
	_margin-bottom: 0; /* Hack para o IE6 */
}
ul.miniaturas li {
	display: block;
	width: 174px;
	height: 174px;
	float: left;
	position: relative;
}
ul.miniaturas li a {
	display: block;
	float: left;
	width: 140px;
	height: 140px;
	margin: 15px;
	_margin: 7px; /* Hack para o IE6 */
}
ul.miniaturas li a img {
	border: 2px solid #999;
}

ul.miniaturas li a:hover img {
	border-color: #f00;
}

/* Detalhes */
ul.miniaturas li div.detalhes {
	display: none;
	z-index: 10000;
	position: absolute;
	top: -110px;
	left: -7px;
	width: 159px;
	height: 92px;
	padding: 14px 15px 42px 14px;
	background-image: url(imagens/details_baloon.png) !important;
	background-image: none;
	filter: none !important;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=imagens/details_baloon.png,sizingMethod='scale');
}
/* Nome do produto */
ul.miniaturas li div.detalhes p.nome_produto {
	width: 155px;
	height: 36px;
	font-size: 14px;
	color: #000;
	text-align: center;
	position: absolute;
	top: 9px;
	left: 16px;
	background-color: #fff;
	z-index: 1000;
}
/*	Cesta de banho, Pantufas Infantis, Botinhas, Sandálias de Verão, Kits,
	Necesseries, Fantoches, Mochilas Infantis, Almofadas, Travesseiros e Páscoa */
ul.miniaturas li div.detalhes p.produtosEmGeral {height:54px;}
/* <hr /> */
hr.cestaDeBanho {
	display: block;
	width: 80%;
	margin: 0 auto;
	clear: both;
}

/* Preço do produto */
ul.miniaturas li div.detalhes p.preco {
	width: 133px;
	font-size: 12px;
	font-weight: bold;
	color:#fff;
	margin-top: -4px;
	text-align: center;
	position: absolute;
	bottom: 38px;
	left: 27px;
	background-color: #c00;
	z-index: 900;
}

/* Detalhes (Pantufas Infantis, Cestas de banho e Kits) */
ul.miniaturas li div.preco_menor {
	background-image: url(imagens/details_baloon_2.png) !important;
	background-image: none;
	filter: none !important;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=imagens/details_baloon_2.png,sizingMethod='scale');
}



/* ##### Página Cestas de Banho ################################################################################################## */

/* Miniaturas (Cestas de Banho) */
ul.cestas_de_banho {
	width: 174px;
	margin: 10px 0 10px 115px;
	_margin: 10px 0 0 57px; /* Hack para o IE6 */
	*float: left; /* Hack para o IE7 */
	_float: left; /* Hack para o IE6 */
}
/* Itens da Cesta */
div.itens_cesta {
	float: left;
	width: 266px;
	height: 136px;
	padding-left: 48px;
	padding-top: 8px;
	margin: 17px 0;
	*margin: 25px 0; /* Hack para o IE7 */
	_margin: 18px 0; /* Hack para o IE6 */
	background-image: url(imagens/itens_cestas_de_banho.gif);
	overflow: hidden;
}
div.itens_cesta h3 {
	font-size: 110%;
	color: #36c;
	display: block;
	width: 244px;
	height: 26px;
	text-align: center;
	border-bottom: 2px solid #36c;
	margin-bottom: 5px;
}
div.itens_cesta p {
	width: 110px;
	height: 20px;
	font-size: 70%;
	float: left;
	display: block;
	margin: 3px 14px 0 0;
	padding: 0 0 0 5px;
}



/* ##### Página Contato ########################################################################################################## */

div#conteudo_contato {
	width: 736px;
	margin: 0 auto;
	background: #fff url(imagens/contato_bckg.gif) repeat-y;
}
h3#zamy {
	margin: 20px 0;
}
/* Formatação das áreas Telefones, Celular e E-mail */
div#telefone, div#celular, div#email {
	width: 238px;
	float: left;
}
/* Formatação da área Celular diferenciada, com uma margem de 10px */
div#celular {
	margin: 0 11px;
}
/* Formatação dos Títulos das áreas Telefones, Celular e E-mail */
div#telefone h3, div#celular h3, div#email h3 {
	width: 203px;
	height: 60px;
	margin-top: 10px;
	font: 30px "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-indent: 52px;
	line-height: 43px;
	color: #999;
}
/* Imagem de fundo: Telefone */
div#telefone h3 {
	background: url(imagens/img_tel.gif) no-repeat;
}
/* Imagem de fundo: Celular */
div#celular h3 {
	background: url(imagens/img_cel.gif) no-repeat;
}
/* Imagem de fundo: E-mail */
div#email h3 {
	background: url(imagens/img_email.gif) no-repeat;
}
/* Formatação do Texto: Telefone e Celular */
div#telefone p, div#celular p {
	font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;;
	text-align: center;
}
/* Formatação do Texto: E-mail (tamamnho menor) */
div#email p {
	font: 21px "Trebuchet MS", Arial, Helvetica, sans-serif;;
	text-align: center;
}
/* Ícone do envelope (enviar e-mail) */
div#email a {
	display: block;
	width: 19px;
	height: 17px;
	clear: both;
	margin: 5px auto 0;
	text-indent: -99999px;
	overflow: hidden;
	background: url(imagens/email.gif) 0 0 no-repeat;
}
div#email a:hover {
	background-position: 0 -17px;
}