/**
 * Criado em 28 de Agosto de 2009
 *
 * @autor Yuri Goytacaz <yuri@maximize.art.br>
 * @cliente Knorr <www.knorr.com.br/quick>
 * 
 * @indice:
 *  00 Reset
 *  01 Html & Body
 *  02 Geral
 *  03 Cabecalho
 *  04 Navegacao
 *  05 Conteudo
 *  06 Chamadas
 *  07 Titulos
 *  08 Secoes
 *  09 Rodape
 *
**/

/* 00 Reset
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
* { padding:0; margin:0; }
legend, .hide { display:none; }
:focus { outline:0; }
ul, ol, li { list-style:none; }
a { color:#000; text-decoration:underline; }
a:hover { text-decoration:none; }
button { cursor:pointer; }
fieldset, img { border:0; }
table { border-collapse:collapse; border-spacing:0; }
input, select, textarea { font-size:18px; font-family:arial, helvetica, sans-serif; border-width:1px; border-style:solid; border-color:#999 #ccc #ccc #999; }
h1, h2, h3, h4, h5, h6 { font-family:arial, helvetica, sans-serif; }
h1 { font-size: 3em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2.167em; }
h4 { font-size: 1.667em; }
h5 { font-size: 1.167em; }
h6 { font-size: 1em; }

/* 01 Html & Body
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
html { /*background:url(../images/background.jpg) center top repeat transparent;*/ } 
body { color:#333; font-weight:normal; font:62.5% arial, helvetica, sans-serif; background:url(../images/body-bg.jpg) center top repeat transparent; }
body.termosdeuso { behavior:url(http://www.fandangos.com.br/scripts/iepngfix.htc); background:url(../images/modal-bg.png) 0 0 no-repeat transparent; }
body.sac { behavior:url(http://www.fandangos.com.br/scripts/iepngfix.htc); background:url(../images/modal-sac-bg.png) 0 0 no-repeat transparent; }
body.tabela { behavior:url(http://www.fandangos.com.br/scripts/iepngfix.htc); background:url(../images/modal-tabela-bg.png) 0 0 no-repeat transparent; }

/* 02 Geral
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#geral { position:relative; width:1000px; height:1000px; margin:0 auto; background:url(../images/geral-bg_.jpg) center top repeat transparent; }
#modal #geral { width:510px; height:auto; padding:40px 40px 0 40px; margin:0; background:none; }
.sac #geral { width:680px!important; }

/* 03 Cabecalho
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#cabecalho { display:none; }
#cabecalho h1 { display:none; }

/* 04 Navegacao
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#navegacao { position:absolute; }
#navegacao a.eco { position:absolute; top:375px; left:440px; display:block; width:200px; height:300px; text-indent:-9999px; overflow:hidden; /*background:green; opacity:0.5;*/ }
#navegacao a.queijo { position:absolute; top:405px; left:650px; display:block; width:200px; height:270px; text-indent:-9999px; overflow:hidden; /*background:yellow; opacity:0.5;*/ }
#navegacao a.presunto { position:absolute; top:135px; left:750px; display:block; width:200px; height:270px; text-indent:-9999px; overflow:hidden; /*background:red; opacity:0.5;*/ }

/* 05 Conteudo
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#conteudo { }
.tabela #conteudo { height:420px; }
.termosdeuso #conteudo { height:485px; }

/* 06 Chamadas
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#chamadas { }

/* 07 Titulos
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
h2#titulo-termosdeuso { display:block; width:320px; height:30px; padding:0 0 40px 0; background:url(../images/titulo-termosdeuso.gif) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }
h2#titulo-sac { display:block; width:440px; height:26px; background:url(../images/titulo-sac.gif) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }
h1#titulo-tabelaeco { display:block; width:281px; height:52px; background:url(../images/titulo-tabelaeco.gif) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }
h1#titulo-tabelaqueijo { display:block; width:281px; height:52px; background:url(../images/titulo-tabelaqueijo.gif) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }
h1#titulo-tabelapresunto { display:block; width:309px; height:52px; background:url(../images/titulo-tabelapresunto.gif) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }
h2#titulo-composicao { display:block; width:103px; height:19px; background:url(../images/titulo-composicao.gif) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }

/* 08 Secoes
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#apresentacao { position:absolute; top:375px; left:42px; width:298px; height:241px; background:url(../images/texto.jpg) 0 0 no-repeat; overflow:hidden; }
#apresentacao h2, 
#apresentacao strong, 
#apresentacao p { display:none; }

/* promocao vampiros */
a#vampiros { position:absolute; top:90px; left:50px; display:none; width:200px; height:150px; text-indent:-9999px; overflow:hidden; }

/* cadastro */
#cadastro { position:absolute; top:94px; left:410px; width:267px; height:285px; padding:55px 0 0 80px; background:url(../images/balao-bg.jpg) 0 0 no-repeat; overflow:hidden; }
#cadastro p { display:block; width:180px; padding:0 0 5px 40px; color:#666; text-transform:uppercase; text-align:center; font-size:1em; font-weight:bold; line-height:11px; }
#cadastro form { width:180px; height:100px; margin:0 auto; }
#cadastro label { float:left; display:block; width:150px; padding:0 0 3px 15px; overflow:hidden; }
#cadastro label strong { display:none; }
#cadastro label input { display:block; width:125px; height:18px; padding:6px 10px 0 10px; border:none; text-transform:uppercase; color:#333; font-size:11px; background:url(../images/input-bg.gif) 0 0 no-repeat; }
#cadastro label input.error { color:#ff0000; }
#cadastro label label.error { display:none!important; }
#cadastro button { display:block; width:42px; height:23px; margin:0 auto; border:none; cursor:pointer; background:url(../images/bt-ok.gif) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }

/* composicao */
div#composicao { padding:15px 0 0 0; font-size:12px; color:#666; }
div#composicao p { padding:10px 0 0 0; }
/* sac */
#sac { width:660px; height:490px; overflow:hidden; }

.sac a.fechar { position:absolute; top:30px; right:50px; display:block; width:9px; height:9px; background:url(../images/bt-fechar.gif) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }

#sac p.atendimento { display:block; padding:10px 0; font-size:14px; font-weight:bold; color:#999; }
#sac p.atendimento strong { color:#569a50; font-size:16px; }

h3#subtitulo-assunto { float:left; display:block; width:140px; height:15px; padding:5px 0 5px 0; text-transform:uppercase; font-size:12px; color:#999; font-weight:bold; text-align:left; }
#sac div.assunto { position:relative; float:left; z-index:10; }
#sac div.assunto a.assunto { display:block; width:210px; height:18px; padding:2px 0 0 7px; text-decoration:none; color:#666; font-size:13px; background:url(../images/sac-categorias-bg.gif) 0 0 no-repeat; }
#sac div.assunto ul#assuntos { position:absolute; display:none; top:0; width:208px; height:135px; padding:5px 5px; background:url(../images/sac-categorias-bg.gif) 0 -20px no-repeat; overflow:hidden; z-index:11; }
#sac div.assunto ul#assuntos li { display:block; width:180px; height:21px; }
#sac div.assunto ul#assuntos li a { display:block; width:180px; height:18px; padding:3px 0 0 3px; margin:0 0 1px 0; color:#666; font-size:13px; text-decoration:none; }
#sac div.assunto ul#assuntos li a:hover { color:#000; background-color:#eee; }

#sac form { clear:both; display:block; padding:15px 0 0 0; overflow:hidden; }
#sac form fieldset { display:blcok; height88:400px; overflow:hidden; }
#sac form label { float:left; display:block; width:319px; height:20px; padding:0 0 5px 0; overflow:hidden; }
#sac form label b { float:left; display:block; width:98px; height:27px; padding:3px 8px 0 0; font-size:12px; font-weight:bold; text-transform:uppercase; color:#999; text-align:right; background:url(../images/sac-input-left.gif) top right no-repeat; overflow:hidden; }
#sac form label input { float:left; height:17px; padding:3px 0 0 0; border:0; color:#666; font-size:12px; background:url(../images/sac-input-right.gif) top right no-repeat; }

#sac form label.nome { }
#sac form label.nome input { width:213px; }
#sac form label.email {  }
#sac form label.email input { width:213px; }
#sac form label.endereco { display:none; }
#sac form label.endereco input { width:213px; }
#sac form label.numero { display:none; }
#sac form label.numero input { width:62px; }
#sac form label.bairro { display:none; }
#sac form label.bairro input { width:213px; }
#sac form label.complemento { display:none; }
#sac form label.complemento input { width:213px; }
#sac form label.cidade { }
#sac form label.cidade input { width:213px; }
#sac form label.estado { width:139px; }
#sac form label.estado input { width:30px; }
#sac form label.cep { display:none; width:200px; }
#sac form label.cep b { width:48px; }
#sac form label.cep input { width:50px; }

#sac form .nascimento { float:left; width:319px; overflow:hidden; }
#sac form .nascimento b { float:left; display:block; width:98px; height:35px; padding:3px 8px 0 0; text-transform:uppercase; font-size:12px; color:#999; letter-spacing:-1px; font-weight:bold; text-align:right; background:url(../images/sac-input-left.gif) top right no-repeat; }
#sac form .nascimento label { width:auto; padding:0; }
#sac form .nascimento label.dia b { display:none; }
#sac form .nascimento label.dia { margin-right:1px; }
#sac form .nascimento label.dia input { width:32px; }
#sac form .nascimento label.mes { margin-right:1px; }
#sac form .nascimento label.mes b { width:5px; height:30px; padding:0; background:url(../images/sac-input-left.gif) top right no-repeat; text-align:left; text-indent:-5000em; overflow:hidden; } 
#sac form .nascimento label.mes input { width:32px; }
#sac form .nascimento label.ano { }
#sac form .nascimento label.ano b { width:5px; height:30px; padding:0; background:url(../images/sac-input-left.gif) top right no-repeat; text-align:left; text-indent:-5000em; overflow:hidden; } 
#sac form .nascimento label.ano input { width:62px; }

#sac form .contato { float:left; width:249px; padding:0 75px 0 0; overflow:hidden; }
#sac form .contato b { float:left; display:block; width:98px; height:27px; padding:3px 8px 0 0; text-transform:uppercase; font-size:12px; letter-spacing:-1px; color:#999; text-align:right; background:url(../images/sac-input-left.gif) top right no-repeat; }
#sac form .contato label { width:auto; padding:0; }
#sac form .contato label.ddd { margin-right:1px; }
#sac form .contato label.ddd b { display:none; } 
#sac form .contato label.ddd input { width:32px; }
#sac form .contato label.telefone { }
#sac form .contato label.telefone b { width:5px; height:30px; padding:0; background:url(../images/sac-input-left.gif) top right no-repeat; text-align:left; text-indent:-5000em; overflow:hidden; } 
#sac form .contato label.telefone input { width:100px; }

#sac form .sexo { clear:both; width:600px; height:40px; padding:0; overflow:hidden; }
#sac form .sexo b { float:left; display:block; width:94px; height:40px; padding:0 3px 0 0; text-transform:uppercase; font-size:12px; color:#999; font-weight:bold; text-align:right; }
#sac form .sexo label { width:auto; }
#sac form .sexo label,
#sac form .sexo label b { background:none; height:auto; padding:2px 0 0 3px; text-align:left; font-size:11px; }
#sac form .sexo label input { float:left; height:auto; margin:0 0 0 0; padding:0; background:none; }

#sac form label.mensagem { clear:both; float:none; width:620px; height:110px; background:none; }
#sac form label.mensagem b { float:left; display:block; width:98px; height:89px; padding:0 3px 0 0; background:none;  }
#sac form label.mensagem textarea { width:494px; height:89px; padding:5px 0 0 5px; border:0; color:#666; font-size:14px; font-family:Tahoma, Arial; background:url(../images/sac-textarea.gif) top right no-repeat; overflow:hidden; }
#sac form label.mensagem em { display:block; padding:0 0 0 105px; color:#999; }

#sac form label.notificar { float:left; width:420px; height:18px; padding:5px 0 0 100px; }
#sac form label.notificar input { width:15px; padding:0; background:none; }
#sac form label.notificar b { width:380px; padding:4px 0 0 5px; font-size:11px; letter-spacing:0; text-align:left; color:#666; font-weight:normal; text-transform:none; background:none; text-indent:none; }

#sac form button.enviar { float:right; display:inline-block; width:73px; height:28px; padding:0; margin:0 60px 0 0; border:0; cursor:pointer; background:url(../images/sac-bt-enviar.gif) center no-repeat; text-indent:-6500em; overflow:hidden; }

#sac form p.descricao { float:right; display:none; width:200px; padding:0 70px 0 0; margin:-115px 0 0 -10px; line-height:14px; }

#sac-erro { display:none; width:660px; height:490px; overflow:hidden; }
#sac-erro p.erro { display:block; padding:10px 0 10px 0; font-size:16px; font-weight:bold; color:#999; letter-spacing:-1px; }
#sac-erro a.reenviar { float:left; display:inline-block; width:160px; height:29px; padding:0; margin:0 5px 0 0; border:0; cursor:pointer; background:url(../images/sac-bt-reenviar.gif) center no-repeat; text-indent:-6500em; overflow:hidden; }
#sac-erro a.sac-fechar { float:left; display:inline-block; width:73px; height:28px; padding:0; margin:0 0 0 0; border:0; cursor:pointer; background:url(../images/sac-bt-fechar.gif) center no-repeat; text-indent:-6500em; overflow:hidden; }

#sac-sucesso { display:none; width:660px; height:490px; overflow:hidden; }
#sac-sucesso p { font-size:16px; font-weight:bold; color:#999; letter-spacing:-1px; }
#sac-sucesso p.sucesso { display:block; padding:10px 0 0 0; }
#sac-sucesso p.contato { display:block; padding:0 0 10px 0; }
#sac-sucesso a.sac-fechar { float:left; display:inline-block; width:73px; height:28px; padding:0; margin:0 0 0 0; border:0; cursor:pointer; background:url(../images/sac-bt-fechar.gif) center no-repeat; text-indent:-6500em; overflow:hidden; }

/* scroll */
.jScrollPaneContainer { position:relative; overflow:hidden; z-index:1; }
.jScrollPaneTrack { position:absolute; cursor:pointer; right:0; top:0; height:100%; background:#aaa; }
.jScrollPaneDrag { position:absolute; height:26px!important; background:#666; cursor:pointer; overflow:hidden; }
.jScrollPaneDragTop { position:absolute; top:0; left:0; overflow:hidden; }
.jScrollPaneDragBottom { position:absolute; bottom:0; left:0; overflow:hidden; }
a.jScrollArrowUp { display:block; position:absolute; z-index:1; top:0; right:0; text-indent:-2000px; overflow:hidden; /*background-color:#666; */ height:9px; }
a.jScrollArrowUp:hover { /*background-color:#f60; */ }
a.jScrollArrowDown { display:block; position:absolute; z-index:1; bottom:0; right:0; text-indent:-2000px; overflow:hidden; /*background-color:#666; */ height:9px; }
a.jScrollArrowDown:hover { /*background-color:#f60; */ }
a.jScrollActiveArrowButton,
a.jScrollActiveArrowButton:hover { /*background-color:#f00; */ }

.jScrollPaneTrack { background:url(../images/scroll-bg.gif) center -19px no-repeat; }
.jScrollPaneDrag { background:url(../images/scroll-handle.gif) center center no-repeat; }
.jScrollPaneDragTop { background:url(../images/scroll-handle.gif) no-repeat; height:0px; }
.jScrollPaneDragBottom { background:url(../images/scroll-handle.gif) no-repeat; height:0px; }
a.jScrollArrowUp { height:19px; width:19px; background:url(../images/scroll-arrow-up.gif) center top no-repeat; }
a.jScrollArrowUp:hover { }
a.jScrollArrowDown { height:19px; width:19px; background:url(../images/scroll-arrow-down.gif) center top no-repeat; }
a.jScrollArrowDown:hover { }

/* tabela */
#tabela { width:500px; height:289px; overflow:auto; }
.tabela em { display:block; padding:5px 0 15px 0; font-size:14px; font-weight:bold; font-style:normal; color:#999; }
#tabela table { width:470px; font-size:14px; color:#666; }
#tabela table th { color:#999; }
#tabela table th.tipo { width:200px; }
#tabela table th.quantidade { width:180px; text-align:left; }
#tabela table th.porcentagem { width:90px; }
#tabela table tr { height:40px; }
#tabela table tr.odd { background:#e8e8e8; }
#tabela table td { padding:3px 5px; }
#tabela table td.porcentagem { text-align:center; }
.tabela a.fechar { position:absolute; top:30px; right:40px; display:block; width:9px; height:9px; background:url(../images/bt-fechar.gif) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }

/* termos de uso */
#termosdeuso { width:505px; height:324px; overflow:auto; }
#termosdeuso p { margin:0 0 15px 0; font-size:12px; }
#termosdeuso em { font-size:12px; font-style:normal; }
#termosdeuso h4 { margin:0 0 10px 0; font-size:12px; font-weight:bold; }
.termosdeuso a.fechar { position:absolute; top:30px; right:35px; display:block; width:9px; height:9px; background:url(../images/bt-fechar.gif) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }

/* 09 Rodape
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#holding #rodape { position:fixed; bottom:20px; width:903px; height:40px; padding:10px 20px; margin-left:35px; behavior:url(http://www.fandangos.com.br/scripts/iepngfix.htc); background:url(../images/rodape-bg.png) 0 0 no-repeat; overflow:hidden; }

#rodape address { display:none; }
#rodape a.pepsico { float:left; display:block; width:90px; height:24px; margin:0 10px 0 0; background:url(../images/logo-pepsico.gif) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }
#rodape a.elmachips { float:left; display:block; width:36px; height:30px; margin:0 10px 0 0; background:url(../images/logo-elmachips.gif) 0 0 no-repeat; text-indent:-9999px; overflow:hidden; }

#rodape a.termosdeuso,
#rodape a.faleconosco { float:right; display:block; width:200px; height:28px; background-position:center 0; background-repeat:no-repeat; text-indent:-9999px; overflow:hidden; /*line-height:28px; text-align:center; text-transform:uppercase; font-weight:bold; font-size:1.0em; color:#666; text-decoration:none;*/ }
#rodape a.termosdeuso { background-image:url(../images/bt-termosdeuso.gif); }
#rodape a.faleconosco { background-image:url(../images/bt-faleconosco.gif); }

#rodape a.faleconosco:hover, 
#rodape a.termosdeuso:hover { background-position:center -28px; }

.tabela #rodape { color:#ece8dc; font-style:normal; font-size:11px; font-weight:bold; }