/*
Theme name: Blog Web Standards
Theme URI: http://www.webstandards.blog.br/
Description: Tema desenvolvido exclusivamente para o blog Blog Web Standards.
Author: Carlos Eduardo de Souza
Author URI: http://www.midiadigital.com.br/
Tags: white, custom header, custom footer, fixed width, two columns
*/

/*
  --------------
    PALETA DE CORES
  --------------
  
  #0197e4 - Links
  #ff0090 - Hover
  
*/

/*
--------------
ORDEM DOS ATRIBUTOS
--------------

{ position:; top:; left:; float:; clear:; display:; width:; height:; margin:; padding:; border:; background:; font:; text:; color:; }

*/

/*
  --------------
    ELEMENTOS e CLASSES
  --------------
*/

  /* ------- GERAL ------- */
  * { margin: 0; padding: 0; z-index: 1; } /* reseta todas as margens, paddings e define o nivel das camadas do site */
  html { background: url(imagens/bg.png) #fff repeat-x; font: 100% "Trebuchet MS", Verdana, Arial, sans-serif; }
  body { background: url(imagens/topo_bg.jpg) center 0 no-repeat; font-size: .68em; }
  #limites { width: 836px; margin: 0 auto; padding: 37px 30px 0; color: #000; }
  

  /* ------- CLASSES ------- */
  .direita { float: right; }
  .esquerda { float: left; }
  p.direita, p.esquerda { float: none; }
  p.direita { text-align: right; }
  p.esquerda { text-align: left; }
  .centro, .aligncenter { margin: 0 auto; text-align: center; }
  img.aligncenter { display: block; margin: 1em auto; }
  
  a.expandir, a.ocultar { position: relative; display: block; width: 16px; height: 17px; background: url(imagens/botao_expandir.gif) no-repeat; text-indent: -999em; overflow: hidden; }
  a.ocultar { background-position: 0 -17px; }
  
  a.twitter { display: block; width: 175px; height: 81px; margin: 0 auto; background: url(imagens/botao_twitter.png) no-repeat; text-indent: -9999em; overflow: hidden; }

  /* contendo float */
  .contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  .contemfloat { display: inline-block; }
  /* Hides from IE-mac \*/
  * .contemfloat { height: 1%; }
  .contemfloat { display: block; }
  /* End hide from IE-mac */
  
  
  /* ------- ELEMENTOS ------- */
  a { text-decoration: none; color: #0197e4; }
  a:hover { text-decoration: underline; color: #ff0072; cursor: pointer; }
  
  form fieldset, a img { border: 0; }
  form input, form textarea, form button { border: 0; font: 1em "Trebuchet MS", Arial, Helvetica, sans-serif; color: #808080; }
  form ol { list-style: none; }
  
  pre { margin-bottom: 2em; font-size: 1.2em; }
  
  code { font-size: 1.2em; }

  /* ------- TOPO ------- */
  #topo { height: 68px; margin-bottom: 27px; }
  #topo h2 { width: 296px; height: 34px; background: url(imagens/topo_logo.png) no-repeat; text-indent: -9999em; overflow: hidden; }
  #topo h2 a { display: block; height: 100%; }
  
  #topo form { float: right; width: 278px; margin-top: -39px; overflow: hidden; }
  #topo form input { width: 195px; height: 36px; padding: 11px 0 0 20px; border: 0; background: url(imagens/topo_form_input.png) no-repeat; font-size: 1.81em; outline: 0; }
  #topo form button { position: relative; top: 0; width: 61px; height: 47px; border: 0; background: url(imagens/topo_form_botao.png) no-repeat; text-indent: -9999em; }
  html > body #topo form button { top: -3px; margin-left: -2px; }
  
  
  /* ------- APRESENTACAO ------- */
  #apresentacao { position: relative; clear: both; height: 231px; margin-bottom: 25px; background: url(imagens/apresentacao_bg.jpg) bottom no-repeat; }
  #apresentacao ul#equipe { position: relative; float: right; width: 275px; height: 229px; background: url(imagens/apresentacao_foto.jpg) no-repeat; list-style: none; }
  #apresentacao ul#equipe li { position: absolute; }
  #apresentacao ul#equipe li a { position: absolute; display: block; width: 65px; height: 100px; text-indent: -9999em; overflow: hidden; }
  #apresentacao ul#equipe li#carlitos a { top: 47px; left: 45px; }
  #apresentacao ul#equipe li#linke a { top: 47px; left: 136px; }
  #apresentacao ul#equipe li#g3 a { top: 77px; left: 200px; }
  #apresentacao ul#equipe li a:hover { background: url(imagens/apresentacao_foto.jpg) no-repeat; }
  #apresentacao ul#equipe li#carlitos a:hover { top: 13px; left: 44px; width: 164px; height: 144px; background-position: 0 -229px; }
  #apresentacao ul#equipe li#linke a:hover { top: 12px; left: 97px; width: 124px; height: 139px; background-position: 0 -373px; }
  #apresentacao ul#equipe li#g3 a:hover { top: 36px; left: 141px; width: 128px; height: 145px; background-position: 0 -512px; }
  #apresentacao h3 { margin-right: 305px; padding-top: 26px; font: 2.9em/1.7em "Trebuchet MS", Verdana, Arial, sans-serif; text-transform: lowercase; }
  #apresentacao h3 abbr { border: 0; text-transform: uppercase; color: #0197e4; }
  
  
  /* ------- COLUNA 1 ------- */
  #coluna1 { float: left; width: 530px; }
  
  #coluna1 .post { margin-bottom: 57px; }
  
  #coluna1 p { clear: left; margin-bottom: 1.5em; line-height: 1.63em; }
  
  #coluna1 h4 { margin: 2em 0 1.5em; font-size: 1.45em; color: #ff0072; }
  #coluna1 blockquote { margin-bottom: 2em; padding: 15px 39px 5px; background: url(imagens/citacao_bg.gif) #fafafa no-repeat; }
  #coluna1 ol, #coluna1 ul { line-height: 1.5em; }
  #coluna1 ol { margin: 2em 1.5em; }
  #coluna1 dt { font-weight: bold; font-size: 1.2em; }
  * html #coluna1 ol { margin-left: 21px; }
  #coluna1 ul { margin: 2em 0; list-style: none; }
  #coluna1 ul li { padding-left: 15px; background: url(imagens/bullet.gif) 0 5px no-repeat; }
  #coluna1 img { padding: 2px; border: 2px solid #0197e4; background: #fff; }
  #coluna1 img.exemplo, #coluna1 img.wp-smiley { padding: 0; border: 0; }
  #coluna1 img.centro { display: block; margin: 2em auto 1em; }
  #coluna1 img.wp-smiley { position: relative; top: 3px; }
  
  #coluna1 .post .cabecalho { margin-bottom: .8em; font-size: 1.1em; }
  #coluna1 .post .cabecalho h3, #single #coluna1 .post .cabecalho h1, #coluna1 .post .cabecalho p { margin-left: 103px; }
  #coluna1 .post .cabecalho .data { position: relative; float: left; width: 151px; height: 45px; margin: 0 0 15px -60px; background: url(imagens/post_data_bg.png) no-repeat; font-size: 1.16em; text-transform: capitalize; color: #fff; }
  #coluna1 .post .cabecalho .data strong { float: left; width: 60px; margin-right: 11px; line-height: 45px; font-size: 1.71em; font-weight: normal; text-align: center; }
  #coluna1 .post .cabecalho .data em { display: block; padding-top: 5px; font-style: normal; }
  #coluna1 .post .cabecalho h3, #single #coluna1 .post .cabecalho h1 { margin-bottom: 11px; line-height: 1em; font-size: 1.71em; font-weight: normal; }
  #coluna1 .post .cabecalho h3 a, #single #coluna1 .post .cabecalho h1 a { color: #000; }
  #coluna1 .post .cabecalho p { clear: none; margin-bottom: 1em; line-height: 1.3em; }
  
  #coluna1 .post .dados { min-height: 46px; padding: 11px; background: #f3f3f3; }
  * html #coluna1 .post .dados { height: 46px; }
  #coluna1 .post .dados ul.social { float: right; width: 138px; height: 34px; margin-top: 5px; list-style: none; }
  #coluna1 .post .dados ul.social li { float: left; padding: 0; background: transparent; }
  #coluna1 .post .dados ul.social li a { display: block; width: 34px; height: 34px; background: url(imagens/post_icones_socialmedia.png) no-repeat; text-indent: -9999em; overflow: hidden; }
  #coluna1 .post .dados ul.social li.delicious a:hover { background-position: 0 -34px; }
  #coluna1 .post .dados ul.social li.stumbleupon a { background-position: -34px 0; }
  #coluna1 .post .dados ul.social li.stumbleupon a:hover { background-position: -34px -34px; }
  #coluna1 .post .dados ul.social li.technorati a { background-position: -68px 0; }
  #coluna1 .post .dados ul.social li.technorati a:hover { background-position: -68px -34px; }
  #coluna1 .post .dados ul.social li.twitter a { background-position: -102px 0; }
  #coluna1 .post .dados ul.social li.twitter a:hover { background-position: -102px -34px; }
  #coluna1 .post .dados p.tags, #coluna1 .post .dados a.comentarios { padding-left: 20px; background: url(imagens/post_data_icones.png) no-repeat; line-height: 18px; }
  #coluna1 .post .dados p.tags { margin-bottom: 1em; }
  #coluna1 .post .dados a.comentarios { display: inline-block; background-position: 0 bottom; }
  
  
  /* ------- COLUNA 2 ------- */
  #coluna2 { margin-left: 560px; }
  
  #coluna2 dl { height: 103px; margin-bottom: 26px; background: url(imagens/coluna2_caixa_bg.png) no-repeat; }
  #coluna2 dl dt { position: absolute; margin: 19px 0 0 15px; height: 14px; background: url(imagens/coluna2_caixa_titulos.png) no-repeat; text-indent: -9999em; line-height: 1em; }
  #coluna2 dl.feeds dt { width: 41px; }
  #coluna2 dl.contato dt { width: 58px; background-position: 0 -14px; }
  #coluna2 dl dd { position: relative; height: 41px; padding: 41px 83px 21px 15px; }
  #coluna2 dl.feeds dd { background: url(imagens/coluna2_caixa_rss_icone.png) 95% center no-repeat; }
  #coluna2 dl.contato dd { background: url(imagens/coluna2_caixa_email_icone.png) 95% center no-repeat; }
  #coluna2 dl.feeds dd a { color: #e97b31; }
  #coluna2 dl.contato dd a { color: #0197e4; }
  #coluna2 dl dd strong { display: inline-block; }
  
  #coluna2 h3 { position: relative; height: 31px; margin-bottom: 3px; background: url(imagens/coluna2_titulos.png) no-repeat; text-indent: -9999em; }
  #coluna2 h3.categorias { height: 32px; background-position: 0 -31px; }
  #coluna2 h3.arquivos { height: 32px; background-position: 0 -63px; }
  #coluna2 h3.nuvem { height: 31px; background-position: 0 -95px; }
  #coluna2 h3.blogroll { height: 31px; background-position: 0 -158px; }
  #coluna2 h3.twitter { height: 32px; background-position: 0 -126px; }
  #coluna2 ul { margin-bottom: 39px; font-size: 1.27em; list-style: none; }
  #coluna2 ul li { margin: 0 11px; border-bottom: 1px solid #e6e6e6; }
  #coluna2 ul li a { display: block; margin: 0 -11px; padding: 10px 12px; color: #000; }
  #coluna2 ul li a:hover { background: #ff0090; text-decoration: none; color: #fff; }
  
  #coluna2 a.expandir { display: none; float: right; margin: -30px 30px 0 0; }
  
  #coluna2 ul#meses { text-transform: capitalize; }
  
  #coluna2 .nuvem { margin-bottom: 26px; }
  #coluna2 .nuvem a { color: #0197e4; }
  
  
  #coluna2 ul.twitter { margin-bottom: 2em; font-size: 1em; }
  #coluna2 ul.twitter li { margin: 0 0 2px; padding: 12px 10px; background: #f3f3f3; }
  #coluna2 ul.twitter li:hover { background: #e9e9e9; }
  #coluna2 ul.twitter li p { margin-bottom: 1em; }
  #coluna2 ul.twitter li a { position: static; display: inline; margin: 0; padding: 0; color: #0197e4; }
  #coluna2 ul.twitter li a:hover { background: transparent; text-decoration: underline; color: #ff0072; }
  #coluna2 ul.twitter li em { display: block; font-style: normal; text-align: right; color: #686868; }
  
  
  /* ------- RODAPE ------- */
  #rodape { position: relative; clear: both; width: 896px; margin: 0 -30px; padding-top: 120px; background: url(imagens/rodape_bg.jpg) no-repeat; }

  #rodape h3 { height: 24px; margin-bottom: 15px; background: url(imagens/rodape_titulos.png) no-repeat; line-height: 1em; text-indent: -9999em; }
  #rodape .blogroll h3 { background-position: 0 -24px; }
  #rodape .creditos h3 { height: 20px; background-position: 0 -48px; }
  #rodape form h3 { height: 20px; background-position: 0 -67px; }
  
  #rodape div { float: left; display: inline; width: 290px; margin: 0 15px 30px 0; }
  #rodape div ul { font-size: 1.27em; list-style: none; }
  #rodape div ul li { margin: 0 11px; border-bottom: 1px solid #e6e6e6; }
  #rodape div ul li a { display: block; margin: 0 -11px; padding: 10px 12px; color: #000; }
  #rodape div ul li a:hover { background: #ff0090; text-decoration: none; color: #fff; }
  
  #rodape .creditos ul li { margin: 1em; border: 0; }
  #rodape .creditos ul li a { display: inline; }
  #rodape .creditos ul li a:hover { background: transparent; }
  
  #rodape form { float: right; width: 275px; margin-bottom: 2em; }
  #rodape form fieldset { margin-top: 19px; padding: 20px 20px 10px; background: #0197e4; }
  #rodape form textarea { width: 236px; }
  #rodape form ol li { margin-bottom: 1em; }
  #rodape form ol li label { display: block; margin-bottom: 5px; font-weight: bold; color: #fff; }
  #rodape form ol li input { width: 226px; height: 16px; padding: 5px; background: url(imagens/rodape_form_input.png) no-repeat; }
  #rodape form ol li input:focus { background-position: 0 -26px; outline: 0; }
  #rodape form ol li textarea { width: 226px; height: 102px; padding: 5px; background: url(imagens/rodape_form_textarea.png) no-repeat; overflow: auto; }
  #rodape form ol li textarea:focus { background-position: -236px 0; outline: 0; }
  * html #rodape form ol li input, * html #rodape form ol li textarea { border: 1px solid #fff; background: #fff; }
  #rodape form button { float: right; width: 78px; height: 23px; background: url(imagens/rodape_form_botao.png) no-repeat; font-weight: bold; text-transform: uppercase; color: #fff; }
  #rodape form fieldset label.error { margin: 5px 3px 0 3px; padding: 0 10px; background: #036BA1; line-height: 24px; color: #fff; }
  
  #rodape p.centro { clear: both; padding: .5em 0; background: url(imagens/rodape_separador.png) no-repeat; }
  #rodape p.centro a { color: #ff0090; }
  

/*
  --------------
    ELEMENTOS e CLASSES
  --------------
*/


  /* ------- SINGLE ------- */
  #single .relacionados { margin-bottom: 6em; }
  #single .relacionados h3 { margin-bottom: 10px; font-size: 1.67em; font-weight: normal; color: #0197e4; }
  #single .relacionados ol { list-style: inside decimal; }
  
  #single #comments h3 { float: left; margin-right: 11px; font-size: 2.72em; font-weight: normal; color: #0197e4; }
  #single #comments a.responder { position: relative; top: 11px; padding-left: 11px; border-left: 1px solid #b4b4b4; font-size: 1.45em; color: #ff0090; } 
  #single #comments ol { clear: both; margin-top: 90px; list-style: none; }
  #single #comments ol li { margin-bottom: 104px; padding: 20px 17px 0; background: #f3f3f3; overflow: auto; }
  #single #comments ol li img.avatar { position: absolute; width: 64px; height: 64px; margin: -81px 0 0 -61px; padding: 8px 23px 16px 8px; border: 0; background: url(imagens/comentarios_avatar_bg.png) no-repeat; }
  #single #comments ol li.alt img.avatar { background-position: bottom; }
  #single #comments ol li .data, p.autor { font-size: 1.27em; color: #525252; }
  #single #comments ol li .data { float: right; }
  #single #comments ol li p.autor { margin-left: 43px; }
  #single #comments ol li p { margin-bottom: 1em; }
  #single #comments ol li ul { display: inline; float: right; margin: -10px -17px 0 0; padding: 5px 5px 5px 0; background: #eaeaea; line-height: 16px; }
  html > body#single #comments ol li ul { margin-top: 0; line-height: 1.2em; }
  #single #comments ol li ul li { display: inline; margin: 0 0 0 5px; padding: 0; background: transparent; }
  #single #comments ol li ul li a { padding-left: 18px; background: url(imagens/comentarios_icones.png) no-repeat; }
  #single #comments ol li ul li.citar a { padding-left: 20px; background-position: 0 -16px; }
  #single form.comentar { margin-top: -30px; padding-bottom: 70px; background: url(imagens/comentarios_form_bg.png) bottom no-repeat; }
  #single form.comentar fieldset { padding-top: 25px; background: url(imagens/comentarios_form_separador.png) no-repeat; }
  #single form.comentar fieldset h3 { margin-bottom: 43px; font-size: 2.72em; font-weight: normal; color: #0197e4; }
  #single form.comentar fieldset ol { background: url(imagens/comentarios_balao.gif) 367px 93px no-repeat; }
  #single form.comentar fieldset ol li { position: relative; clear: left; margin-bottom: 1.5em; }
  #single form.comentar fieldset ol li label { display: block; margin-bottom: 5px; font-weight: bold; color: #464646; }
  #single form.comentar fieldset ol li input, #single form.comentar fieldset ol li textarea { padding: 5px; }
  #single form.comentar fieldset ol li input { width: 253px; height: 16px; background: url(imagens/comentarios_form_input.png) no-repeat; }
  #single form.comentar fieldset ol li input:focus { background-position: 0 -26px; outline: 0; }
  #single form.comentar fieldset ol li textarea { width: 483px; height: 102px; background: url(imagens/comentarios_form_textarea.png) no-repeat; overflow: auto; }
  * html #single form.comentar fieldset ol li input, 
  * html #single form.comentar fieldset ol li textarea { border: 1px solid #d2d2d2; background: transparent; }
  #single form.comentar fieldset ol li textarea:focus { background-position: -493px 0; outline: 0; }
  #single form.comentar fieldset button { float: right; width: 96px; height: 36px; margin-right: 37px; background: url(imagens/comentarios_form_botao.png) no-repeat; font-size: 1.63em; text-transform: uppercase; color: #fff; }
  #single form.comentar fieldset label.error { position: absolute; top: -13px; left: 193px; float: left; margin: 0; padding: 0 10px 10px 10px; background: url(imagens/comentarios_form_balao.png) #FF0090 no-repeat; line-height: 24px; color: #fff; }
  
  
  /* ------- 404 ------- */
  #erro #coluna1 .aviso { height: 261px; padding: 64px 35px 0 245px; background: url(imagens/404.jpg) no-repeat; }
  #erro #coluna1 .aviso h3 { margin-bottom: 8px; font-size: 3.27em; color: #ff0090; }
  #erro #coluna1 .aviso h3, #erro #coluna1 .aviso h1 { font-weight: normal; text-align: center; }
  #erro #coluna1 .aviso h1 { margin-bottom: 38px; font-size: 1.63em; }
  #erro #coluna1 .aviso ul { margin-left: 15px; line-height: 2em; font-size: 1.27em; font-weight: bold; list-style: none; }
  #erro #coluna1 .aviso ul li { background-position: 0 11px; }
  
  
  /* ------- PAGE ------- */
  #page #coluna1 h1, #category #coluna1 h1 { margin-bottom: 1em; font-size: 1.63em; font-weight: normal; color: #0197e4; }
  #page #coluna1 h3 { margin-bottom: 1em; font-size: 1.45em; color: #ff0090; }