﻿/* CSS RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
/* remember to define focus styles! */
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

body{
font-family: Verdana, Sans-serif;
font-size: 12px;
}
body.home{
background: #e32200 url(css/bg_home.jpg) no-repeat top center;
}
body.internas{
background: #e32200 url(css/bg_home2.jpg) no-repeat top center;
}
a{
color: red;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}


strong{
	font-weight: bold;
}


h6{
	font-family: Arial, Sans;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;	
	margin-top: 20px;
	color: #81c9dc;
}


em{
	font-style: italic;
}

.img_float_left{
	float: left;
	margin-bottom: 10px;
	margin-right: 10px;
}

.btn_ok{
float: right;
margin-right: 15px;
}

.float_left{
float: left;
}

.txt{
border: 1px solid #6ec0df;
font-family: Verdana, Sans-serif;
font-size: 12px;
color: black;
padding: 3px;
margin-bottom: 10px;
}


p{
margin-bottom: 10px;
}


h2.chapeu{
padding-top: 8px;
height: 26px;
}
h2.chapeubranco{
padding-top: 8px;
height: 26px;
}

h2.chapeubranco span{
font-family: Arial;
font-size: 18px;
font-weight: bold;
letter-spacing: -0.5px;
color: #81c9dc;
border-bottom: 1px dotted #dadada;
padding-bottom: 4px;
}


h2.destaque{
background: url(css/ico_star.gif) no-repeat;
padding-left: 38px;
}
h2.produtos{
background: url(css/ico_prod.gif) no-repeat;
padding-left: 38px;
}
h2.produtosbranco{
background: url(css/ico_prod2.gif) no-repeat;
padding-left: 38px;
}

h2.chapeu span{
font-family: Arial;
font-size: 18px;
font-weight: bold;
letter-spacing: -0.5px;
color: white;
border-bottom: 1px dotted white;
padding-bottom: 4px;
}

h4{
color: #e32200;
font-family: Arial, Sans-serif;
font-size: 18px;
letter-spacing: -0.5px;
font-weight: bold;
}




/***** COLUNAS/////////*/

div#conteudo{
width: 955px;
margin: auto;
padding-top: 5px;
}


div#conteudo div#esquerda{
width: 198px;
float: left;
margin-top: 13px;
margin-right: 15px;
}

div#conteudo div#miolo{
float: left;
width: 740px;
margin-top: 25px;
}

div#rodape{
clear: both;
}

/***** COLUNAS/////////*/

h1{
float: left;
margin-left: 14px;
}

div#conteudo div#headermeio{
width:500px;
float: left;
margin-top: 10px;
margin-left: 20px;
margin-bottom: 40px;
}

div#conteudo div#headermeio ul#menu_principal{
background: url(css/menu_principal.png) no-repeat;
width:475px;
height: 32px;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px
}
div#conteudo div#headermeio ul#menu_principal li{
float: left;

}
div#conteudo div#headermeio ul#menu_principal li a{
display: block;
height: 32px;
}
div#conteudo div#headermeio ul#menu_principal li a span{
display: none;
}
div#conteudo div#headermeio ul#menu_principal li a.item01{width:75px;margin-right: 25px;}
div#conteudo div#headermeio ul#menu_principal li a.item02{width:120px;margin-right: 20px;}
div#conteudo div#headermeio ul#menu_principal li a.item03{width:85px;margin-right: 12px;}
div#conteudo div#headermeio ul#menu_principal li a.item04{width:125px;}


.menues{
background: url(css/menu_principal_es.png) no-repeat !important;
}

.menuen{
background: url(css/menu_principal_en.png) no-repeat !important;
}


div#conteudo ul#menuidiomas{
float: left;
background: url(css/menu_idiomas.png) no-repeat;
width: 120px;
height: 112px;
padding-top: 5px;
margin-left: 70px;


}

div#conteudo ul#menuidiomas li a{
display: block;
height: 23px;
margin-bottom: 6px;

}
div#conteudo ul#menuidiomas li a span{
display: none;
}


/***** esquerda******/
div#conteudo div#esquerda ul#menu_lateral{
background: url(css/menu_lateral.png) no-repeat;
width: 170px;
height: 107px;
margin-left: 15px;
font-family: Arial, Sans-serif;
font-size: 20px;
letter-spacing: -1px;
font-weight: bolder;
text-align: center;
line-height: 36px;
margin-bottom: 20px;
}

div#conteudo div#esquerda ul#menu_lateral a{
color:white
}



div#conteudo div#esquerda div#box_verde{
background: url(css/box_verde.gif) no-repeat top;
width: 198px;
height: 176px;
margin-bottom: 20px;
}
div#conteudo div#esquerda div#box_verde h3{
padding: 15px 10px;
}
div#conteudo div#esquerda div#box_verde select{
width: 170px;
margin-left: 15px;
margin-bottom: 10px;
}

div#conteudo div#esquerda div#box_amarelo{
background: url(css/box_amarelo.gif) no-repeat top;
width: 198px;
height: 221px;
margin-bottom: 20px;
}
div#conteudo div#esquerda div#box_amarelo h3{
padding: 20px 10px;
}

div#conteudo div#esquerda div#box_amarelo p, div#conteudo div#esquerda div#box_amarelo input{
margin-left: 15px;
}

div#conteudo div#esquerda div#box_rosa{
background: url(css/box_rosa.gif) no-repeat top;
width: 198px;
height: 146px;
margin-bottom: 20px;
}
div#conteudo div#esquerda div#box_rosa h3{
padding: 20px 10px 10px 10px;
}

div#conteudo div#esquerda div#box_rosa form input.cep01{
width: 75px;
float: left;
margin-left: 15px;
}
div#conteudo div#esquerda div#box_rosa form input.cep02{
width: 30px;
float: left;
margin-left: 10px;
}
div#conteudo div#esquerda div#box_rosa p{
margin-left: 15px;
width: 170px;
}
div#conteudo div#esquerda div#box_azul{
background: url(css/box_azul.gif) no-repeat top;
width: 198px;
height: 227px;
margin-bottom: 20px;
}
div#conteudo div#esquerda div#box_azul h3{
padding: 20px 10px 5px 5px;
}
div#conteudo div#esquerda div#box_azul p, div#conteudo div#esquerda div#box_azul form{
margin-left: 15px;
width: 170px;
}
div#conteudo div#esquerda div#box_azul p, div#conteudo div#esquerda div#box_azul form ul li{
margin-bottom: 5px;
}

/***** fim de esquerda******/


div#conteudo div#miolo div#chamada_principal{
/*background: url(css/destaque.png) no-repeat right;*/
height: 267px;
margin-bottom: 20px;
}
div#conteudo div#miolo div#chamada_principal ul{
position: relative;
float: left;
background: url(css/menu_numeros.png) no-repeat;
width: 50px;
height: 185px;
margin: 45px 0 0 17px;
}
div#conteudo div#miolo div#chamada_principal ul li a span{
display: none;
}
div#conteudo div#miolo div#chamada_principal ul li a{
position: absolute;
display: block;
width: 50px;
height: 34px;
margin-bottom: 3px;
z-index:10;
}

div#conteudo div#miolo div#chamada_principal ul li a.item01 {
	top:0px;
	left:0px;
}

div#conteudo div#miolo div#chamada_principal ul li a.item02 {
	top:37px;
	left:0px;
}

div#conteudo div#miolo div#chamada_principal ul li a.item03 {
	top:74px;
	left:0px;
}

div#conteudo div#miolo div#chamada_principal ul li a.item04 {
	top:111px;
	left:0px;
}

div#conteudo div#miolo div#chamada_principal ul li a.item05 {
	top:148px;
	left:0px;
}


div#conteudo div#miolo div#chamada_principal a#chamada_principal_link{
display: block;
float: left;
width: 684px;
height: 267px;
}

/*#botoes img{
	text-align:center;
	width:700px;
	border:0;
	padding:0
}*/

div#conteudo div#miolo ul#prods{
display: block;
width: 494px;
float: left;
margin-left: 15px;
}

div#conteudo div#miolo ul#prods h2{
margin-bottom: 20px;
}
div#conteudo div#miolo ul#prods li{
width: 104px;
height: 171px;
float: left;
margin-right: 10px;
overflow: hidden;
}
div#conteudo div#miolo ul#prods li a span{
display: block;
margin-top: 5px;
margin-bottom: 10px;
}

div#conteudo div#miolo div#direita{
float: left;
width: 183px;
margin-left: 40px;
}
div#conteudo div#miolo div#direita ul#jogos{
margin-top: 15px;
margin-bottom: 85px;
}

div#conteudo div#miolo div#direita ul#jogos li{
margin-bottom: 15px;
width: 168px;
}
div#conteudo div#miolo div#direita ul#jogos li img{
display: block;
margin-bottom: 5px;
}
div#conteudo div#miolo div#direita ul#jogos li a{
color: black;
}

/*fim de miolo******/


div#rodape{
background: url(css/bg_rodape.jpg) no-repeat top center;
text-align: center;
height: 227px;
padding-top: 80px;
}
div#rodape ul{
margin-bottom: 20px;
}
div#rodape ul li{
display: inline;
text-transform: uppercase;
margin-right: 10px;
}

div#rodape ul li a{
color:white
}

div#rodape p a{
color:white
}


#conteudo-internas{
	margin: 0px 20px 50px 40px;
	overflow:auto;
	height:600px
}

#tit-pg-img-4{ /* Acessorios */
	background: url(css/header-acessorios.png);
	margin: 10px 0px 0px 30px;
	width:678px;
	height:210px;
}

#tit-pg-img-5{ /* Velas */
	background: url(css/header-velas.png);
	margin: 10px 0px 0px 30px;
	width:678px;
	height:210px;
}

#tit-pg-img-6{ /* Temas */
	background: url(css/header-temas.png);
	margin: 10px 0px 0px 30px;
	width:678px;
	height:210px;
}

#tit-pg-img-{ /* Default */
	margin: 10px 0px 0px 30px;
	width:678px;
	height:210px;
}

#tit-pg{
	margin: 50px 20px 0px 40px;
	font-family: Arial, Sans-serif;
	font-size: 20px;
	font-weight: bolder;
	color:red;
}

#caminho-pao{
	margin: 10px 20px 20px 40px;	
	
}

#menu-internas {
	margin: 25px 20px 0px 0px;
	font-size: 11px
}

#bg-produtos-interna{
	float:right;
	text-align:left; 
	background: url(css/post-it-produtos-interna.png) no-repeat;
	margin-top: 30px;
	width:350px;
	height:330px;
}

#detalhes-produtos{
	padding: 60px 30px 30px 30px
}

#frm2{
	margin-bottom:30px
}


/*** interna produtos***/

div#conteudo div#miolo #header_interna{
margin: 10px;
margin-left: 50px;
}


ul#breadcrumb{
background: url(css/ico_breadcrumb.gif) no-repeat;
margin-left: 60px;
padding-left: 24px;
padding-bottom: 10px;
margin-bottom: 10px;
font-size: 11px;
}
ul#breadcrumb.semheader{
	margin-top: 25px;
}


div#conteudo div#miolo ul#breadcrumb li{
display: inline;
border-bottom: 1px dotted #6c6c6c;
line-height: 23px;
}
div#conteudo div#miolo ul#breadcrumb a{
color: #6c6c6c;
padding-top: 5px;
}
div#conteudo div#miolo ul#breadcrumb a.selecionado{
font-weight:  bold;
}

div#conteudo div#miolo div#img_prod{
float: left;
}
div#conteudo div#miolo div#img_prod img{
border: 1px solid #999;
margin-left: 74px;
}
div#conteudo div#miolo div#img_prod a#mais_imagens{
font-size: 11px;
color: #6c6c6c;
display: block;
margin-left: 74px;
margin-top: 10px;
background: url(css/ico_camera.gif) no-repeat;
padding-left: 24px;
padding-bottom: 10px;
margin-bottom: 40px;
}
div#conteudo div#miolo div#img_prod a#mais_imagens span{
border-bottom: 1px dotted #6c6c6c;
line-height: 23px;
}


div#conteudo div#miolo div#info_prod{
float: left;
margin-top: -40px;
margin-left: 30px;
}

div#conteudo div#miolo div#info_prod dl{
line-height: 18px;
margin-top: 20px;
padding-left: 15px;
}

div#conteudo div#miolo div#info_prod dl dt{
font-weight: bold;
}

h4{
color: #e32200;
font-family: Arial, Sans-serif;
font-size: 18px;
letter-spacing: -0.5px;
font-weight: bold;
}








ul#paginacao{
clear: both;
padding-left: 500px;
padding-top: 60px;
}
ul#paginacao li{
float: left;
}
ul#paginacao li a{
font-size: 14px;
font-weight: bold;
font-family: Arial, Sans-serif;
padding: 5px;
color: black;
}
ul#paginacao li a:hover{
color: black;
}

div#texto_interna_fria{
padding-left: 30px;
padding-right: 20px;
color: black;
height: 740px;
}

div#texto_interna_fria a{
	color: black;
}

div#texto_interna_fria ul.lista_texo{
	list-style: square inside;
}

ul#submenu{
margin-top: 15px;
margin-bottom: 15px;
}

ul#submenu li{
display:inline;
}

ul#submenu li a{
color: black;
background:#fffdbd;
padding: 4px;	
line-height: 28px;
font-family: Arial, Sans-serif;
font-size: 11px;
text-transform: uppercase;
border: 1px dotted #6c6c6c;
}

/* Formularios*/

#form_linhas li{
	margin-bottom: 10px;
	clear: both;
}

#form_linhas li label{
	display: block;
	margin-bottom: 5px;
	width: 100px;
} 

#form_linhas li input{
	width: 63%;
}
#form_linhas li div.umterco{
		height: 60px;
		float: left;		
		width: 21%;
		padding-right: 20px;
}
#form_linhas li div.doisterco{
		height: 60px;
		float: left;
		width: 45%;
		padding-right: 20px;
}
#form_linhas li div.umterco input{
	width: 100%;
	
}

#form_linhas li div.doisterco input{
	width: 100%;
}
#form_linhas li input.bot_enviar{
   margin-left: 0px;
   font-family: Arial, Sans-serif;
	width: 180px;
	text-align: center;
	background: #7ab826;
	border: 5px solid #e7f6c8; 
	padding: 5px;
	font-size: 18px;
	letter-spacing: -1px;
	color: white;
	font-weight: bold;
	margin-top: 10px;
	
}

.bot_msg{
	width: 63%;
}

.anexo{
	width: 63%;
}

/*
#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; } 
#overlay img{ border: none; }

#overlay{ background-image: url(js/overlay.png); }

* html #overlay{
	background-color: #000;
	back\ground-color: transparent;
	background-image: url(js/blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="js/overlay.png", sizingMethod="scale");

	}
*/



/* NOVO LIGHTBOX */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.yonifest.com.br/js/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.yonifest.com.br/js/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
label{clear:both}