.chatMessageBlock {
width: 92%;
margin: 0px auto 0px;
padding: 3px 3px;
}
.chatMessageHeader {
font-size: 14px;
padding: 2px;
}
.chatMessageAuthorBlock {
font-weight: bold;
float:left;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.chatMessageInfoBlock {
color: rgb(100,100,100);
float: right;
}
.messageChangeDeleteButtons {
float: right;
padding: 3px 0px 0px;
z-index:10;
}
.messageBottomButtons {
font-size: 75%;
margin-top: 5px;
}
.replyButtons {
color: gray;
}
.replyButtons a {
color: gray;
}
.replyButtons a:hover {
color: rgb(10,10,10);
}
.datetime {
font-weight: normal;
color: gray;
}
.chatMessageMbl {
float: left;
width: 100%;
overflow: hidden;
margin-right: -25px;
}
.chatMessageTextBlock {
padding: 5px 3px 3px;
word-wrap: break-word;
}
.voteButton {
display: inline-block;
width: 16px;
height: 16px;
background-color: transparent;
vertical-align: -3px;
}
.voteButton:hover {
/*font-weight: bold;*/
}
.voteButton:active {
}
.voteUp {
/*background-image: url('/icons/round-rating-thumbs-16.png');
background-position: top left;*/
}
.voteDown {
/*background-image: url('/icons/round-rating-thumbs-16.png');
background-position: top right;*/
}
.userPhotoBlock {
float: left;
width: 50px;
max-width: 50px;
height: 50px;
max-height: 50px;
margin: 1px;
border: 1px solid rgb(240,240,240);
border-radius: 3px;
text-align: center;
}
.userPhoto {
width: 50px;
max-height: 50px;
display: block;
border-radius: 3px;
}
.messageBlock {
overflow: hidden;
padding-left: 6px;
}
.banButton {
font-family: FontAwesome;
display:inline-block;
cursor: pointer;
color: gray;
font-weight: normal;
}
.banButton:hover {
color: rgb(237,28,36);
}
.banButton:before {
content: "\f05e";
}
.deleteButton {
font-family: FontAwesome;
display:inline-block;
height: 16px;
width: 16px;
cursor: pointer;
color: gray;
opacity: 0.5;
}
.deleteButton:before {
content: "\f1f8";
}
.deleteButton:hover {
color: rgb(237,28,36);
opacity: 1;
}
.changeButton {
font-family: FontAwesome;
display:inline-block;
height: 16px;
width: 16px;
cursor: pointer;
color: gray;
opacity: 0.5;
}
.changeButton:before {
content: "\f040";
}
.changeButton:hover {
color: orange;
opacity: 1;
}
.likeButton {
opacity: 0.5;
font-size: 16px;
font-family: FontAwesome;
display:inline-block;
color: gray;
cursor: pointer;
}
.likeButton:hover, .likeButton.active {
color: green
}
.likeButton:before {
content: "\f087";
}
.dislikeButton {
opacity: 0.5;
font-size: 16px;
font-family: FontAwesome;
display:inline-block;
color: gray;
cursor: pointer;
}
.dislikeButton:hover, .dislikeButton.active {
color: red;
}
.dislikeButton:before {
content: "\f088";
}<div class="chatMessageBlock" {elem:messageBlock}>
<div class="userPhotoBlock">
<img src="/icons/anon.gif" class="userPhoto" {elem:userPhoto}>
</div>
<div class="messageBlock">
<div class="chatMessageMbl"><div class="chatMessageHeader">
<div class="chatMessageAuthorBlock">
{text:userName} <span {elem:banUserButton} title="{text:banUser}" class="banButton"></span>
</div>
<span class="datetime"> • {text:messageDatetime}</span>
<div class="clear"></div>
</div>
<div class="chatMessageTextBlock">
{text:messageText}
{elem:attachments}
<div class="messageBottomButtons">
<span {elem:messageRating}>{text:ratingOnLoad}</span>
<span class="voteButton likeButton" {elem:voteUp}></span>
<span class="voteButton dislikeButton" {elem:voteDown}></span>
<span class="replyButtons">
<span {elem:messageReplyTo}> • {text:replyToM} <a href="javascript:void(0)" {elem:replyToLink}>{text:mess}</a> • </span>
<a href="javascript:void(0)" {elem:replyButton}>{text:reply}</a>
</span>
</div>
</div></div>
<div class="messageChangeDeleteButtons">
<span {elem:deleteButton} title="{text:delete}" class="deleteButton"></span>
<br/>
<span {elem:changeButton} title="{text:change}" class="changeButton"></span>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div><script type="text/javascript" src="https://vk.com/js/api/openapi.js?167"></script>
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 3, width: "280"}, 164088563);
</script><iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftvoipervimillion%2F%3Fmodal%3Dadmin_todo_tour&tabs=timeline&width=280&height=300&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=849349472232300" width="280" height="300" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>