Код:

<!-- пара -->
<div class="tabla2" style="
    position: absolute;
    top: -105px;
    left: 55px;
    width: 110px;
">
<a href="ссылка" style="color:#7a917c; text-decoration:none; font-family:'Caveat', Arial, sans-serif; font-size: 16px;">name surname</a> & 
<a href="ссылка" style="color:#7a917c; text-decoration:none; font-family:'Caveat', Arial, sans-serif; font-size: 16px;">name surname</a>
</div>

<!-- актив -->
<div class="tabla2" style="
    position: absolute;
    top: -260px;
    left: 0px;
    width: 110px;
">
<a href="ссылка" style="color:#7a917c; text-decoration:none; font-family:'Caveat', Arial, sans-serif; font-size: 16px;">name surname</a>  
<a href="ссылка" style="color:#7a917c; text-decoration:none; font-family:'Caveat', Arial, sans-serif; font-size: 16px;">name surname</a><br>
<a href="ссылка" style="color:#7a917c; text-decoration:none; font-family:'Caveat', Arial, sans-serif; font-size: 16px;">name surname</a>  
<a href="ссылка" style="color:#7a917c; text-decoration:none; font-family:'Caveat', Arial, sans-serif; font-size: 16px;">name surname</a>
</div>

<!-- постописцы -->
<div class="tabla2" style="
    position: absolute;
    top: -290px;
    left: 728px;
    width: 110px;
">
<a href="ссылка" style="color:#7a917c; text-decoration:none; font-family:'Caveat', Arial, sans-serif; font-size: 16px;">name surname</a>  
<a href="ссылка" style="color:#7a917c; text-decoration:none; font-family:'Caveat', Arial, sans-serif; font-size: 16px;">name surname</a><br>
<a href="ссылка" style="color:#7a917c; text-decoration:none; font-family:'Caveat', Arial, sans-serif; font-size: 16px;">name surname</a>  
<a href="ссылка" style="color:#7a917c; text-decoration:none; font-family:'Caveat', Arial, sans-serif; font-size: 16px;">name surname</a>
</div>

<!-- пост-->
<div class="citata"
style="
    position: absolute;
    top: -165px;
    left: 750px;
    padding: 5px 7px;
    width: 150px;
    height: 110px;
    overflow: auto;
    text-align: justify;
">
<a style="color:#7a917c; text-decoration:none; font-family:'Arial', Arial, sans-serif; font-size: 10px;">name surname> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.> <a href="ссылка">читать полностью</a>
</div>

Код:

/*************************************************************
A - SETUP
**************************************************************/

/* A1 Import the colour scheme*/

/* A1.1 */
@import url(style_cs.css);


/* A1.1 */

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);


@import url(https://fonts.googleapis.com/css?family=Alegreya|Alegreya+Sans+SCAmatic+SC|Bad+Script|Caveat|Comfortaa|Cormorant+Infant|El+Messiri|Exo+2|Forum|Gabriela|Jura|Lobster|Montserrat|Marck+Script|Mulish|Neucha|Noto+Sans|Oranienbaum|Oswald|Open+Sans+Condensed:300|Pacifico|Pangolin|Pattaya|Philosopher|Playfair+Display|Playfair+Display+SC|Poiret+One|Prata|Raleway|Roboto|Roboto+Mono|Roboto+Condensed|Rubik+Mono+One|Ruslan+Display|Russo+One|Ruda|Seymour+One|Viaoda+Libre|Underdog|Yeseva+One|Yanone+Kaffeesatz);

@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:wght@400;500&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@200;300;400&display=swap');


@font-face { font-family: Jost;
src: local("Jost"), url(https://forumstatic.ru/files/001b/dd/35/43318.ttf); }

@font-face { font-family: Santa Catarina;
src: local("Santa Catarina"), url(https://forumstatic.ru/files/001b/dd/35/34429.ttf); }

@font-face { font-family: Sofia Sans Extra Condensed;
src: local("Sofia Sans Extra Condensed"), url(https://forumstatic.ru/files/001b/dd/35/67695.ttf); }

@font-face { font-family: Tenor Sans;
src: local("Tenor Sans"), url(https://forumstatic.ru/files/001b/dd/35/89468.ttf); }

@font-face { font-family: Ammys Handwriting;
src: local("Ammys Handwriting"), url(https://forumstatic.ru/files/001b/dd/35/44728.ttf); }

@font-face { font-family: Nord-Star Deco;
src: local("Nord-Star Deco"), url(https://forumstatic.ru/files/001b/dd/35/60954.ttf); }

@font-face { font-family: Ogelios NewEra;
src: local("Ogelios NewEra"), url(https://forumstatic.ru/files/001b/dd/35/33395.ttf); }


/* A1.1 */


/* A2 Deal with browser defaults and wonkiness*/

@media screen and (max-width: 840px) {
.post-content iframe[allowfullscreen] {
    width: 700px !important;
    height: 450px !important;
}
}


/* A2.1 */
html, body {margin: 0px; padding: 0}

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

/* A2.2 */
.punbb {margin: 0px}

/* A2.3 */
.punbb .main table { table-layout: fixed;  width: 100%; 
background: #8a8b8b;}

/* A2.4 */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;}

/* A2.5 */
p[class="checkfield"] *, div[class="checkfield"] *, fieldset[class="radiofield"] * { height: 1.8em; vertical-align: middle}

/* A2.6 */
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {padding: 0;  list-style: none; }


 /* A3 Text setup*/

body { font-size: 75%;  font-family: sans-serif; }

.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th { font-size: px; }

.punbb h1 {  font-size: 0px; }

.punbb h1 span, .punbb h2 span, .punbb legend span { font-size: 0em; }

.punbb pre { font: 11px/140% verdana, arial, sans-serif; }

.punbb address, .punbb em { font-style: normal }

.punbb .post-content em {  border-bottom: 1px dashed var(--clr1); }


/* A4 Float clearing and hidden items*/

/* A4.1 */
#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
   clear: both;
   content: ".";
   display: block;
   height: 0;
   visibility: hidden;
   overflow:hidden;
   line-height: 0.0;
   font-size: 0;
}

/* A4.2 */
.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden;
background: #8a8b8b;
  }


/* A5 Basic page layout and borders*/
/* A5.1 */
#pun {
  margin: auto;
  width : 950px;
  position: relative;
  float: top center;
  padding: 0px 0px 0px 0px;
  margin-top: 315px!important;
}

/* A5.2*/
.punbb {
   height: auto;
   width: 900px;
   margin-left: 25px;
    color: #0f1212;

}


/* A5.3 */
#pun-redirect, #pun-maint {
   margin: 50px 20% 12px 20%;
   width: auto;
   float: none;
 }

#pun-redirect .main-title {   font-size: 0em; }

/* A5.4 */
.punbb .section, .punbb .main {  margin-bottom: 1em; }

/* A5.5 */
.punbb .category, .punbb .post {  margin-top: 0.4em; }

/* A5.6 */
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost {   margin-top: 0; }

/* 5.7 */
#pun-post .topic {    margin-top: 1em;  }

/* A5.8 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
    border-style: none none solid none;
    border-width: 0px 0px 2px 0px
 }

/* A5.9 */
.punbb .container {
   border-style: solid;
   border-width: 1px;
 }



/*B - MAIN CONTENT - GENERAL*/
/* B1 Parsed Content, Signatures and Scroll Boxes*/

/* B1.1 */
.punbb .post-content {
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
  }

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  border-top: 1px solid ##0f160f;
  width: 250px;
  margin: 5px 0;
  }

/* B1.3 */
.punbb .post-content p {
    margin: 0;
    padding: 7px 15px 7px 1px;
    text-align: justify;
    line-height: 145%;
  }

/* B1.4 */
.punbb .post-content img { vertical-align: text-bottom  }

/* B1.5 */
.punbb .post-content img.postimg { vertical-align: middle;  }

/* B1.6 */
.punbb .post-content .blockcode, .punbb .post-content blockquote {
  width: 100%;
  overflow: hidden;
}

blockquote { margin-inline-start: 5px!important; }

/* B1.7 */
.punbb .post-content .scrollbox {  width: 100%;  }

/* B1.8 цитата-код*/
.punbb .post-content .quote-box, .punbb .post-content .code-box {
    padding: 10px 15px 11px 15px;
    margin: 10px 1px 10px 0px;
    /* color: #bdbdbd!important; */
    /* font-size: 11px!important; */
    border: 1px solid #c9c8c8;
    box-shadow: inset 0 0 0 1px #b7b7b7;
    background: #c9c8c8;
}

.punbb .quote-box cite, .punbb .code-box strong.legend {
    display: block;
    padding: 5px 15px 4px;
    font-size: 11px;
    font-family: var(--tx1);
    font-style: normal;
    color: #dbdada;
    font-weight: bold;
    /* text-shadow: 0 1px 1px #12181f; */
    background: #515b5b;
    margin: 7px -11px 0 -11px!important;
  }

.punbb .code-box strong.legend a { color: #dbdada!important;  }

.quote-box spoiler-box { padding-top: 20px!important; }

.punbb .quote-box p {
  margin-top: 1em!important;
  margin-bottom: 1em!important;
}

.post-content .spoiler-box > div { padding-top: 2px!important;     padding-left: 25px!important;}

/* B2 Information boxes */

/* B2.1 */
.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: solid;
  border-width: 1px;
  margin: 0 0 1.1em 0;
  }

/* B2.2 */
.punbb .info-box * {
  padding: 0 0 0.7em 0;
  }

/* B2.3 */
.punbb #pun-main .info-box .legend {  font-weight: bold;
bacground }


/* B3 Pagination and posting links */

/* B3.1 */
.punbb .linkst {
    width: auto;
    height: auto;
    box-sizing: border-box;
    padding: 12px 30px;
    margin: -5px 18px 15px -5px!important;
    position: relative;
  }

/* B3.2 */
.multipage { margin-top: 1.2em;  }

.multipage .forum {
    padding: 0px 4px !important;

}

/* B3.3 */
.linkst .pagelink {
    position: absolute;
    top: 4px;
    left: 0.9em;
    width: 15em;
    font-family: var(--tx1);
    font-size: 10px;
  }

/* B3.4 */
.linkst .postlink {
    position: absolute;
    top: 4px;
    right: 1em;
    width: 16em;
    text-align: right;
    font-size: 10px;
  }

/* B3.5 */
.punbb .linksb {
    text-align: right;
    padding: 3px 35px 0 30px!important;
    font-size: 10px;
    font-family: var(--tx1);
    font-weight: bold;
  }

/* B3.6 */
.linksb .pagelink {
    float: left;
    width: 24em;
    text-align: left;
    margin: 7px 0 0;
  }

/* B3.7 */
.linksb .postlink {  float: right; }

/* B3.8 */
.subscribelink {  clear:both;   }


/*************************************************************
C - MAIN CONTENT - SPECIFIC
**************************************************************/
/* C1 Form layout */

/* C1.1 */
.punbb .formal .container { padding: 1.7em 3.5em 1.1em 0.5em;  }

/* C1.2 */
.punbb .formsubmit {
  padding: 0 0 0 1%;
  margin: -1em 0 0 0;
  }

/* C1.3 */
.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {  margin: 0 0.6em 0 1em;  }

/* C1.4 */
.punbb fieldset {
  border-style: solid;
  border-width: 1px;
  padding: 0 18px 0 18px;
  margin: 0 0 1em 0
  }

/* C1.5 */
.punbb fieldset legend {  font-size: 1.1em  }

/* C1.6 */
.punbb fieldset legend span {
    padding: 0 5px;
    /* margin: 0 0 0 15px; */
    font-size: 11px;
    /* font-family: 'Jost'; */
    text-transform: lowercase;
    /* color: #757b80; */
    letter-spacing: .03em;
}

/* C1.7 */
.punbb fieldset fieldset {
  border-style: none;
  margin: 0;
  padding: 0 0 8px 0
  }

/* C1.8 */
.punbb .fs-box {
  padding: 1em 0 0.8em 0;
  }

/* C1.9 */
.punbb .fs-box p, .punbb .fs-box fieldset {  padding: 0 0 .3em 0  }

/* C1.10 */
.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield {
  float: left;
  margin-right: 1em;
  }

/* C1.11 */
.punbb .inline .infofield { clear:both }

/* C1.12 */
.punbb .datafield br {  display: none  }

/* C1.13 */
.punbb .required label, .punbb .datafield span.input {  font-weight: bold  }

/* C1.14 */
.punbb .datafield span.input a {  font-weight: normal;  }

/* C1.15 */
.punbb .areafield span.input, .punbb p.longinput span.input {
  display: block;
  padding: 0 12em 0 0;
  height: 100%; /* For IE */
  }

/* C1.16 */
.punbb textarea, .punbb .longinput input {
  width: 64%;
  margin: 0;
}


/* C1.17 */
.punbb .hashelp {  position: relative;  }

/* C1.18 */
.punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: normal;
  width: 36%;
  }

/* c1.19 */
.punbb #profile .helplinks {  top: 1.5em;  }

/* C1.20 */
.punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em;
  }

/* C1.21 */
#pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  margin: 0;
  }


/* C2 Table layout */

/* C2.1 */

/* скрыть верхнюю строчку табл */
#pun-index thead { opacity: 0; border: 0 none; height: 0; }

.punbb .main .tcl {
    overflow: hidden;
    text-align: left;
    font-family: 'Raleway';
    font-size: 11px;
    width: 47%;
    text-transform: lowercase;
    color: #536161;
    font-weight: bolder;
    padding-left: 40px;
}


/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
    text-align: center;
    font-family: 'Roboto';
    font-size: 11px;
    color: ##0f160f;
    width: 7%;
}

#pun-index .category .tc2,#pun-index .category .tc3,
#f-subforums .tc2,#f-subforums .tc3{
  display:none!important;
}

/* C2.3 */
.punbb .main .tcr {
    background-color: transparent;
    overflow: hidden;
    width: 26%;
    text-transform: uppercase;
    font-family: Noto Sans;
    font-size: 11px;
    line-height: 15px;
}

.punbb .main .tcr a {text-transform: lowercase;font-weight: 600;font-size: 12px;}

/* C2.4 */
#pun-userlist .main .tcl, #pun-searchtopics .main .tcl, #pun-modviewforum .main .tcl {
   background-color: transparent;
   width: 40%
  }

/* C2.5 */
#pun-userlist .main .tc2,
#pun-searchtopics .main .tc2 {
   background-color: transparent;
   text-align: left!important;
   width: 20%;
  }

/* C2.6 */
#pun-debug table .tcl {
   background-color: transparent;
   width: 15%;
   white-space:normal;
  }

/* C2.7 */
#pun-debug .tcr {
   background-color: transparent;
   width: 90%;
   white-space: normal;
  }

/* C2.8 подфорумы*/

#pun-index .tcl h3 {
    font-size: 14px;
    width: 415px;
    margin: -10px 0 5px 0;
    padding-bottom: 5px !important;
  }


#pun-index .tcl h3 { text-align: ;  text-decoration: none!important; }

.tcl h3 a {
    font-size: 20px;
    font-weight: 600;
    font-family: 'Raleway';
    color: #!important;
    text-transform: uppercase;
    margin: 0 0 0 20px;
}

.tcl h3 a:hover { color: #!important;}

.desc {
    font-size: 10px;
    font-weight: 500;
    font-family: 'Roboto';
    color: #525e6d!important;
    padding: 10px 0 5px 2px;
    text-transform: lowercase;
    margin: -25px 0 0 0;
}

.f_subtitle {
    position: relative;
    z-index: 1;
    top: -17px;
    left: 12px;
    letter-spacing: 4px;
    display: inline-block;
    height: 20px;
    font-style: italic!important;
    font: 9px tahoma;
    color: #adaeae;
    padding: 0px 10px;
 }

.f_links { margin: 7px 0; }

.f_links a:link, .f_links a:visited {
    margin-right: 9px;
    font-size: 9px;
    text-transform: lowercase;
    letter-spacing: 1px;
    color: #d2d2d2;
    font-style: italic;
    /* border: 1px solid #ddd; */
    padding: 1px 7px 2px;
    border-radius: 3px;
    background: #95999d;
    transition: all .4s linear;
    }

.f_links a:hover, .f_links a:active {
    background: #535f6e;
    color: #dddad7;
    }


/* C2.9 */
.punbb td span.youposted {
  font-weight: bold;
  margin-left: -1em;
  position: absolute;
  }

/* C2.10 */
.punbb td .modlist {
  display: block;
  padding-top: 0.3em
  }

/* C2.11 */
.punbb .main td {
  border-style: solid none none solid;
  border-width: 1px 0 0 1px;
  padding: 0.8em 1em;
  }

/* C2.12 */
.punbb .main th {
  border-style: none none none solid;
  border-width: 0 0 0 1px;
  font-size: 0!important;
  padding: 0.4em 1em 0.4em 1em;
  }

/* C2.13 */
    .punbb .main .tcl {
      border-left-style: none;
      border-left-width: 0
}


/* C2.14 */
.punbb div.icon {
    float: left;
    display: inline;
    width: 15px;
    height: 15px;
    margin: 4px 10px 0px;
}


 /* C3 Topics */

/* CS2.1 */
 .punbb .container, .punbb .post-body, .post h3, .punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info, .punbb .category, .punbb .post, #pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2, .punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body, .punbb .post h3 span, .post-links ul, .post-links, .usertable table, .punbb th, #pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span, #pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend, .punbb .divider,     .punbb .formal fieldset .post-box, .punbb .info-box, li.pa-online  { border-color:  transparent; }


/* C3.1 */
.punbb .post .container {
     border-style: none solid solid solid;
     border-width: 1px;
     margin-top: -1px;
     padding-bottom: 1px;
     margin-left: -5px;
  }

/* C3.2 */
.punbb .post h3 {  border-width: 0px;  }

.post h3 {
    background: #223327;
    margin: 30px 0 0 215px;
    text-transform: lowercase;
    height: 18px;
    width: 685px;
}

.fs-box .post h3 {
    background-color: transparent!important;
    margin: 30px 0 0 215px;
    text-transform: lowercase;
    height: 25px;
}

/* CS3.3 */
.punbb .post h3 span {
    /* padding: 5px 20px 0px; */
    display: block;
    font-weight: 100;
    font-size: 10px!important;
    font-family: var(--tx1);
    text-transform: lowercase;
    margin: 2px 0px 0px 20px;
    z-index: 1;
    position: absolute;
    width: 200px;
}
.punbb .post h3 span a{ color: #bdbdbd!important; }

/* C3.4*/
.punbb .post h3 strong {
    float: right;
    color: #bdbdbd;
    text-align: right;
    /* margin: -1px 0px 0 55px; */
    display: block;
    font-weight: 500;
    font-size: 11px!important;
    font-family: var(--tx1);
  }



/* C3.5 профиль*/
.punbb .post .post-author {   
    float: left;
    width: 220px;
    margin: -30px 0 100px -3px;
    text-align: center;
    padding-bottom: 0px;
    min-height: 118px;
    background: ;
    border: 2px solid #223327;
    border-radius: 17px;
  }


/* C3.6*/
.punbb .post .post-author ul, .punbb .post .post-author p {
  padding: 0 1em .2em 1em;
  line-height: 140%;
  }

/* C3.7 имя*/
.pa-author {
    width: 220px;
    height: 20px;
    padding: 8px 0 60px!important;
    /* font-size: 22px; */
    font: 600 16px var(--tx1);
    text-align: center;
    margin: -12px 0 10px -12px;
    border-bottom: 2px solid #515b5b;
    border-radius: 13px 13px 0 0px;
    background: url(https://upforme.ru/uploads/000b/49/16/2/63292.png);
}

.pa-author a { color: #c4c5c5!important; }

.pa-author a:hover { color: #7f7f7f!important }

.fs-box .pa-author {  margin: -12px 0 40px -12px!important; }

/* C3.9 */
li.pa-title {
    width: 215px;
    color: #bdbdbd;
    background: #223327;
    font-size: 9px;
    margin: -12px 0 5px -12px;
    padding: 1px 5px 0px 0px;
    text-transform: lowercase;
    z-index: 1;
}

.fs-box li.pa-title { display:none; }


li.pa-online, li.pa-last-visit {
   font-size: 0px;
   font-family: 'arial';
    margin-top: 11px;
    margin-left: 95px;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    position: absolute;
    border-radius: 5px;
}

li.pa-online {  background: #a1561f; }

li.pa-last-visit {  background: #515b5b; }

/* C3.11 */
.punbb .post-body {
  margin-left: 20em;
  border-left-style: none;
  border-left-width: 0px;
  padding: 0 0 1px 0;
  }

/* C3.12 */
.punbb .post-box {
    padding: 10px 10px 15px 25px;
    margin: 0 0px 0 0px;
  }

/*C3.13 */
.punbb fieldset .post-box {
  margin-bottom: 0.8em; 
  }

/* C3.14 */
.punbb .post-links {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px;
  }

/* C3.15 */
.punbb .post-links ul {
    /* padding: 6px 1em 6px 0; */
    text-align: right;
    /* border-bottom: 1px dashed #464b4f; */
    margin: 0px 0 0px -20px;
    font-weight: bold;
    font-size: 9px;
  }

li.pl-delete a, li.pl-edit a, li.pl-quote a, li.pl-reports a, li.pl-email a {
    padding: 2px 7px;
    text-align: center;
}

li.pl-share a { display: none; }


/* C3.16 */
.punbb .post-links li {
  display: inline;
  padding-left: 1em;
  font-family: var(--tx1);
  font-size: 10px;
  text-transform: lowercase;
}

/* C3.17 */
.pl-email, .pl-website {  float: left;  }

/* C3.18 */
.punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;
}


/* C4 Moderator menu */

/* C4.1 */
.punbb .modmenu .container {
    font-family: var(--tx1);
    text-transform: lowercase;
    font-size: 11px;
    font-weight: bold;
}

.punbb .modmenu .container span { display: none; }
/* C4.2 */
.punbb .modmenu strong, .punbb .modmenu a {
  height: 1.9em;
  line-height: 130%;
  }

/* C4.3 */
.punbb .modmenu .container strong { float: left; }

/* C4.4 */
.punbb .modmenu input { margin-left: 1em; }


/* C5 Message boxes */

/* C5.1 */
.punbb .info .container {  padding: 0.8em 1em }

/* C5.2 */
.punbb .info .container .backlink {   padding-top: 0.8em;   }


/* C6 Profile предпросмотр профиля*/

/* C6.1 */
#profile .container {  padding-left: 18.6em;  }

/* C6.2 */
#profilenav {
  float: left;
  width: 14em;
  margin-left: -16.3em;
  display: inline;
}

/* C6.3 */
#profilenav li {
  padding-bottom: 0.8em;
  font-weight: bold;
  }

/* C6.4 */
#viewprofile ul {
    border-style: solid;
    border-width: 1px;
    padding: 1.5em 18px 0.8em 18px;
    margin: 0 0 1em 0;
}

  
 #profile-signature ul {
  box-shadow: none;
  background: none;
  border: none!important;
  outline: none;
}

#viewprofile a { color: #!important; }

#profile-left #pa-edit a {
    font-family: 'Roboto';
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

/* C6.5 */
/* оформление меню при редактировании  */

#viewprofile h2, #profilenav h2 {
  background: transparent;
  border: none;
  padding: 0 0 0 0;
  margin: 0 14px -0.6em 14px;
  }

#viewprofile h1 span {  font-size: 10px!important; }

/* C6.6 */
#viewprofile h2 span, #profilenav h2 span {
  padding: 0 5px;
  position: relative;
  }


/* C6.7 */
#viewprofile li, #setmods dl { padding: 0 0 0 .5em; }

/* C6.8 ÿ*/
#viewprofile li span {
    float: left;
    width: 10em;
}

#profile-name strong {
    font-size: 14px!important;
    margin: 0 0px -10px 0;
}
 
#profile-left {
  width: 30%;
  font-size: 10px;  }

#profile-left li#profile-name strong {
    color: #!important;
    font-family: var(--tx1);
    font-size: 14px!important;
}


#profile-title strong {
    font-size: 9px!important;
    margin: 0 0px -10px 5px;
    text-transform: lowercase!important;
}

#profile-right li span {
    width: 155px;
    font-size: 11px;
    text-align: center;
    font-family: var(--tx1);
    text-transform: lowercase;
    padding: 2px;
    font-weight: normal;
}

#viewprofile td {text-align: center;}

/*C6.9 */
#setmods dt {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.8em 1em;
  font-weight: bold;
  display: inline;
  }

/* C6.10 */
#viewprofile li strong, #viewprofile li div, #setmods dd {
    display: block;
    padding: 0.5em 1em;
    font-weight: normal;
    padding: 5px 0 4px;
    margin: 0 0 2px;
}

/* C6.11 */
.punbb img.avatardemo {
  float: right;
  margin: 0 0 0.8em 1.8em
  }


/* C7 User list */

/* C7.1 */
#pun-userlist .formal, #pun-userlist .formal .container {
  border-bottom: none;
  margin-bottom: 0;
  }

/* C7.2 */
#pun-userlist .usertable .container {
  padding: 0 2.3em 2.3em 2.3em;
  border-top: none;
  }

/* C7.3 */
#pun-userlist .usertable table {
  border-style: solid;
  border-width: 1px;
  }

/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/

/* D1 Logo and description */
/* D1.1 */
#pun-title {
  margin: 0;
  border-style: none none none none;
  border-width: 1px 1px 0 1px;
  }

/* D1.2 */
#pun-title h1 {
  display : block;
  height : 40px;
  padding: 2em 1em 0 1em;
  }

/* D1.3 */
#pun-title .container {  border-style: none none none none;  }

/* D1.4 */
#pun-title h1 span  {  font-size: 1.5em;  }

/* D1.4 */
#pun-title h1 span  { display: none; }

#pun-title h1 span  { font-size: 1.5em;  }


/* D2 Page navigation
-------------------------------------------------------------*/

/* D2.1 */
#pun-pagelinks {
  position: absolute;
  top: -15px;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;
  }

/* D2.2 */
#pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0}

/* D2.3 */
#pun-pagelinks .container li {
  display: inline
  }

/* D2.4 */
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float:left;
  width: 100%;
  }

/* D2.5 */
#pun-pagelinks a:active, #pun-pagelinks a:focus {
  position:relative;
  margin: 0;
  }

#pun-pagelinks li a span {
  display:block;
  margin: 0 1em
  }


/* D3 навигация*/

#pun-navlinks {
    position: relative;
    margin: 11px 0 5px 0;
    left: 0;
    list-style: none;
    display: inline-block;
    width: 100%;
    z-index: 2;
    height: 40px;
    font-family: 'Mulish';
    font-size: 13px;
    font-weight: bold;
    text-shadow: none!important;
}

/* D3.2 */
 #pun-navlinks .container {
    text-align: center;
    text-transform: uppercase;
}

/* D.3 */
#pun-navlinks li {
   display: inline;
   padding-right: 1.6em;
 }

/* D3.4 */
#pun-navlinks li a { color: #!important; }

#pun-navlinks li a:hover { color: #!important; }



/* D4 User links
-------------------------------------------------------------*/

/* D4.1 */
#pun-ulinks {
    width: 100%;
    height: 100%;
    top: -15px;
    position: relative;
    left: 0;
    list-style: none;
}

#pun-ulinks .container {
    text-align: center;
    text-transform: lowercase;
    font-size: 10px;
 }

/* D4.2 */
#pun-ulinks li, #pun-ulinks li a {
  display: inline;
  padding: 0 4px;
  white-space: nowrap;
  }

/* D4.3 */
#pun-ulinks li.item1, #pun-ulinks li.item1 a {  border-left-style: none;  }


/* D5 Welcome box and Top Breadcrumbs */

/* D5.1 */
#pun-status, #pun-status .container {
  border-bottom: none;
  margin-bottom: 0;
  margin-top: auto; 
}

/* D5.2 привет гость*/
#pun-status .container { 
    text-transform: uppercase;
    font-family: 'Raleway';
    top: -165px;
    left: 250px;
    font-size: 7px;
    height: 15px;
    padding: 5px 0px;
    margin: -30px 0 -20px;
    font-weight: bold;
}

#pun-status .container .item5 {display: none;}

#pun-status strong { font-weight: normal!important;}

/* D5.3 */
#pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;
  }

#pun-status .status-right {
    float: right;
    display: none;
}

/* D5.4 */
#pun-crumbs1 {
    overflow: hidden;
    margin: 2px 0 1px;
    padding: 1px 0 22px;
    height: 15px;
    border-bottom: 1px solid #9f9c9c;
}

/* D5.5 */
#pun-crumbs1 p.container {
    border-top: none;
    font-family: var(--tx1);
    font-size: 11px!important;
    margin-top: 17px;
    letter-spacing: .07em;
    position: relative;
    text-transform: lowercase;
    font-weight: 600;
    text-align: center;
}

/* D5.6 */
#pun-break1 {
  margin: 0 1em;
  border-style: solid none;
  border-width: 1px 0;
  height: 0;
  margin: -2px 1em;
  position: relative;
  z-index: 1;
  }

/* D6 Announcement */

/* D6.1 */
#pun-announcement h2 {
  margin: 0px 0px 0px 0;
  position: relative;
  }

/* D6.2 */
#pun-announcement h2 span {
  display: block;
  padding: -35px 0 0px 0;
  }

/* D6.3 */
#pun-announcement .container {
  width: 100%;
  height: auto;
  margin: 15px 0 2px;
  }

/* D7 Statistics */

/* D7.1 */
#pun-stats .container {
    padding: 0.8em 1em;
    font-family: arial;
    font-size: 11px;
    margin: 25px 0 0 0;
    text-transform: lowercase;
    background: #8a8b8b;
}

#pun-stats li.item1, #pun-stats li.item2, #pun-stats li.item4 {
    display: inline-block;
    width: 280px;
    text-align: center;
  }

#pun-stats li.item3 {  display: none  }

/* D7.2 */
#pun-stats li.item1, #pun-stats li.item2 {  line-height: 150%;  }

/* D7.3 */
#pun-stats li.item3, #pun-stats li.item4 {  line-height: 150%;  }

/* D7.4 */
li#onlinelist {
    margin-top: 1em;
    text-align: justify;
    width: 100%;
    line-height: 150%;
    border-top: 1px dashed #8d949c;
}

/* D7.5 */
li#onlinelist div {
  border-top-style: solid;
  border-top-width: 1px;
  padding: 0.7em 0 0 0;
  }

/* D8 Quick Jump - About - Bottom Breadcrumbs */

/* D8.1 */
#pun-qjump {
  margin: 0;
  border: none;
  width: 50%;
  position: relative;
  float: left;
  }

/* D8.2 */
#pun-qjump .container {
  border: none;
  background: transparent;
  padding: 0.8em 1em;
  }

/* D8.3 */
#pun-about {
  margin-top: 0;
  }

/* D8.4 */
#pun-about .container {
  border-top-style: none;
  text-align: right;
  line-height: 100%;
  padding: 1.5em 1em;
}

/* D8.5 */
#pun-about p span {
    display: block;
    border-bottom: none;
    text-align: center;
    text-transform: lowercase;
    position: absolute;
    margin: -10px 0 0 0;
    width: 930px;
    font-size: 10px;
}

/* D8.6 */
#pun-crumbs2 {
  font-weight: bold;
  overflow: hidden;
  margin-bottom: 0;
  border-bottom: none;
  }

/* D8.7 */
#pun-crumbs2 .container {
    border-bottom: none;
    padding: 3px;
    text-align: center;
    font-size: 12px;
    font-family: 'Raleway';
    margin: -6px 0 5px 0;
    /* font-weight: 500; */
    text-transform: uppercase;
}


/* D9 Help file */

/* D9.1 */
#pun-help .formal .info-box h3.legend {
   border-bottom-style: solid;
   border-bottom-width: 1px;
   padding-bottom: 0;
   margin-bottom: 0.8em;
  }

/* D9.2 */

#pun-help .formal .info-box h3.legend span {
   padding-bottom: 0.6em;
   display: block;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   font-size: 1.1em;
  }

/* D9.3 òåêñò ñòàòèñòèêè ðåãèñòðèðîâàííûõ*/
#pun-help .formal p, #pun-help .formal dd {
  margin-bottom: 1em
  }

/* D9.4 òåêñò íèæíåé ñòàòèñòèêè*/
#pun-help .formal ul, #pun-help .formal dl {
  font-weight: bold;
  overflow: hidden;
  margin-top: 0;
  }

/* D9.5 */
#pun-help .formal li {
  padding: 0;
  line-height: 130%
  }

/* D9.6 */
#pun-help .formal li * {
  vertical-align: text-top
  }

/* D9.7 */
#pun-help .formal dt span {
  font: 1.4em/120% verdana, monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* D9.8 */
#pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode {
  padding-bottom: 0;
  }

/* D9.9 */
#pun-index th.tcl {font-size:0%;}

#pun-viewforum .forum thead { display: none; }

.topic a.sharelink {display: none;}

div#pun-live-rusff {display: none; }

.lastedit { isplay: none;}



/*прокрутка*/
::-webkit-scrollbar-thumb:vertical { 
   box-shadow: inset 0 0 0 2px #515b5b;
   background: #bdbdbd;

} 

::-webkit-scrollbar-thumb:horizontal { 
   box-shadow: inset 0 0 0 1px #515b5b;
   background: #bdbdbd;
 } 

::-webkit-scrollbar{
    width: 7px;
    height: 5px;
    background: #515b5b;
}


/* Скрываем Страницу поиска пользователей в Админке от модераторов*/
.gid2 #pun-adnav .item4,.gid2 #pun-admin_users #pun-admain1.adformal{display:none!important;}


/* Tooltip  */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    height: 100px;
    overflow: hidden;
    /* color: #fff; */
    text-align: center;
    /* padding: 5px 0; */
    /* border-radius: 6px; */
    margin: 15px 0 0 -90px;

    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*БыстроПлюсы для Топика!*/
.noNull:before {
  content: "+";
  font-size: 9px;
  display: inline-block;
  margin-left: -6px;
  margin-top: 0px;
  position: absolute;
}
div .post-rating p>a {
    font-weight: 700;
    background-size: 35px auto;
    position: relative;
    z-index: 100;
    width: 38px;
    height: auto;
    text-align: center;
    font-size: 12px !important;
    font-family: 'Raleway';
    display: inline-block;
    vertical-align: middle;
    line-height: 30px;
    letter-spacing: -1px;
    /* border: 1px dashed #464b4f; */
    border-radius: 5px;
    margin: 4px 0 0;
}

div.dark-style .post-rating p>a { color: #6BC8AF !important; }

div.post-vote { margin-bottom: 65px; }

div.post-vote p>a {
    font-size: 0 !important;
    position: absolute;
    cursor: pointer;
    z-index: 200;
    width: 20px;
    height: 20px;
    background: url(https://forumstatic.ru/files/0012/d8/04/75043.png?) no-repeat;
    display: block;
    background-size: 100%;
    margin-left: -11px;
    margin-top: 10px;
}

.post.dark-style div.post-vote p>a {
  background: url(https://forumstatic.ru/files/0012/d8/04/38128.png?) no-repeat;
  background-size: 100%;
}

.adcontainer {
    border-style: none solid solid solid;
    border-width: 0 1px 1px 1px;
    border-color: #ccc #ccc #aaa #ccc;
    z-index: 1;
    position: relative;
}



/* --------------- audioplayer -------------------------------------------- */

.audio-box {
    position:absolute;
    margin: -150px 0 0 103px!important;
    }

.audioplay-object {
    position:absolute;
    background:var(--color-text);
    border-radius:100%;
    width:30px;
    height:30px;
    }

.audioplay-button {
    position:absolute;
    top:8px;
    left:8px;
    filter:invert(100%);
    width:14px!important;
    height:14px!important;
    background-size:cover;
    }

.audio-name {
    position:absolute;
    top:4px;
    left:25px;
    width:130px;
    height:20px;
    border:1px solid var(--color-text);
    font:9px var(--font-text1);
    text-align:center;
    line-height:20px;
    }


/* --------------- HTML-POSTS ---------------------------------------- */


.stuff_info {
   position: relative;
    margin: auto;
    height: auto;
    width: auto;
    padding: 0 5px 17px;
    font: 100 11px var(--tx1);
    text-align: left;
}

.stuff_info img{
    position: relative;
    float: left;
    height: 50px;
    margin: 5px 9px 0 0;
    width: 50px;
    border-radius: 10px;
}



/*--- лор ---*/
.tootem_lore {
    text-align: justify;
    display: flex;
    gap: 20px;
    background: var(--bg1);
    border: 1px solid #b7b7b7;
    box-shadow: 0 0 0 1px #efeeea inset, 0 0 0 1px #efeeea;
    margin: 0 15px 15px 0px;
    padding: 15px;
}

.tootem_lore-item1 {
  flex: 1;
  height: 450px;
  overflow: auto;
  position: relative;
  padding-right: 10px;
}

.tootem_lore p {  font: normal 12px/150% calibri, verdana !important; }

.tootem_lore-item2 {
    width: 170px;
    display: flex;
    justify-content: center;
    align-self: center;
    overflow: hidden;
    align-self: stretch;
    text-align: justify;
    display: flex;
    gap: 30px;
    background: #575969;
    border: 1px solid #efeeea;
    box-shadow: 0 0 0 1px #c7c3b7;
    margin: 2px;
}

.tootem_lore-item2 img {
  width: 170px;
  height: 450px;
  object-fit: cover;
  mix-blend-mode: overlay;
}

/*--- тайтл заголовок---*/
.vneshtitle {
    /* margin: 3px 0px 15px 18px; */
    /* margin: auto; */
    margin-bottom: 13px;
    height: 40px;
    border-bottom: 1px #263c56 dashed;
    border-top: 1px #263c56 dashed;
    color: #344963;
    text-transform: capitalize;
    font-size: 33px;
    text-align: center;
    padding: 2px 0 1px 150px;
    font-family: Oranienbaum;
    letter-spacing: -1px;
    box-shadow: none!important;
}


/*--- магазин лакота ---*/
.mag_tx1 {
    top: 9px;
    position: absolute;
    left: 20px;
    text-transform: capitalize;
    font-size: 33px;
    font-family: Oranienbaum;
}

.mag_tx2 {
    top: 45px;
    position: absolute;
    left: 20px;
    text-transform: lowercase;
    font-size: 9px;
    font-family: 'Mulish';
}

.mag_img {
    top: 5px;
    position: absolute;
    left: 585px;
    height: 60px;
    width: 60px;
    border-radius: 10px;
}

/*--- банк ---*/
#p445 .post-author, #p 445 .post-sig, #p445 .pl-email, #p445 .pl-website{ display: none !important; }
#p445 .post-author { position: relative!important; display: none !important; }
#p445 .post-body, #p445 .post-links, #p445 .post-links ul { margin-left: 0 !important; }

.tootem_bank {
    padding: 10px 15px 30px;
    text-align: justify;
    /* display: flex; */
    gap: 30px;
    flex-direction: column;
    background: var(--bg1);
    background: var (--bg1);
    border: 1px solid #bbb9b9;
    box-shadow: 0 0 0 1px #efeeea inset, 0 0 0 1px #efeeea;
    margin: 14px 10px;
    font-family: var(--tx1);
    font-size: 10px;
}


.tootem_bank-plashes {
    height: 95px;
    width: 650px;
    background: #e3e3e4;
    padding: 5px;
    border-radius: 11px;
    border-bottom: 3px solid var(--clr1);
    position: relative;
    line-height: 20px;
    top: -35px;
    left: 150px;
    box-sizing: border-box;
    text-align: center;
    overflow: auto;
    margin-bottom: -20px;
}

.tootem_bank-plashes::-webkit-scrollbar{width: 0px; height: 0px; background: transparent;}


.tootem_bank-plashes_title {  
    margin-top: -60px;
    left: 50px;
    position: absolute;
    width: 800px;
    text-align: center;
    font-family: mulish;
    font-size: 11px;
    color: #234;
    font-weight: bold;
    letter-spacing: 1px;
    border-top: 1px dashed var(--clr1);
    padding-top: 5px;
 }


/*--- анка ---*/
.tootem_quenta {
    text-align: justify;
    display: flex;
    flex-direction: column;
}

.tootem_quenta-header {
    background: var(--bg1);
    height: 95px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    gap: 20px;
    font: normal 10px var(--tx1);
    text-transform: lowercase;
    color: #596f8a;
    border: 1px solid #c8c8c8;
    box-shadow: 0 0 0 1px #efeeea inset, 0 0 0 1px #efeeea;
    margin: 5px 11px 10px;
}

.tootem_quenta-header img {
    border-radius: 0px;
    width: 135px;
    object-fit: cover;
    height: 57px;
    mix-blend-mode: luminosity;
    box-shadow: 0 0 0 1px #234, 0 0 5px #fff;
}

.tootem_quenta-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tootem_quenta-info span {
    font: 100 26px var(--tx2);
    text-transform: uppercase !important;
    letter-spacing: 1px;
    line-height: 25px;
    color: #234;
}

.tootem_quenta-info em {
    font-style: normal !important;
    font-size: 12px;
    text-transform: uppercase;
}

.tootem_quenta-items {
    padding: 5px 20px 5px 10px;
    margin: 0 11px 13px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    font: normal 11px arial;
    text-align: justify;
    line-height: 15px;
    background: var(--bg1);
    border: 1px solid #c7c3b7;
    box-shadow: 0 0 0 1px #efeeea inset, 0 0 0 1px #efeeea;
}

.tootem_quenta-desc {
    border-bottom: 4px solid var(--clr1);
    border-radius: 4px;
    /* box-shadow: 0 0 0 1px #efeeea, inset 0 0 0 1px #729d7b; */
    padding: 15px 10px;
    width: 150px;
    margin: -4px 0 0 0;
    color: #234;
    font: 100 9px var(--tx1);
    line-height: 14px;
}

.tootem_quenta-story {
  flex: 1;
  padding-top: 20px;
  padding-bottom: 20px;
}

.tootem_quenta-story p {
  font: normal 11px var(--font-text1) !important;
  line-height: 15px!important;
}

.tootem_quenta_add {
    height: 250px;
    background: var(--bg1);
    border: 1px solid #c7c3b7;
    box-shadow: 0 0 0 1px #efeeea inset, 0 0 0 1px #efeeea;
    padding: 0 10px;
    text-align: justify;
    position: relative;
    display: flex;
    gap: 4px;
    font: normal 10px oswald !important;
    color: var(--clr1);
    margin: 20px 0px 15px 8px;
}

.tootem_quenta_add h5 {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--color-link-color2);
    font-size: 12px;
    margin-top: 11px;
}

.tootem_quenta_add-episodes {
    padding: 5px;
    flex-direction: column;
    gap: 20px;
    width: 360px;
    overflow-y: scroll;
    height: 180px!important;
}

.tootem_quenta_add-episode {
  border-bottom: var();
  padding-bottom: 10px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.tootem_quenta_add-episode img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 100%
}

.tootem_quenta_add-episode div {
  text-transform: uppercase;
  font-size: 10px;
}

.tootem_quenta_add-episode div a {
  font-weight: bold;
  font-size: 12px;
  display: block;
}

.tootem_quenta_add-episode p {
  text-transform: none;
  font: normal 10px/160% calibri, verdana !important;
  margin-top: 5px !important;
  opacity: .55
}

.tootem_quenta_add-episode:last-child {  border: none }

.tootem_quenta_add-item2 { flex: auto }

.tootem_quenta_add-plashes {  
    display: block;
    height: 195px!important;
    overflow-y: auto;
    margin: 10px 0 0 15px;
}

.tootem_quenta_add-plashes span {
  display: block;
  background: #211b1b;
  padding: 5px 10px !important;
  text-transform: uppercase;
  color: var(--text2) !important;
  font-size: 9px;
  letter-spacing: .15em;
  text-align: center;
}

.tootem_quenta_add-plashes span + span {  margin-top: 10px; }


/*---гостевая---*/
#p447 .post-author, #p 447 .post-sig, #p447 .pl-email, #p447 .pl-website{ display: none !important; }
#p447 .post-author { position: relative!important; display: none !important; }
#p447 .post-body, #p447 .post-links, #p447 .post-links ul { margin-left: 0 !important; }

.gost { 
     position: relative; 
     margin: auto;
     height: 160px;
     width: 800px;
     background: url(https://upforme.ru/uploads/001b/e2/0d/3/697491.png);
}


.gost-title, .gost-title2 { 
    position: absolute;
    height: 20px;
    width: 300px;
    font-family: var(--tx1);
    font-size: 12px;
    color: #b3bbc5;
    text-shadow: 0 1px 1px #234;
}

.gost-title { margin: 15px 0 0 30px; }

.gost-title2 { margin: 15px 0 0 547px; }

.gost-vn, .gost-vn2 { 
    position: absolute;
    height: 83px;
    width: 230px;
    font-family: var(--tx1);
    font-size: 10px;
    color: #c5d0db;
    margin: 50px 0 0 420px;
    overflow: auto;
}

.gost-vn { margin: 37px 0 0 25px!important; }
.gost-vn2 { margin: 37px 0 0 547px!important; }

.gost-vn a, .gost-vn2 a { border-bottom: 1px dotted #e3e4e4; color: #e6e7e7!important;}




.reveal-modal-bg { 
	position: fixed; 
	height: 100%;
	width: 100%;
	background: #000;
	background: rgba(0,0,0,.8);
	z-index: 100;
	display: none;
	top: 0;
	left: 0; 
}

.reveal-modal {
	visibility: hidden;
	top: 100px; 
	left: 50%;
	width: 600px;
	position: absolute;
	z-index: 101;
        transform: translateX(-50%)
}

.reveal-modal.xlarge     { width: 600px;}
	
.reveal-modal .close-reveal-modal {
	font-size: 22px;
	line-height: .5;
	position: absolute;
	top: 0px;
	right: -25px;
	color: #aaa;
	text-shadow: 0 -1px 1px rbga(0,0,0,.6);
	font-weight: bold;
	cursor: pointer;
        text-decoration: none;
}


/* --- Стиль смайликов и маски в форме ответа --- */
#mask_dialog .inner {
    width: 800px;
    border: 1px solid #9f9c98;
    box-shadow: 0 0 0 1px inset #e3e0d9, inset 0 0 30px #b5b3ab;
    background: #d7d5d0;
    font: 11px arial;
    }

#mask_dialog .hv-mask-dialog-title {
font: 14px oswald;
    text-transform: uppercase;
    border-bottom: 1px dashed #9f9c98;
    padding: 5px;
    margin-bottom: 20px;
    }

#mask_dialog .hv-form-block { padding-right:15px;  }




.hvStickerPackModal {
    left: 20px!important;
    bottom: -60px!important;
    }

.hvStickerPackModal {
    border: solid 1px #9f9c98!important;
    box-shadow: 0 0 0 1px inset #e3e0d9 !important;
    background: #d7d5d0!important;
    }

.hvStickerPackModalTab {
    display: inline-block;
    padding: 4px 25px 6px 25px!important;
    border: 1px solid #9f9c98 !important;
    border-radius: 50px!important;
    color: #4c6551;
    text-transform: lowercase!important;
    font-family: 'Oswald'!important;
    }

.hvStickerPackModalTab.active {
    background: #e3e0d9!important;
    border: 1px solid #c7c3b7 !important;
    color: #242 !important;
    }
 
.hvStickerPackModalTab:hover {  background: #d7d5d0!important;  }

.hvStickerPackModalTabs {
    border-top:1px solid var(--border-color2)!important;
    margin:10px -16px;
    padding:0px 20px 0 20px;
    }

.hvStickerPackModalContent {
    border:none!important;
    }

.hvStickerPackModalInput {
    background: #fff;
    text-transform:lowercase;
    }

#togglePreview {
    float: right;
    margin-top: 10px!important;
    margin-bottom: 10px!important;
    margin-right: -40px!important;
    }

.reaction-picker {  display: none; }

Код:

<!--Кнопки вверх и вниз-->
<a style="position: fixed; top: 400px; right: 10px; cursor: pointer; background-color: transparent !important;" id="Go_Top"><img src="https://upforme.ru/uploads/000b/49/16/2/418603.png" alt="Вверх"></a>

<a style="position: fixed; top: 479px; right: 10px; cursor: pointer; background-color: transparent !important;" id="Go_Bottom"><img src="https://upforme.ru/uploads/000b/49/16/2/181802.png" alt="Вниз"></a>

<script type="text/javascript">
jQuery(function(){
$("#Go_Top").hide().removeAttr("href");
if ($(window).scrollTop()>="250") $("#Go_Top").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#Go_Top").fadeOut("slow")
else $("#Go_Top").fadeIn("slow")
});

$("#Go_Bottom").hide().removeAttr("href");
if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")
else $("#Go_Bottom").fadeIn("slow")
});

$("#Go_Top").click(function(){
$("html, body").animate({scrollTop:0},"slow")
})
$("#Go_Bottom").click(function(){
$("html, body").animate({scrollTop:$(document).height()},"slow")
})
});
</script>
<!-- конец -->

Код:

:root {
  --bg1: #d9d9d9;

  --tx1: 'Roboto';
  --tx2: 'Verdana';

  --clr1: #8a8b8b;
  --clr2: #9d9f9d;
  --clr3: #c2c4c2;
  --clr4: #131820;
  --clr5: #631b20;
  --clr6: #304c26;
  --clr7: #abaeab;

  --border-v1: 1px solid var(--clr1);
}



/* ----- 1. СЛОЙ: ОБЩИЙ ФОН СТРАНИЦЫ ----- */

body {
    background-image: url(https://upforme.ru/uploads/000b/49/16/2/266038.png);
    background-color: #121212;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* шапка */

#pun-title table { 
background-image: url(https://upforme.ru/uploads/000b/49/16/2/355859.png); 
margin-left: -25px; 
margin-right: auto; 
margin-top: -290px; 
width: 950px; 
height: 298px; 
background-repeat: no-repeat; 

z-index: -1;

}}



#pun-title table { display: none; }

/* ----- ОТКЛЮЧЕНИЕ "ПРОЗРАЧНОСТИ" (на всякий случай) ----- */
#pun, #pun .main, #pun .container, #pun .post {
    mix-blend-mode: normal !important;
}

/* ----- 3. КОНТЕНТ ФОРУМА С ЭФФЕКТОМ ШУМА ----- */
#pun {
    width: 1007px;
    
    /* Базовый цвет фона */
    background-color: #9d9f9d !important;

    /* Наложение текстуры шума поверх цвета */
    background-image: url('');
    background-repeat: repeat;
    
    /* Стандартный отступ для центрирования и небольшого зазора сверху */
    margin: 40px auto;
    
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
    border-radius: 5px; 
}

/* ----- 4. НЕПРОЗРАЧНЫЙ ФОН ДЛЯ ВНУТРЕННИХ БЛОКОВ ----- */
#pun-index div.category .container, 
.punbb .post .container, #pun-stats .container, .punbb .info .container, .punbb #move_posts_form .formal>form.container {
    background: #abaeab;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.forumline td { background: transparent !important; }

/* ----- ОСТАЛЬНОЙ КОД ----- */

#post .areafield .input > span { right: -46px !important; top: 90px!important; }
#pun-reputation .inner { background-color: #727573; }

/* футер */
#pun-about p.container { background:  url() no-repeat;width: 950px;height: 12px;margin: 0px 0 -188px -25px!important;}

/* ссылки */
.punbb a, .tcl h3 a, .punbb a:link, .punbb a:visited, .punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited, .punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {color: #030303;text-decoration:none;transition: color .4s linear, opacity .4s linear;-webkit-transition: color .4s linear, opacity .4s linear;-moz-transition: color .4s linear, opacity .4s linear;}
.punbb a:hover, .punbb a:focus, .punbb a:active { color: #4a4948; }

/*------------- комментарий к репутации, модерация ---------------*/
#pun-report .inner, #pun-reputation .inner, #pun-admin-award-form .inner {display: none;position: fixed;left: 50%;top: 50%;margin: -135px 0 0 -384px;width: 750px;z-index: 100;font-size: 11px;border: 1px solid #9f9c98;background: #dfdcd6;}

/* разделитесль смс и подписи*/
.punbb .post-sig dt { opacity: .2; }

/* Иконки */
.punbb table Div.icon { background: url(https://upforme.ru/uploads/000b/49/16/2/534578.png); }
TR.inew Div.icon { background: url(https://upforme.ru/uploads/000b/49/16/2/911211.png); 

}
/* размытие зачеркнутого текста*/
.punbb .post-content del {filter: blur(1px);text-decoration: none;transition: color .5s;}
.punbb .post-content del:hover { filter: blur(0px); }

/* оформление в теме*/
.punbb .post-links {padding: 3px 1px 0px 8px;height: 18px;margin-left: 10px!important;}

/*статистика */
#pun-stats.section h2 {width: 310px;height: 36px;margin: 0 auto 15px;background-image: url(https://upforme.ru/uploads/000b/49/16/2/285100.png);
}
/* категории*/
#pun-category1.category h2, #pun-category2.category h2, #pun-category3.category h2, #pun-category4.category h2, #pun-category5.category h2 {width: 310px;height: 55px;margin: 0 auto 15px;z-index: 1;position: relative;}
#pun-category1.category h2 {background: url(https://upforme.ru/uploads/000b/49/16/2/876467.png);}
#pun-category2.category h2 {background: url(https://upforme.ru/uploads/000b/49/16/2/960384.png);}
#pun-category3.category h2 {background: url(https://upforme.ru/uploads/000b/49/16/2/364622.png);}
#pun-category4.category h2 {background: url(https://upforme.ru/uploads/000b/49/16/2/786375.png);}
#pun-category5.category h2 {background: url(https://upforme.ru/uploads/000b/49/16/2/71550.png);}



/* ----- Прокрутка для длинного кода в постах ----- */
.punbb .post-content .code-box {
    /* 1. Ограничиваем максимальную высоту блока */
    max-height: 400px;

    /* 2. Добавляем вертикальную полосу прокрутки, если контент не помещается */
    overflow-y: auto;
}
/* =================================================================== */
/*           НОВАЯ РАМКА И ФОН ДЛЯ ФОРМЫ ОТВЕТА                    */
/* =================================================================== */

/* Выбираем главный контейнер именно на странице ответа (#pun-post) */
#pun-post .formal > .container {
    
    /* 1. Новый цвет фона */
    background-color: #727573; /* <<< ИЗМЕНИТЕ ЦВЕТ ЗДЕСЬ (светло-серый для примера) */
    
    /* 2. Новая рамка */
    border: 2px solid #bbbbbb; /* <<< ИЗМЕНИТЕ ТОЛЩИНУ И ЦВET РАМКИ ЗДЕСЬ */
    
    /* 3. (Опционально) Скругляем углы для красоты */
    border-radius: 15px;
    
    /* 4. (Опционально) Добавляем внутренние отступы, чтобы элементы не прилипали к рамке */
    padding: 30px;
    
    /* 5. (Опционально) Добавляем тень для эффекта "глубины" */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* =================================================================== */
/*                     СТИЛИ ФОРМЫ ОТВЕТА                              */
/* =================================================================== */

/* ----- Основное текстовое поле для ввода сообщения ----- */
.punbb textarea {
    padding: 15px 10px;
    color: #161920 !important;
    outline: none !important;
    font-size: 11px !important;
    font-family: sans-serif;
    letter-spacing: .02em;
    background: #c9c8c8;
    border: 1px #d1d1d1 solid;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px #bdbdbd;
    min-height: 100px !important;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ----- Кнопки ("Отправить", "Предпросмотр" и иконки форматирования B, I, U) ----- */
.punbb input.button {
    padding: 5px 12px;
    margin: 5px 5px 0;
    background: #515b5b;
    font-size: 7px !important;
    color: #c9c8c8 !important;
    font-family: var(--tx1);
    font-weight: bold;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px #515b5b solid;
    border-radius: 1px;
    transition: .6s;
    box-shadow: inset 0 0 0 1px #677171;
}

/* Вид кнопок при наведении мыши */
.punbb input.button:hover { 
    background: #b76326;
    border: 1px #c9c8c8 solid;
    box-shadow: inset 0 0 0 1px #a1561f;
}

/* ----- Панели под формой ответа (выбор шрифта, смайлы и т.д.) ----- */
#imageupload-left input[type=button] {  width: 15em !important; }
#pun_wrap #post .container[id$="-area"] {
    overflow-y: auto;
    text-shadow: none;
    padding: 5px;
    max-height: 190px;
    font-size: 11px;
    color: #515b5b;
    text-shadow: 0 1px 1px #d5d5d5;
    font-family: 'Mulish';
    text-transform: uppercase;
    border: 1px solid #e1e1e1;
    background: radial-gradient(at top, #bdbbbe, #dfdfdf);
    box-shadow: 0 5px 7px #798185;
    margin: -5px 0px 0 1px !important;
}

#font-area { width: 350px !important; }
#font-area div {
    width: 150px;
    display: inline-block;
    text-align: center;
    padding: 3px 10px;
}

/* Таблица с кнопками форматирования */
#form-buttons table {
    margin-bottom: 10px;
    width: 102.6% !important;
}

/* ----- Поля ввода (input) и выпадающие списки (select) ----- */
.punbb input, .punbb select {
    padding: 6px 0 6px 2px;
    font-size: 10px !important;
    background: var(--clr2);
    border: 1px solid var(--clr1);
    border-radius: 7px;
    text-transform: lowercase;
    outline: none !important;
}

/* =================================================================== */
/*                     СТИЛИ ПРОФИЛЯ В ПОСТЕ (ЛЕВАЯ КОЛОНКА)              */
/* =================================================================== */

/* ----- Аватар пользователя ----- */
.pa-avatar {
    width: 230px;
    margin: -60px 0 15px -16px !important;
    z-index: 1;
    position: relative;
}
.pa-avatar.item2 > img {
    padding: 5px;
    border: 2px solid #515b5b;
    border-radius: 15px;
    background: #1f2929;
}

/* ----- Иконки и текст для полей (посты, репутация, деньги и т.д.) ----- */
.pa-posts, .pa-respect, .pa-fld2, .pa-fld5 {
    font-family: var(--tx1);
    width: 40px;
    margin: 1px 1px -5px 1px !important;
    font-size: 9px;
    text-transform: lowercase;
    font-weight: bold;
    color: #515b5b;
    display: inline-block;
    position: relative;
    z-index: 1;
}

/* Поле "Посты" с иконкой письма */
.pa-posts { 
    border-right: 1px solid #515b5b;     
    padding-right: 8px !important; 
}
.pa-posts::after {
    font-family: Material Icons;
    content: "mark_email_unread";
    font-size: 13px;
    position: absolute;
    color: #515b5b;
    top: -1px;
    left: -17px;
    font-weight: 100 !important;
}

/* Поле "Репутация" с иконкой огня */
.pa-respect img { height: 8px; }
.pa-respect .fld-name a {
    font-size: 0px;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 1px;
    left: 45px;
    z-index: 1;
}
.pa-respect .fld-name::after {
    font-family: 'Material Icons';
    content: "local_fire_department";
    font-size: 13px;
    position: absolute;
    color: #515b5b;
    top: 1px;
    left: 45px;
    font-weight: 100 !important;
}

/* Поле "Деньги" (fld2) с иконкой монеты */
.pa-fld2::after {
    font-family: 'Material Icons';
    content: "monetization_on";
    font-size: 13px;
    position: absolute;
    top: 21px;
    left: 15px;
    color: #808181;
}

/* Поле "Посты" (fld5) с иконкой карандаша */
.pa-fld5::after {
    font-family: 'Material Icons';
    content: "border_color";
    font-size: 13px;
    position: absolute;
    color: #808181;
    top: 37px;
    left: 19px;
}

/* ----- Кастомные поля (плашки, личные звания и т.д.) ----- */
/* Поле "Плашка" (fld3) */
.pa-fld3 {
    width: 202px;
    height: 25px;
    text-align: center !important;
    margin: 25px 0px -38px -2px !important;
    padding-top: 0px !important;
    text-decoration: none;
}
.pa-fld3 img {  border-radius: 0 0 15px 15px; }

/* Поле "Личное звание" (fld1) */
.pa-fld1 {
    padding: 0px 0 2px 0px !important;
    width: 200px;
    margin: 0 0 0 -12px !important;
    border-top: none;
}
.pa-fld1 a:link {
    color: #e3e4e4;
    font: 500 10px var(--tx1);
    text-transform: uppercase;
}

/* Поле fld4 (вероятно, для ссылок или дополнительной информации) */
.pa-fld4 {
    font-family: Jost;
    color: #a6a9ac;
    font-size: 10px;
    width: 220px;
    text-align: center;
    margin: 0px 0 10px -12px !important;
    border-bottom: 1px dashed #464b4f;
    padding: 0px 0px 15px 0px !important;
}
.pa-fld4 a {
    border-bottom: 1px dotted #718677;
}

/* Разделитель в личном звании */
.lz divider {
    display: block;
    height: 1px;
    box-sizing: border-box;
    border-bottom: 1px dashed #718677;
    margin: 5px 35px 5px 35px !important;
}

/* ----- Скрытие стандартных названий полей ("Награды:", "Подарки:" и т.д.) ----- */
.pa-awards, .pa-gifts {display: none;}
.pa-respect .fld-name {font-size: 0;}
.pa-posts .fld-name, .pa-fld1 .fld-name, .pa-fld2 .fld-name, .pa-fld3 .fld-name, .pa-fld4 .fld-name, .pa-fld5 .fld-name, .pa-gifts, .pa-reg {display: none;}

/* =================================================================== */
/*                     ПРОЧИЕ СТИЛИ                                    */
/* =================================================================== */

/* ----- Блок закладок ----- */
#BookmCntToggle {
    top: 0px !important; /* Исправлено с "px" на "0px" */
}
#MyBookmarks {
    box-shadow: 0 0 20px #505100, inset #f8f699 0 0 10px !important;
    background: #e4e488;
    border: 1px solid #adac3c;
}
#MyBookmarks #bm2 {
    border-width: 0.4em 0.7em 0.4em 0 !important;
    border-color: transparent #5b5d00 transparent transparent !important;
}

/* ----- Маленькие аватары на главной странице ----- */
h2 { font-size: 9px !important; }
.punbb .user-avatar .avatar-image {
    border-radius: 1px !important;
    height: 30px !important;
    width: 30px !important;
    filter: grayscale(1);
}

/* =================================================================== */
/*        СТИЛИ ДЛЯ ТЕМ ВНУТРИ ФОРУМА (КАК КАТЕГОРИИ)              */
/* =================================================================== */

/* 1. Настраиваем таблицу: разделяем строки и добавляем отступы между ними */
#pun-viewforum .main table {
    border-collapse: separate; /* Это свойство обязательно для border-spacing */
    border-spacing: 0 10px;  /* 0 отступ по горизонтали, 10px по вертикали */
    border: none;            /* Убираем стандартную рамку вокруг всей таблицы */
}

/* 2. Скрываем стандартный заголовок таблицы (<thead>) */
#pun-viewforum .main table thead {
    display: none;
}

/* 3. Стилизуем ячейки (<td>), чтобы вместе они выглядели как один блок */
#pun-viewforum .main table td {
    /* Применяем тот же фон, что и у ваших категорий */
    background: #8a8b8b; 
    
    /* Убираем все стандартные рамки, чтобы создать свои с нуля */
    border: none !important; 
    
    /* Создаем верхнюю и нижнюю границы для нашего блока */
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* 4. Добавляем левую границу ТОЛЬКО для первой ячейки в ряду */
#pun-viewforum .main table td:first-child {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

/* 5. Добавляем правую границу ТОЛЬКО для последней ячейки в ряду */
#pun-viewforum .main table td:last-child {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}