Layout SAO

www

• Com hover no nome do comentador

• Com hover no avatar

#comments a {
  color: $(post.title.text.color);
}
.comments {clear:both;  margin-top:10px; margin-bottom:0; line-height:18px; font-family: arial; font-size:12px; }
.comments .comments-content {margin-bottom:16px; font-weight:normal; text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a {
/*--- botão responder --- */display: inline-block;
margin: 0 0 10px 10px;
padding: 0 15px;
color: #B4467E !important;
text-align: center;
text-decoration: none;
background: #DEBACC;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #CD98A2) );
background: -moz-linear-gradient( center top, white 20%, #CD98A2 100% );
border: 1px solid #B38991;
border-radius: 5px;
height: 26px;
line-height: 28px;
font-weight: normal;
cursor: pointer;
-webkit-transition-duration: .60s;
}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover {
/*--- botão responder em hover --- */text-decoration: none;
border-radius: 2px 7px 2px 7px;
background: #D4BBA1;
border: 1px solid #B49E88;
-webkit-transition-duration: .60s;
}
.comments .comments-content .comment-thread ol{ list-style-type: none; padding: 0; text-align: none}
.comments .comments-content .inline-thread{padding: 0}
.comments .comments-content .comment-thread{margin: 8px 0}
.comments .comments-content .comment-thread:empty{display: none}
.comment-replies{margin-top: 1em; margin-left: 40px;}
.comments .comments-content .comment{margin-bottom: 0; padding-bottom: 0}
.comments .comments-content .comment:first-child{padding-top: 16px}
.comments .comments-content .comment:last-child{border-bottom: 0; padding-bottom: 0}
.comments .comments-content .comment-body{position: relative;}
.comments .comments-content .user {
color: white !important;
  text-shadow: 0px 1px 1px #D2691E;
  font-family: Lobster !important;
  font-size: 20px;
  text-decoration: none;
  background: #BC8F8F;
  padding: 5px 12px;
  margin-left: -12px;
  border-bottom-right-radius: 10px;
  -webkit-transition-duration: .60s;
}
.comments .comments-content .user a {
color: white !important;
  text-shadow: 0px 1px 1px #D2691E;
  font-family: Lobster !important;
  font-size: 20px;
  text-decoration: none;
  background: #BC8F8F;
  padding: 5px 12px;
  margin-left: -18px;
  border-bottom-right-radius: 10px;
  -webkit-transition-duration: .60s;
}
.comments .comments-content .user a:hover, .comments .comments-content .user:hover {
background: #DEB887;
padding: 5px 30px;
margin-left: -18px;
border-bottom-right-radius: 20px;
-webkit-transition-duration: .60s;
}
.avatar-image-container {
   margin: 0.2em 0pt 0pt;
}

#comments h4 {
  text-align: center;
  display: block;
  font-weight: bold;
}
.comments .comments-content .icon.blog-author {
display: none;
}

.comments .comments-content .datetime a {
font-size: 10px;
font-family: silkscreen;
text-decoration: none; color:#666;
text-align: right;
}
.comment-content{margin:0 0 8px; padding: 0 5px;
}
.comments .comment-block {
margin-left: 65px;
position: relative;
background: #fff; /* -- cor de fundo do comentário -- */
border: 2px solid #D6B694; /* --- cor da borda do comentário ---*/
border-radius: 20px 20px 20px 1px;
-webkit-transition-duration: .60s;
}
.comments .comment-block:hover {
border: 2px solid #BC8F8F;
border-radius: 1px 20px 1px 20px;
-webkit-transition-duration: .60s;
}
.comment-header { /*--- linha onde fica o nome do autor do comentário --- */
background-color:#E0CFBD;
font-size:18px;
  padding: 5px 12px;
  margin-left: -12px;
border-top-right-radius: 20px;
  border-bottom-right-radius: 10px;
border-bottom: 1px dashed #D6B694;
padding: 5px;
-webkit-transition-duration: .60s;
}
.comment-header:hover {
border-radius: 20px;
border-bottom: 2px solid #BC8F8F;
-webkit-transition-duration: .60s;
}

.comment-header a{
color: $(link.color); /*--- cor do link nome do autor do comentario --- */
}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{
display:inline-block;
height:6px;
width:7px;
overflow:visible;
margin:0.3em;
padding-right:4px;
}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
div.avatar-image-container {
   position: absolute !important;
   min-width: 60px;
   min-height: 60px;
   border: 1px solid #BC8F8F; /*cor da borda da imagem*/
   border-radius: 60px 1px 50px 60px;
   padding: 3px !important;
   box-shadow: 0pt 0pt 3px #FF4500;
   margin-left: -10px !important;
   margin-top: -12pt !important;
   background: #DEB887; /*Cor do fundo da imagem*/
-webkit-transition-duration: .60s;
}
div.avatar-image-container:hover {
border-radius: 10px;
background: #BC8F8F;
-webkit-transition-duration: .60s;
}
div.avatar-image-container img {
   min-width: 60px;
   min-height: 60px;
   border-radius: 60px 1px 50px 60px;
-webkit-transition-duration: .60s;
}
div.avatar-image-container img:hover {
border-radius: 10px;
-webkit-transition-duration: .60s;
}