<style type="text/css">
/******************************************************************
  Cтиль:"таблица с вкладками"
******************************************************************/

/*Правки для Цвета фона и бордюров таблицы*/
.s-tabs>.stab,.s-tabs>span{
background:#F7F6D2;
border-color: #7E7E7E!important;
}
.s-tabs{
width:500px;  /*ширина таблицы*/
display:block;
}
.s-tabs>.stab{
height:200px; /*высота вкладки*/
}
/* Стиль "Ушка" вкладок */
.s-tabs>span{
position:relative;
z-index:100;
color:#626436;
cursor:pointer;
border: 1px solid;
display:inline-block;
padding:4px;
height: 17px;
margin:0;
margin-right:-1px;
text-align:left;
padding-right:6px;
text-shadow: 1px 1px 2px rgba(0,0,0,.4);
font: italic normal 400 13px/16.5px "Comic Sans Ms";
}
/* Активное "Ушко" */
.s-tabs>span.selected{
color:#fff;
background:#000;
border-bottom-color:transparent!important;
}
/* Стиль вкладки(LI)*/
.s-tabs>.stab{
width:100%;
margin:0;
display:none;
overflow-y:auto;
overflow-x:hidden; 
text-align:center;
vertical-align:middle;
border:  4px solid;
padding:4px 12px!important;
}
</style>

<script type="text/javascript">
$('.s-tabs').each(function(){
   $(this).children('span:first').addClass('selected');
   $(this).children('.stab').eq(0).show();   
});
$('.s-tabs>span').live('click', function(){
     var a = $(this).parent('.s-tabs');
     var arr = a.children('span');
     var index = arr.index(this);
     arr.removeClass('selected');
     $(this).addClass('selected');
     a.children('.stab').hide();   
     a.children('.stab').eq(index).show();   
});
</script>

<style type="text/css">
.pa-avatar>div{
  position:relative;
  z-index:20;
  display:inline-block;
  margin: auto;
  padding:0;
}
.pa-avatar>div>img{
  position:absolute;
  top:0;left:0;
  z-index:-2;
}
.pa-avatar>div>span{
margin:0;
padding:3px 12px;
display:block;
border:10px rgba(121,103,21,0.3); /*Цвет верхнего бордера*/
border-style:solid none none none;
background:rgba(229,222,179,0.8); /*Цвет перекрывающего фона*/
opacity:0;
transition: opacity 0.6s;
}
.pa-avatar:hover>div>span{
opacity:1.0;
}
.pa-avatar>div>span a{
color:#0817F2!important; /*Цвет ccылок*/
}
.pa-avatar>div>span a:hover{
color:#FF0000!important; /*Цвет ccылок при наведении*/
text-decoration:underline!important;
}
</style>
<script type="text/javascript">
$(function(){$('.pa-avatar').each(function(){
  var that =$(this).parents('.post-author').find('.ava-wrp::first'),
  a = $(this).find('img:first');
  if(a.length&&that.length){
    b = that.parents('li[class^="pa-fld"]'),
    h = a.height(),w=a.width(),
    c = a.wrap('<div style="width:'+w+'px;height:'+h+'px;"></div>').parent();
    c.prepend('<span style="max-width:100%;height:'+(h-3*2-10)+'px;">'+b.remove().html()+'</span>');
  } 
});});
</script>

Красным - идентичные цифры ширины верхнего бордюра;

В дополнительном меню,(треугольник справо в форме ответа) появится кнопка: http://sf.uploads.ru/1y6Kx.gif
Cтиль устанавливается на ближайший указанный тег (перед BB-кодом), либо родительский элемент с данным названием тега html. Допустимые названия тегов:

a, b, p, img, div, span, strong, iframe, table, tbody, tr, td, dl, dt, dd, br

Пример:Записываем стилевое правило для нужного имени тега, выделяем курсором,
img{float:left;width:200px;border:red solid 3px;padding:5px;border-radius:50%}
и жмём вышеуказанную кнопку.

Важно: Стилевой бб-тег должен стоять либо  в той же строке сразу же следом за элементом, на который ставится стиль, либо внутри него и в самом начале элемента(к примеру для установки фона картинкой на ячейку таблицы)

ЗЫ: При установки фонов картинкой, обязательно обрамляйте ссылку на картинку кавычками, иначе ссылка превращается в ссылку, а не входит в структуру BB-тега.

ЗЫ2:Для Админа-модера в сообщении появляется иконка возле номера поста, указывающая, что был использован стиль юзера в сообщении (на случай криворукости пользователя)