
/* fundo sombreado e picote horizontal da div #grid
--------------------------------------------------- */

#grid {
background-color: transparent;
background-repeat: repeat-x;
}


/* posicionamento dos picotes verticais 
--------------------------------------- */
#principal, 
#secundario, 
h1,
h2,
h3 {
background-image: url(../img/picote-principal-321.gif); /* todos usam trechos diferentes do mesmo fundo */
background-position: 0px 2px; /* +2px verticais para alinhar picotes */
background-repeat: repeat-y; 
}

/* a largura do elemento tem que ser explicita */
h1 {
background-position: 0px 0px; /* picote esq */
width: 368px; /* correcao de -2px p/ alinhar picote */
}
h2 {
background-position: -393px 0px; /* picote esq. correcao de -2px p/ alinhar picote */
width: 252px; /* correcao de +2px p/ alinhar picote */
}
h3 {
background-position: -645px 0px; /* picotes esq e dir */
width: 130px;
}


/* posicionamento dos picotes verticais: contexto produto
--------------------------------------------------------- */
#principal.produto, 
#principal.produto #secundario, 
#principal.produto h1,
#principal.produto h2,
#principal.produto h3 {
background-image: url(../img/picote-principal-222.gif); /* todos usam trechos diferentes do mesmo fundo */
background-position: 0px 2px; /* +2px verticais para alinhar picotes */
background-repeat: repeat-y; 
}

/* a largura do elemento tem que ser explicita */
#principal.produto h1 {
background-position: -774px 0px; /* picote esq */
width: 494px; 
}
#principal.produto h2 {
left: 248px; /* ver largura de #conteudo */
background-position: -519px 0px; /* picote esq. */
width: 256px; 
}


/* cabecalhos e icones 
---------------------- */

h1,
h2,
h3 {
margin: 0;
padding: 0;
height: 46px;
position: absolute;
top: -46px;
background-color: transparent;
}
h1 {
padding-left: 25px;
/*line-height: 46px;*/
}
h2 {
left: -1px; /* alinha picotes */
}
h2 span, 
h3 span {
height: 11px;
line-height: 11px;
display: block;
padding: 22px 6px 13px 26px;
background-color: transparent;
background-position: 6px 20px;
background-repeat: no-repeat;

/*background-color: orange;*/



}
h2 span {
background-image: url(../img/icone-selecionar.gif);
}
h3 span {
background-image: url(../img/icone-filtrar.gif);
}
