�� two sides

mybb@mybb.ru (bosmers) — Mon, 20 Apr 2026 11:58:39 +0300
��:
/*---------------------------------------------- ����� ������ ----------------------------------------------*/
#pun-title table {background-image : url("https://forumstatic.ru/files/001c/89/08/33283.png");
background-repeat: no-repeat;
background-position: center; 
background-color: #000000;
height: 460px;
width: 1050px !important;
margin-left: -10px;
margin-top: 80px;
}

/*---------------------------------------------- ������� ----------------------------------------------*/
.best {
	position: absolute;
	display: flex;
	gap: 8px;
	padding: 0 30px;
	z-index: 3;
}

.best.pst {
    margin: 190px 0 0 865px;
}

.best.actv {
   margin: 190px 0 0 -17px;
}

.best a {
    border: 2px solid #5d5d5d;
    border-radius: 100%;
    overflow: hidden;
    width: 30px;
    height: 30px;
    transition: all .2s linear 0s !important;
}

.best a:hover {
	border-color: #ffc00080!important;
}

.best img {
	width: 35px;
	height: 35px;
	filter: grayscale(100%)
}

.best empty {
	width: 734px;
}

/* ���������� �������� � ������� */
.novosti,
.quests {
  width: 200px;
  height: 110px;
  position: relative; 
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
  gap: 3px;
  overflow-y: auto;
  scrollbar-width: none;    
}

.novosti::-webkit-scrollbar,
.quests::-webkit-scrollbar {
  display: none;
}

.novosti {
  top: 95px;
  left: -120px;
}

.quests {
  top: 95px; 
  left: 463px; 
}

/* ����� ������ �������� � ������� */
.oldpl,
.newpl {
  width: 190px;
  height: 25px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 5px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
  transition: background 0.2s ease;
  cursor: pointer;
}

/* ���� ������ */
.oldpl {
  background: rgba(255, 255, 255, 0.5);
}
.newpl {
  background: rgba(255, 255, 255, 0.75);
}

/* ���� ������ ��� ��������� */
.oldpl:hover {
  background: rgba(255, 255, 255, 0.75);
}
.newpl:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* ������ ���� */
.oldpl date,
.newpl date {
  font-weight: bold;
  display: flex;
  align-items: center;
  border-radius: 10px;
  font-size: 9px;
  margin: 5px 5px 5px 0;
  padding: 5px;
}

.oldpl date {
  background: rgba(0, 0, 0, 0.8);
  color: white;
}
.newpl date {
  background: #ffc000;
  color: black;
}

/* ����� �������� */
.oldpl em,
.newpl em,
.oldpl .tekst,
.newpl .tekst {
  color: black;
  font-weight: bold;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* ��� ������ ��������� �� ������ ���� */
.spirit-navigation {
background: transparent;
height:30px;
width: 150px;
top: 370px;
left: 450px;
display: flex;
cursor: pointer; 
color: transparent;
position: absolute;
transition: all 0.3s ease-in-out 0s;
    }

/* ��� ������ ����� ����� �� ��� */
.spirit-navigation.spirit-navigation_hover{
background: transparent
}

/* ��������� ������� ����������� �� ����� ���� � ��� ������ */
#navigblock {
width: 200px;
left: 425px;
position: absolute;
top: 110px;
z-index: 999;
background: rgba(0, 0, 0, 0.75);
}

/* ��������� ����� ������, ���� ����, ����, ������������, ������� */
#pun .sslka a {
  width: 175px;          
  border-radius: 2px;     
  display: block;
  margin: 5px auto;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  font-family: Arial, sans-serif; 
  font-size: 10px;          
  background: rgba(255, 255, 255, 0.5);  
  color: #000;               
  transition: background 0.2s ease;
  cursor: pointer;
}

#pun .sslka a:hover {
  background: rgba(255, 255, 255, 0.75);
  opacity: 1;
  color: #000;        
}

/*---------------------------------------------- ��������� ----------------------------------------------*/
.category {
transition: all .12s ease-in-out !important;
-webkit-transition: all .12s ease-in-out !important;
-moz-transition: all .12s ease-in-out !important;
-o-transition: all .12s ease-in-out !important;
display: flex;
flex-direction: row;
min-height: 1px;
}

.category h2 {
background-size: auto;
width: 80px;
border-radius: 0 0px 0px 0;
border: 1px solid #00000095!important;
display: flex;
justify-content: center;
flex-shrink: 0;
padding: 20px;
margin-top: 0;
box-sizing: border-box;
position: relative;
}

.category:nth-of-type(even) h2, .category:nth-of-type(even) h2:before, .category:nth-of-type(even) h2:after {
border-radius: 0px 0 0 0px;
}

.category:nth-of-type(1) h2 { background-image: url("https://upforme.ru/uploads/001c/89/08/2/570588.png"); } 
.category:nth-of-type(2) h2 { background-image: url("https://upforme.ru/uploads/001c/aa/61/88/556230.png"); } 
.category:nth-of-type(3) h2 { background-image: url("https://upforme.ru/uploads/001c/89/08/2/773621.png"); } 
.category:nth-of-type(4) h2 { background-image: url("https://upforme.ru/uploads/001c/89/08/2/843123.png"); } 
.category:nth-of-type(5) h2 { background-image: url("https://upforme.ru/uploads/001c/89/08/2/91951.png"); } 
.category:nth-of-type(6) h2 { background-image: url("https://upforme.ru/uploads/001c/89/08/2/696886.png"); }

.category h2 span {
display: block;
cursor: default;
padding: 0;
font-size: 0;
}

.category .container {
box-sizing: border-box;
background: #d9d9d996;
padding: 8px 10px;
border: 1px solid #00000095!important;
}

.category:nth-of-type(even) .container {
border-radius: 0 0px 0px 0;
border-left: 0;
}

.category:nth-of-type(odd) .container {
border-radius: 0px 0 0 0px;
border-right: 0;
}

.category .container table {
padding: 6px 12px;
}



/*---------------------------------------------- ��������� ----------------------------------------------*/
::-webkit-scrollbar {background: #f6f6f6; width: 5px; height: 7px}
::-webkit-scrollbar-thumb {background: #00000070; width: 3px; height: 7px}
::-webkit-scrollbar-corner {background: #000000; }


/*---------------------------------------------- ��������� � ����� ----------------------------------------------*/
/* ����� */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3, #pun-navlinks .container,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend, .punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer, #pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2, #pun-title, #pun-title .container, .punbb .modmenu .container, .punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span, .punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl, #pun-navlinks .container  { background-color: transpanent;
color: #000000;
font-weight: normal;
font-style: normal;
}

/* ����� ����� ��� ���������*/
.punbb th {
border: none !important;
font-family: roboto;
font-size: 0px;
text-transform: uppercase;
letter-spacing: 1px !important;
text-align: center;
  }

/* ---------------------------------------------- ��� ----------------------------------------------*/
body {background-image: url("https://forumstatic.ru/files/001c/7d/0f/15151.webp");
background-repeat: no-repeat; 
background-color: #000000;
background-attachment: fixed!important; 
background-position: top center; 
background-size: cover; 
}


/*---------------------------------------------- ���� ������ ----------------------------------------------*/
#pun {box-shadow: 0px 0px 0px  #eaeaea;
background-color: #ebebeb;
background-position: center;
background-repeat: repeat-y;
background-attachment: no-fixed;



/*---------------------------------------------- ����� ������ ----------------------------------------------*/
#pun-about p.container {
background-image: url(https://forumstatic.ru/files/001c/89/08/46608.png);
background-position: center;
background-repeat: no-repeat;
margin: 0px 0px -80px 0px;
height: 145px; 
width: 1050px !important;
margin-left: -17px;
overflow-x: hidden;
  border-radius: 0px 0px!important;
}

#pun-about .container a,
#pun-about .container a:link,
#pun-about .container a:visited {
    color: #ffffff!important;
}

#pun-about .container a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/*---------------------------------------------- ������ ----------------------------------------------*/
/* �� �������� */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #punbb-admain a:visited {
  color: #000000;
  font-weight: 600;
  text-decoration: none;
}

/* �������� */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #000000;
  transition: 1s;
font-weight: 600;
  text-decoration: none;
background: #ffc00030;
}

/* ������� ��������� � ������� */
.punbb-admin #pun-navlinks a {
    color: var(--base-bg);
    font-family: 'Nunito'!important;
    font-size: 12px!important;
    text-transform: lowercase;
    font-weight: 400;
}

/* ������� ��������� �� ��������� */
#pun-navlinks a {
    color: #fcfcfc;
    font-family: 'LibreCaslonDisplay';
    font-size: 20px !important;
    text-transform: uppercase;
    font-weight: 400;
}

/* ������� ��������� ����� ��������� */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
    color: #dedede;!important;
    transition: 1.5s;
    border-bottom: 2px solid #ffffff;
}

/* ������ ��������� �� ��������� */
#pun-ulinks a {
    color: #ffffff;
    font-family: 'Nunito';
    font-size: 9px !important;
    letter-spacing: 0px;
    font-weight: 100;
    text-transform: uppercase;
    transition: all 1.0s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s !important;
}


/* ������ ��������� ����� ��������� */
#pun-ulinks a:hover, #pun-ulinks a:focus, #pun-ulinks a:active {
    color: #dedede;!important;
    background-color: #ffc00070;
}

div#pun-navlinks {
position: absolute;
width: 100%;
height:20px;
text-align: center;
top: 450px;
margin-top: -12px;
padding-top: 10px;
margin-left: 0px;
z-index: 100;
}

.punbb-admin div#pun-navlinks {
top: 450px;
}

div#pun-ulinks {
position: absolute;
width: 100%;
text-align: center;  margin-left: 0px!important;
top: 500px;
margin-top: -12px;
z-index: 1;
}

/*---------------------------------------------- ������ ��� ----------------------------------------------*/

/* ������*/
.punbb table Div.icon {
    float: left;
    display: block;
    background: url('') no-repeat;
    margin-left: -15px;
    margin-top: 20px;
    width: 40px;
    height: 40px;
    background-color: #808d8600;
    background-size: contain;
}

/* ����� */
#pun-index TR.inew Div.icon {
    background: url('https://upforme.ru/uploads/001c/89/08/2/165914.png') no-repeat;
    background-size: contain;
}

/* ��������*/
tr.iclosed div.icon {
background: url() no-repeat;
background-size: contain;
}

/*������*/
tr.isticky div.icon {
background: url() no-repeat;
background-size: contain;
}

#pun-viewforum table Div.icon, #pun-messages table Div.icon, #pun-searchtopics table Div.icon {
  background: none;
  display: block;
  float: left;
  height: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  position: relative;
  width: 0px;
}

/*������ � ���������*/

#pun-viewforum table Div.icon, #pun-messages table Div.icon, #pun-searchtopics table Div.icon {
    display: block;
    position: relative;
    float: left;
    height: 10px;
    width: 10px;
    margin-top: 12px;
    margin-right: 5px;
    background: #d9d9d9;
}

#pun-viewforum TR.inew Div.icon, #pun-messages TR.inew Div.icon, #pun-searchtopics TR.inew Div.icon {
    background: #ffc000;
    height: 10px;
    width: 10px;
}

#pun-viewforum TR.isticky Div.icon, #pun-messages TR.isticky Div.icon, #pun-searchtopics TR.isticky Div.icon {
    background-color: #ffc00075;
    height: 10px;
    width: 10px;
}

#pun-viewforum TR.iclosed Div.icon, #pun-messages TR.iclosed Div.icon, #pun-searchtopics TR.iclosed Div.icon {
    background-color: #d9d9d99650;
    height: 10px;
    width: 10px;
}


/*---------------------------------------------- ������ ----------------------------------------------*/

div#html-footer {
margin: 20px 0px 0px 0px;
} /* �������� �� ������������ ������ */

div#pun-about {
margin-bottom: 40px;
} /* ��� ������ ��������, ��� ���� ��� */

#pun-about p.container a {
display: hidden;
}

/* ������������ ���������� ������� */
#pun-main div.catleft, #pun-main div.catright {display: none}
#pun-announcement .container {margin-top: -5em}
#pun-main .post-author ul {text-align: center;}
#pun-announcement h2 {display: none}
#pun-status .container, #pun-main .post-links li {text-align: center}
#pun th, #pun-main h2 {text-align: center}
#pun-navlinks .container, #pun-ulinks .container { text-align: center;}

#pun-reputation div {
background-color: #cecdcd;
border: dashed #49635d 0px;
}


/*---------------------------------------------- ������� ----------------------------------------------*/
.partn {
    position: absolute;
    margin-left: 10px !important;
    margin-top: -95px !important;
    width: 1010px;
    height: 50px;
    overflow-y: auto;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
}



.partn a {
   opacity: 0.4;
   filter: grayscale(50%)!important;
   transition: all .6s cubic-bezier(0.49, -0.31, 0.65, 1.21) 0s;
   }

.vippartn a {
   transition: all .6s cubic-bezier(0.49, -0.31, 0.65, 1.21) 0s;
   }

.partn a:hover, .vippartn a:hover {
   opacity: 1!important;
   filter: none!important;
   }

.partn::-webkit-scrollbar { width: 3px;}
.partn::-webkit-scrollbar-track {background: #1d1d1b;}
.partn::-webkit-scrollbar-thumb {background: #cdd8da;}


.partn a:not(.static) {
    display: none;
}


/*�����*/


#pun-searchtopics .pa-author {
  font-size: 10px;
}

#image-area-sels, #smilies-area {
  background-color: transparent;
}

td#button-smile {display: none;}



/*----------------------------------- ���������� ����� � �������������� ������� ----------------------------------------*/
#profilenav {
font-size: 10px;
font-family: 'Roboto'; 
font-weight: 400;
letter-spacing: 0.2px;
text-transform: uppercase; 
}

#profilenav h2 span {
font-size: 12px;
font-family: 'Roboto'; 
font-weight: 400;
letter-spacing: 0.2px;
text-transform: uppercase;
}


/*---------------------------------------------- ���������� ����� � ������� ----------------------------------------------*/
#pun-adnav {
font-size: 10px;
font-family: 'Roboto'; 
font-weight: 400;
letter-spacing: 0.6px;
text-transform: uppercase; 
}


/*---------------------------------------------- ������ �����/���� ----------------------------------------------*/

.go-up,.go-down {
	cursor: pointer;
	display: none;
	height: 20px;
	margin-bottom: 160px;
	opacity: 1;
	position: fixed;
	z-index: 9999;
}

.go-up {
    top: 420px;
    width: 15px;
    height: 50px;
    line-height: 0px;
    border-radius: 0px 10px 10px 0px;
    text-align: center;
    padding-left: 0px;
    background: #bd816a00;
    margin-left: 1040px !important;
}

.go-down {
    top: 497px;
    width: 15px;
    height: 50px;
    line-height: 0px;
    text-align: center;
    padding-left: 0px;
    background: #7883a100;
    border-radius: 0px 10px 10px 0px;
    margin-left: 1040px !important;
}



.go-down:hover,.go-up:hover {
opacity:1;
}


/*---------------------------------------------- ������ ����� ������ ----------------------------------------------*/

#form-buttons {
    display: inline-flex;
    width: auto; 
    height: 20px;
    padding: 20px 0px 5px 0px;
    background-color: #d9d9d950;
    box-shadow: rgb(79 68 67 / 8%) 1px 1px 2px;
    border: 1px solid rgb(134 134 134 / 30%) !important;
}

#form-buttons td {
    height: 33px;
    padding-top: -10px;
    font-family: fa-regular;
    position: relative;
    opacity: 0.75;
    background-image: none !important;
    color: black;
}

#form-buttons > table {
    border: none;
    background: transparent;
    padding: 0;
}


#form-buttons td img {
  height: 33px!important;
    margin-top: -10px;
    width: 100%;
}

#form-buttons td img {
    display: inline-block;
    z-index: 100;
}

#button-font:before {
    content: "\f031";
    font-size: 15px;
}

#button-transL:before {
    content: "\e1bf";
    font-size: 15px;
}

#button-size:before {
    content: "\f894";
    font-size: 15px;
}

#button-bold:before {
    content: "\f032";
    font-size: 15px;
}

#button-italic:before {
    content: "\f033";
    font-size: 15px;
}

#button-underline:before {
    content: "\f0cd";
    font-size: 15px;
}

#button-strike:before {
    content: "\f0cc";
    font-size: 15px;
}

#button-indent:before {
    content: "\f03c";
    font-size: 15px;
}

#button-left:before {
    content: "\f036";
    font-size: 15px;
}

#button-center:before {
    content: "\f037";
    font-size: 15px;
}

#button-right:before {
    content: "\f038";
    font-size: 15px;
}

#button-indpost:before {
    content: "\e0b5";
    font-size: 15px;
}

#button-lower:before {
    content: "\f8f2";
    font-size: 15px;
}

#button-link:before {
    content: "\f0c1";
    font-size: 15px;
}

#button-spoiler:before {
    content: "\e0bf";
    font-size: 15px;
}

#button-image:before {
    content: "\f03e";
    font-size: 15px;
}

#button-video:before {
    content: "\f03d";
    font-size: 15px;
}

#button-hide:before {
    content: "\f023";
    font-size: 15px;
}

#button-quote:before {
    content: "\e1e4";
    font-size: 15px;
}

#button-code:before {
    content: "\f121";
    font-size: 15px;
}

#button-color:before {
    content: "\f53f";
    font-size: 15px;
}

#button-table:before {
    content: "\f00b";
    font-size: 15px;
}

#button-smile:before {
    content: "\e391";
    font-size: 15px;
}

#button-sticker:before {
    content: "\f118";
    font-size: 15px;
    position: relative;
    top: -13px;
}

#button-keyboard:before {
    content: "\f11c";
    font-size: 15px;
}

#button-addition:before {
    content: "\f013";
    font-size: 15px;
}

#button-files_rusff:before {
    content: "\e9cd";
    font-size: 15px;
}


#button-mask:before {
    content: "\f630";
    font-size: 15px;
}


#button-preview:before {
    content: "\f06e"; /* �������� ������ */
    font-family: fa-regular;
    font-size: 15px;
    line-height: 34px;
    position: relative;
    top: -12px;
    transition: color 0.2s ease, content 0.2s ease;
    color: black; /* ������� ���� */
}

/* �������� ��������� (������� ������������) */
#button-preview.on:before {
    content: "\f070"; /* ������ ����������� ��������� */
    color: #9f9f9f; /* ������� ������ */
}

/* ����������� ��������� (�������� ������������) */
#button-preview.off:before {
    content: "\f06e"; /* �������� ������ */
    color: black;
}


#plng {
    display: flex;
    width: 44px;
    height: 37px;
    margin-top: -15px;
    border-right: 1px solid #a5a5a5!important;
    justify-content: center;
    align-items: center;
    order: -1;
}
#plng input.button:focus-visible {
    outline: none!important;
}
#plng input.button {
    border: none!important;
    background: none!important;
    font-weight: bold;
    cursor: pointer;
    color: black!important;
}

#pun-messages div#profile fieldset#post-new #plng {
    height: 36px;
}
bosmersdoitdesign

������ two sides

�� two sides
