/* CSS Taken from launchpad.net

  - Copyright 2009 Canonical Ltd.
              2014 Martin Owens.

  License: AGPLv3 or later

*/

/* CSS for both comment display and comment form */

.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;
}

/* CSS for comment form */

.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;
}