@import url(reset.css);

/*************************************************************** ÚTEIS */
  .clear { clear: both; }

  .left { left: 0; position: absolute; top: 0; }
  .floatleft { float: left; }
  .right { right: 0; position: absolute; top: 0; }
  .floatright { float: right; }

  abbr { cursor: help; }

  a { color: #fff; text-decoration: underline; }
  a:hover { color: #a6c193; text-decoration: underline; }
  a:visited, a:focus, a:active { color: #a6c193; text-decoration: underline; }

  .itens { margin-top: 15px; }
  .itens li { background: url(bullet-arrow.png) no-repeat 0 2px; margin-bottom: 10px; padding: 0 0 0 14px; }

  .aligncenter { text-align: center; }
  p { margin-bottom: 15px; max-width: 800px; }

  .italic { font-style: italic; }

  .list { margin: 5px 0 0 10px; }
  .list li { margin: 0 0 10px 0; }

  .red { color: red; }
  .bold { font-weight: bold; }

  .nobg { background-image: none; }

  .grid { float: left; width: 100%; }
  .grid-a { float: left; width: 50%; }

/*************************************************************** */

/*************************************************************** ESTRUTURA */
  body { background: url(bg-geral.jpg) repeat 0 0; color: #fff; font: 14px/1.2em Arial, Tahoma, Helvetica, sans-serif; }

  #wrap { height: 627px; margin: 35px auto; position: relative; width: 905px; }
    #header { float: left; height: 234px; position: relative; }
        #logo { background: url(logo-thisilver.png) no-repeat 0 0; margin: 0 0 28px 85px; height: 69px; overflow: hidden; text-indent: -9999999px; width: 376px; }
        .menu { height: 61px; position: absolute; right: 0; top: 8px; }
            .menu li { float: left; list-style: none; height: 61px; }
            .menu li a { display: block; height: 61px; overflow: hidden; text-indent: -9999999px; }
            .menu .quem { background: url(bt-quem.png) no-repeat 0 0; width: 87px; }
            .menu .portfolio { background: url(bt-portfolio.png) no-repeat 0 0; width: 105px; }
            .menu .contato { background: url(bt-contato.png) no-repeat 0 0; width: 101px; }
            .menu .blog { background: url(bt-blog.png) no-repeat 0 0; width: 75px; }

        .citation { background: url(bg-quote.jpg) no-repeat 0 0; height: 74px; padding: 26px 0 0 284px; position: relative; width: 620px; }
        .citation blockquote { background: url(quotes.png) no-repeat 0 0; font: italic 30px/0.9em Times New Roman, Georgia, sans-serif; max-width: 489px; padding: 0 0 0 25px; position: relative; text-align: right; }
        .rtthis { background: url(bt-rt.png) no-repeat 0 0; display: block; height: 17px; position: absolute; right: -23px; top: 5px; width: 17px; }
        .rtthis .ballonretweet { background: url(ballon-re-tweet.png) no-repeat 0 0; display: block; height: 38px; margin: -40px 0 0 -45px; width: 99px; }

        .avatar { background: url(profile-pic.png) no-repeat 0 0; display: block; height: 108px; left: 85px; padding: 6px 0 0 6px; position: absolute; top: 125px; z-index: 999; }

    #quem, #portfolio, #contato { background: url(bg-linha-vertical.png) repeat-y 60px 0; float: left; margin: 0 0 30px; padding: 17px 0 17px 85px; width: 820px; }
        #socialbar { background: url(bg-onde-me-encontrar.jpg) no-repeat 0 0; height: 43px; float: right; margin: -17px 0 0; padding: 14px 0 0 20px; width: 369px; }
          #socialbar li { float: left; height: 27px; line-height: 27px; position: relative; }
          #socialbar li a { cursor: pointer; display: block; height: 27px; text-decoration: none; }
          #socialbar .ondemeencontrar { color: #a6c193; font-size: 16px; font-weight: bold; margin-right: 20px; }
          #socialbar .gmail { background: url(icon-gmail.png) no-repeat 0 0; height: 27px; margin-right: 10px; width: 27px; }
            #socialbar .gmail span { background: url(diga-ola.png) no-repeat 0 0; display: block; height: 38px; left: 0; overflow: hidden; position: absolute; text-indent: -9999999px; top: -42px; width: 78px; }

          #socialbar .gtalk { background: url(icon-gtalk.png) no-repeat 0 0; height: 27px; margin-right: 10px; width: 27px; }
            #socialbar .gtalk span { background: url(quer-bater-um-papo.png) no-repeat 0 0; display: block; height: 38px; left: 0; overflow: hidden; position: absolute; text-indent: -9999999px; top: -42px; width: 151px; }

          #socialbar .twitter { background: url(icon-twitter.png) no-repeat 0 0; height: 27px; margin-right: 10px; width: 27px; }
            #socialbar .twitter span { background: url(follow-me-thisilver.png) no-repeat 0 0; display: block; height: 38px; left: -66px; overflow: hidden; position: absolute; text-indent: -9999999px; top: -42px; width: 146px; }

          #socialbar .facebook { background: url(icon-facebook.png) no-repeat 0 0; height: 27px; margin-right: 10px; width: 27px; }
            #socialbar .facebook span { background: url(pessoal.png) no-repeat 0 0; display: block; height: 38px; left: -9px; overflow: hidden; position: absolute; text-indent: -9999999px; top: -42px; width: 80px; }

          #socialbar .linkedin { background: url(icon-linkedin.png) no-repeat 0 0; height: 27px; margin-right: 10px; width: 27px; }
            #socialbar .linkedin span { background: url(network.png) no-repeat 0 0; display: block; height: 38px; left: -40px; overflow: hidden; position: absolute; text-indent: -9999999px; top: -42px; width: 73px; }

    .titulo { background: url(bg-titulo.jpg) no-repeat 0 0; height: 61px; margin: 0 0 30px; position: relative; width: 905px; }
        .tituloportfolio { background: url(titulo-portfolio.jpg) no-repeat 0 0; height: 61px; overflow: hidden; text-indent: -9999999px; width: 176px; }
        .titulocontato { background: url(titulo-contato.jpg) no-repeat 0 0; height: 61px; overflow: hidden; text-indent: -9999999px; width: 176px; }

        .titulo .menu { top: 0; }

        #trampos { background: url(bg-linha-horizontal.png) repeat-x 0 63px; float: left; margin: 0 0 0 -85px; position: relative; width: 905px; }
        #trampos .trampo .print { float: left; margin: 0 36px 0 0; }
        #trampos .trampo .sobreotrampo { float: right; width: 330px; }
        #trampos .trampo .sobreotrampo p { color: #c7c6c6; width: 315px; }
        #trampos .trampo .sobreotrampo p strong { color: #fff; }
        #trampos .trampo .sobreotrampo .nomedotrampo { height: 93px; padding: 10px 0 0; width: 330px; }
        #trampos .trampo .sobreotrampo .nomedotrampo h3 { color: #c7c6c6; font-size: 22px; font-weight: 700; letter-spacing: -0.05em; margin: 0 0 5px; }
        #trampos .trampo .sobreotrampo .nomedotrampo p { color: #a6c193; font-size: 16px; margin: 0; }

        .navtrampo { height: 63px; position: absolute; right: 0; top: 0; width: 76px; }
        .navtrampo li { float: right; height: 63px; width: 38px; }
        .navtrampo li a { display: block; height: 63px; width: 38px; }
                    .anterior { background: url(bt-setas.png) no-repeat 0 0; }
                        .anterior:hover { background-position: 0 -63px; }
                    .proximo { background: url(bt-setas.png) no-repeat -38px 0; }
                        .proximo:hover { background: url(bt-setas.png) no-repeat -38px -63px; }


        #contato .tituloform { height: 53px; padding: 10px 0 0; width: 390px; }
        #contato .tituloform h3 { color: #a6c193; font-size: 22px; font-weight: 700; letter-spacing: -0.05em; margin: 0 0 5px; }
        #contato .tituloform p { color: #c7c6c6; font-size: 16px; margin: 0; }

        #contato dl { margin: 0 0 20px; padding: 0 0 0 40px; }
        #contato dl dt{ text-transform: uppercase; }
          #contato dl.iconcelular { background: url(icon-celular.png) no-repeat 0 0; }
          #contato dl.iconemail { background: url(icon-gmail.png) no-repeat 0 0; }
          #contato dl.icongtalk { background: url(icon-gtalk.png) no-repeat 0 0; }
          #contato dl.iconlinkedin { background: url(icon-linkedin.png) no-repeat 0 0; }
          #contato dl.icontwitter { background: url(icon-twitter.png) no-repeat 0 0; }
          #contato dl.iconfacebook { background: url(icon-facebook.png) no-repeat 0 0; }

          #contato form label { float: left; padding: 7px 0; width: 100%; }
          #contato form label input, #contato form label textarea { background-color: #1c393b; border: 1px solid #456943; margin: 5px 0 0; padding: 4px 0; width: 85%; }
          #contato form label textarea { height: 65px; margin: 5px 0 10px; }
                   #btenviar { background: transparent url(bt-enviar.png) no-repeat 0 0; clear: both; border: none; cursor: pointer; display: block; margin: 0; height: 36px; padding: 0; width: 120px; }

    h2 { color: #a6c193; font-size: 24px; font-weight: bold; margin-bottom: 17px; }