/* 
Author: 			Stefan Vervoort
Author URI: 		http://www.divitomedia.com/
Version:			0.9

Project:			
Description:					

---------------------------------------------------------------------------------------
TABLE OF CONTENTS
	-- 
	-- 
	--
---------------------------------------------------------------------------------------

/* ------------------------------------------------------------------------------------
BASICS						 */

html{					font-size:100%;	min-height:101%; }
body{					font-size:12px; color:#666; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif}

.left{					float:left; }
.right{					float:right; }
.clear{					clear:both; }

img.left{				margin:0 1em 1em 0; }
img.right{				margin:0 0 1em 1em; }

.padding{				padding:10px; }
#content p{				margin:1.1em 0; }

/* Reset para evitar ou outline de links. */
a:hover, a:active, a:focus { outline: 0; }


/* ------------------------------------------------------------------------------------
STRUCTURE					 */

#header{				display:block; width:100%; height: 206px; background: url(../images/bgHeader.jpg) repeat-x; float:left; top:0; left:0; position:absolute;}
#headerContainer{                       display:block; position:relative; width:980px; height:206px; left:50%; margin-left:-500px; padding: 0 10px; background: url(../images/bgHeaderImage.jpg) center no-repeat; /*border-left: 1px solid blue; border-right: 1px solid blue;*/}
#headerContent{                         display:block; float:left; width:100%; }
#headerLogo{                            display:block; float: left; width: 500px; height: 150px; }
#headerLanguages{                       display:block; float: right; width: 370px; }
#headerTelephone{                       display:block; float: right; width: 311px; height: 75px;}

#body{					display:block; float:left; width:100%; background: url(../images/bgBody.png); margin-top:206px; }
#bodyWrapper{				display:block; float:left; width:100%; background: url(../images/bgBodyImage.png) repeat-x; }
#bodyContainer{				display:block; position:relative; width:1000px; height:100%; left:50%; margin-left:-500px; padding: 0;}
#bodyMenu {                             display:block; float: left; width: 275px;  background: url(../images/bgMenu.png) no-repeat scroll right 30px transparent; margin-bottom: 10px; }
#bodyRight {                            display:block; float: right; width: 725px; background: url(../images/bgBodyRight.png) no-repeat scroll left 75px transparent; }
#bodyContentTop {                       display:block; float: left; width: 725px; }
#bodyContentBottom {                    display:block; float: left; width: 725px; }
#footer{                                display:block; float:left; width:100%; background: url(../images/bgFooter.png) repeat-x; background-color: #404040; }
#footerContainer{                       display:block; float:left; position:relative; width:980px; left:50%; margin-left:-500px; padding: 0 10px; background: url(../images/bgFooterTweetinho.png) no-repeat 88% 100%; padding-bottom: 25px;  }
#footerBottom{                          display:block; float:left; width:100%; background: url(../images/bgFooterBottom.png) repeat-x; height: 61px; }
#footerBottomContainer{                 display:block; position:relative; width:980px; left:50%; margin-left:-500px; padding: 0 10px; }

/* ------------------------------------------------------------------------------------
CUSTOM						 */

#header a.logo {
    background-image:url(../images/logo.gif);
    position: absolute;
    margin: 46px 0 0 50px;
    display: block;
    width: 237px;
    height: 70px;
    font-size: 0;
    text-indent: -9999em;
}

#subContainer a {
    color: gray;
}

/* BOTOES */
input.mainButton, a.mainButton {
    height:30px;
    padding: 0px 10px 0 10px;
    line-height: 30px;
    font-family: "Trebuchet MS", "Lucida Sans Unicode", serif;
    background-image:url(../images/bgMainButton.png);
    background-position: top;
    font-size: 12px;
    text-transform: uppercase;
    color:#FFFFFF !important;
    border: 0;
    cursor: pointer;
    margin: 0px 2px;
}
input.mainButton:hover, a.mainButton:hover {
    background-position: bottom;
}

a.basicLink {
    background-color:#1E0D22;
    color:#C4ACC9;
    display:block;
    font-family:Tahoma,Geneva,sans-serif;
    font-size:11px;
    font-weight:bold;
    height:21px;
    padding:4px 8px 0;
}

a.basicLink:hover {
    background-color:#AF85B4;
    color:#35163D;
}

#headerMenu {               display: block; float:left; }
#headerMenu ul {            padding: 0; margin: 0; }
#headerMenu ul li {         height:37px; display:block; float: left; list-style-type:none; padding:0 20px; }
#headerMenu ul li a {       line-height:34px; text-transform: uppercase; color: #000; font-size: 11px; }
#topAddress {               display: block; float:right; padding: 0 12px; line-height:34px; }

/* Menu */
#bodyMenu ul { margin: 0; padding: 0; list-style-type:none;}
#bodyMenu h2 { margin-bottom: 4px;}
#bodyMenu > ul { margin: 40px 0 0 28px;}
#bodyMenu > ul > li { margin: 15px 0 0 0;}
#bodyMenu h2.title a {
    background-image:url(../images/spriteMenuTitle.png);
    background-repeat: no-repeat;
    display: block;
    width: 220px;
    height: 50px;
    font-size: 0;
    text-indent: -9999em;
}
#bodyMenu ul a.somos { background-position: 0px 0px;}
/*#bodyMenu ul a.somos:hover,*/ #bodyMenu ul a.somos.hover { background-position: -220px 0px; }
#bodyMenu ul a.fazemos { background-position: 0px -50px;}
/*#bodyMenu ul a.fazemos:hover,*/ #bodyMenu ul a.fazemos.hover { background-position: -220px -50px; }
#bodyMenu ul a.fizemos { background-position: 0px -100px;}
/*#bodyMenu ul a.fizemos:hover,*/ #bodyMenu ul a.fizemos.hover { background-position: -220px -100px; }

#bodyMenu ul.sub a {
    background-image:url(../images/spriteMenu.png);
    background-repeat: no-repeat;
    display: block;
    width: 120px;
    height: 30px;
    font-size: 0;
    text-indent: -9999em;
    margin-left:100px;
}
#bodyMenu ul a.agencia { background-position: 0px 0px; }
#bodyMenu ul a.agencia:hover { background-position: -120px 0px; }
#bodyMenu ul a.clientes { background-position: 0px -30px; }
#bodyMenu ul a.clientes:hover { background-position: -120px -30px; }
#bodyMenu ul a.contato { background-position: 0px -60px; }
#bodyMenu ul a.contato:hover { background-position: -120px -60px; }
#bodyMenu ul a.webdesign { background-position: 0px -90px; }
#bodyMenu ul a.webdesign:hover { background-position: -120px -90px; }
#bodyMenu ul a.desenvolvimento { background-position: 0px -120px; }
#bodyMenu ul a.desenvolvimento:hover { background-position: -120px -120px; }
#bodyMenu ul a.seo { background-position: 0px -150px; }
#bodyMenu ul a.seo:hover { background-position: -120px -150px; }
#bodyMenu ul a.hospedagem { background-position: 0px -180px; }
#bodyMenu ul a.hospedagem:hover { background-position: -120px -180px; }
#bodyMenu ul a.web { background-position: 0px -210px; }
#bodyMenu ul a.web:hover { background-position: -120px -210px; }
#bodyMenu ul a.logotipos { background-position: 0px -240px; }
#bodyMenu ul a.logotipos:hover { background-position: -120px -240px; }
#bodyMenu ul a.midia { background-position: 0px -270px; }
#bodyMenu ul a.midia:hover { background-position: -120px -270px; }

#headerLanguages a {
    display: block;
    float:right;
    padding-left:30px;
    height: 24px;
    background-color: #3B3B3B;
    text-align: right;
    line-height: 20px;
    margin-right: 8px;
    margin-top: 14px;
    padding-right: 8px;
    color: #FFF;
    text-transform: lowercase;
    background-repeat: no-repeat;
    background-position: 7px 6px;
}
#headerLanguages a:hover {
    /*background-color: #C7C7C7;*/
    text-decoration: none;
    color: #999999;
}
#headerLanguages a#langSpanish { background-image:url(../images/es.png); }
#headerLanguages a#langEnglish { background-image:url(../images/us.png); }

#headerTelephone {
    margin-right: 8px;
    margin-top: 14px;
    background-image:url(../images/bgTelephone.png);
    background-repeat: no-repeat;
    font-size: 0;
    text-indent: -9999em;
}

#bodyRight .bodyContentLeft, #bodyRight .bodyContentRight {
    display: block;
    float: left;
    width: 362px;
}

#verticisDescription {
    display:block; float: right; width: 250px; height: 90px;
    margin: 40px 70px 30px 0;
    padding: 0;
    background-image:url(../images/bgDescription.gif);
    background-repeat: no-repeat;
    font-size: 0;
    text-indent: -9999em;
}

.verticisBox {          display: block; float:left; margin-left: 40px; margin-top: 32px; }
.verticisBox h1.index {       font-size: 16px; color: #333333; margin-top: 15px; margin-bottom: 0px; font-weight: bold; }
.verticisBox h2 {       font-size: 18px; color: #333333; margin-bottom: 0; font-weight: bold; }
.verticisBox p, .verticisBox span {
    width: 265px;
    background-image: url(../images/bgVerticisBox.png);
    background-repeat: no-repeat;
    padding: 35px 25px 25px 25px;
    margin-top: 17px;
    display: block;
    float: left;
    text-align:justify;
}

#showcaseSlider {
    display: block;
    float: left;
    width: 330px;
    height: 384px;
    background-image: url(../images/bgIpad.png);
    background-repeat: no-repeat;
    margin-top: 35px;
    position: relative;
}

#showcaseSlider .showcaseScrollable {
    width: 204px;
    height: 270px;
    margin-left: 82px;
    margin-top: 45px;
    position:relative;
    overflow:hidden;
}

#showcaseSlider .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
}

#showcaseSlider .item {
    float: left;
    position: relative;
}

#showcaseSlider #seeShowCase {
    display: block;
    float: left;
    width: 120px;
    height: 120px;
    position: absolute;
    top: 6px;
    left: 202px;
    background-image: url(../images/verTodos.png);
    background-repeat: no-repeat;
    font-size: 0;
    text-indent: -9999em;
}

#twitter a.profile {
    background-image: url(../images/twitter.png);
    background-repeat: no-repeat;
    background-position: right top;
    margin-top: 75px;
    display: block;
    float: left;
    height: 108px;
    width: 100%;
    font-size: 0;
    text-indent: -9999em;
}

#twitter p.lastUpdate {
    background-image: url(../images/bgTwitter.png);
    background-repeat: repeat-y;
    background-position: right top;
    display: block;
    float: right;
    padding:0 31px 0 15px;
    width:165px;
    margin: 0;
}
#twitter p.lastUpdate a { color: #38CCFF; }
#twitter p.updateDate {
    background-image: url(../images/bgTwitterBottom.png);
    background-repeat: no-repeat;
    background-position: right top;
    display: block;
    float: right;
    width: 130px;
    height: 35px;
    padding: 12px 0 0 81px;
    color: #38CCFF;
    font-weight: bold;
    font-size: 11px;
}
#twitter p.updateDate a { color: #38CCFF; }

#footer {
    padding-top: 50px;
    color: #FFF;
}

#footerBox {
    padding-left: 30px;
    display: block;
    float: left;
}

#footerBox h2 {
    color: #FFF;
    font-size: 18px;
    margin: 0;
}

#footerBox .box {
    display: block;
    float: left;
    width: 240px;
    padding: 15px 20px;
    background-color: #4F4F4F;
    margin-top: 20px;
    margin-right: 10px;
}

#footerBox .box span {
    display: block;
    float:left
}

#footerBox .box span.postDate {
    color: #8A8A8A;
    font-weight: bold;
    display:block;
    float:left;
    width: 100%;
}

#footerBox .box span.postTitle {
    color: #FFF;
    margin-bottom: 20px;
    display:block;
    float:left;
    width: 100%;
}

#footerBox .box span.visitBlog {
    width: 100%;
    text-align: right;
}

#footerBox .box span.visitBlog a {
    color: #99CC00;
    font-weight: bold;
}

#footerBox .box b {
    color: #8A8A8A;
}

#footerBox .box .address b {
    color: #99CC00;
}

#footerBox .box .address {
    margin-top: 60px;
    display: block;
    float: left;
    width: 100%;
}

#footerBox #socialList {
    margin:0;
    padding: 0;
    list-style: none;
}

#footerBox #socialList a {
    display: block;
    float:left;
    width: 25px;
    height: 25px;
    font-size: 0;
    text-indent: -9999em;
    background-image: url(../images/spriteSocial.png);
    background-repeat: no-repeat;
    margin-left:4px;
}

#footerBox #socialList a.twitter {              background-position: 0px 0px; }
#footerBox #socialList a.twitter:hover {        background-position: 0px -25px; }
#footerBox #socialList a.facebook {             background-position: -25px 0px; }
#footerBox #socialList a.facebook:hover {       background-position: -25px -25px; }
#footerBox #socialList a.stumble {              background-position: -50px 0px; }
#footerBox #socialList a.stumble:hover {        background-position: -50px -25px; }
#footerBox #socialList a.digg {                 background-position: -75px 0px; }
#footerBox #socialList a.digg:hover {           background-position: -75px -25px; }
#footerBox #socialList a.linkedin {             background-position: -100px 0px; }
#footerBox #socialList a.linkedin:hover {       background-position: -100px -25px; }
#footerBox #socialList a.technorati {           background-position: -125px 0px; }
#footerBox #socialList a.technorati:hover {     background-position: -125px -25px; }
#footerBox #socialList a.blog {                 background-position: -150px 0px; }
#footerBox #socialList a.blog:hover {           background-position: -150px -25px; }
#footerBox #socialList a.flickr {               background-position: -175px 0px; }
#footerBox #socialList a.flickr:hover {         background-position: -175px -25px; }
#footerBox #socialList a.delicious {            background-position: -200px 0px; }
#footerBox #socialList a.delicious:hover {      background-position: -200px -25px; }
#footerBox #socialList a.empreendemia1 {        background-position: -225px 0px; }
#footerBox #socialList a.empreendemia1:hover {  background-position: -225px -25px; }
#footerBox #socialList a.empreendemia2 {        background-position: -250px 0px; }
#footerBox #socialList a.empreendemia2:hover {  background-position: -250px -25px; }

#footerBox h2.social {  margin-top: 50px; }

#footerBox #flickrList { margin:0; padding: 0; list-style: none; }
#footerBox #flickrList a { display: block; float: left; margin-right: 20px; }
#footerBox #flickrList a img { border: 4px solid #FFF; }
#footerBox #flickrList a:hover img { border: 4px solid #99CC00; }

#footerBottom #copyright {
    display: block;
    float:left;
    line-height: 61px;
    color: #FFF;
}

#footerBottom #verticisFooter {
    display: block;
    float: right;
    margin: 15px 15px 0 0 ;
}

#footerBottom #verticisFooter a {
    display: block;
    float: left;
    width: 94px;
    height: 27px;
    font-size: 0;
    text-indent: -9999em;
    background-image: url(../images/bgVerticisFooter.png);
    background-repeat: no-repeat;
}

#footerBottom #verticisFooter a:hover {
    background-position: bottom;
}

a.wantSeo, a.hostingPlans {
    background-image: url(../images/spriteButtons.png);
    background-repeat: no-repeat;
    width: 187px;
    height: 30px;
    font-size: 0;
    text-indent: -9999em;
    display: block;
    float: left;
    margin-left: 60px;
}
a.wantSeo {              margin-top: 12px; background-position: 0px 0px; }
a.wantSeo:hover {        background-position: 0px -30px; }
a.hostingPlans {         margin-top: 18px; background-position: -187px 0px; }
a.hostingPlans:hover {   background-position: -187px -30px; }

img.seoGraph, img.hostingIco {
    margin-right: 20px;
    margin-bottom: 5px;
}
img.hostingIco {        margin-left: 15px; }

#hostingAdvantages {        float: left; margin: 0; padding: 0; list-style: none; }
#hostingAdvantages li {     background: url(../images/check.png) no-repeat; padding-left: 30px; height: 24px; }

#subContainer {
    /*width: 100%;*/
    min-height: 350px;
    padding: 40px 38px;
    display: block;
    float: left;
    margin-bottom:25px;
}

#subContainer h1 {
    display: block;
    float: left;
    width: 651px;
    height: 52px;
    background: transparent  url(../images/bgSubHeader.jpg) no-repeat;
    margin-bottom: 8px;
}

#subContainer h2 {
    display: block;
    float: left;
    margin-bottom: 20px;
    margin-top:45px;
    width: 95%;
    font-size: 18px;
    color: #333333;
    padding: 0 20px;
    font-weight: bold;
}

#subContainer h3 {
    display: block;
    float: left;
    margin-bottom: 12px;
    width: 95%;
    font-size: 15px;
    color: #333333;
    padding: 0 20px;
    margin-top:28px;
}

#subContainer span, #subContainer p {
    display: block;
    float: left;
    margin-bottom: 10px;
    width: 600px;
    text-align: justify;
    padding: 0 20px;
}

#subContainer h1 span {
    display:block;
    float:left;
    font-size: 0;
    text-indent: -9999em;
    height: 20px;
    background: transparent  url(../images/bgSubTitle.png) no-repeat;
    width:82px;
    margin-top:16px;
    margin-left:22px;
}

#subContainer h1 span.somos {       background-position: 0px 0px;}
#subContainer h1 span.fazemos {     background-position: 0px -20px;}
#subContainer h1 span.fizemos {     background-position: 0px -40px;}

#subContainer .subMenu {
    margin: 0;
    padding: 0;
    display: block;
    float: left;
    list-style: none;
}

#subContainer .subMenu li {
    display: block;
    float: left;
}

#subContainer .subMenu a {
    text-indent: -9999em;
    height: 20px;
    background: transparent  url(../images/spriteSubPageMenu.png) no-repeat;
    display: block;
    float: left;
    height: 29px;
    margin-right: 7px;
}

#subContainer .subMenu a.agencia {                  width: 94px; background-position: 0px 0px;}
#subContainer .subMenu a.agencia:hover {            background-position: -140px 0px;}
#subContainer .subMenu a.clientes {                 width: 88px;    background-position: 0px -30px;}
#subContainer .subMenu a.clientes:hover {           background-position: -140px -30px;}
#subContainer .subMenu a.contato {                  width: 85px;    background-position: 0px -60px;}
#subContainer .subMenu a.contato:hover {            background-position: -140px -60px;}
#subContainer .subMenu a.webdesign {                width: 100px;    background-position: 0px -90px;}
#subContainer .subMenu a.webdesign:hover {          background-position: -140px -90px;}
#subContainer .subMenu a.desenvolvimento {          width: 140px;    background-position: 0px -120px;}
#subContainer .subMenu a.desenvolvimento:hover {    background-position: -140px -120px;}
#subContainer .subMenu a.seo {                      width: 86px;    background-position: 0px -150px;}
#subContainer .subMenu a.seo:hover {                background-position: -140px -150px;}
#subContainer .subMenu a.hospedagem {               width: 111px;    background-position: 0px -180px;}
#subContainer .subMenu a.hospedagem:hover {         background-position: -140px -180px;}
#subContainer .subMenu a.web {                      width: 55px;    background-position: 0px -210px;}
#subContainer .subMenu a.web:hover {                background-position: -140px -210px;}
#subContainer .subMenu a.logotipos {                width: 97px;    background-position: 0px -240px;}
#subContainer .subMenu a.logotipos:hover {          background-position: -140px -240px;}
#subContainer .subMenu a.midiadigital {             width: 117px;    background-position: 0px -270px;}
#subContainer .subMenu a.midiadigital:hover {       background-position: -140px -270px;}

#subContainer .subMenu a.agencia.selected {            background-position: -140px 0px;}
#subContainer .subMenu a.clientes.selected {           background-position: -140px -30px;}
#subContainer .subMenu a.contato.selected {            background-position: -140px -60px;}
#subContainer .subMenu a.webdesign.selected {          background-position: -140px -90px;}
#subContainer .subMenu a.desenvolvimento.selected {    background-position: -140px -120px;}
#subContainer .subMenu a.seo.selected {                background-position: -140px -150px;}
#subContainer .subMenu a.hospedagem.selected {         background-position: -140px -180px;}
#subContainer .subMenu a.web.selected {                background-position: -140px -210px;}
#subContainer .subMenu a.logotipos.selected {          background-position: -140px -240px;}
#subContainer .subMenu a.midiadigital.selected {       background-position: -140px -270px;}

#subContainer form {
    display: block;
    float: left;
    margin-left: 30px;
    margin-top: 30px;
}
#portfolioContact {
    margin: 5px 0px 0px 0px !important;
}
#portfolioContact input {   font-size: 10px;;}
#portfolioContact .nome {   width: 100px;}
#portfolioContact .email {   width: 100px;}
#portfolioContact .tel {   width: 80px;}
#portfolioContact .mainButton {   height: 22px; line-height: 22px; background-position:center -3px; font-weight: bold;}
#portfolioContact .mainButton:hover {   background-position:center -33px; }

.error_list {
    color:red;
}

#portfolio h2 {  margin-bottom: 2px; }
#portfolio h2 a {  color: #000; }
#portfolio h2 a:hover {  color: #666; text-decoration: none; }
#portfolio .information {  display: block; float: left; width: 640px; }
#portfolio .description { color: #8F8F8F; display: block; float: left; width: auto; margin-bottom: 10px; }
#portfolio .picture { display: block; float: left; margin-bottom: 2px; }

#portfolio #showcaseInfo {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 620px;
    height: 145px;
    opacity: 0;
    background-color: #000;
}

#portfolioShow { font-size: 13px; }
#portfolioShow span { margin-bottom: 0; line-height: 25px; }
#portfolioShow h2 {  margin-bottom: 2px; }
#portfolioShow .information {  display: block; float: left; width: 640px; }
#portfolioShow .description { margin-bottom: 20px; line-height: 20px; }
#portfolioShow .project { margin: 10px 0 0 20px; background: transparent  url(../images/category.png) no-repeat 0px 5px; padding-left: 23px; }
#portfolioShow .picture { display: block; float: left; margin-bottom: 2px; text-align: center; }
#portfolioShow .picture img { -moz-border-radius:3px 3px 3px 3px; background-color:#4B4B4B; border:1px solid #333333; padding:10px; margin-top: 15px; margin-bottom: 15px; }
#portfolioShow .url { margin-left:20px; background: transparent  url(../images/url.png) no-repeat 0px 5px; padding-left: 23px; }
#portfolioShow .url a {  }
#portfolioShow .twitter { margin-top: 10px; margin-left:20px; background: transparent  url(../images/showcase_twitter.png) no-repeat 0px 5px; padding-left: 23px; }
#portfolioShow .stumble { margin-left:20px; background: transparent  url(../images/showcase_stumble.png) no-repeat 0px 5px; padding-left: 23px; }
#portfolioShow .delicious { margin-left:20px; background: transparent  url(../images/showcase_delicious.png) no-repeat 0px 5px; padding-left: 23px; }

/* Configuração dos tips de portfolio */
.showcaseTitle {            font-weight: bold; }
.showcaseDescription {      color: #777777; }
.showcaseLink, .showcaseLink a {           color: #CCCCCC; }

#customersList ul { display: block; float: left; margin: 20px 0 0 10px;}
#customersList ul li {
    margin: 0 0 10px 10px;
    padding: 5px 0 0 5px;
    display: block;
    float: left;
    width: 195px;
    height: 125px;
    background: transparent  url(../images/bgClientes.png) no-repeat;
}