/* Projeto: CinePE 2010 (http://www.cine-pe.com.br) Autor: Thiago Targino Versão: 1.5 [Índice] 0- Reset 1- Global 2- Links 3- Cabeçalho 4- Navegação 5- Meio 6- Formulários 7- Extras 8- Sprites 9- Rodapé */ /* 0- 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, b, u, i, center, 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-size:100%; vertical-align:baseline; background:transparent;} ol, ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:'';content: none;} :focus {outline:0;} table {border-collapse: collapse;border-spacing:0;} caption, th, td {text-align: left;font-weight:normal;} strong {font-weight:bold;} em {font-style:italic;} input {margin:0; padding:0;} /* 1- Global –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ body {line-height:1; font:normal 11px Arial, Helvetica, sans-serif; vertical-align:top; background:#f0eeee url(../images/layout/body.gif) repeat-x; color:#626262;} /* TOOLBOX */ *.right {float:right;} *.left {float:left;} *.align-left {text-align:left;} *.align-right {text-align:right;} *.align-center {text-align:center;} *.justify {text-align:justify;} *.hide {display:none;} *.clear {clear:both;} *.bold {font-weight:bold;} *.italic {font-style:italic;} *.underline {border-bottom:1px solid;} *.highlight {background:#ffc;} img.centered {display:block;margin-left: auto;margin-right: auto;} img.alignleft {float:left;margin:4px 10px 4px 0;} img.alignright {float:right;margin:4px 0 4px 10px;} /* CLEARFIX */ *.clearfix:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;} *.clearfix {display:block;} html[xmlns] .clearfix {display:block;} * html .clearfix {height:1%;} /* CONTAINERS */ .bg {background:url(../images/layout/topo/bg-topo.png) no-repeat center top;} #all {position:relative; left:50%; margin-left:-451px; width:901px;} /* 2- Links –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ a:link, a:visited {color:#626262; text-decoration:none;} a:hover {color:#626262; text-decoration:underline;} a:active {color:#626262;} /* 3- Cabeçalho –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ #hd {position:relative; width:100%; height:520px;} h1, h1 a {z-index:4; position:absolute; display:block; width:200px; height:260px; top:0; left:0;} h1 a {display:block; background:url(../images/layout/topo/logo.png); text-indent:-1000em;} #hd #banner {float:left;} #hd #apresenta {position:absolute; right:0;} /* 4- Navegação –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ /* MENU PRINCIPAL 1 */ #hd .memu-1 {float:right; margin-top:88px;} #hd .memu-1 li {float:left;} #hd .memu-1 li a {position:relative; display:block; width:68px; height:40px; margin-right:1px; background-color:#fff; text-indent:-1000em; cursor:pointer;} #hd .memu-1 li a.i1 {width:68px;} #hd .memu-1 li a.i2 {width:77px; background-position:-68px 0;} #hd .memu-1 li a.i3 {width:81px; background-position:-147px 0;} #hd .memu-1 li a.i4 {width:65px; background-position:-229px 0;} #hd .memu-1 li a.i5 {width:53px; background-position:-295px 0;} #hd .memu-1 li a.i6 {width:92px; background-position:-349px 0;} #hd .memu-1 li a.i7 {width:56px; background-position:-442px 0;} #hd .memu-1 li a.i8 {width:67px; background-position:-499px 0;} #hd .memu-1 li a.i9 {width:63px; background-position:-567px 0;} #hd .memu-1 li a.i10 {width:68px; background-position:-631px 0;} /* hover */ #hd .memu-1 li a .hover {position:absolute; top:0; left:0; display:block; height:40px;} #hd .memu-1 li a.i1 .hover {width:68px; background-position:0 -41px;} #hd .memu-1 li a.i2 .hover {width:77px; background-position:-68px -41px;} #hd .memu-1 li a.i3 .hover {width:81px; background-position:-147px -41px;} #hd .memu-1 li a.i4 .hover {width:65px; background-position:-229px -41px;} #hd .memu-1 li a.i5 .hover {width:53px; background-position:-295px -41px;} #hd .memu-1 li a.i6 .hover {width:92px; background-position:-349px -41px;} #hd .memu-1 li a.i7 .hover {width:56px; background-position:-442px -41px;} #hd .memu-1 li a.i8 .hover {width:67px; background-position:-499px -41px;} #hd .memu-1 li a.i9 .hover {width:63px; background-position:-567px -41px;} #hd .memu-1 li a.i10 .hover {width:68px; background-position:-631px -41px;} /* MENU PRINCIPAL 2 */ #hd .memu-2 {position:absolute; z-index:2; left:0; bottom:80px; _bottom:79px;} #hd .memu-2 li {float:left;} #hd .memu-2 li a {position:relative; display:block; width:73px; height:50px; text-indent:-1000em; cursor:pointer;} #hd .memu-2 li a.i10 {width:73px; background-position:0 -82px;} #hd .memu-2 li a.i11 {width:86px; background-position:-73px -82px;} #hd .memu-2 li a.i12 {width:75px; background-position:-159px -82px;} #hd .memu-2 li a.i13 {width:72px; background-position:-234px -82px;} #hd .memu-2 li a.i14 {width:125px; background-position:-306px -82px;} /* hover */ #hd .memu-2 li a .hover {position:absolute; top:0; left:0; display:block; height:50px;} #hd .memu-2 li a.i10 .hover {width:73px; background-position:0 -133px;} #hd .memu-2 li a.i11 .hover {width:86px; background-position:-73px -133px;} #hd .memu-2 li a.i12 .hover {width:75px; background-position:-159px -133px;} #hd .memu-2 li a.i13 .hover {width:72px; background-position:-234px -133px;} #hd .memu-2 li a.i14 .hover {width:125px; background-position:-306px -133px;} /* Abas */ #md #content #tabs {float:left; width:100%; margin-bottom:24px;} #md #content #tabs li {float:left;} #md #content #tabs li a {position:relative; display:block; height:30px; margin-right:1px; text-indent:-1000em;} #md #content #tabs li a.i1 {width:115px; background-position:0 -31px;} #md #content #tabs li a.i2 {width:65px; background-position:-116px -31px;} #md #content #tabs li a.i3 {width:96px; background-position:-182px -31px;} #md #content #tabs li a.i4 {width:88px; background-position:-279px -31px;} #md #content #tabs li a.i5 {width:64px; background-position:0 -124px;} #md #content #tabs li a.i6 {width:65px; background-position:-65px -124px;} #md #content #tabs li a.i7 {width:71px; background-position:-131px -124px;} #md #content #tabs li a.i8 {width:138px; background-position:-203px -124px;} #md #content #tabs li a.i9 {width:105px; background-position:-342px -124px;} #md #content #tabs li a.i10 {width:103px; background-position:0 -217px;} #md #content #tabs li a.i11 {width:112px; background-position:-104px -217px;} #md #content #tabs li a.i12 {width:100px; background-position:-217px -217px;} /* hover */ #md #content #tabs li a .hover {position:absolute; top:0; left:0; display:block; height:30px;} #md #content #tabs li a.i1 .hover {width:115px; background-position:0 -93px;} #md #content #tabs li a.i2 .hover {width:65px; background-position:-116px -93px;} #md #content #tabs li a.i3 .hover {width:96px; background-position:-182px -93px;} #md #content #tabs li a.i4 .hover {width:88px; background-position:-279px -93px;} #md #content #tabs li a.i5 .hover {width:64px; background-position:0 -186px;} #md #content #tabs li a.i6 .hover {width:65px; background-position:-65px -186px;} #md #content #tabs li a.i7 .hover {width:71px; background-position:-131px -186px;} #md #content #tabs li a.i8 .hover {width:138px; background-position:-203px -186px;} #md #content #tabs li a.i9 .hover {width:105px; background-position:-342px -186px;} #md #content #tabs li a.i10 .hover {width:103px; background-position:0 -279px;} #md #content #tabs li a.i11 .hover {width:112px; background-position:-104px -279px;} #md #content #tabs li a.i12 .hover {width:100px; background-position:-217px -279px;} /* ativo */ #md #content #tabs li.active a.i1 {background-position:0 -62px;} #md #content #tabs li.active a.i2 {background-position:-116px -62px;} #md #content #tabs li.active a.i3 {background-position:-182px -62px;} #md #content #tabs li.active a.i4 {background-position:-279px -62px;} #md #content #tabs li.active a.i5 {background-position:0 -155px;} #md #content #tabs li.active a.i6 {background-position:-65px -155px;} #md #content #tabs li.active a.i7 {background-position:-131px -155px;} #md #content #tabs li.active a.i8 {background-position:-203px -155px;} #md #content #tabs li.active a.i9 {background-position:-342px -155px;} #md #content #tabs li.active a.i10 {background-position:0 -248px;} #md #content #tabs li.active a.i11 {background-position:-104px -248px;} #md #content #tabs li.active a.i12 {background-position:-217px -248px;} /* 5- Meio –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ #md {position:relative; z-index:100; float:left; width:100%; margin-top:-80px;} #md #content {float:left; position:relative; width:478px; min-height:1023px; height:auto !important; height:1023px; padding:20px; background-color:#fff; border:1px solid #e9e8e8;} /* Post */ #md #content .post {overflow:hidden; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #e9e8e8;} #md #content .post h3 {margin-bottom:5px; font:18px 'Trebuchet MS', Arial, sans-serif; color:#000; font-weight:normal;} #md #content .post h3 a {color:#000;} #md #content .post h4 {margin-bottom:30px; font-size:10px; color:#8f8f8f; font-weight:normal;} #md #content .post p {font-size:11px; margin-bottom:22px;} #md #content .post img {display:block; margin-left:auto; margin-right:auto; margin-bottom:30px; padding:3px; border:1px solid #e9e8e8;} #md #content .post .post-info, #md #content .post .post-info .comments {float:left;} #md #content .post .post-info .comments .c-legend {float:left; display:block; width:51px; height:10px; margin-right:4px; text-indent:-1000em;} /* Balão de comentários */ .comm-l, .comm-r {float:left} .comm-l {padding-left:4px; background-position:left top;} .comm-r {padding-right:4px; background-position:right top;} .comm-c {float:left; position:relative; padding-left:1px; background-color:#ffe400; font:10px Tahoma, Arial, Helvetica, sans-serif;} .comm-c a {float:left;} .comm-c a:hover {text-decoration:none;} .comm-f {position:absolute; width:4px; height:4px; bottom:-3px; right:0; background-position:0 -131px;} /* Compartilhar */ #md #content .post .post-info .compartilhar {float:left;} #md #content .post .post-info .compartilhar span.bar {float:left; width:1px; height:13px; margin:0 11px; background-position:0 -135px;} #md #content .post .post-info .compartilhar a {float:left; display:block; width:36px; height:13px; text-indent:-1000em; background-position:0 -118px;} /* Paginação */ #md #content .paginacao {text-align:center; width:100%; font-size:11px; line-height:1em;} #md #content .paginacao a.anterior, #md #content .paginacao a.proximo {display:block; width:76px; height:10px; text-indent:-1000em;} #md #content .paginacao a.anterior {float:left; background-position:0 -16px;} #md #content .paginacao a.proximo {float:right; background-position:0 -33px;} #md #content .paginacao a.active {color:#000; font-size:18px; line-height:0.1em;} #md #content .paginacao span {margin:0 5px;} /* INTERNAS */ #md #content .internas h2 {margin-bottom:20px; padding-bottom:6px; border-bottom:1px solid #e9e8e8; font:18px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#000;} #md #content .internas h3 {margin-bottom:10px; color:#fca000; font-size:14px; line-height:1.3em;} #md #content .internas h3 span {color:#626262; font-size:11px; font-weight:normal;} #md #content .internas h4 {margin-bottom:8px; font-size:14px;} #md #content .internas h4 span {font-style:italic; font-size:12px;} #md #content .internas dl dt, #md #content .internas dl dd {margin-bottom:6px;} #md #content .internas dl {margin-bottom:30px;} #md #content .internas dl dt {font-weight:700;} #md #content .internas ul.lista-numeros li strong {font-size:18px;} #md #content .internas ul.lista-numeros li.impar strong {color:#fca000;} #md #content .internas ul.lista-numeros li.par strong {color:#626262;} /* Retrátil */ #md #content .internas ul.lista-numeros li div {display:none; margin:20px 0;} #md #content .internas ul.lista-numeros li div h4 {margin-bottom:10px; font-size:14px;} #md #content .internas ul.lista-numeros li div h4 span {font-size:11px; font-style:italic; font-weight:normal;} #md #content .internas ul.lista-numeros li div h5 {margin-bottom:10px; font-size:13px; font-style:italic;} #md #content .internas ul.lista-numeros li div dl dd {margin-bottom:10px; margin-left:12px;} #md #content .internas ul.lista-numeros li div dl dd span {font-weight:700;} #md #content .internas ul.lista-numeros li div p {margin-bottom:15px; line-height:1.4em;} #md #content .internas ul.lista-numeros li div p span {font-weight:700;} #md #content .internas p {margin-bottom:20px; line-height:1.4em;} #md #content .internas p span.enfase {text-decoration:underline;} #md #content .internas a.mais {text-decoration:underline; color:#000;} #md #content .internas .calendar-prog {overflow:hidden; margin-bottom:1px; text-align:center; background-color:#ffe400;} #md #content .internas .calendar-prog dt, #md #content .internas .calendar-prog dd {float:left; margin-bottom:0;} #md #content .internas .calendar-prog dt {width:25px; margin-right:20px; padding:20px; background-color:#000; color:#fff; font-size:10px; text-indent:-1000em;} #md #content .internas .calendar-prog dt.marco {background-position:17px -185px;} #md #content .internas .calendar-prog dt.abril {background-position:17px -223px;} #md #content .internas .calendar-prog dt.maio {background-position:17px -260px;} #md #content .internas .calendar-prog dd {margin:18px 12px 0 0;} #md #content .internas .calendar-prog dd a {float:left; padding:5px; background-color:#fff; color:#000; text-decoration:none; line-height:10px;} /* Caixa de comentários */ #md #content #comments-box .comm-l {margin-right:9px;} #md #content #comments-box h3 {float:left; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#000; line-height:12px;} #md #content #comments-box ul {float:left; margin-top:20px;} #md #content #comments-box ul li {float:left; width:100%; margin-bottom:20px; padding-bottom:22px; border-bottom:1px dotted #e9e8e8;} #md #content #comments-box ul li h4 {margin-bottom:2px; font-size:14px; font-weight:normal;} #md #content #comments-box ul li h5 {margin-bottom:10px; font-size:10px; font-weight:normal; color:#8f8f8f;} #md #content #comments-box form {float:left; width:100%; margin-top:15px;} #md #content #comments-box form label {clear:both; display:block; margin-bottom:4px; color:#000;} #md #content #comments-box form input {width:235px; height:24px; margin-bottom:5px; padding-left:5px; font-size:11px; border:1px solid #e9e8e8; color:#626262;} #md #content #comments-box form textarea {overflow:auto; width:463px; height:145px; margin-bottom:5px; padding:5px; border:1px solid #e9e8e8; font:11px Arial, Helvetica, sans-serif; color:#626262;} #md #content #comments-box form #enviar {display:block; width:51px; height:31px; border:none; cursor:pointer;} /* Mostras */ /* Filme */ #md #content .internas .filme {float:left; width:100%; margin-bottom:18px; border-bottom:1px dotted #e9e8e8;} #md #content .internas .filme h3 {margin-bottom:10px; font-size:14px; color:#626262;} #md #content .internas .filme h4 {font-size:12px;} #md #content .internas .filme p {margin-bottom:23px; line-height:1.5em;} #md #content .internas img, #md #content .internas object {display:block; margin-left:auto; margin-right:auto; margin-bottom:24px; padding:3px; border:1px solid #e9e8e8;} #md #content .internas .filme-ultimo {border:none;} /* Imprensa */ #md #content .imprensa {position:relative;} #md #content .imprensa h4 {margin-bottom:15px; font-size:10px; font-weight:normal;} #md #content .imprensa h5 {font-size:12px; margin-bottom:30px;} #md #content .imprensa .voltar-1 {position:absolute; display:block; width:42px; height:10px; top:41px; right:0; background-position:-405px 0; text-indent:-1000em;} #md #content .imprensa .voltar-2 {float:right; display:block; width:64px; height:31px; background-position:-384px -31px; text-indent:-1000em;} #md #content #list-imprensa {float:left;} #md #content #list-imprensa li {margin-bottom:18px;} #md #content #list-imprensa li h3 {margin-bottom:0; font-size:14px; color:#626262;} #md #content #list-imprensa li p {margin-bottom:0;} /* fotos */ #md #content .fotos h3 {margin-bottom:15px; font-size:14px; color:#626262;} #md #content .fotos .list-fotos li {float:left; width:100%; margin-bottom:20px;} #md #content .fotos .list-fotos li .imagem {position:relative; overflow:hidden; float:left; width:230px; height:120px; margin-right:8px;} #md #content .fotos .list-fotos li .imagem ul li img {position:absolute; top:0; padding:3px; border:1px solid #e9e8e8;} #md #content .fotos .list-fotos li h4 {margin-top:84px; font:16px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;} #md #content .fotos .list-fotos li h4 a {color:#000;} #md #content .fotos .list-fotos li p {margin-bottom:0;} /* Sidebar */ #md #sidebar {overflow:hidden; float:left; width:380px; min-height:500px; margin-top:78px;} #md #sidebar #newsletter {position:relative; float:right; width:298px; height:58px; margin-top:20px; padding:20px; border:1px solid #e9e8e8; background-color:#fff;} #md #sidebar #newsletter h2 {position:absolute; display:block; width:24px; height:60px; left:-25px; text-indent:-1000em; background-position:0 -157px;} #md #sidebar #newsletter span {display:block; width:208px; height:20px; margin-bottom:10px; background-position:0 -87px; text-indent:-1000em;} #md #sidebar #newsletter label {text-indent:-1000em; position:absolute;} #md #sidebar #newsletter input {float:left; width:120px; height:29px; margin-right:10px; padding:0 0 0 6px; border:1px solid #e9e8e8; color:#626262; font-size:11px;} #md #sidebar #newsletter #enviar {float:left; display:block; width:22px; height:30px; margin-right:0; background-position:-100px -157px; background-color:#ffe400; border:none; cursor:pointer;} #md #sidebar #categorias-filmes {position:relative; float:right; width:298px; margin-top:20px; padding:20px; border:1px solid #e9e8e8; background-color:#fff;} #md #sidebar #categorias-filmes .box {position:relative; float:left; height:200px; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #e9e8e8;} #md #sidebar #categorias-filmes .box h2 {position:absolute; width:24px; height:148px; left:-25px; text-indent:-1000em;} #md #sidebar #categorias-filmes .box ul {float:left;} #md #sidebar #categorias-filmes .box ul li {float:left;} #md #sidebar #categorias-filmes .box ul li.first {margin-bottom:10px;} #md #sidebar #categorias-filmes .box ul li .foto {float:left; width:138px; height:98px; margin-right:10px;} #md #sidebar #categorias-filmes .box ul li .foto img {padding:3px; border:1px solid #e9e8e8;} #md #sidebar #categorias-filmes .box ul li .info {position:relative; overflow:hidden; height:98px; float:left; width:150px;} #md #sidebar #categorias-filmes .box ul li .info h3, #md #sidebar #categorias-filmes .box ul li .info h3 a{/*margin:8px 0;*/ font:18px 'Trebuchet MS', Arial, Helvetica, sans-serif; color:#000; font-weight:normal;} #md #sidebar #categorias-filmes .box ul li .info p {font-size:11px;} #md #sidebar #categorias-filmes .box ul li .info p.descricao {height:26px;} #md #sidebar #categorias-filmes .box ul li .info p a {display:block; width:104px; height:10px; line-height:10px; margin-top:16px; background-position:-129px -156px; text-indent:-1000em;} #md #sidebar #categorias-filmes .curta-digitais {margin-bottom:20px;} #md #sidebar #categorias-filmes .longas h2 {top:50px; left:-45px; background-position:-25px -157px;} #md #sidebar #categorias-filmes .curta-35 h2 {top:33px; left:-45px; background-position:-49px -157px;} #md #sidebar #categorias-filmes .curta-digitais h2 {top:30px; left:-45px; background-position:-75px -157px;} #md #sidebar #categorias-filmes a.mais-videos {float:left; display:block; width:124px; height:14px; background-position:-129px -166px; text-indent:-1000em;} /* 6- Formulários –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ /* 7- Extra –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ /* 8- Sprites –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ .comm-l, .comm-r {background-image:url(../images/layout/sprites/c-comments.gif); background-repeat:no-repeat;} .comm-f, #md #content .post .comments .c-legend , #md #content .post .post-info .compartilhar span.bar, #md #content .post .post-info .compartilhar a, #md #content .paginacao a.anterior, #md #content .paginacao a.proximo, #md #sidebar #newsletter h2, #md #sidebar #newsletter span, #md #sidebar #newsletter #enviar, #md #sidebar #categorias-filmes .box ul li .info p a, #md #sidebar #categorias-filmes a.mais-videos, #md #sidebar #categorias-filmes .box h2, #ft address {background-image:url(../images/layout/sprites/sprite-home.gif); background-repeat:no-repeat;} #hd .memu-1 li a, #hd .memu-2 li a, #md #content .internas .calendar-prog dt, #hd .memu-1 li a .hover, #hd .memu-2 li a .hover {background-image:url(../images/layout/sprites/sprite-menu.png); background-repeat:no-repeat;} #md #content #comments-box form #enviar, #md #content #tabs li a, #md #content #tabs li a .hover, #md #content .imprensa .voltar-1, #md #content .imprensa .voltar-2 {background-image:url(../images/layout/sprites/sprite-internas.gif); background-repeat:no-repeat;} /* 9- Rodapé –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ #ft {float:left; padding:36px 0 46px 20px;} #ft address {display:block; width:372px; height:26px; text-indent:-1000em; background-position:0 -50px;} .by-cappen {width:20px; height:22px; background:url(../images/layout/pinto.png) no-repeat; text-indent:-99999px; display:block; margin:20px 0 0;}