/** Trotes do Chupim www.trotesdochupim.com.br CSS por Alexandre Theodoro **/ /* 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; } :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } 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: "" ""; } .clear {clear:both;} .hidden, legend { display: none;} #bannerxml { padding: 10px 0; } /* Centralizar --------------------------------------------------------------------------------------- */ body {margin:0; padding:0; text-align:center; /* IE */ background: #fff url(../images/body.jpg) top repeat-x;} #container { width: 988px; margin:0 auto; padding: 0; text-align:left; /* IE */} /* Head --------------------------------------------------------------------------------------- */ h1 { width:988px; height:72px; background:url(../images/logo2.gif) center no-repeat; } h1 a { display:block; width:988px; height:72px; text-decoration:none; text-indent: -1000em; outline: none;} .head { height: 72px; background:#0971d2 url(../images/topo.jpg) repeat-x; text-align:center;} .navegacao { height: 36px; padding-left: 20px; background: #0971d2 url(../images/menu.jpg) repeat-x;} .icones { float: right; margin: 5px 9px 0 0; position: relative;} .buscadosite { background: url(../images/busca.png) right top no-repeat; float:right; height:33px; margin:0; padding:0; width:215px; } .busca { background:transparent; border:0; color:#999; float:left; font-size: 12px; height:auto; margin:5px 5px 0 30px; width:152px; } .pesq { display:block; float:right; height:25px; margin:5px 0 0; text-indent:-9999em; width:25px; border: none ; } .aovivo { float:right; padding:5px; } .aovivo img { border: none; } /* Menu --------------------------------------------------------------------------------------- * Menu Fechado * */ ul.dropdown { position: relative; z-index: 597; float: left; font: bold 14px Arial, Helvetica, sans-serif; } ul.dropdown li { border: none; color: #0063dc; float: left; line-height: 1.3em; vertical-align: middle; padding: 0; zoom: 1; } ul.dropdown li a { display: block; padding: 9px 12px;} ul.dropdown li a:link, ul.dropdown li a:visited { color: #ffffff; text-decoration: none; } ul.dropdown li a:hover { color: #0971d2; text-decoration: none; background-color: #fff; } ul.dropdown li a:active { color: #0971d2; } ul.dropdown li a strong { padding:0 3px 0 23px; } ul.dropdown li a em { vertical-align:top ; position: absolute; } ul.dropdown *.dir { /* Esse é o que tem a opção de abrir */ background: url(images/nav-arrow-down.png) 95% 50% no-repeat; padding-right: 25px; } .novo_m a:link, .novo_m a:visited { background: url("../images/novo.png") no-repeat scroll 150px 5px; } /*-------------------------------------------------/ * Menu Aberto - Nivel 1 * */ ul.dropdown a.dir:hover { background-image: url(images/nav-arrow-down-on.png) !important; } ul.dropdown li:hover { position: relative; z-index: 599; cursor: default; color: #0063dc; } ul.dropdown li:hover > *.dir { position: relative; z-index: 600; margin: -1px 0; padding: 9px 24px 8px 11px; border: 1px solid; border-color: #f0f0f0 #666 #fff #f0f0f0; background-color: #fff; color: #0971d2; zoom: 1; float: left; zoom: none; } ul.dropdown ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; width: 192px; padding: 5px; border-style: solid; border-width: 1px; border-color: #f0f0f0 #666 #666 #f0f0f0; background-color: #fff; font-weight: bold; font-size: 12px; } ul.dropdown li:hover > ul { visibility: visible; } ul.dropdown ul li { float: none; } ul.dropdown ul li.divider { border-top: solid 1px #e5e5e5; margin-top:5px; padding-top:5px; } ul.dropdown ul li a { padding: 5px 15px; border: none; } ul.dropdown ul li a:link, ul.dropdown ul li a:visited { color: #0971d2; text-decoration: none; } ul.dropdown ul li a:hover { color: #fff; text-decoration: none; background: url(images/menu.png) center no-repeat ; } ul.dropdown ul *.dir { border: none; padding-right: 25px; background: url(images/nav-arrow-right.png) 100% 50% no-repeat;} ul.dropdown span { display: block; padding: 5px 15px; } .td_login .inputs { font-size:14px; height:16px; padding:6px; width:150px; } .td_login label { font: bold 12px Arial, Helvetica, sans-serif; color: #000; display:block; text-align: left; line-height: 1.5em; padding: 2px; } .box_login_ainda2 { border-top: 1px #E5E5E5 solid; margin-top:15px; padding-top: 5px; } .botao_entrar { margin-top: 8px; } /*-------------------------------------------------/ * Menu Aberto - Nivel 2 * */ ul.dropdown ul li:hover > *.dir { position: static; z-index: 0; float: none; margin: 0; background: url(images/menu_hover.png) center no-repeat; padding: 5px 15px; color: #fff; border: none;} ul.dropdown ul ul { top: 1px; left: 99%; } ul.dropdown2 li:hover > *.dir { padding: 5px; } /*-------------------------------------------------/ * Lixo Explorer 6 // Menu * */ ul.dropdown li.hover { position: relative; z-index: 599; cursor: default; color: #0063dc; } ul.dropdown li.hover *.open { position: relative; z-index: 600; margin: -1px 0; padding-top: 5px; padding-bottom: 5px; border-color: #f0f0f0 #666 #666 #f0f0f0; background-color: #fff; background-image: url(images/nav-arrow-down-open.png); color: #0063dc; zoom: 1; } ul.dropdown-horizontal li.hover *.open { float: left; zoom: none; } ul.dropdown ul li.hover *.open { position: static; z-index: 0; float: none; margin: 0; padding-top: 4px; padding-bottom: 4px; border: none;} ul.dropdown ul li.hover *.open { background-image: url(images/nav-arrow-right-open.png); } /* Colunas --------------------------------------------------------------------------------------- */ .conteudo { padding: 10px; } .esquerda { width: 200px; float:left; margin-right:14px; } .meio { width: 530px; float:left; margin-right:14px; } .direita { width: 208px; float:left; } .tudoconta { width: 735px; float:left; } .padrao { padding: 14px; background: #efefef; margin-bottom: 16px; } .padrao-esq { padding: 13px; background: #efefef; margin-bottom: 16px; border: #ddd solid 1px;} h2, h2 a:link, h2 a:visited { font-family: "Trebuchet MS", Arial; font-size:18px; color: #000; font-weight:bold; text-decoration:none; } h2 a:hover { font-family: "Trebuchet MS", Arial; font-size:18px; color: #000; font-weight:bold; text-decoration:underline; } /* Coluna Esquerda --------------------------------------------------------------------------------------- */ .ultimos a, .ultimos a:visited { color: #0971D2; display: block; font: 14px 'Lucida Grande', Arial; font-weight: bold; margin: 0; padding: 5px; letter-spacing:-1px; text-align: left; text-decoration: none; } .ultimos a:hover { color: #fff; display: block; font: 14px 'Lucida Grande', Arial; font-weight: bold; margin: 0; padding: 5px; letter-spacing:-1px; text-align: left; text-decoration: none; background:#0971d2; } .padrao-esq1 h2 { padding: 0 0 2px 22px; background: #efefef url(../images/sprites_home.png) no-repeat -16px -14px; } .especiais h2 { padding: 2px 0 3px 22px; background: #efefef url(../images/sprites_home.png) no-repeat -16px -119px; } .vcmanda h2 { padding: 2px 0 3px 22px; background: #efefef url(../images/sprites_home.png) no-repeat -16px -67px; } /* Coluna Direita --------------------------------------------------------------------------------------- */ .user h2 { margin-bottom:4px; padding: 2px 0 3px 22px; background: #efefef url(../images/sprites_home.png) no-repeat -16px -431px; } .conta h2 { padding: 2px 0 3px 22px; background: #efefef url(../images/sprites_home.png) no-repeat -16px -223px; } .osmelhores h2 { padding: 2px 0 3px 22px; background: #efefef url(../images/sprites_home.png) no-repeat -16px -170px; } .comentarios_h h2 { padding: 2px 0 3px 22px; background: #efefef url(../images/sprites_home.png) no-repeat -16px -275px; } .age h2 { padding: 2px 0 3px 22px; background: #efefef url(../images/sprites_home.png) no-repeat -16px -326px; } .osmelhores { margin-top: 15px; } #senha, #login { padding: 6px; } .login, .senha { font: 14px 'Lucida Grande', Arial; font-weight:bold; color: #000; } .user .avatar { width:64px; margin-right: 5px; float:left; } .user .nome { font: 14px 'Lucida Grande', Arial; } .user .enviar {background: #efefef url(../images/enviar.gif) left no-repeat; padding: 6px 0 6px 22px; margin-top: 4px;} .user .config {background: #efefef url(../images/config.gif) left no-repeat; padding: 6px 0 6px 22px;} .user .logout {background: #efefef url(../images/logout.gif) left no-repeat; padding: 6px 0 6px 22px;} .user .imagem {background: #efefef url(../images/avatar.gif) left no-repeat; padding: 6px 0 6px 22px;} .user a:link, .user a:visited { font: 14px 'Arial', Helvetica, sans-serif; color:#0971d2; text-decoration:none; } .user a:hover { text-decoration: underline; } .esqueceu a:link, .esqueceu a:visited, a:link.esqueceu, a:visited.esqueceu { font: 10px 'Lucida Grande', Arial; color:#0971d2; text-decoration:none;} .esqueceu a:hover, a:hover.esqueceu { font: 10px 'Lucida Grande', Arial; color:#0971d2; text-decoration: underline;} .conta p { margin: 5px 0;} .erro { display:block; border: #F00 dashed 1px; padding: 5px; text-align:center; background: #FFBFBF; color: #000; font: 12px 'Lucida Grande', Arial; margin: 6px 0 } .cadastrar a:link, .cadastrar a:visited, .cadastrar a:hover { display:block; border: #87BC44 dashed 1px; padding: 5px; text-align:center; background: #DEFFCD; color: #000; font: 14px 'Lucida Grande', Arial; margin: 17px 0 0 0; text-decoration:none; } .logar { background: #0971d2; color: #fff; padding: 5px 15px; border: 1px #064F93 solid; } .logar1 { display:none;} .rank {clear:both; } .rank li { display:block; padding: 5px 0; clear:both; font: normal 14px Arial;} .rank span.pos { display:block; float:left; width:15px; background:#0971d2; margin-right:10px; font:bold 16px Arial; color:#FFF; text-align:center; } .rank a:link, .rank a:visited {font: 14px Arial; color:#000; text-decoration: none;} .rank a:hover {font: 14px Arial; color:#000; text-decoration: underline;} .rank li a:link span.downs, .rank li a:visited span.downs {display:none; float:left; padding: 2px 0px; font: 11px Arial; color:#000; text-align: left; } .rank li a:hover span.downs {display:block;} .label2 {display:none;} .age ul {clear:both; } .age em {padding: 9px 0 14px 0; clear:both; font: normal 14px Arial;} .age a:link, .age a:visited {font: normal 14px Arial; text-decoration:none; color: #000;} .age a:hover { text-decoration: underline; color: #000; } .age span {float:left; width:40px ; height: 27px; background: #0971d2; padding: 13px 0 0 0 ; margin-right:10px; font: bold 12px Arial; color:#FFF; text-align:center; } .age abbr {font: bold 12px Arial; color:#FFF; text-align:center; margin:auto; } .link h2 { background: #efefef url(../images/sprites_home.png) no-repeat -16px -369px; padding: 2px 0 3px 22px;} .link a.metro, .link a.youtube, .link a.twitter, .link a.orkut, .link a.facebook, .link a.lastfm, .link a.prosangue, .link a.sampaideal { display:block; width:180px; height:30px; text-decoration:none; outline: none; text-indent: -1000em;} .link a.metro { background:url(../images/links.gif) no-repeat 0px 0px; } .link a.youtube { background:url(../images/links.gif) no-repeat 0px -60px; } .link a.orkut { background:url(../images/links.gif) no-repeat 0px -120px; } .link a.facebook { background:url(../images/links.gif) no-repeat 0px -180px; } .link a.twitter { background:url(../images/links.gif) no-repeat 0px -240px; } .link a.lastfm { background:url(../images/links.gif) no-repeat 0px -300px; } .link a.prosangue { background:url(../images/links.gif) no-repeat 0px -360px; } .link a.sampaideal { background:url(../images/links.gif) no-repeat 0px -420px; } .link a.metro:hover { background:url(../images/links.gif) no-repeat 0px -30px;} .link a.youtube:hover { background:url(../images/links.gif) no-repeat 0px -90px; } .link a.orkut:hover { background:url(../images/links.gif) no-repeat 0px -150px; } .link a.facebook:hover { background:url(../images/links.gif) no-repeat 0px -210px; } .link a.twitter:hover { background:url(../images/links.gif) no-repeat 0px -270px; } .link a.lastfm:hover { background:url(../images/links.gif) no-repeat 0px -330px; } .link a.prosangue:hover { background:url(../images/links.gif) no-repeat 0px -390px; } .link a.sampaideal:hover { background:url(../images/links.gif) no-repeat 0px -450px; } /* Footer --------------------------------------------------------------------------------------- */ .footer {background: #0971d2; font: 14px 'Lucida Grande', Arial; padding: 32px; text-align:center;} .footer .content {width: 730px; padding: 0 10px 10px 10px; margin:auto; text-align:center;} .footer h3 { font: 20px 'Lucida Grande', Arial; color:#fff; font-weight: bold; text-align:center; } .footer p { font: 16px 'Verdana', Arial; color:#539CE0; padding: 2px;} .footer .rodape { font: 12px 'Lucida Grande', Arial; color:#fff; text-align:center; border-bottom: 1px #539CE0 solid; margin-bottom:6px;} .footer a:link, .footer a:visited { font: 14px 'Lucida Grande', Arial; color:#B6D5F2; font-weight:bold; text-decoration:none; } .footer a:hover { font: 14px 'Lucida Grande', Arial; color:#CEE3F6; text-decoration:none; font-weight:bold; } /* Tempo Real --------------------------------------------------------------------------------------- */ .bgtrote { background: #fff url(../images/t_trotes.gif) left no-repeat; } .bgvideo { background: #fff url(../images/t_video.gif) left no-repeat; } .bgmural { background: #fff url(../images/t_mural.gif) left no-repeat; } .bgcomentario { background: #fff url(../images/t_comentario.gif) left no-repeat; } .bgcadastro { background: #fff url(../images/t_user.gif) left no-repeat; } .bgfoto { background: #fff url(../images/t_foto.gif) left no-repeat; } .bgenviou { background: #fff url(../images/t_enviou.gif) left no-repeat; } .bgtrilha { background: #fff url(../images/t_trilha.gif) left no-repeat; } .bgpodcast { background: #fff url(../images/t_podcast.gif) left no-repeat; } .bgtrote, .bgvideo, .bgmural, .bgcomentario, .bgcadastro, .bgfoto, .bgenviou, .bgtrilha, .bgpodcast { padding: 14px 5px 14px 32px; background-position:5px 50%; border-top: 1px #e1e1e1 solid; } /* IE6, o Fim --------------------------------------------------------------------------------------- */ .ie6 { border: 1px solid #9F6A1A; background: #FCFDDE; text-align: center; clear: both; position: relative; padding: 20px; } .ie6 a:hover { text-decoration: underline; } .ie6_close { position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold; float: right; } .ie6_container { width: 705px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black; } .ie6_warn { width: 60px; float: left; padding: 30px 5px; } .ie6_texto { width: 408px; float: left; font-family: Arial, sans-serif; } .ie6_texto h4 { font-size: 16px; font-weight: bold; margin-top: 12px; letter-spacing: -1px; font: Arial, Helvetica, sans-serif; } .ie6_para { margin-top: 6px; } .ie6_para p { font-size: 12px; line-height: 16px; font: Verdana, Arial, Helvetica, sans-serif; } .ie6_para strong { font-size: 12px; font: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; } .ie6_navs { width: 75px; float: left; padding-top: 20px; } .ie6_navs a:link, .ie6_navs a:visited { font: 12px Verdana, Arial, Helvetica, sans-serif; color: #0971d2; text-align: center; text-decoration: none; }