/****
	CSS RESET
****/
* {
	margin:        0;
	padding:       0;
	list-style:    none;

	font-family:   "Trebuchet MS";
	font-size:     10px;
	color:         #d4dcce;
}

body{
    background:     #20221d url("../images/background.jpg") repeat-X;
}

img{
    border:         0px;
}

i{
    color:          black;
}

/* INFORMACOES GERAIS */
#geral{
	width:         775px;
	margin:        0px auto;
	height:        100%;
}

/* HEADER */
#header{
    height:         35px;
}

#header #clientArea{
    float:          right;
    background:     url("../images/clientAreaBackground.jpg") no-repeat;
    
    width:          333px;
    height:         35px;
}

#header #clientArea input{
    background:     #232621;
    border:         0px;
    height:         13px;
    width:          70px;
    font-size:      9px;
    color:          #d7e8ca;
    float:          right;
}

#header #clientArea .login{
    margin-right:   25px;
    height:         13px;
    width:          75px;
    margin-top:     10px;
}

#header #clientArea .senha{
    margin-right:   15px;
    height:         13px;
    width:          75px;
    margin-top:     10px;
}

#header #clientArea .submit{
    margin-right:   20px;
    height:         21px;
    width:          16px;
    margin-top:     7px;
}

/* MENU */
#menu{
    height:         71px;
    margin-top:     29px;
    background:     url("../images/menuBackground.jpg") no-repeat;
}

#menu .logo{
    float:          left;
    margin-left:    20px;
    margin-top:     8px;
}

#menu ul{
    margin-left:    50px;
    float:          left;
    margin-top:     10px;
}

#menu li{
    display:        inline;
    margin-top:     10px;
}

/**** HOME ****/
/* -- Porftfolio Box -- */
#portfolioBox{
    height:         398px;
    margin-top:     29px;
    background:     url("../images/homePortfolioBox.jpg") no-repeat;
}

#portfolioBox .projetosRecentesTitulo{
    margin-top:     12px;
    margin-left:    13px;
    float:          left;
}

#portfolioBox .projetosRecentesTexto{
    margin-top:     12px;
    margin-right:   7px;
    float:          right;
}

#portfolioBox .projetosPrevious{
    margin-top:     12px;
    margin-right:   7px;
    float:          right;
    cursor:         pointer;
}

#portfolioBox .projetosNext{
    margin-top:     12px;
    margin-right:   13px;
    float:          right;
    cursor:         pointer;
}

#portfolioBox .box .boxDescription{
    height:         119px;
    margin-left:    10px;
}

#portfolioBox .box .boxDescription h1{
    float:          left;
    font-size:      14px;
    color:          #222420;
    letter-spacing: 1px;
    margin-top:     20px;
    margin-bottom:  10px;
}

#portfolioBox .box .boxDescription p{
    float:          left;
    color:          #222420;
    width:          560px;
    letter-spacing: .5px;
    text-align:     justify;
}

#portfolioBox .box .vejaOnline{
    float:          right;
    margin-top:     5px;
    margin-right:   30px;
}

/* -- Porftfolio CONTENT -- */
#portfolioContent{
    height:         878px;
    margin-top:     29px;
    background:     url("../images/portfolioBackground.png") no-repeat;
}

#portfolioContent .projetosRecentesTitulo{
    margin-top:     12px;
    margin-left:    13px;
    float:          left;
}

#portfolioContent .projetosRecentesTexto{
    margin-top:     12px;
    margin-right:   7px;
    float:          right;
}

#portfolioContent .projetosPrevious{
    margin-top:     12px;
    margin-right:   7px;
    float:          right;
    cursor:         pointer;
}

#portfolioContent .projetosNext{
    margin-top:     12px;
    margin-right:   13px;
    float:          right;
    cursor:         pointer;
}

#portfolioContent .box{
    /* as configuracoes desta div estao abaixo no objeto #portfolioContent .portfolioScroll */
}

#portfolioContent .box .boxDescriptionPortfolio{
    height:         119px;
    margin-left:    10px;
}

#portfolioContent .box .boxDescriptionPortfolio h1{
    float:          left;
    font-size:      14px;
    color:          #222420;
    letter-spacing: 1px;
    margin-top:     20px;
    margin-bottom:  10px;
}

#portfolioContent .box .boxDescriptionPortfolio p{
    float:          left;
    color:          #222420;
    width:          560px;
    letter-spacing: .5px;
    text-align:     justify;
}

#portfolioContent .box .boxDescriptionPortfolio .vejaOnline{
    float:          right;
    margin-top:     5px;
}

/* -- Company Box -- */
#company{
    background:     url("../images/companyBackground.jpg") no-repeat;
    height:         318px;
    margin-top:     30px;
}

#company .companyLadoDireito{
    margin-top:     10px;
}

#company .box{
    width:          335px;
    float:          left;
}

#company p{
    float:          left;
    width:          300px;
    margin-left:    33px;
    text-align:     justify;
    margin-top:     50px;
    font-size:      11px;
}

#company .destaque{
    font-size:      14px;
}

#company .saibaMais{
    float:          left;
    margin-left:    33px;
    margin-top:     40px;
}

#company .companyFoto{
    margin-top:     90px;
    margin-left:    50px;
}

/* ORCAMENTO */
/* -- Company Box -- */
#orcamento{
    background:     url("../images/orcamentoBackground.png") no-repeat;
    height:         318px;
    margin-top:     30px;
}

#orcamento .companyLadoDireito{
    margin-top:     10px;
}

#orcamento .box{
    float:          left;
    width:          335px;
}

#orcamento p{
    float:          left;
    width:          270px;
    margin-left:    33px;
    text-align:     justify;
    margin-top:     50px;
    font-size:      11px;
}

#orcamento a{
    text-decoration:none;
    color:          #8fbc6c;
    font-size:      16px;
    letter-spacing: .3px;
}

#orcamento a:hover{
    text-decoration:underline;
    font-style:     italic;
    letter-spacing: 0px;
}

#orcamento .destaque{
    font-size:      14px;
}

#orcamento .saibaMais{
    float:          left;
    margin-left:    33px;
    margin-top:     40px;
}

#orcamento .companyFoto{
    margin-top:     20px;
    margin-left:    50px;
}

#orcamento #formContato{
    float:          left;
    width:          420px;
    height:         250px;
    margin-top:     60px;
}

#orcamento #formContato input{
    background:     #232621;
    border:         0px;
}

#orcamento #formContato .enviar{
    margin-left:    5px;
    cursor:         pointer;
}

#orcamento #formContato .submit{
    width:          1px;
    height:         1px;
}

#orcamento #formContato .nome{
    margin-top:     12px;
    margin-left:    20px;
    width:          125px;
}

#orcamento #formContato .sobrenome{
    width:          125px;
    margin-left:    30px;
}

#orcamento #formContato .email{
    margin-top:     13px;
    margin-left:    20px;
    width:          285px;
}

#orcamento #formContato .empresa{
    margin-top:     13px;
    margin-left:    20px;
    width:          125px;
}

#orcamento #formContato .website{
    width:          125px;
    margin-left:    30px;
}

#orcamento #formContato .telefone{
    margin-top:     15px;
    margin-left:    20px;
    width:          125px;
}

#orcamento #formContato .descricao{
    background:     #232621;
    border:         0px;
    margin-top:     17px;
    margin-left:    20px;
    width:          290px;
    height:         105px;
    overflow:       hidden;
}

/* SELECT BOX */
.selectbox /* look&fell of  select box*/
{
  width : 125px; 
  background: url('../images/orcamentoFormBg.png') right;
  cursor: pointer;
  margin-left:  30px;
}

select {
	background: url('../images/orcamentoFormBg.png') right;
}

div.selectbox-wrapper {
    position:absolute;
  width:400px;
  border:1px solid #ccc;
  margin:0px;
  margin-left:176px;
  margin-top:7px;
  padding:0px;
  font-size:0.8em;
  text-align:left;
  max-height:200px;
  overflow:auto;
}
div.selectbox-wrapper ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.selectbox-wrapper ul li.selected { 
  background-color: #EAF2FB;
  color:black;
}
div.selectbox-wrapper ul li.current { 
  background-color: #abb6a5;
  color:black;
}
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}

#orcamento #formContato label{
    cursor:pointer;
}


/* BOXES */
#middleBoxes{
    width:          100%;
    height:         246px;
    margin-top:     30px;
}

/* DEPOIMENTO */
#depoimentoBox{
    background:     url("../images/boxPequeno.jpg") no-repeat;
    height:         100%;
    width:          312px;
    float:          left;
}

#depoimentoBox .depoimentos{
    margin-top:     10px;
    margin-left:    12px;
}

#depoimentoBox p{
    font-size:      14px;
    font-style:     italic;
    color:          #1a1c18;
    margin-top:     30px;
    margin-left:    30px;
    margin-right:   30px;
    letter-spacing: 1px;
    text-align:     justify;
}

#depoimentoBox .author{
    color:          #1a1c18;
    margin-left:    30px;
    font-size:      11px;
    font-style:     italic;
}

#depoimentoBox .company{
    color:          #1a1c18;
    font-size:      12px;
    font-style:     italic;
    font-weight:    bold;
}

#depoimentoBox .depoimentosPrevious{
    margin-top:     12px;
    margin-left:    30px;
    float:          left;
    cursor:         pointer;
}

#depoimentoBox .depoimentosNext{
    margin-top:     12px;
    margin-left:    10px;
    float:          left;
    cursor:         pointer;
}

/* DEPOIMENTO - SCROLL */
    /* Campo de Visualizacao */
    #depoimentoBox .depoimentoScroll{
        float:          left;
        position:       relative;
        overflow:       hidden;
    	
        height:         150px;
        width:          302px;
    }
    
    /* Campo para todos os itens */
    #depoimentoBox div.items {	
        width:          2000px;
        position:       absolute;
        clear:          both;
    }
    
    /* Campo para cada Item */
    #depoimentoBox div.items div {
        float:          left;
        margin-right:   40px;
        width:          302px;
    }

/* SOLUCOES */
#solucoesBox{
    background:     url("../images/boxGrande.jpg") no-repeat;
    height:         100%;
    width:          425px;
    float:          right;
}

#solucoesBox .destaquePrevious{
    float:          right;
    margin-top:     12px;
    cursor:         pointer;
}

#solucoesBox .destaqueNext{
    float:          right;
    margin-left:    10px;
    margin-right:   20px;
    margin-top:     12px;
    cursor:         pointer;
}

#solucoesBox .solucoes{
    margin-top:     10px;
    margin-left:    10px;
    float:          left;
}

#solucoesBox #conteudo{
    width:          100%;
    float:          left;
}
#solucoesBox .titulo{
    font-size:      14px;
    letter-spacing: 1px;
}

#solucoesBox .tituloDestaque{
    color:          #222420;
    font-size:      14px;
    letter-spacing: 1px;
    margin-left:    15px;
    margin-top:     20px;
}

#solucoesBox .solucoesTexto{
    margin-top:     15px;
    float:          left;
}

#solucoesBox .solucoesTexto .destaque{
    margin-top:     10px;
    margin-left:    13px;
    margin-top:     5px;
    float:          left;
}

#solucoesBox .projetosTexto{
    margin-top:     25px;
    float:          left;
}

#solucoesBox .projetosTexto .destaque{
    margin-top:     10px;
    margin-left:    13px;
    margin-top:     5px;
    float:          left;
}

#solucoesBox .descricao{
    color:          #222420;
    float:          left;
    width:          180px;
    margin-top:     0px;
    margin-left:    20px;
}

#solucoesBox p{
    color:          #1a1c18;
    margin-left:    30px;
    font-size:      11px;
    width:          200px;
    text-align:     justify;
    margin-top:     10px;
}

#solucoesBox ul{
    float:          right;
    display:        block;
    margin-top:     25px;
    margin-right:   30px;
}

#solucoesBox ul li{
    background:     url("../images/servicosMenuBackground.jpg") no-repeat;
    height:         27px;
    width:          132px;
    padding-top:    7px;
}

#solucoesBox ul li a{
    color:          #1a1c18;
    margin-left:    20px;
}

/* QUEM SOMOS */
/* -- Company Box -- */
#companyContent{
    background:     url("../images/quemSomosBackground.png") no-repeat;
    height:         465px;;
    margin-top:     30px;
}

#companyContent .companyLadoDireito{
    margin-top:     10px;
}

#companyContent .box{
    width:          335px;
    float:          left;
}

#companyContent p{
    float:          left;
    width:          300px;
    margin-left:    33px;
    text-align:     justify;
    margin-top:     15px;
    font-size:      11px;
}

#companyContent .destaque{
    font-size:      14px;
    font-style:     italic;
}

#companyContent .saibaMais{
    float:          left;
    margin-left:    33px;
    margin-top:     40px;
}

#companyContent .companyFoto{
    margin-top:     120px;
    margin-left:    50px;
}

#companyContent a{
    font-size:      13px;
}

/* NOSSOS SERVICOS */
/* -- Servicos Box -- */
#servicosContent{
    background:     url("../images/servicosBackground.png") no-repeat;
    height:         815px;
    margin-top:     30px;
}

#servicosContent    .projetosRecentesTitulo{
    margin-top:     12px;
    margin-left:    13px;
}

#servicosContent p{
    color:          #222420;
    margin-left:    45px;
    margin-top:     18px;
    margin-bottom:  35px;
}

#servicosContent .box{
    width:          740px;
    margin-left:    45px;
}

#servicosContent .box .item{
    width:          244px;
    height:         297px;
    float:          left;
    margin-bottom:  60px;
}

#servicosContent .box .item .servicosImage{
    margin-left:    0px;
}

#servicosContent .box .item p{
    float:          left;
    width:          190px;
    margin-left:    0px;
    text-align:     left;
    margin-top:     15px;
    margin-bottom:  0px;
    font-size:      11px;
}

#servicosContent .box #servicoDescricao {
    float:          left;
    height:         415px;
    width:          680px;
    margin-top:     25px;
}

#servicosContent .box #servicoDescricao #servicoDescricaoLeft{
    float:          left;
    height:         415px;
    width:          50%
}

#servicosContent .box #servicoDescricao #servicoDescricaoLeft p{
    margin-left:    0px;
    margin-top:     10px;
    margin-bottom:  10px;
    font-size:      11px;
}

#servicosContent .box #servicoDescricao #servicoDescricaoLeft .setinha{
    float:          left;
    margin-top:     2px;
}

#servicosContent .box #servicoDescricao #servicoDescricaoLeft .titulo{
    font-size:      14px;
    letter-spacing: 1px;
    font-weight:    bold;
    color:          black;
    margin-left:    20px;
    margin-bottom:  25px;
}

#servicosContent .box #servicoDescricao #servicoDescricaoRight{
    float:          left;
    height:         415px;
    width:          50%;
}

#servicosContent .box #servicoDescricao #servicoDescricaoRight .servicoImagem{
    margin-top:     150px;
    margin-left:    80px;
}

#servicosContent .box .item .titulo{
    color:          black;
    font-size:      14px;
    font-weight:    bold;
    float:          left;
    margin-top:     20px;
}

#servicosContent .box .item .leiaMais{
    float:          left;
    margin-left:    0px;
    margin-top:     20px;
}

#contatoBox{
    height:         398px;
    margin-top:     29px;
    background:     url("../images/homePortfolioBox.jpg") no-repeat;
}

#contatoBox .contatoTitulo{
    margin-top:     12px;
    margin-left:    13px;
}

#contatoBox .predio{
    float:          left;
    margin-left:    30px;
    margin-top:     30px;
    margin-bottom:  20px;
}

#contatoBox .mapa{
    float:          left;
    margin-left:    30px;
    margin-top:     30px;
}

#contatoBox .left p{
    color:          #222420;
    margin-left:    30px;
    font-size:      11px;
}

#contatoBox .left p .destaque{
    color:          #222420;
    font-size:      15px;
    font-weight:    bold;
}

#contatoBox .left p.titulo{
    font-size:      16px;
    margin-bottom:  20px;
}

#contatoBox .left{
    float:          left;
    width:          250px;
}

#contatoBox .right{
    float:          left;
    width:          450px;
}

#contatoBox .right p{
    color:          #222420;
    text-align:     center;
    margin-left:    80px;
}

/* SCROLL */
    /* Campo de Visualizacao */
    #portfolioBox .portfolioScroll{
        float:          left;
        position:       relative;
        overflow:       hidden;
    	
        height:         345px;
        width:          750px;
        margin-top:     15px;
    }
    
    /* Campo para todos os itens */
    #portfolioBox .box div.items {	
        width:          5000px;
        position:       absolute;
        clear:          both;
    }
    
    /* Campo para cada Item */
    #portfolioBox .box div.items div {
        float:          left;
        margin-left:    20px;
        width:          730px;
    }
    
    /* Campo de Visualizacao */
    #portfolioContent .portfolioScroll{
        float:          left;
        position:       relative;
        overflow:       hidden;
    	
        height:         800px;
        width:          725px;
        margin-top:     15px;
        padding-right:  25px;
    }
    
    /* Campo para todos os itens */
    #portfolioContent .box div.items {	
        width:          5000px;
        position:       absolute;
        clear:          both;
        margin-top:     30px;
    }
    
    /* Campo para cada Item */
    #portfolioContent .box div.items div {
        float:          left;
        margin-left:    25px;
        margin-right:   40px;
        width:          700px;
    }

    /* Espaco */
    #portfolioContent .box div.items div.space {
        height:         60px;
    }
    
    /* Campo de Visualizacao */
    #solucoesBox .destaqueScroll{
        float:          left;
        position:       relative;
        overflow:       hidden;
        height:         200px;
    	
        width:          400px;
        padding-right:  25px;
    }
    
    /* Campo para todos os itens */
    #solucoesBox .destaqueScroll div.items {	
        width:          2000px;
        position:       absolute;
        clear:          both;
    }
    
    /* Campo para cada Item */
    #solucoesBox .destaqueScroll div.items div {
        float:          left;
        width:          450px;
    }

/* FOOTER */
#footer{
    background:     url("../images/footerBackground.jpg") no-repeat;
    height:         99px;
    margin-top:     30px;
}

#footer #lineTop{
    float:          left;
    height:         49px;
    margin-left:    25px;
    width:          720px;; 
}

#footer #lineTop ul{
    float:          left;
    margin-top:     16px;
}

#footer #lineTop li{
    display:        inline;
    margin-top:     10px;
    vertical-align: middle;
}

#footer #lineTop li a{
    color:          #1a1c18;
    text-decoration:none;
}

#footer #lineTop li a:hover{
    text-decoration:underline;
}

#footer #lineTop .miniFooter{
    float:          right;
    margin-left:    10px;
    margin-top:     17px;
}

#footer #lineBottom{
    float:left;
    height:         49px;
    margin-left:    25px;
    width:          720px;; 
}

#footer #lineBottom .logoFooter{
    margin-top:     15px;
    float:          left;
}

#footer #lineBottom p{
    float:          left;
    margin-top:     12px;
    margin-left:    15px;
    font-size:      9px;
}

#footer #lineBottom .copyright{
    margin-top:     20px;
    float:          right;
}

#footer #lineBottom .copyright .verde{
    color:          #64971a;
}

.width100{
    width: 100%;
}

#clientesBox{
    height:         398px;
    margin-top:     29px;
    background:     url("../images/clientes_bg.png") no-repeat;
}

#clientesBox .clientesTitulo{
    margin-top:     12px;
    margin-left:    13px;
}

#clientesBox .box{
    float:          left;
    width:          730px;
    margin-top:     20px;
    margin-left:    20px;
}

ul.clients{
    width:          100%;
}

ul.clients li{
    display:        inline;
    width:          50%;
    float:          left;
    tex-align:      left;
    color:          black;
    height:         180px;
}

ul.clients li .imageBox{
    height:         110px;
    vertical-align: bottom;
    display:        table-cell;
}