/*
    Document   : onm-mockup article page
    Created on : Feb 18, 2010, 11:13:09 AM
    Author     : Francisco Diéguez fran.dieguez@mabishu.com
    Description:
        CSS to comments part for newspaper mockup page
*/


/***********************************************************
    General styles
************************************************************/

div.article-comments{
	margin-top:10px;
}

/***********************************************************
    Title
************************************************************/

div.article-comments h3{
	font-family:Arial;
	font-size:1.5em;
	font-weight:bold;
	margin:0;
	padding:0;
	background: url(../../images/sections/back-comments.png) bottom right no-repeat;
	width:100%;
	height:40px;
	vertical-align:bottom;
}
div.article-comments h3 span{padding-top:20px; display:block; }

div.article-comments div.header-comments{
    border:none;
    background:url(../../images/horiz-separator.png) bottom right repeat-x;
	padding-bottom:1px
}
div.article-comments hr.new-separator{
	margin-bottom:0
}

/***********************************************************
    Utilities
************************************************************/

div.article-comments div.num-pages{
	color:#333;
}

div.pagination{
	margin-top:10px;
	text-align:right;
}

div.pagination ul, div.pagination ul li{
	margin:0;
	padding:0;
}
div.pagination a{
	font-family: Verdana !important;
}
div.pagination ul{
	margin-bottom:10px;
        float:right;
}
div.pagination ul li{
	color:#829bb4;
	padding:4px 7px;
	display:inline;
	background:#e6ebf1;
	border:2px solid #d7dfe7;
	margin-left: 0.4em;
}
div.pagination ul li.active{ color:#d45500; background:#da9046; border:2px solid #d45500}
div.pagination ul li.next{ color:#829bb4; background:#d9e2eb; border:2px solid #829bb4}

/***********************************************************
    One comment
************************************************************/
div.comment-wrapper{
	margin:5px 0;
	color:#747678;
        position:relative;
}
div.comment-content{
	background:#f3f3f3;
	min-height:60px;
	position:relative; /* I do it for allow position:absolute over content-number*/
        padding-top:15px;
}
div.comment-content:hover{
	color:#333;
}
div.comment-number{
	color:#747678;
	position:absolute;
	top:0px;
	left:10px;
	font-family:Georgia;
	font-size:3.5em;
	font-style:italic;
	margin:0;
	padding:0;
        z-index:9999;
}

div.comment-body{
	margin:15px 0;
}



div.comment-utilities{
	color:#747678;
}

.vote-up, .vote-down{
	opacity:0.4;filter:alpha(opacity=40);
	vertical-align:middle
}
.vote-up:hover, .vote-down:hover{
	opacity:1;filter:alpha(opacity=100)
}
.vote-up, .vote-down{
	margin:0 4px;
}

.green{
	color:#009e0f;
}
.red{
	color:#cd202c;
}
/***********************************************************
    Comment authoring
************************************************************/
div.comment-authoring{
	text-align:right;
}
span.comment-author{
	color:#000;
}

/***********************************************************
    Form comments
************************************************************/

div.form-comments{
    background:#f9f9f9 url(../../images/utilities/back-form-comments.png) bottom right no-repeat;
    margin-top:20px;
    padding:10px 0 30px 0;
    border-radius: 10px;
}

div.form-comments-content h4{
    font-family: Georgia;
    color:#838383;
    font-size:1.7em;
}

div.auth-selector p{
    color:Black;
    font-size: 13px;
}
div.form-comments input, div.form-comments textarea{
    padding:1px
}
div.form-comments label{ color:#6a6a6a; font-size:1em; font-weight: normal; }
div.form-comments .submit-button, div.form-comments a.show-commment-form{
    padding:6px 10px;
    background:#d2d2d2;
    border:1px solid #f9f9f9;
    color:Black;
    font-family: Arial;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-top: 5px;
    cursor: pointer;
}
div.form-comments .information{ margin-top:30px; color:#6a6a6a; font-size:.95em}
div.form-comments .facebook-login{margin:0; padding:0;}
div.form-comments .facebook-login img{ vertical-align: middle;}
div.form-comments .form { display:none;}
div.form-comments div.form-comments-content{ margin:0 auto; width:90%}
div.form-comments div.static-form a{ font-family:Verdana; font-size:1em; color:#6a6a6a; }