<!--онлайн-оффлайн-->
<script type="text/javascript"> var L0='<img class="imgON_Off" src="';
var L1='" style="cursor:pointer;cursor:hand;width:153;margin-top:3px;" />'; //153 - размер картинки по горизонтали
var ImgON="http://i.imgur.com/L0c7BRv.png";  // Картинка Online;
var ImgOff="http://i.imgur.com/4uGj2j6.png";  // Картинка OffLine;
$("#pun-viewtopic .post .post-author ul").each(function ()   {
$(this).html('<div class=UL>'+$(this).html()+'</div>');
if ($(this).find(".pa-online").html()!=null){$(this).append(L0+ImgON+L1)
    }else $(this).append(L0+ImgOff+L1);
$(this).find(".pa-author,.pa-title,.pa-avatar").insertBefore($(this).find("div.UL"));});
$("div.UL").hide();     //Кому не надо изначального свертывания - строку cиним убираем
$("ul .imgON_Off").click(function () {
$(this).parent("ul").find(".UL").toggle('slow');});
</script>

<!--HTML-->
<style>
#kray {height: 300px; width: 500px; border: 10px solid #fcfcfc; position: relative; margin: auto; background: b6b6b6; }
.reggie {height: 300px; width: 200px; position: absolute; left: 0; top: 0; background: #2f343a; overflow: hidden}
.reggie1 {height: 210px; width: 200px; position: absolute; left: 0; top: 0; background-color: #c0c0c0; background-blend-mode: multiply; background-size: cover; background-repeat: no-repeat}
.reggie2 {height: 86px; width: 196px; position: absolute; bottom: 0; border: 2px solid transparent; text-align: center}
.reggie2 b {font-family: roboto condensed; text-align: center; font-size: 20px; text-transform: uppercase; color: #c1c1c1; letter-spacing: 0px; line-height: 20px}
.reggie2 p {font-family: calibri; text-transform: uppercase; line-height: 10px; color: #c1c1c1; margin-top: -8px; font-size: 8px; line-height: 8px; text-align: justify; padding: 5px; letter-spacing: 1px; }
.ronnie {height: 300px; width: 300px; position: absolute; right: 0; }
.ronnie1 {height: 30px; width: 300px; line-height: 30px; font-family: roboto condensed; text-transform: uppercase; font-weight: 700; background: #2f343a; color: #c0c0c0; text-align: center; font-size: 9px; position: absolute; top: 0}
.ronnie2 {height: 250px; width: 290px; border-color: white; border-style: solid; border-width: 0px 0px 0px 0px; padding-left: 5px; padding-top: 10px; position: absolute; bottom: 0; font-family: calibri; font-size: 11px; line-height: 11px; text-align: justify; overflow: auto; color: 1d1d1d}
.ronnie2::-webkit-scrollbar {width: 2px}
.ronnie2::-webkit-scrollbar-track {background: white}
.ronnie2::-webkit-scrollbar-thumb {background: #cbcfc8}
.ronnie2 b {font-family: roboto condensed; color: #c0c0c0; text-transform: uppercase; font-size: 12px; letter-spacing: -0.2px}
</style>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700',300,300italic,400italic,700italic' rel='stylesheet' type='text/css'>
<div id="kray">
 <div class="reggie">
   <div class="reggie1" style="background-image: url(http://i.imgur.com/wo1b3os.png)"></div></a>
   <div class="reggie2"><b><font style="color: #4e5f73">И</font>мя персонажа</b>
     <p>какая-то цитата про персонажа или левый текст Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit sapien et purus ullamcorper, venenatis malesuada quam rhoncus. Quisque vitae enim in elit lobortis fringilla. Curabitur ultricies at diam in finibus. Donec rhoncus lorem eget sem hendrerit vestibulum. Vivamus egestas et odio gravida rutrum. Nulla ullamcorper libero nec dui rhoncus, quis pellentesque erat rutrum. Aenean tempor nibh et mauris tincidunt, cursus efficitur metus interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec ipsum mauris, tincidunt id tincidunt ac, molestie ut velit.

   </div>
 </div>
 <div class="ronnie">
 <div class="ronnie2">Sed accumsan elit non semper blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent sed commodo elit. Sed malesuada sem ac metus dapibus, quis facilisis nunc ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu lacus non nulla auctor commodo. Nulla in magna sit amet quam molestie rhoncus vel vel ipsum. Vivamus at mi porta, pharetra magna sed, varius elit. Mauris dapibus rhoncus leo vel imperdiet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In turpis magna, egestas ac blandit eget, posuere sed dolor. Sed porta justo ac elit vestibulum elementum. Donec aliquet pharetra metus eget ultrices. Aenean fringilla lectus sapien, sed ullamcorper metus congue ut. In consequat fermentum efficitur. Praesent id diam purus.


</div>
   <div class="ronnie1">кому нужен или как называется акция, или кем персонаж является</div>
 </div>
</div>

<!-- HTML низ -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
    <script>
    var a1 = 3	// 0 - спойлер-аккордеон, 1 - вертикальный спойлер; 3 - обычный спойлер
    var a2 = 0	// 0 - Скрытие первой вкладки; 1 - Показ первой вкладки;
    var a3 = 0     // Резкость Открытия: 0 - Плавно; 1 - Резко;
    var LiArr=new Array(
    //При наличии двух косых => // в начале пункта, - пункт не скрывается.
    //"pa-author",     //Ник-Нейм
    //"pa-avatar",     //Аватар
    //"pa-title",      //статус
    // 1 кнопка - ссылка на Картинку
    //В квадратных скобках, прямо к ссылке можно добавить своё описание (по желанию)
    "http://i.imgur.com/cJYuBux.png",
    "pa-reg",        //Зарегистрирован
    "pa-invites", //Приглашений
    "pa-posts",      //Кол-во сообщений:
    "pa-respect",    //Уважение:
    "pa-positive",   //Позитив
    "pa-sex",        //Пол
    "pa-age",        //Возраст
    "pa-icq",        //Аська
    "pa-ip",         //IP Юзера
    "pa-time-visit", //Провел на форуме:
    "pa-last-visit", //Последний визит:
    //"pa-online",     //Пользователь online - Не засовываем в спойлеры
    //Конец Списка,
    "_End"); SetProvilSpoil(a1,a2,a3);
    </script>
    <!--Конец//=Cпойлер cкрытия Инфы под N-кнопок в Профиле Топик-->