/* CSS Document */ /* //////////////////////////////////////////////// */ Site: Cristiano Web - cristianoweb (dot) net Projeto: Site pessoal Versão: 0.1 Última atualização: 12/07/09 Criação: Cristiano Santos +55 (21) 8412-8528 / 3217-9528 cristianoweb (dot) net cristianoweb (dot) net(arroba) gmail (dot) net /* //////////////////////////////////////////////// */ /* ////////// TAGS COMUNS ////////// */ html, body { margin: 0 auto; padding: 0; text-align: center; background-color: #000; color: #8d8d8d; } a:link { color: #efefef; text-decoration: underline; } a:visited { color: #8d8d8d; text-decoration: underline; } a:hover { color: #efefef; text-decoration: none; } a:active { color: #efefef; text-decoration: none; } form { } input, select, textarea { } fieldset { } legend { } label { } h1 { font-size: 16px; color: #141414; } h2 { font-size: 14px; color: #f0b501; } h3 { font-size: 12px; color: #141414; } * [rel=externo] { background: url(../images/icon-link-externo.gif) top right no-repeat; padding-right: 15px; } /* ////////// LAYOUT EM GERAL ////////// */ #container { width: 980px; position: relative; left: 50%; margin-left: -490px; background-color: #000; font-family: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS"; font-size: 11px; line-height: 140%; color: #8d8d8d; text-align: left; vertical-align: middle; } /* Topo */ #top { height: 110px; background-image: url(../images/top-bg.jpg); margin: 0; } h1 { width: 290px; height: 60px; margin-left: 50px; padding-top: 25px; } h1 span { width: 290px; height: 60px; background: url(../images/top-logo.jpg) no-repeat; position: absolute; } #core-business { width: 300px; height: 40px; float: right; margin-top: -55px; text-align: right; padding-right: 240px; } #contacts { width: 180px; height: 40px; float: right; margin-top: -55px; text-align: right; padding-right: 50px; } /* Menu */ #menu { position: relative; width: 700px; height: 32px; background:url(../images/menu-navigation.jpg) no-repeat 0 0; margin: 0; padding: 0; top: 0; left: 150px; } #menu ul { list-style: none; text-indent: -2000px; } #menu li { position: absolute; top: 0; height: 35px; border: 0; } #menu li a { display: block; text-decoration: none; width: 100%; height: 100%; top: 0; } #menu li a span { display: block; position: absolute; width: 100%; height: 100%; top: 0; cursor: pointer; } #li-about { width: 100px; left: 0; } #li-about a:hover { background: url(../images/menu-navigation.jpg) no-repeat 0 -32px; } #li-services { width: 100px; left: 120px; } #li-services a:hover { background: url(../images/menu-navigation.jpg) no-repeat -120px -32px; } #li-portfolio { width: 100px; left: 240px; } #li-portfolio a:hover { background: url(../images/menu-navigation.jpg) no-repeat -240px -32px; } #li-contact { width: 100px; left: 360px; } #li-contact a:hover { background: url(../images/menu-navigation.jpg) no-repeat -360px -32px; } #li-budget { width: 100px; left: 480px; } #li-budget a:hover { background: url(../images/menu-navigation.jpg) no-repeat -480px -32px; } #li-blog { width: 100px; left: 600px; } #li-blog a:hover { background: url(../images/menu-navigation.jpg) no-repeat -600px -32px; } /* Rodapé */ #footer { height: 48px; margin-top: 5px; padding-top: 15px; background: url(../images/footer-bg.jpg) no-repeat; text-align: center; } #footer a:link { color: #efefef; text-decoration: underline; } #footer a:visited { color: #ccc; text-decoration: underline; } #footer a:hover { color: #fff; text-decoration: none; } #footer a:active { color: #fff; text-decoration: none; } /* Citação */ #cite { height: 30px; text-align: center; font-size: 9px; color: #f0b501; font-style: italic; } /* ////////// INDEX ////////// */ /* Últimos projetos da Index */ #last-project { height: 300px; margin: 10px 0 8px 0; padding: 20px 35px 20px 20px; background-image: url(../images/index-last-project-bg.jpg); position: relative; line-height: 220%; color: #8d8d8d; } #last-project h2 { color: #f0b501; } #last-project a:link { color: #efefef; text-decoration: underline; } #last-project a:visited { color: #8d8d8d; text-decoration: underline; } #last-project a:hover { color: #efefef; text-decoration: none; } #last-project a:active { color: #8d8d8d; text-decoration: none; } /* jQuery Easy Slider */ #slider{} #slider ul, #slider li{ margin: 0; padding: 0; list-style: none; } #slider li { width: 920px; height: 300px; overflow: hidden; } #slider img { margin: 20px 30px 15px 50px; float: left; } #peixe a { background: url(../images/icon-link-externo.gif) top right no-repeat; padding-right: 15px; } /* #slider a { background: url(../images/icon-link-more.png) left no-repeat; padding-left: 22px; } */ #prevBtn { position: absolute; width: 16px; height: 16px; top: 300px; left: 850px; } #nextBtn { position: absolute; width: 16px; height: 16px; top: 300px; left: 910px; } #prevBtn a, #nextBtn a { width: 16px; height: 16px; color: #000; text-decoration: none } /* Peixe Grande */ #peixegrande ul, #peixegrande li{ margin: 0; padding: 0; list-style: none; } #peixegrande li { width: 920px; height: 300px; overflow: hidden; } #peixegrande img { margin: 20px 30px 15px 50px; float: left; } #peixegrande a { background: url(../images/icon-link-externo.gif) top right no-repeat; padding-right: 15px; } /* Container dos box secundários */ #more-about { height: 350px; line-height: 200%; } /* Box sobre na Index */ #about { width: 270px; height: 350px; padding: 5px 15px 0 15px; float: left; position: relative; background: url(../images/index-more-about-bg.jpg) no-repeat; } #about h3 { width: 131px; height: 16px; } #about h3 span { width: 100%; height: 50%; background: url(../images/index-title-about-me.jpg) no-repeat; position: absolute; } #about img { margin-right: 15px; float: left; } #about a { background: url(../images/icon-link-more.png) left no-repeat; padding-left: 22px; } /* Box metodologia na Index */ #methodology { width: 270px; height: 350px; padding: 5px 15px 0 15px; float: left; position: relative; margin-left: 41px; background: url(../images/index-more-about-bg.jpg) no-repeat; } #methodology h3 { width: 225px; height: 19px; } #methodology h3 span { width: 100%; height: 50%; background: url(../images/index-title-methodology.jpg) no-repeat; position: absolute; } #methodology img { margin-right: 15px; float: left; } #methodology a { background: url(../images/icon-link-more.png) left no-repeat; padding-left: 22px; } /* Box blog na Index */ #blog { width: 270px; height: 350px; padding: 5px 15px 0 15px; float: right; position: relative; background: url(../images/index-more-about-bg.jpg) no-repeat; } #blog h3 { width: 146px; height: 16px; } #blog h3 span { width: 100%; height: 50%; background: url(../images/index-title-blog.jpg) no-repeat; position: absolute; } #blog img { margin-right: 15px; float: left; } #blog a { background: url(../images/icon-link-more.png) left no-repeat; padding-left: 22px; } /* ////////// INTERNAS ////////// */ /* Geral sobre páginas Internais */ #internal { width: 980px; height: 500px; background: url(../images/internal-bg.jpg) no-repeat; margin-top: 10px; } #breadcrumb { width: 980px; height: 35px; margin: 25px 0 0 15px; font-size: 9px; } #feed-pg { height: 70px; } #feed-pg img { width: 950px; margin: 15px; } #sidebar { width: 320px; float: right; position: relative; } /* Página Sobre */ #about-me { width: 600px; float: left; position: relative; padding: 0 20px 0 20px; } #about-me h3 { width: 283px; height: 19px; } #about-me h3 span { width: 100%; height: 19px; background: url(../images/title-about-cristiano.png) no-repeat; position: absolute; } #about-me img { float: right; margin: 25px 25px 5px 25px ; } #about-me object { margin: 0 15px 0 0; float: left; background-color: #000; } /* Sidebar da Página Sobre */ /* Sidebar da Página Sobre - Links de páginas relacionadas */ #linksabout ul { margin: 0 0 5px 0; padding: 0; list-style: none; line-height: 20pt; } #linksabout li a { background: url(../images/icon-sidebar-alink.jpg) left no-repeat; padding: 1px 0 1px 22px; text-decoration: none; } #linksabout li a:hover { text-decoration: underline; } #linksabout h3 { width: 110px; height: 12px; } #linksabout h3 span { width: 100%; height: 12px; background: url(../images/title-sidebar-about-more.jpg) no-repeat; position: absolute; } /* Sidebar da Página Sobre - Links de páginas externas da Social Mídia */ #socialmidia ul { margin: 0 0 5px 0; padding: 0; list-style: none; line-height: 20pt; } #socialmidia li a { text-decoration: none; } #socialmidia li a:hover { text-decoration: underline; } #socialmidia .twitter { background: url(../images/icon-sidebar-socialmidia-twitter.jpg) left no-repeat; padding-left: 22px; } #socialmidia .facebook { background: url(../images/icon-sidebar-socialmidia-facebook.jpg) left no-repeat; padding-left: 22px; } #socialmidia .linkedin { background: url(../images/icon-sidebar-socialmidia-linkedin.jpg) left no-repeat; padding-left: 22px; } #socialmidia .tumblr { background: url(../images/icon-sidebar-socialmidia-tumblr.jpg) left no-repeat; padding-left: 22px; } #socialmidia h3 { width: 142px; height: 19px; } #socialmidia h3 span { width: 100%; height: 19px; background: url(../images/title-sidebar-socialmidia.png) no-repeat; position: absolute; } /* Sidebar da Página Sobre - Links de arquivos para Download */ #about-in-home ul { margin: 0 0 5px 0; padding: 0; list-style: none; line-height: 20pt; } #about-in-home ul a { text-decoration: none; } #about-in-home ul a:hover { text-decoration: underline; } #about-in-home .pdf { background: url(../images/icon-sidebar-pdf.jpg) left no-repeat; padding-left: 22px; } #about-in-home .rss { background: url(../images/icon-sidebar-rss.jpg) left no-repeat; padding-left: 22px; } #about-in-home h3 { width: 127px; height: 19px; } #about-in-home h3 span { width: 100%; height: 19px; background: url(../images/title-sidebar-in-home.png) no-repeat; position: absolute; } /* Sidebar da Página Sobre - Outros Links */ #about-others ul { margin: 0 0 5px 0; padding: 0; list-style: none; line-height: 20pt; } #about-others ul a { text-decoration: none; } #about-others ul a:hover { text-decoration: underline; } #about-others .arteccom { background: url(../images/icon-sidebar-arteccom.jpg) left no-repeat; padding-left: 22px; } #about-others .falafreela { background: url(../images/icon-sidebar-falafreela.jpg) left no-repeat; padding-left: 22px; } #about-others h3 { width: 127px; height: 19px; } #about-others h3 span { width: 100%; height: 19px; background: url(../images/title-sidebar-others.png) no-repeat; position: absolute; } /* Sidebar da Página Serviços - Links sobre metodologia */ #links-services ul { margin: 0 0 5px 0; padding: 0; list-style: none; line-height: 20pt; } #links-services ul a { text-decoration: none; } #links-services ul a:hover { text-decoration: underline; } #links-services .criacao { background: url(../images/icon-sidebar-services-criacao.jpg) left no-repeat; padding-left: 22px; } #links-services .fee { background: url(../images/icon-sidebar-services-fee.jpg) left no-repeat; padding-left: 22px; } #links-services .agencias { background: url(../images/icon-sidebar-services-agencias.jpg) left no-repeat; padding-left: 22px; } #links-services h3 { width: 127px; height: 19px; } #links-services h3 span { width: 100%; height: 19px; background: url(../images/title-services-apresentation.png) no-repeat; position: absolute; } /* Sidebar da Página Serviços - Links de Parceiros */ #links-partners ul { margin: 0 0 5px 0; padding: 0; list-style: none; line-height: 20pt; } #links-partners ul a { text-decoration: none; } #links-partners ul a:hover { text-decoration: underline; } #links-partners .dg { background: url(../images/icon-sidebar-services-dg.png) left no-repeat; padding-left: 22px; } #links-partners .web { background: url(../images/icon-sidebar-services-web.png) left no-repeat; padding-left: 22px; } #links-partners .writer { background: url(../images/icon-sidebar-services-writer.png) left no-repeat; padding-left: 22px; } #links-partners .liga { background: url(http://tweepml.org/s/tweepml16.png) left no-repeat; padding-left: 22px; } #links-partners h3 { width: 127px; height: 19px; } #links-partners h3 span { width: 100%; height: 19px; background: url(../images/title-services-partners.png) no-repeat; position: absolute; } /* Página Serviços */ #services { width: 600px; float: left; position: relative; padding: 0 20px 0 20px; } #services h3 { width: 283px; height: 19px; } #services h3 span { width: 100%; height: 19px; background: url(../images/title-services.png) no-repeat; position: absolute; } #services img { float: left; margin: 0 15px 2px 0; } /* Página de Serviços - Interna da Serviços */ #services-methodology { width: 600px; float: left; position: relative; padding: 0 20px 0 20px; } #services-methodology h3 { width: 283px; height: 19px; } #services-methodology h3 span { width: 100%; height: 19px; background: url(../images/title-services-methodology.png) no-repeat; position: absolute; } #services-methodology img { float: left ; margin: 18px 25px 15px 0; } #services-methodology .fases { color: #f0b501; } #services-fee { width: 600px; float: left; position: relative; padding: 0 20px 0 20px; } #services-fee h3 { width: 283px; height: 19px; } #services-fee h3 span { width: 100%; height: 19px; background: url(../images/title-services-fee.png) no-repeat; position: absolute; } #services-fee img { float: left; margin: 0 15px 5px 0; } #services-fee .fee { color: #f0b501; } #services-agency { width: 600px; float: left; position: relative; padding: 0 20px 0 20px; } #services-agency h3 { width: 283px; height: 19px; } #services-agency h3 span { width: 100%; height: 19px; background: url(../images/title-services-agency.png) no-repeat; position: absolute; } #services-agency img { float: left; margin: 0 15px 5px 0; } /* Página Portfolio */ #project { width: 635px; float: left; position: relative; padding: 0 0 0 15px; } #project h3 { width: 283px; height: 19px; } #project h3 span { width: 100%; height: 19px; background: url(../images/title-portfolio-customers.png) no-repeat; position: absolute; } #project img { float: left; margin: 5px 10px 5px 0; } /* Sidebar da Página Portfolio */ #links-portfolio ul { margin: 0 0 5px 0; padding: 0; list-style: none; line-height: 15pt; } #links-portfolio li { background: url(../images/icon-sidebar-portfolio.png) left no-repeat; padding-left: 22px; } #links-portfolio ul a { text-decoration: none; } #links-portfolio ul a:hover { text-decoration: underline; } #links-portfolio h3 { width: 127px; height: 19px; } #links-portfolio h3 span { width: 100%; height: 19px; background: url(../images/title-links-portfolio.png) no-repeat; position: absolute; } /* Página Contato */ #contact { width: 600px; float: left; position: relative; padding: 0 20px 0 20px; } #contact h3 { width: 283px; height: 19px; } #contact h3 span { width: 100%; height: 19px; background: url(../images/title-contact-form.png) no-repeat; position: absolute; } #contact img { float: left; margin: 5px 15px 5px 0; } /* Formulário */ form { font: 10px Verdana, Arial, Helvetica, sans-serif; scrollbar-arrow-color: #fff; scrollbar-3dlight-color: #000; scrollbar-highlight-color: #333; scrollbar-face-color: #000; scrollbar-shadow-color: #333; scrollbar-darkshadow-color: #333; scrollbar-track-color: #333; } fieldset { width: 350px; border: none; } label { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; display: block; width: 330px; padding: 5px 0 5px 0; } label small { color: #fff; } label input { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #efefef; width: 330px; margin-top: 5px; height: 20px; background-color: #070707; border: 1px #313131 solid; } textarea { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #efefef; width: 330px; height: 70px; margin-top: 5px; background-color: #070707; border: 1px #313131 solid; } #contact .submit { background-color: #333; color: #fff; border: 0; height: 25px; width: 100px; margin-top: 5px; } #contact .mandatory { color: #999; float: right; margin-left: 15px; font-style: italic; } /* Sidebar da Página Contato - Serviços on-line */ #contact-add ul { margin: 0 0 5px 0; padding: 0; list-style: none; line-height: 20pt; } #contact-add li a { text-decoration: none; } #contact-add li a:hover { text-decoration: underline; } #contact-add .map { background: url(../images/icon-sidebar-contact-more-map.jpg) left no-repeat; padding-left: 22px; } #contact-add .schedule { background: url(../images/icon-sidebar-contact-more-schedule.jpg) left no-repeat; padding-left: 22px; } #contact-add h3 { width: 110px; height: 19px; } #contact-add h3 span { width: 100%; height: 19px; background: url(../images/title-sidebar-contact-add.png) no-repeat; position: absolute; } /* Sidebar da Página Contato - Links outras de formas de contato */ #contact-more ul { margin: 0 0 5px 0; padding: 0; list-style: none; line-height: 20pt; } #contact-more li a { text-decoration: none; } #contact-more li a:hover { text-decoration: underline; } #contact-more .email { background: url(../images/icon-sidebar-contact-more-email.jpg) left no-repeat; padding-left: 22px; } #contact-more .sms { background: url(../images/icon-sidebar-contact-more-sms.jpg) left no-repeat; padding-left: 22px; } #contact-more .gtalk { background: url(../images/icon-sidebar-contact-more-gtalk.jpg) left no-repeat; padding-left: 22px; } #contact-more .msn { background: url(../images/icon-sidebar-contact-more-msn.jpg) left no-repeat; padding-left: 22px; } #contact-more .vcard { background: url(../images/icon-sidebar-contact-more-vcard.jpg) left no-repeat; padding-left: 22px; } #contact-more .google-profile { background: url(../images/icon-sidebar-contact-more-google-profile.jpg) left no-repeat; padding-left: 22px; } #contact-more h3 { width: 142px; height: 19px; } #contact-more h3 span { width: 100%; height: 19px; background: url(../images/title-sidebar-contact-more.png) no-repeat; position: absolute; } #erro404 { width: 200px; position: relative; left: 50%; margin-left: -100px; font-family: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS"; font-size: 11px; line-height: 140%; color: #ccc; text-align: left; vertical-align: middle; } #developing { height: 600px; margin: 10px 0 8px 0; padding: 20px 35px 20px 20px; background-image: url(../images/index-last-project-bg.jpg); position: relative; line-height: 220%; color: #8d8d8d; }