.comment {
display: inline-block;
border: 1px solid #ddd;
margin: 1em 0 0.5em;
clear: both;
width: 100%;
text-align: left;
border-radius: 8px 8px 0 0;
}
.comment.locked {
border-radius: 8px;
}
.comment .details {
background-color: #eee;
border-bottom: 1px solid #ddd;
text-align: left;
border-radius: 8px 8px 0 0;
}
.comment.locked .details {
border-bottom: none;
border-radius: 8px;
}
.comment .details div,
.comment .cfooter div {
display: inline-block;
}
.comment .details .index {
float: right;
border-left: 1px solid #ddd;
padding-left: 8px;
margin: 0px 8px;
vertical-align: middle;
line-height: 28px;
}
.comment .details .title {
padding: 4px 8px;
}
.comment .details .title div {
margin-left: 50px;
}
.comment .details .userphoto {
width: 42px;
height: 42px;
position: absolute;
margin-top: -12px;
border: 1px solid #aaa;
border-radius: 6px;
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.2);
}
.comment .details .flag,
.comment .details .thumb,
.comment .details .admin,
.comment .details .edit {
float: right;
vertical-align: middle;
line-height: 28px;
margin: 5px 0px 8px 8px;
background-repeat: no-repeat;
background-size: 20px 60px;
width: 20px;
height: 20px;
background-position: center -40px;
}
.comment .details .flag {
background-image: url("../images/icons/flags.svg");
}
.comment .details .thumb {
background-image: url("../images/icons/thumbs.svg");
}
.comment .details .edit {
background-image: url("../images/icons/edit.svg");
}
.comment .details .admin {
background-image: url("../images/icons/admin.svg");
}
.comment .details a.flag {
cursor: pointer;
}
.comment .details .flag:hover,
.comment .details .flag.flagged,
.comment .details .thumb:hover,
.comment .details .thumb.flagged,
.comment .details .admin:hover,
.comment .details .edit:hover
{
background-position: center 0;
}
.comment .details .flagcount {
float: right;
}
.comment .body {
padding: 1%;
min-height: 4em;
}
.comment .text {
padding-bottom: 5px;
}
.comment .title input {
width: 890px;
}
.comment .cfooter .buttonbar {
width: 100%;
height: auto;
padding: 0px;
}
.comment .cfooter .buttonbar input,
.comment .cfooter .buttonbar .button,
.comments .button {
float: right;
margin: 4px 8px;
vertical-align: middle;
padding: 0 6px;
}
.comment .cfooter .buttonbar button {
float: left;
margin: 4px 8px;
vertical-align: middle;
}
.comment .cfooter .buttonbar #cochint {
font-size: smaller;
vertical-align: middle;
float: none;
padding: 4px 8px;
}
.comment .cfooter .buttonbar #cochint a,
.comment .cfooter .buttonbar #cochint a:hover {
display: inline;
border: none;
padding: 0;
box-shadow: none;
float: none;
margin: 0;
color: #d55500;
background-color: inherit;
font-size: inherit;
}
.comment .cfooter .buttonbar #cochint a:hover {
text-decoration: underline;
}
.comment #id_comment,
.comment .body #message {
width: 100%;
box-sizing: border-box;
}
.comment .cfooter {
background-color: #F8F8F8;
color: #666;
border-top: 1px solid #ddd;
text-align: left;
}
.comment .cfooter label.forcheckbox {
float: left;
margin: 0 6px;
}
.comment #id_honeypot {
display: none;
}
.comment .body.input {
border: 2px inset rgba(180, 180, 180, 0.5);
margin: 1px;
}
.comment .body.input textarea {
background-color: white;
border: 0px none;
}