/* CSS Document */ /*************************************************************/ /* Design: Sites Studio */ /* Global layout and formatting styles */ /* Author: Pedro Silva */ /* Date: Junho , 2008 */ /*-----------------------------------------------------------*/ /************************************************************************ Styles List: ============== 1 - Body/Containers 1.1 - Global body definitions 1.2 - Global Container 2 - Header and main menu 2.0 - Header container 2.1 - Logo 2.2 - Site Map button 2.3 - Main Menu 3 - Content area Layout 3.1 - Homepage Layouts 3.2 - Global Layout 3.3 - Text Boxes 3.4 - Site Map 3.4 - Contacts Page 4 - Headers/Spans/subtitles 4.1 - Headers 4.2 - Spans 5 - Sidebars - not in use 6 - Global paragraphs 7 - Images styles 8 - Footer 9 - Lists 9.1 - SideBar List 9.2 - Service List 9.3 - Portfolio lists 10 - Formulários 11 - Navigation 11.1 - Homepage lists 11.2 - Image screenshots gallery navigation 11.3 - SiteMap *************************************************************/ /*************************/ /* 1- BODY/CONTAINERS */ /*************************/ /* 1.1 - Global body definitions */ a{ overflow: hidden;} * {margin: 0;padding: 0;} body {font-size: 62.5%; margin: 0px auto; padding: 0px; font-family: "Lucida Grande", Arial, Helvetica, Verdana, Tahoma, sans-serif; background: #FFFFFF url(../images/css/body-background.jpg) repeat-x 0 0; } html, body { min-height: 100%; height: 100%; } html { min-height: 100%; margin-bottom: 1px; } img { border: none;} /* 1.1 - End Body definitions */ /* 1.2 - Global Container */ #container {width: 900px; margin: 0 auto; } /* 1.2 - End Global container */ /*************************/ /* 2- Header/Main Menu */ /*************************/ /* 2.0 - Header Container */ .header { width:900px; height: 119px; position:relative; } /* 2.0 - End Header Container */ /* 2.1- Logo */ .logo-header { float: left;clear: both; width: 320px; } /* 2.1- End Logo*/ /* 2.2- Top SiteMap button */ .sitemap-button { float:right; margin: 0; } /* 2.2- End SiteMap button*/ /* 2.3 - Main Menu */ div#menuprincipal { height:24px; width:470px; padding:0; border:0; float:right; position:absolute; right:0px; top:45px; } div#menuprincipal ul#menunav{ height:24px; width:470px; background:transparent url(../images/css/menu-principal.jpg) top left no-repeat; margin:0; padding:0; } div#menuprincipal ul#menunav li{ margin:0; padding:0; list-style:none; position:absolute; top:0; } ul#menunav li,ul#menunav a{ height:24px; display:block; } div#menuprincipal ul#menunav li a{ text-indent:-9999px; text-decoration:none; } #home{ left:0px; width:55px; } .home_on { background:transparent url(../images/css/menu-principal.jpg) 0px -27px no-repeat; } #produtos{ left:58px; width:100px; } .produtos_on { background:transparent url(../images/css/menu-principal.jpg) -58px -27px no-repeat; } #servicos{ left:162px; width:94px; } .servicos_on { background:transparent url(../images/css/menu-principal.jpg) -162px -27px no-repeat; } #portfolio{ left:259px; width:102px; } .portfolio_on { background:transparent url(../images/css/menu-principal.jpg) -259px -27px no-repeat; } #contactos{ left:365px; width:103px; } .contactos_on { background:transparent url(../images/css/menu-principal.jpg) -365px -27px no-repeat; } /* Hover State */ #home a:hover{background:transparent url(../images/css/menu-principal.jpg) 0px -27px no-repeat;} #produtos a:hover{background:transparent url(../images/css/menu-principal.jpg) -58px -27px no-repeat;} #servicos a:hover {background:transparent url(../images/css/menu-principal.jpg) -162px -27px no-repeat;} #portfolio a:hover {background:transparent url(../images/css/menu-principal.jpg) -259px -27px no-repeat;} #contactos a:hover {background:transparent url(../images/css/menu-principal.jpg) -365px -27px no-repeat;} /* 2.3 - End main menu */ /*************************/ /* 3- Content layout */ /*************************/ /* 3.1 - homepage layout */ .content_homepage {float: left; width: 900px; margin-top: 0px; padding: 0px 0px 0px 0px; margin-bottom: 30px;} .content-container-1col-homepage{overflow: hidden; float: left; width: 900px; margin-top: 4px; padding: 0px; font-size:12px; color:#333333; } .homepage-portfolio-col1 { float:left; width: 300px; padding: 14px 0px 0px 0px} .homepage-portfolio-col2 { float:left; width: 300px; padding: 14px 0px 0px 0px; text-align:center;} .homepage-portfolio-col3 { float:left; width: 300px; padding: 14px 0px 0px 0px; text-align:right;} .homepage-inf-col1 { float:left; width: 282px; padding: 25px 0px 0px 0px; } .homepage-inf-col2 { float:left; width: 282px; padding: 25px 0px 0px 0px; margin-left: 28px;} .homepage-inf-col3 { float:left; width: 282px; padding: 25px 0px 0px 0px; margin-left: 26px;} /* 3.2 - global layout */ .content {float: left; width: 900px; margin-top: 0px; padding: 0px 0px 0px 0px; margin-bottom: 30px;} .intro-text { padding: 8px 0px 0px 0px; width: 900px; float:left; } .title-heading { float: left; padding: 30px 0px 0px 0px; width: 900px; border-bottom: 1px solid #CACBCC; font-size: 12px; } .title-heading a { text-decoration:none; color:#3399CC;} .title-heading a:visited { text-decoration:none; color:#3399CC;} .title-heading a:hover { text-decoration:none; color:#E96E06;} .title-heading-2cols { float: left; padding: 20px 0px 0px 0px; width:100%; border-bottom: 1px dashed #CACBCC;} .small-title-heading { float: left; padding: 0px 0px 0px 0px; width: 280px; border-bottom: 1px solid #CACBCC; margin-bottom: 8px; } /* 1 Column */ .content-container-1col {overflow: hidden; float: left; width: 900px; margin-top: 4px; padding: 0px; } /* 2 Columns */ .content-container-leftcol{overflow: hidden; float: left; width: 575px; margin-top: 4px; padding: 0px; font-size:12px; color:#333333; } .content-container-leftcol a {text-decoration:underline; color:#3399CC;} .content-container-leftcol a:visited {text-decoration:underline; color:#3399CC;} .content-container-leftcol a:hover {text-decoration:none; color:#E96E06;} .content-container-rightcol{overflow: hidden; float: right; width: 280px; margin-top: 4px; padding: 0px; font-size:12px; color:#333333; } /* Text boxes */ .content-txtbox { float:left; margin: 0px;padding: 8px 0px 0px 0px; color: #2B3941;font-size:13px; font-family: Arial, Helvetica, sans-serif; width: 100%;} .content-txtbox p { margin: 0px 0px 0.5em 0px; padding: 0px; line-height: 1.3em; } .content-txtbox a { text-decoration:none; color:#3399CC;} .content-txtbox a:visited { text-decoration:none; color:#3399CC;} .content-txtbox a:hover { text-decoration:underline; color:#E96E06;} /* Pagina de serviços */ .servicos-container { width: 575px; float:left; margin-top: 14px;} .servicos-entrada-left { width: 286px; float:left; margin-top: 1px; overflow:hidden; } .servicos-entrada-right { width: 286px; float:right; margin-top: 1px; overflow:hidden; } .ser-webdesign a {background: url(../images/css/servicos-webdesign-button.gif) 0 0 no-repeat; display:block; width: 286px; height:100px;} .ser-webdesign a:hover {background-position: 0px -100px; } .ser-eshop a {background: url(../images/css/servicos-eshops-button.gif) 0 0 no-repeat; display:block; width: 286px; height:100px;} .ser-eshop a:hover {background-position: 0px -100px; } .ser-seo a {background: url(../images/css/servicos-seo-button.gif) 0 0 no-repeat; display:block; width: 286px; height:100px;} .ser-seo a:hover {background-position: 0px -100px; } .ser-redesign a {background: url(../images/css/servicos-redesign-button.gif) 0 0 no-repeat; display:block; width: 286px; height:100px;} .ser-redesign a:hover {background-position: 0px -100px; } .ser-psd a {background: url(../images/css/servicos-psd-button.gif) 0 0 no-repeat; display:block; width: 286px; height:100px;} .ser-psd a:hover {background-position: 0px -100px; } .ser-analise a {background: url(../images/css/servicos-analise-button.gif) 0 0 no-repeat; display:block; width: 286px; height:100px;} .ser-analise a:hover {background-position: 0px -100px; } /*--------------------*/ /* 3.4- Site Map */ /*--------------------*/ .sitemap_esq {width:300px; float:left; margin-top: 10px; color: #FF3300; } .sitemap_dir {width:300px; float:left; margin-top: 10px; color: #FF3300; } .sitemap-list ul{ list-style-type:none; } .sitemap-list li{ list-style-type:none; padding-top: 5px;} .sitemap-list li a {list-style-type:none; padding: 0 2px 0 26px; background: url(../images/bullets/sitemap-bullet.gif) no-repeat 0 2px; font-size:94%; text-decoration:none; color: #3D7889;} .sitemap-list li a:visited {list-style-type:none; padding: 0 2px 0 26px; font-size:94%; text-decoration:none; color: #3D7889;} .sitemap-list li a:hover{ font-size:94%; text-decoration:none;color:#DB7900;} /*--------------------*/ /* 3.5- Contacts Page style */ /*--------------------*/ .left-contacts { width: 340px; float:left; border-right: 1px dashed #CCCCCC; margin: 20px 0px 0px 0px;} .right-contacts { float:right; width: 460px; margin: 20px 0px 0px 0px;} .contactsbox-container { width: 440px; height: 500px; background:url(../images/css/form-container-back.gif);} .right-contacts-col1 { width: 130px; float:left;} .right-contacts-col1 p { text-align:center; padding: 20px 0px 0px 0px; text-transform:uppercase; font-family: Arial, Helvetica, sans-serif; color:#ffffff; font-size: 12px; font-weight: bold;} .right-contacts-col2 { width: 310px; float:left; color:#ffffff;} .right-contacts-col2 p { padding: 20px 0px 0px 20px; } /*************************/ /* 4- Headers Spans and Subtitles */ /*************************/ /* 4.1 - Headers */ h1 { font-size:18px; font-weight:normal; color:#FFFFFF; padding: 0px 0px 0px 0px; font-family: Georgia, "Times New Roman", Times, serif; float:left;} h2 { float: left;font-size:15px; font-weight:bold; color:#454545; padding: 0px 0px 4px 0px; font-family: Arial, Helvetica, sans-serif; text-transform:uppercase;} h3 { font-size: 12px; font-weight: normal; color: #999999; padding: 0px 0px 10px 0px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; } h4 { font-size: 14px; color: #FF3300; padding: 0px 0px 14px 0px; font-family: Georgia, "Times New Roman", Times, serif; font-weight:normal; letter-spacing: 1px; text-transform:uppercase;} h5 { font-size: 1.1em; font-weight: bold; color: #FF3300; padding: 0px 0px 8px 0px;} h6 { font-size: 1.1em; color: #FA531B; padding: 0px 0px 14px 0px; text-transform:uppercase;} /* 4.2 - Spans */ .green-span { float: left;color:#FB9D00; padding: 7px 0px 0px 0px; font-family: "Courier New", Courier, monospace; font-size: 18px; font-weight:bold; } .grey-span { color:#999999; font-size: 14px;} /*************************/ /* 6- Global Paragraphs */ /*************************/ p {margin: 0px 0px 0.4em 0px; padding: 0px; line-height: 1.3em; } .big-spacing { margin: 12px 0px 0px 0px; padding: 0px 0px 0px 0px; line-height: 1.5em; color:#666666; } .big-spacing a { color:#2B9CD3; text-decoration:none;} .big-spacing a:visited { color:#2B9CD3; text-decoration:none;} .big-spacing a:hover { color:#EE9D00; text-decoration:none;} /*************************/ /* 7- Image Styles */ /*************************/ img.LeftFloat-homepage { float: left; margin-right: 30px; margin-top: 8px; padding: 0px 0px 0px 0px; border: 0;} img.GlobalFloat-homepage { float: left; margin-right: 20px; margin-top: 0px; padding: 0px 0px 0px 0px; border: 0;} img.introicon { float:right; overflow:hidden; } img.nextpage { float:left; } img.sidebanner { padding: 7px 0px 0px 0px;} img.leftbanner { float:left; margin: 0px 40px 0px 0px;} /*************************/ /* 8- Footer */ /*************************/ .footerContainer { clear:both; width:100%; background-color:#122738; height:160px; margin-top: 30px; } .footer { width:900px; padding:30px 0 0 0; margin:0px auto; font:10px Verdana, Sans-Serif; text-transform:uppercase; color:#3d4c58; } .footer a { color:#CCCCCC; text-decoration:none;} .footer a:visited { color:#CCCCCC; text-decoration:none;} .footer a:hover { color: #85C8D6; text-decoration:none;} .footer p { margin:0 0 2px 0; } /*************************/ /* 9- Lists */ /*************************/ /* 9.1 - Sidebar List */ ul.sidebar {margin:0px 0px 0px 0px;padding:0;list-style:none;} ul.sidebar li {width:280px; height: 32px;} .sideb-webdesign a { background-image:url(../images/css/menulateral-webdesign.gif); background-repeat:no-repeat; width: 280px; height:32px; display:block;} .sideb-webdesign a:hover {background-position: 0px -32px;} .sideb-eshop a { background-image:url(../images/css/menulateral-eshop.gif); background-repeat:no-repeat; width: 280px; height:32px; display:block;} .sideb-eshop a:hover {background-position: 0px -32px;} .sideb-seo a { background-image:url(../images/css/menulateral-seo.gif); background-repeat:no-repeat; width: 280px; height:32px; display:block;} .sideb-seo a:hover {background-position: 0px -32px;} .sideb-analise a { background-image:url(../images/css/menulateral-analise.gif); background-repeat:no-repeat; width: 280px; height:32px; display:block;} .sideb-analise a:hover {background-position: 0px -32px;} .sideb-redesign a { background-image:url(../images/css/menulateral-redesign.gif); background-repeat:no-repeat; width: 280px; height:32px; display:block;} .sideb-redesign a:hover {background-position: 0px -32px;} .sideb-psd a { background-image:url(../images/css/menulateral-psd.gif); background-repeat:no-repeat; width: 280px; height:32px; display:block;} .sideb-psd a:hover {background-position: 0px -32px;} /* 9.2 - Services List */ ul.servicos {margin:20px 0px 20px 20px;padding:0;list-style:none;} ul.servicos li {width:95%;display:block;background:url(../images/css/services-bullet.gif) top left no-repeat;margin:12px 0 0 3px; padding:2px 0 5px 22px; border-bottom:1px solid #efefef; color: #838383; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif;} /* 9.3 - Portfolio Inf */ ul.portfolio { float:left; margin:0px 0px 0px 0px;padding:0;list-style:none;} ul.portfolio li {width: 280px;margin:0px 0px 6px 0px; padding:0px 0px 6px 0px;border-bottom:1px dashed #B0B0B0; color: #333333; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif;} /*************************/ /* 10- Formulários */ /*************************/ label{ display: block; font: normal 10px/16px "lucida grande", verdana, sans-serif; margin: 0; padding: 0px 0; color: #666;} .textfield{ font: normal 11px/13px "lucida grande", verdana, sans-serif; padding:2px; margin: 0; border: 1px solid #ccc; background-color: #eee; color: #666;} /*************************/ /* 11- Navigation and lists */ /*************************/ /* 11.1 - Homepage lists */ .homepage-list ul { margin: 0; padding:0; } .homepage-list li { list-style-type: none;list-style-position: outside; border-bottom:1px dashed #CACACA; padding:6px 4px 6px 8px; font-size: 12px; font-weight: bold;} .homepage-list li a {text-decoration: none; color: #2B9CD3; } .homepage-list li a:visited {text-decoration: none; color: #2B9CD3;} .homepage-list li a:hover { text-decoration: underline; color: #EE9D00;} /* 11.2 - Image screenshots gallery navigation */ #largeImg { border: solid 1px #ccc; width: 500px; height: 350px; padding: 5px; } .thumbs img { border: solid 1px #ccc; width: 120px; height: 90px; padding: 2px; } .thumbs img:hover { border-color: #FF9900; } /* 11.3 - SiteMap */ .sitemap-list ul{ list-style-type:none; } .sitemap-list li{ list-style-type:none; padding-top: 5px;} .sitemap-list li a {list-style-type:none; padding: 0 2px 0 32px; background: url(../images/icons/sitemap-bullet.gif) no-repeat 8px 2px; font-size:94%; text-decoration:none; color: #3D7889;} .sitemap-list li a:visited {list-style-type:none; padding: 0 2px 0 32px; font-size:94%; text-decoration:none; color: #3D7889;} .sitemap-list li a:hover{ font-size:94%; text-decoration:none;color:#DB7900;}