/**



Trotes do Chupim

www.trotesdochupim.com.br



CSS por Alexandre Theodoro



	1. Estrutura

	2. Formulário para Comentar

	3. Comentários

	4. Paginação

	5. Menu Direito

	6. Modal jQuery



**/



/* 1. Estrutura

--------------------------------------------------------------------------------------- */

.mural_conteudo { width: 610px; margin-right: 3px; padding: 10px; margin-bottom: 20px; float:left; }

.mural_conteudo .comentario_separa { display:block; margin-top: 15px; margin-bottom: 5px;}

.mural_conteudo .comentario_separa h3 { color: #343434; font: bold 24px Arial, Helvetica, sans-serif; line-height: 1em; letter-spacing: -0.04em; padding: 2px 0; }

.mural_menu { width: 300px; float:left; padding: 10px; background: #f8f8f8; }

.conteudo h2 { color: #191919; font: bold 28px Arial, Helvetica, sans-serif; line-height: 1em; letter-spacing: -0.04em; padding: 2px 0; }

.conteudo h2 em { color: #999; font: bold 27px Arial, Helvetica, sans-serif; font-style:normal; letter-spacing: -0.04em; }

.tag h3 { background: #efefef url(../images/tag.gif) left no-repeat; padding: 2px 0 3px 22px; font-family: "Trebuchet MS", Arial; font-size:18px; color: #000; font-weight:bold; }

.fb { margin-top: 10px; background-color: #fff; }





/* 2. Formulário para Comentar

--------------------------------------------------------------------------------------- */

.comente { margin: 5px 0px 15px 0px; }

.comente p { font: 13px Arial, Helvetica, sans-serif; padding-bottom: 5px; }

.comente p a:link, .comente p a:visited { font: bold 14px Arial, Helvetica, sans-serif; color: #0971d2; text-decoration: none; }

.comente p a:hover { font: bold 14px Arial, Helvetica, sans-serif; color: #0971d2; text-decoration: underline; }

.comente p span { font: 12px Arial, Helvetica, sans-serif; font-style: italic; }

.comente p strong { font: 15px Arial, Helvetica, sans-serif; font-weight: bold; }



.carregando { position:fixed; top:1px; right:0; padding: 7px; background: #fff url(../images/fundo_carregando.jpg) repeat-x; width: 100px; }

.carregando p { text-align: left;}

.carregando p span { text-align: left; font: bold 12px "Lucida Grande", Arial, Helvetica, sans-serif; color: #0971d2; padding-bottom: 10px;}



.erro { background-color:#ffd; border: 1px #FFD700 solid; padding:20px; text-align: center; }

.erro p { color: #000; font: bold 20px Arial, Helvetica, sans-serif; letter-spacing: -0.04em; }





/* 3. Comentários

--------------------------------------------------------------------------------------- */

.comentario { margin: 8px 0px; padding: 8px; display:block; }

.comentario_arrow {	position: absolute;	top: 15px;	left: -20px; }

.comentario_perfil	{ width:70px; margin-right: 2px; float:left; margin-bottom:0; }

.comentario_conteudo { 	position: relative;	padding: 15px 20px 20px 20px; background: #fff;	border: 1px solid #cdcfcf; width: 462px; float: right; margin-bottom: 5px; }

.comentario_conteudo p { font: 12px Verdana, Arial, Helvetica, sans-serif; margin-bottom: 8px; padding-bottom:2px; overflow: hidden;  }

.comentario_conteudo p span { font: 0.9em Verdana, Arial, Helvetica, sans-serif; font-style: normal; color: #aaa; }

.comentario_conteudo p strong { font: 14px Arial, Helvetica, sans-serif; font-weight: bold; }

.comentario_conteudo p a:link, .comentario_conteudo p a:visited { font: 14px Arial, Helvetica, sans-serif; letter-spacing: -0.02em; font-weight: bold; color: #0971d2; text-decoration:none;}

.comentario_conteudo p a:hover { font: 14px Arial, Helvetica, sans-serif; letter-spacing: -0.02em; font-weight: bold; color: #0971d2; text-decoration: underline;}

.comentario_conteudo .caracteres { float: right; width: 200px; margin-bottom: -25px; margin-right: -5px; }

.comentario_conteudo .caracteres p { float:right;}

.comentario_conteudo .caracteres p strong { font: bold 12px Arial, Helvetica, sans-serif; color: #666; }

.comentario_conteudo .caracteres p span { font: 0.8em Verdana, Arial, Helvetica, sans-serif; font-style: normal; color: #777; }

.comentario_conteudo .admin { float: right; width: 18px; }

.comentario_conteudo .admin a:link, 

.comentario_conteudo .admin a:hover, 

.comentario_conteudo .admin a:visited { display:block; width:16px; height:16px; text-decoration:none; outline: none; text-indent: -1000em; background:url(../images/lixo.gif) no-repeat 0px 0px;}



.comentario_form { display:block; height: 1%; overflow:hidden; margin-left: 90px; }

.comentario_form p span { font: 11px Verdana, Arial, Helvetica, sans-serif; color: #888; font-style:normal; padding: 4px 0; }

.comentario_form .email { padding: 5px; background: #fff; border: 1px solid #cdcfcf; width: 512px; }

.comentario_form .mandar {background: #338BF7; color: #fff;padding: 3px 20px;border: 2px #0971d2 solid; font: 12px Verdana, Arial, Helvetica, sans-serif; color: #fff; }

.msgbox  { border: 1px solid #fff; color: #000; font: 12px Verdana, Arial, Helvetica, sans-serif; padding: 6px;	width: 460px; }



.apagar { float:right; margin-top: -5px;  }

.apagar a.apagar_agora { display:block; width:16px; height:16px; text-decoration:none; outline: none; text-indent: -1000em; background: url(../images/lixo_sinal.gif) no-repeat -16px 0px;}

.apagar a.apagar_agora:hover { background:url(../images/lixo_sinal.gif) no-repeat -16px -16px;}









/* 4. Paginação

--------------------------------------------------------------------------------------- */

.paginas { padding-top: 10px; padding-bottom: 10px; margin-left: auto; margin-right: auto; text-align:center; font: 12px Verdana, Arial, Helvetica, sans-serif; margin-bottom: 15px; }

.paginas a { padding: 4px 8px; border: solid 1px #ddd; background: #fff; color: #0971d2; margin: 3px; text-decoration:none; }

.paginas a:hover { font-weight: normal; padding: 4px 8px; border: solid 1px #000; background: #0971d2; color: #FFF; margin: 3px;  text-decoration:none;}

.paginas a.ant:hover { margin-right: 17px; text-decoration:none; }

.paginas a.pro:hover { margin-left: 17px; text-decoration:none; }

.paginas span.ant, .paginas a.ant { margin-right: 17px; }

.paginas span.pro, .paginas a.pro { margin-left: 17px; }

.paginas span.ant, .paginas span.pro { padding: 4px 8px; border: solid 1px #ddd; color: #aaa; background: #fff; }

.paginas .pagina { padding: 2px 6px; background: #fff; color: #0971d2; font-weight: bold; text-decoration: none; }





/* 5. Menu Direito

--------------------------------------------------------------------------------------- */

ul.hover_block { margin-top: 10px;}

ul.hover_block li { list-style:none; background: #fff; padding: 10px; width:260px; position: relative; }

ul.hover_block li a { text-decoration:none; display: block; position: relative; overflow: hidden; height: 150px; width: 248px; padding: 16px; color: #000; font: 1.6em/1.3 Helvetica, Arial, sans-serif; }

ul.hover_block li a strong { text-decoration: none; font:bold 23px Arial; letter-spacing:-0.04em; }

ul.hover_block li a p { text-decoration: none; font: normal 13px Verdana, Arial, Helvetica, sans-serif; color: #333; padding: 2px 0; }

ul.hover_block li img { position: absolute; top: 0; left: 0; border: 0; }





/* 6. Modal jQuery

--------------------------------------------------------------------------------------- */

#modal_content { display: none; position: fixed; left: 50%;	padding: 15px; top:40%;	-webkit-box-shadow: 0px 0px 8px #111; background:#FFF; border: 4px #000 solid; width:280px; margin-left:-150px; text-align:center; }

#modal_content small { font-size:77%; }

#modal_content .modal_close	{ float:right; cursor:pointer; margin-top: -8px; }

.modal_close p { font: bold 18px Arial, Helvetica, sans-serif; }

#modal_content h3{ font-size:116%; }

#modal_overlay { background-color: #000; }

.login1 { font: 12px Arial, Helvetica, sans-serif; color: #000; display:block; width:50px; float:left; padding: 2px; }

.box_login { width: 225px; margin: auto; padding-top: 8px; }

.box_login p { padding: 2px; }

.box_login p span { font: 12px Arial, Helvetica, sans-serif; }

.warn { text-align:left; }



/* IE */

* iframe.overlay {position:absolute; top:0; left:0; z-index:-1; width: expression(this.parentNode.offsetWidth+'px'); height: expression(this.parentNode.offsetHeight+'px'); }

* html #modal_content {

     position: absolute;

     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');

}




.note {
    position:relative;
    padding:1em 1.5em;
    margin-bottom: 20px;
    color:#fff;
    background:#0971d2;
    overflow:hidden;
}

.note:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
    background:#658E15; /* For Opera when also applying a border-radius */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

.note.red {background:#0971d2;}
.note.red:before {border-color:#fff #fff #3B5998 #3B5998; background:#3B5998;}

.note.rounded {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

.note.rounded:before {
    border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
    border-color:#f8f8f8 #f8f8f8 transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */
    -webkit-border-bottom-left-radius:5px;
    -moz-border-radius:0 0 0 5px;
    border-radius:0 0 0 5px;
}

.note p {margin:0; font: bold 16px Arial, Helvetica, sans-serif;}
.note p + p {margin:1.5em 0 0;}