/* описание форумов */
.forumDescription {
    max-height: 75px;
    overflow: auto;
    text-align: left;
    padding: 5px;
}

.forumDescription .forumLink {
    display: block;
    position: absolute;
    text-align: end;
    bottom: 0;
    left: 30px;
    width: 95%;
    padding-top: 2px;
    background: var(--pun);
}

.forumDescription .forumLink a {
    text-transform: uppercase;
    font-family: 'Bebas Neue';
    font-size: 23px;
    margin: 0px 5px;
}



/* Стрелки */
#upDown {
  position:absolute; 
  right: -17px; 
}
.go-up, .go-down {
  cursor: pointer; 
  position: fixed; 
  z-index: 999;
  font-size: 50px;
  
color: #fff;}
.go-up {
  bottom: calc(5% + 70px);
  right: 2%;
  opacity: 80%;
}
.go-down {
  bottom: 5%;
  right: 2%;
  opacity: 80%;
}
.go-down:hover, .go-up:hover { opacity:1; }

/* User-панель */

#pun-status {
    position: absolute;
    left: 37px;
    top: 235px;
}

#pun-status p.container {
   width: 270px;
   height: 50px;
   padding: 0px 0px 0px 5px;
   color: var(--pun);
   border: 1px solid var(--pun);
    font-size: 14px;
}

#pun-status span {
  display: block;
}

#pun-status span a {
  color: var(--pun);
}
#pun-status span a:hover {
  color: #848484;
}

#pun-status span.status-right {
 display: inline-block !important;
}

#pun-status span.item3.status-right {
 font-size: 0px;
 margin-right: 15px;
}

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

 div#u-panel {
    display: block;
    position: absolute;
    top: 220px;
    left: -38px;
    z-index: 5;
}

div#u-panel #option img {
    width: 75px;
    height: 75px;
    border: 1px solid var(--main);
    filter: grayscale(1);
}

div#u-panel #option img:hover {
 filter: grayscale(0);
}

/* системные ссылки в футере */
div#pun-about {
    position: absolute;
    text-align: center;
    bottom: 0;
    width: 100%;
    text-transform: uppercase;
    font-family: 'Bebas Neue';
    font-size: 20px;
}

div#pun-about a {
    text-transform: uppercase;
    font-family: 'Bebas Neue';
    font-size: 20px;
}


/* Регулировка размера шрифта в постах */
.FNTslider {
    position: relative;
    z-index: 1000;
    width: 150px;
    height: 5px;
    float: right;
    background: var(--pun);
    top: 6px;
    right: 15%;
}
.FNTslider .before {
    height: 5px;
    position: absolute;
    background: var(--body);
}
.FNTslider .thumb {
    width: 4px;
    height: 13px;
    position: relative;
    top: -4px;
    cursor: pointer;
    background: var(--body);
    margin: 0;
}



/* ПРОФИЛЬ */
#pun-main .post-author {
    outline: 1px solid var(--body);
    outline-offset: 10px;
    margin-top: 20px;
    background: var(--body);
    padding: 10px 0;
    text-align: center;
    color: var(--pun);
}

#pun-main .post-author ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
#pun-main li.pa-title {
    order: 1;
    width: 100%;
    margin: 10px 0;
    background: var(--pun);
    color: var(--body);
}
#pun-main li.pa-author {order: 2;width: 100%;}
#pun-main li.pa-author a {
    color: var(--pun);
    text-transform: uppercase;
    font-family: 'Bebas Neue';
    font-size: 25px;
    letter-spacing: 1px;
    word-spacing: 5px;
}
#pun-main li.pa-avatar {order: 3;position: relative;margin-bottom: -7px;}
#pun-main li.pa-avatar img {position: relative;}
#pun-main li.pa-fld1 {
    order: 4;
    background: var(--pun);
    width: 100%;
    padding: 15px 10px;
    text-align: left;
    color: #252422bd;
}
#pun-main li.pa-fld1 a {
    font-style: italic;
}
#pun-main li.pa-posts {order: 5;}
#pun-main li.pa-respect {
    order: 5;
    padding-right: 5px;
}
#pun-main li.pa-posts, #pun-main li.pa-respect {
    width: 45%;
    margin: 5px 0;
    font-size: 13px;
    margin-top: 15px;
}
#pun-main li.pa-respect a {
    color: var(--pun);
    font-size: 13px;
}
#pun-main li.pa-respect a:nth-child(2) img,
#pun-main li.pa-respect a:nth-child(4) img {
    width: 8px;
}
#pun-main li.pa-reg {order: 6;width: 100%;}
#pun-main li.pa-last-visit {order: 7;width: 100%;}
#pun-main li.pa-online {order: 7;width: 100%;margin: 10px 0;}
#pun-main li.pa-awards {order: 8;    width: 100%;}

#pun-main li.pa-online strong {
    font-family: 'Bebas Neue';
    font-size: 20px;
    font-weight: 100;
}

#pun-main li.pa-avatar:after {
    content: '';
    display: block;
    position: relative;
    width: 210px;
    height: 15px;
    bottom: -8px;
    border: 1px var(--body);
    border-style: none solid solid;
}

#pun-main li.pa-avatar:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    width: 210px;
    height: 60%;
    border: 1px var(--pun);
    border-style: solid solid none;
}

#pun-main li.pa-gifts {
    display: none;
}




/* кнопки в форме ответа */
#form-buttons tr {height: 30px;} /*высота иконок*/
#form-buttons td {display: inline-block !important;position: relative;width: 26px;height: 26px;line-height: 1!important;text-align: center;background: #bebebe !important;margin: 0 5px;border-radius: 5px;} /*скрываем стандартные картинки*/
#form-buttons td img {position: absolute; z-index: 1; height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0;} /*убираем лишние отступы между картинками*/
#form-buttons td::before  {position: relative;top: 4px;z-index: 1;font-size: 19px;font-family: "Material Icons Outlined";font-weight: 900;color: #424242;} /*параметры для иконочного шрифта - вид, размер, жирность и т.д. можно и цвет задать*/

td#button-font::before {content: '\e167';} /*иконка вида шрифта*/
td#button-transL::before {content: '\e8e2';} /*иконка транслита*/
td#button-size::before {content: '\e262';} /*иконка размера шрифта*/
td#button-bold::before {content: '\e238'; } /*иконка жирного текста*/
td#button-italic::before {content: '\e23f';} /*иконка курсива*/
td#button-underline::before {content: '\e249';} /*иконка подчёркнутого текста*/
td#button-strike::before {content: '\e239'; } /*иконка зачёркнутого текста*/
td#button-indent::before {content: '\e23e'; } /*иконка красной строки*/
td#button-left::before {content: '\e236'; } /*иконка текста слева*/
td#button-center::before {content: '\e234'; } /*иконка текста по центру*/
td#button-right::before {content: '\e237'; } /*иконка текста справа*/
td#button-link::before {content: '\e157'; } /*иконка ссылки*/
td#button-spoiler::before {content: '\e14e'; } /*иконка спойлера*/
td#button-image::before {content: '\e3f4'; } /*иконка картинки*/
td#button-video::before {content: '\e064';} /*иконка видео*/
td#button-hide::before {content: '\e63f';} /*иконка скрытого текста*/ 
td#button-quote::before {content: '\e244';} /*иконка цитаты*/
td#button-code::before {content: '\e8be';} /*иконка кода*/
td#button-color::before {content: '\e40a';} /*иконка цвета текста*/
td#button-smile::before {content: '\e813';} /*иконка смайлов*/
td#button-keyboard::before {content: '\e312';} /*иконка клавиатуры*/
td#button-table::before {content: '\f1be';} /*таблица*/
td#button-addition::before {content: '\e5c5';} /*дополнительно*/
td#button-files_rusff::before {content: '\e2cc';} /*файлы*/
td#button-mask::before {content: '\e9ed';} /*маска*/
td#button-good::before {content: '\e876';} /*анкета принята*/


#form-buttons td#button-graffiti_rusff {
  display: none !important;
}




/* Баннеры партнеров */
#html-footer #banner-box {
    overflow: auto;
    height: 45px;
    width: 950px;
    padding: 10px 0 0 10px;
    position: relative;
    left: -14px;
    background: var(--pun);
}

#html-footer #banner-box a {
    filter: opacity(0.4);
}

#html-footer #banner-box a:hover {
    filter: opacity(1);
}

#html-footer #banner-box a img {
    filter: grayscale(95%);
}

#html-footer #banner-box a img:hover {
    filter: grayscale(0%);
}


/* быстрый поиск по теме */
#s-block {
    display: none;
}


/* скрол */
::-webkit-scrollbar {
    width: 8px;
    height: 6px;
    background-color: var(--body);
}  
::-webkit-scrollbar-thumb {
    background-color: var(--pun);
}

.punbb ::-webkit-scrollbar {
    background-color: #e7e6e6;
}

.punbb ::-webkit-scrollbar-thumb {
     background-color: #c1c1c1;
}

/* Стрелки */
#upDown {
  position:absolute; 
  right: -17px; 
}
.go-up, .go-down {
  cursor: pointer; 
  position: fixed; 
  z-index: 999;
  font-size: 50px;
  
color: #fff;}
.go-up {
  bottom: calc(30% + 70px);
  opacity: 80%;
}
.go-down {
  bottom: 30%;
  opacity: 80%;
}
.go-down:hover, .go-up:hover { opacity:1; }



/* ################################ ТАБИЛИЦА  ############################*/
div#html-header ::-webkit-scrollbar {
    background-color: var(--body);
    width: 5px;
}

div#nav, div#news, div#need, div#html-header div#bestPost, div#activists, div#episode {
    position: absolute;
    z-index: 4;
}

div#nav {
    right: -42px;
    top: 145px;
    text-align: right;
}

div#nav a {
    display: block;
    font-size: 31px;
    color: var(--pun);
    text-transform: uppercase;
    font-family: 'Bebas Neue';
    line-height: 40px;
}

div#nav a:hover {
    letter-spacing: 2px;
}


div#news {
    left: -55px;
    top: 15px;
    height: 75px;
    width: 370px;
    padding-right: 10px;
    overflow-y: auto;
    font-family: 'Lato';
    text-align: justify;
    color: var(--tabt);
    font-size: 13px;
}

div#news a {
    color: var(--tabt);
}

div#need {
  top: 115px;
}

div#need:before {
    content: 'I need you';
    color: var(--pun);
    font-family: 'Bebas Neue';
    font-size: 31px;
    position: absolute;
    left: 225px;
    width: max-content;
}

div#need1 {
    position: relative;
    left: -60px;
}

div#need2 {
    position: relative;
    left: 35px;
    top: 5px;
}

div#need1 img, div#need2 img {
    margin-left: 2px;
    filter: grayscale(1);
}

div#need1 img:hover, div#need2 img:hover {
  filter: grayscale(0);
}



div#html-header div#bestPost {
    left: 690px;
    top: 0;
    color: var(--pun);
}

div#html-header div#bestPost a {
    color: var(--pun);   
}


div#html-header div#bestPost div#author, div#html-header div#bestPost div#author a {
    font-family: 'Bebas Neue';
    font-size: 23px;
}

div#html-header div#bestPost .body {
    height: 60px;
    width: 360px;
    padding-right: 10px;
    overflow-y: auto;
    font-family: 'Lato';
    text-align: justify;
    font-size: 13px;
    color: var(--tabt);
}


div#activists {
    right: 70px;
    top: 199px;
    display: flex;
}

div#activists img {
  display: inline-block;
  margin: 0 2px;
  filter: grayscale(1);
}

div#activists img:hover {
    filter: grayscale(0);
}

div#episode {
  right: 70px;
  top: 245px;
}
div#episode:before {
    content: 'The best';
    color: var(--pun);
    font-family: 'Bebas Neue';
    font-size: 31px;
    position: absolute;
    left: 50px;
    top: -90px;
    width: max-content;
}

div#episode img {
    filter: grayscale(1);
}

div#episode img:hover {
    filter: grayscale(0);
}


/* ################################ ДЛЯ СМАЙЛИКОВ  ############################*/
#tags .container#smilies-area {
    width: 605px;
    overflow: hidden;
}
#wrapper{
  position:
  relative;
}
.tabs{
  height:22px;
  line-height:21px;
  display: block;
  padding: 0 0 3px;
  margin: 0px 0 30px !important;
  list-style: none;
}
 .tabs li{
   float:left;
   cursor:pointer;
   border-radius: 0;
 }
.tabs li a{
  background: var(--pun);
  color: var(--body);
  display:block;
  border: 1px solid var(--tabt);
  margin-bottom:-1px;
  padding:0 5px 1px;
  position:relative;
  text-align:center;
  width: 72px;
}
.tabs li a:hover{
  color: var(--body);
  background: var(--main);
}
.tabs li.active a{
  color: var(--body);
}
.tabs li.active a:hover{
  color: var(--body);
}
#smilies-area div[class^="t-"]:not(.t-0){
  display:
  none;
  width: 600px;
  max-height: 245px;
  overflow-y: auto;
}



/* ################################ гостевая  ############################*/

#p5 .post-author {display: none;}
#p5 .post-body {margin: 0;}
table.guest, table.guest td {
    background: var(--main);
    border: none !important;
}

table.guest {
    background: var(--main);
}

table.guest .guestblock {
    background: var(--pun);
    height: 170px;
    width: 300px;
    overflow-y: auto;
    margin: 10px 30px 15px 30px !important;
}

table.guest span {
    font-family: 'BebasNeue Book';
    font-size: 22px;
    text-align: center;
    display: block;
}