/*
Theme name: Blog Janela da Infância
Theme URI: http://www.janeladainfancia.com.br/
Description: Tema desenvolvido exclusivamente para o blog Janela da Infância.
Author: Carlos Eduardo de Souza
Author URI: http://www.midiadigital.com.br/
Tags: white, custom header, fixed width, two columns, three columns
*/

/*
  --------------
    PALETA DE CORES
  --------------
  
  #78535a - Textos
  #ff4c75 - Rosa
  #3587b5 - Azul
  #647026 - Verde
  #c16f2f - Marrom
  
*/

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

  /* ------- GERAL ------- */
  * { margin: 0; padding: 0; } /* reseta todas as margens, paddings e define o nível das camadas do site */
  html, body { font: 100% Verdana, Arial, Helvetica, sans-serif; }
  html { background: url(topo_bg.jpg) center 0 no-repeat; }
  body { background: url(bg.png) 0 150px repeat-x; }
  
  #limites { width: 990px; margin: 0 auto; font-size: .75em; color: #78535a; }
  
  /* ------- CLASSES ------- */
  .direita { float: right; }
  .esquerda { float: left; }
  p.direita, p.esquerda { float: none; }
  p.direita { text-align: right; }
  p.esquerda { text-align: left; }
  .centro { text-align: center; }

  .overlay { position: absolute; display: none; width: 100%; top: 0; left: 0; background: #000; opacity:0.4; filter:alpha(opacity=40); z-index: 2; }
  .overlay.ativo { display: block; }

  .popup { position: absolute; top: 50%; left: 50%; width: 530px; margin: -195px 0 0 -265px; padding: 22px 18px; border: 1px solid #78535a; background: #fff; z-index: 1000; zoom: 1; }
  .popup h4 { font-size: 2em; }
  .popup ul { margin: 1em 0 0 1.3em; }
  .popup a.fechar { float: right; padding-left: 11px; background: url(coluna1_post_indique_cancelar_bg.jpg) 0 4px no-repeat; font-weight: bold; }
  .popup a.fechar:hover { color: #78535a; }

  /* 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 */
  
    /* ------- BOTOES ------- */
    a.botao, a.botao strong { background-repeat: no-repeat; }
    a.botao { padding-left: 13px; font-size: .8em; text-decoration: none; }
    a.botao:hover { background-position: 0 bottom; }
    a.botao strong { padding-right: 13px; background-position: right 0; }
    a.botao:hover strong { background-position: bottom right; }
    a.botao.azul, a.botao.azul strong { background-image: url(botao_azul.png); }
    a.botao.azul { color: #3587b5; }
    a.botao.marrom, a.botao.marrom strong { background-image: url(botao_marrom.png); }
    a.botao.marrom { color: #c16f2f; }
    #limites a.botao:hover { color: #fff; }
  
  /* ------- ELEMENTOS ------- */
  a { color: #78535a; }
  a:hover { color: #186462; }
  
  form fieldset, a img { border: 0; }
  
  p { line-height: 1.5em; }
  
  form input, form textarea, form select { padding: 2px; border: 1px solid #e7cdb6; font: 1em Verdana, Arial, Helvetica, sans-serif; }
  form textarea { overflow: auto; }
  form ol { list-style: none; }
  html body #limites #conteudo form fieldset label input { width: auto; padding: 0; border: 0; }
  form ol li label { text-align: right; }
  form button { border: 0; cursor: pointer; }
  form button span { display: block; text-indent: -9999em; cursor: pointer; }
    
  /* ------- TOPO ------- */
  #topo { height: 150px; margin-bottom: 38px; color: #fff; }
  #topo h2 { position: relative; top: 12px; left: 117px; float: left; width: 291px; height: 160px; }
  #topo h2 a { display: block; height: 100%; text-indent: -9999em; overflow: hidden; }
  #topo p { clear: left; padding: 56px 0 0 245px; }
  #topo p strong { color: #330000; }
  #topo p a { color: #fff; }
  #topo form { float: right; margin: -22px 0 0 626px; }
  html > body #topo form { margin: -22px 85px 0 0; }
  #topo form input { width: 185px; height: 22px; margin-right: 5px; padding: 6px 12px 0; border: 0; background: url(topo_input_bg.png) no-repeat; color: #7d5256; }
  #topo form button { width: 65px; height: 27px; background: url(topo_form_botao.jpg) no-repeat; border: 0; text-indent: -9999em; }
  
  /* ------- COLUNA 1 ------- */
  #coluna1 { float: left; }
  
  #coluna1 .post { margin-bottom: 40px; }
    
  #coluna1 .post .info { margin-bottom: 10px; }
  
  #coluna1 .post .data { float: left; width: 46px; height: 33px; margin: 0 9px 0 0; padding-top: 12px; background: url(post_data_bg.jpg) no-repeat; font-size: .9em; font-weight: bold; line-height: 1em; text-align: center; text-transform: capitalize; color: #636363; }
  #coluna1 .post .data strong { display: block; margin-bottom: 3px; font-size: 1.6em; }
  
  #coluna1 .post .info h2 { font-size: 1em; }
  #coluna1 .post .info h3 { font-size: 2em; }
  #coluna1 .post .info h2 a, #coluna1 .post .info h3 a { text-decoration: none; }
  #coluna1 .post .info h2 a { color: #ff4c75; }
  #coluna1 .post .info h2 a:hover, #coluna1 .post .info h3 a:hover { text-decoration: underline; }
  
  #coluna1 .post p { margin-bottom: 1em; }
  #coluna1 .post img { padding: 8px; border: 1px solid #ebd3be; background: #fff; }
  #coluna1 .post ul, #coluna1 .post ol { margin: 0 0 2em 2em; line-height: 1.5em; }
  
  #coluna1 .post .autor { padding-bottom: 17px; background: url(post_conectado_bg.gif) bottom repeat-x; font-size: .8em; }
  #coluna1 .post .autor strong { color: #aa501f; }
  
  #coluna1 .post .tags { margin-bottom: 14px; font-size: .75em; }
  #coluna1 .post .tags a { text-decoration: none; }
  #coluna1 .post .tags a:hover { text-decoration: underline; }
  
  #coluna1 .post ul.opcoes { margin: 0 0 15px 0; padding-bottom: 10px; background: url(post_conectado_bg.gif) bottom repeat-x; list-style: none; }
  #coluna1 .post ul.opcoes li { float: left; margin-right: 8px; }
  #coluna1 .post ul.opcoes li a { float: left; line-height: 22px; }
  #coluna1 .post ul.opcoes li a strong { display: block; }
  
  #coluna1 .post .conectado { height: 49px; font-size: .8em; }
  #coluna1 .post .conectado p { margin-bottom: 5px; }
  #coluna1 .post .conectado ul { margin-left: 0; list-style: none; }
  #coluna1 .post .conectado ul li { float: left; margin-right: 14px; }
  #coluna1 .post .conectado ul li a { display: block; background: url(conectado_icones.png) no-repeat; text-indent: -9999em; overflow: hidden; }
  #coluna1 .post .conectado ul li.rss a { width: 20px; height: 20px; background-position: 0 -1px; }
  #coluna1 .post .conectado ul li.digg a { width: 22px; height: 20px; background-position: -36px -1px; }
  #coluna1 .post .conectado ul li.feedmarker a { width: 28px; height: 20px; background-position: -74px -1px; }
  #coluna1 .post .conectado ul li.feedmelinks a { width: 20px; height: 20px; background-position: -118px -1px; }
  #coluna1 .post .conectado ul li.furl a { width: 21px; height: 20px; background-position: -157px -1px; }
  #coluna1 .post .conectado ul li.givealink a { width: 21px; height: 20px; background-position: -196px -1px; }
  #coluna1 .post .conectado ul li.delicious a { width: 20px; height: 20px; background-position: -239px -1px; }

  .indique { position: fixed; top: 50%; left: 50%; display: none; width: 530px; margin: -195px 0 0 -265px;  _margin-top:-220px; padding: 22px 18px; border: 1px solid #78535a; background: #fff; z-index: 1000; zoom: 1; }
  .indique.ativo { display: block; }
  .indique h4 { font-size: 2em; }
  .indique h5 { font-size: 1em; color: #ff4c75; }
  .indique form { margin-top: 10px; padding-top: 27px; background: url(pontilhado.gif) repeat-x; }
  .indique form ol li label { float: left; width: 152px; margin-right: 5px; padding-top: 2px; }
  .indique form ol li input, .indique form ol li textarea { width: 244px; margin-bottom: 10px; }
  .indique form ol li textarea { height: 75px; }
  .indique form ol li p { font-size: .75em; }
  .indique form button { width: 80px; height: 25px; margin-left: 157px; background: url(coluna1_post_indique_botao.jpg) no-repeat; }
  .indique a.cancelar { float: right; padding-left: 11px; background: url(coluna1_post_indique_cancelar_bg.jpg) 0 4px no-repeat; font-weight: bold; }
  .indique a.cancelar:hover { color: #78535a; }

  /* ------- COLUNA 2 ------- */
  #coluna2 { float: right; }
  
  #coluna2 #informacoes { float: left; width: 181px; }
  #coluna2 #informacoes dl dt { padding-left: 11px; background: url(coluna2_informacoes_titulos_bg.jpg) no-repeat; font-weight: bold; font-size: 1.16em; line-height: 26px; color: #3587b5; zoom: 1; }
  #coluna2 #informacoes dl dt.categorias { background-position: 0 -27px; color: #ff4c75; }
  #coluna2 #informacoes dl dt.arquivo { background-position: 0 -54px; color: #647026; }
  #coluna2 #informacoes dl dt.tags { background-position: 0 -81px; color: #78535a; }
  #coluna2 #informacoes dl dd { margin: 10px 0 30px; }
  #coluna2 #informacoes dl dd ul { list-style: none; }
  #coluna2 #informacoes dl dd ul li { margin-left: 8px; padding: 4px 0 7px; background: url(pontilhado.gif) bottom repeat-x; zoom: 1; }
  #coluna2 #informacoes dl dd ul li a { position: relative; left: -5px; display: block; padding-left: 8px; background: url(coluna2_informacoes_bullet.gif) 0 6px no-repeat; text-decoration: none; }
  #coluna2 #informacoes dl dd ul li a:hover { text-decoration: underline; }
  
  /* ------- RODAPE ------- */
  #rodape { /*height: 154px;*/ margin-top: 2em; padding-top: 20px; background: url(rodape_bg.jpg) center 0 no-repeat; font-size: .55em; }
  #rodape p strong { font-size: 1.33em; }
  
/*
  --------------
    PAGINAS ESPECIFICAS
  --------------
*/
  
  /* ------- PAGINA INICIAL ------- */
    
    /* ------- CONTEUDO ------- */
    #home #conteudo { padding-top: 230px; /*background: url(conteudo_bg.jpg) right 0 no-repeat;*/ }
  
  
    /* ------- COLUNA 1 ------- */
    #home #coluna1, #home #coluna2 #informacoes, #home #coluna2 #meta { position: relative; margin-top: -261px; }
    #home #coluna1 { position: static; width: 485px; }
    #home #coluna1 #banner { margin-bottom: 18px; }
    #home #coluna1 #banner img { padding: 2px; border: 1px solid #e4ceb7; background: #fff; }
    
    /* ------- COLUNA 2 ------- */
    #home #coluna2 { width: 485px; min-height: 344px; /*background: url(coluna2_home_bg.png) right bottom no-repeat;*/ }
    * html #home #coluna2 { height: 344px; }
    #home #coluna2 #meta { margin-right: 60px; margin-left: 214px; text-align:center; }
    
    #home #coluna2 #meta h1 { width: 207px; height: 70px; margin-bottom: 7px; background: url(coluna2_meta_titulo_bg.png) no-repeat; text-indent: -9999em; }
    #home #coluna2 #meta p { margin-bottom: 1em; }
    
    #home #coluna2 #meta .blog, #home #coluna2 #meta #login, #home #coluna2 #meta .cartao { margin-bottom: 19px; padding-bottom: 19px; background: url(coluna2_meta_borda.jpg) bottom no-repeat; }
    #home #coluna2 #meta .blog { color: #78535a; }
    #home #coluna2 #meta .blog p { margin-bottom: 1em; }
    #home #coluna2 #meta .blog a.botao.participar { display: block; width: 109px; height: 25px; margin: 0 auto; padding: 0; background: url(coluna2_meta_botao_bg.jpg) no-repeat; text-indent: -9999em; overflow: hidden; }
    #home #coluna2 #meta .blog a.botao.participar:hover { background-position: bottom; }
    
    #home #coluna2 #meta #login { font-size: .75em; }
    #home #coluna2 #meta #login form { margin-bottom: 10px; }
    #home #coluna2 #meta #login form legend span { display: block; width: 115px; height: 15px; margin: 5px 0; background: url(coluna2_meta_form_titulo_bg.png) no-repeat; text-indent: -9999em; }
    #home #coluna2 #meta #login form ol { margin-top: 10px; list-style: none; }
    #home #coluna2 #meta #login form ol li { margin-bottom: 5px; font-size: 1.2em; }
    #home #coluna2 #meta #login form ol li label { float: left; clear: both; width: 75px; margin-right: 5px; padding-top: 3px; font-weight: bold; color: #78535a; }
    #home #coluna2 #meta #login form ol li input { width: 104px; }
    #home #coluna2 #meta #login form button { width: 55px; height: 19px; margin-left: 80px; border: 0; background: url(coluna2_meta_form_botao_bg.png) no-repeat; }
    #home #coluna2 #meta #login ul { list-style: none; }
    #home #coluna2 #meta #login ul li a { padding-left: 8px; background: url(coluna2_informacoes_bullet.gif) 0 6px no-repeat; }
    
    #home #coluna2 #meta a.botao.escrever { display: block; margin: 1em auto .5em; width: 149px; height: 25px; background: url(coluna2_meta_escrever_botao.jpg) no-repeat; text-indent: -9999em; overflow: hidden; }
    #home #coluna2 #meta a.botao.escrever:hover { background-position: 0 bottom; }
    
    #home #coluna2 #meta .cartao h4 { width: 199px; height: 298px; margin: 0 auto 13px; background: url(coluna2_meta_cartao_titulo_bg.jpg) no-repeat; text-indent: -9999em; }
    #home #coluna2 #meta .cartao p { position: relative; width: 185px; height: 84px; margin: 0 auto; background: url(coluna2_meta_cartao_texto_bg.jpg) no-repeat; text-indent: -9999em; }
    #home #coluna2 #meta .cartao p a { position: absolute; right: 20px; bottom: 10px; display: block; width: 76px; height: 17px; overflow: hidden; }
    
  /* ------- INTERNAS ------- */
  
    /* ------- COLUNA 1 ------- */
    .interna #coluna1 { width: 720px; }
    .interna #coluna1 h1 { font-size: 2em; color: #78535a; }
    .interna #coluna1 h3 { font-size: 1em; color: #ff4c75; }
    
      /* ------- SINGLE ------- */
        
        /* ------- COLUNA 1 ------- */
        #single #coluna1 .post .info h1 { font-size: 2em; }
        #single #coluna1 .post .info h1 a { text-decoration: none; }
        #single #coluna1 .post .info h1 a:hover { text-decoration: underline; }
        
        #single #coluna1 form { margin-bottom: 35px; }
        #single #coluna1 form fieldset { padding-bottom: 35px; background: url(pontilhado.gif) bottom repeat-x; }
        #single #coluna1 form legend { margin-left: -8px; font-size: 1.5em; font-weight: bold; color: #78535a; }
        #single #coluna1 form p { margin-top: 1em; font-size: .9em; color: #ff4c75; }
        #single #coluna1 form ol { margin-top: 35px; }
        #single #coluna1 form ol li label { float: left; width: 130px; margin-right: 5px; padding-top: 2px; }
        #single #coluna1 form ol li input, #single #coluna1 form ol li textarea { margin-bottom: 10px; }
        #single #coluna1 form ol li input { width: 232px; }
        #single #coluna1 form ol li textarea { width: 471px; height: 176px; }
        #single #coluna1 form button { width: 128px; height: 25px; margin-left: 135px; background: url(single_coluna1_form_botao.jpg) no-repeat; }
        
        #single #coluna1 .listagem h4 { margin-bottom: 15px; font-size: 1.5em; }
        #single #coluna1 .listagem ol { list-style: none; }
        #single #coluna1 .listagem ol li { margin-bottom: 3.5em; }
        
      /* ------- CADASTRO ------- */
      
        /* ------- COLUNA 1 ------- */
        #cadastro #coluna1 form { margin-top: 10px; padding-top: 15px; background: url(pontilhado.gif) repeat-x; }
        #cadastro #coluna1 form ol { margin-bottom: 2em; }
        #cadastro #coluna1 form ol li { clear: both; }
        #cadastro #coluna1 form ol li.check { margin-bottom: 5px; }
        #cadastro #coluna1 form ol li label { float: left; width: 150px; margin: 0 5px 10px 0; padding-top: 2px; }
        #cadastro #coluna1 form ol li.check label { float: none; margin-left: 155px; text-align: left; }
        #cadastro #coluna1 form ol li input { width: 246px; }
        #cadastro #coluna1 form ol li input#senha, #cadastro #coluna1 form ol li input#confirmacao { width: 136px; }
        #cadastro #coluna1 form ol li em { font-size: .8em; }
        #cadastro #coluna1 form button { width: 229px; height: 25px; margin-left: 155px; background: url(cadastro_form_botao.jpg) no-repeat; }
      
      /* ------- ESCREVA ------- */
      
        /* ------- COLUNA 1 ------- */
        #escreva #coluna1 form { margin-top: 10px; padding-top: 15px; background: url(pontilhado.gif) repeat-x; }
        #escreva #coluna1 form ol { margin-bottom: 2em; }
        #escreva #coluna1 form ol li { clear: both; }
        #escreva #coluna1 form ol li.extra { margin-left: 46px; }
        #escreva #coluna1 form ol li.especial { margin-left: 20px; }
        #escreva #coluna1 form ol li label { float: left; width: 41px; margin: 0 5px 10px 0; padding-top: 2px; }
        #escreva #coluna1 form ol li.extra label { width: 123px; }
        #escreva #coluna1 form ol li input { width: 474px; }
        #escreva #coluna1 form ol li.extra input { width: 231px; }
        #escreva #coluna1 form ol li #texto_post_parent { display: block; margin: 0 0 10px 47px; }
        #escreva #coluna1 form ol li em { font-size: .8em; }
        #escreva #coluna1 form ol li.upload em { display: block; width: 300px; margin: 5px 0 0 130px; }
        #escreva #coluna1 form button { width: 109px; height: 25px; margin-left: 175px; background: url(escreva_form_botao.jpg) no-repeat; }