/**************************************************************
* ADDITIONAL
* design template by max, the murderer!
**************************************************************/

@charset "windows-1251";

/* Themes
-------------------------------------------------------------*/

html.dark::after {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: -1;
    background: rgb(var(--dark900c) / .95);
}

.dark img {
    filter: brightness(.8);
}

.dark img:hover {
    filter: brightness(1);
}

/* Index page
-------------------------------------------------------------*/

/* User-avatar in .tcr */

#pun .user-avatar {
    width: var(--48) !important;
    height: var(--48) !important;
    margin: 0;
    flex-shrink: 0;
}

.punbb:not(#pun-messages) .user-avatar,
.punbb:not(#pun-messages) .user-avatar .avatar-image {
    margin: 0;
}

#pun .user-avatar .avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
}

#pun .user-avatar .isonline {
    position: absolute;
    top: -2px;
    right: -2px;
    width: var(--8);
    height: var(--8);
    border-radius: 50%;
    background: rgb(var(--success));
    animation: none;
    z-index: 0;
}

.punbb:not(#pun-index) tr:hover .user-avatar .isonline {
    border-color: color-mix(in hsl, rgb(var(--light100)), rgb(var(--secondary400)) 38%);
}

/* Links in forums */

#pun-index .category tr .tcl .forum-nav {
    display: flex;
    flex-flow: wrap;
    gap: var(--8);
    padding-top: var(--6);
}

#pun-index .category tr .tcl .forum-nav a {
    font: 700 1rem/100% var(--font);
    text-transform: lowercase;
    padding: var(--4) var(--12);
    background: rgb(var(--secondary400) / .38);
    border-radius: 1rem;
}

#pun-index .category tr .tcl .forum-nav a:hover {
    background: rgb(var(--primary400));
    color: rgb(var(--light100));
}

/* Topics with new messages quantity icon in forums */

body .icon[data-new-topics]:before {
    margin: 0;
    padding: 0;
    width: var(--24);
    height: var(--24);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

#pun-viewforum .tcl {
    position: relative;
}

/* Footer banners */

#banners {
    padding: var(--16) var(--32);
    background: rgb(var(--secondary400) / .2);
    border-radius: 2rem;
}

.banners_wrap {
    max-height: calc(31px * 2 + var(--8));
    overflow-y: auto;
}

#banners a {
    display: inline-flex;
}

#banners img {
    width: 88px;
    height: 31px;
    object-fit: cover;
    border-radius: var(--4);
}

#banners img:hover {
    opacity: .6;
}

/* Hide categories */

.aimg {
    padding: var(--4);
    margin-left: var(--4);
    background: rgb(var(--secondary400) / .38);
    color: rgb(var(--text900));
}

.aimg:hover {
    background: rgb(var(--primary400));
    color: rgb(var(--light100));
}

/* Viewforum
-------------------------------------------------------------*/

/* Important topics divider */

#pun-main tr.tr-divider {
    font-weight: bold;
    background: rgb(var(--secondary400) / .38)
}

/* Topic
-------------------------------------------------------------*/

/* Change avatar */

.modal-inner {
    background: rgb(var(--light100));
    border-radius: 1rem;
    box-shadow: 0 var(--8) var(--64) rgb(var(--dark900c) / .38) !important;
}

#pun .modal-inner h2 {
    display: block;
    padding: var(--16) var(--16);
}

.pa-avatar img.allow_change:hover {
    filter: grayscale(1);
    cursor: pointer;
}

#set_avatar.container {
    padding: 0 var(--4) 0;
}

/* Additional felds */

.punbb:not(#pun-messages) .pa-row1 {
    display: flex;
    align-items: center;
}

#pun-premoderation .pa-row1 {
    display: none;
}

.punbb:not(#pun-messages) .pa-row1 li {
    padding-top: var(--8);
    padding-left: 0;
    padding-right: 0;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
}

.post-author .pa-fld1 .fld-name {
    display: block;
    font-size: 0;
}

.post-author .pa-fld1:not(:has(a)) .fld-name::before,
.post-author .pa-fld1:has(a) .fld-name a::before {
    content: '\f0eb';
    font-family: var(--fa);
    font-size: var(--16);
    font-weight: 400;
}

.post-author .pa-fld1:not(:has(a)) .fld-name::before {
    color: rgb(var(--primary400));
}

/* Online & Offline indicator */

.indOnline, .indOffline {
  display: inline-block;
  margin-left: var(--6);
  width: var(--8);
  height: var(--8);
  border-radius: 50%;
}

.indOnline {
  background-color: rgb(var(--success));
}

.indOffline {
  background-color: rgb(var(--secondary400));
}

/* Font size slider */

#fntSlider {
    width: 180px;
    height: var(--16);
    display: inline-block;
    float: right;
    background: rgb(var(--secondary400) / .38);
    border-radius: 0.4rem;
    margin-left: var(--12);
    position: relative;
}

#fntSlider .thumb {
    position: absolute;
    top: 0;
    width: var(--16);
    height: 100%;
    background: rgb(var(--light100));
    border: var(--2) solid rgb(var(--primary400));
    border-radius: 0.4rem;
    box-sizing: border-box;
}

#fntSlider .thumb:hover {
    background: rgb(var(--dark900));
    cursor: pointer;
}

#fntSlider .before {
    width: 100%;
    height: 100%;
    background: rgb(var(--primary400));
    border-radius: 0.4rem;
    padding-right: var(--16);
    box-sizing: content-box;
}

/* Fast reputation */

body div.post-rating,
body div.post-vote {
    float: right;
    position: relative;
    line-height: initial;
    margin-left: var(--8);
}
body div.post-rating p,
body div.post-vote p {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
div .post-rating p > a {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 800 1rem/100% verdana, tahoma, arial, helvetica, sans-serif !important;
    color: rgb(var(--text900));
}
div.post-vote p > a {
    font-size: 0 !important;
}
div .post-rating p:before,
div .post-vote p a:before {
    content: '\f004';
    font-family: var(--fa);
    font-weight: 900;
    font-size: var(--32);
    line-height: 100%;
    color: rgb(var(--secondary400) / .38);
}
div .post-vote p a:before {
    content: '\f075';
}
div .post-rating p:hover:before,
div .post-vote p:hover a:before {
    color: rgb(var(--primary400))
}
div .post-rating p:hover > a,
div .mylike .post-rating p > a {
    color: rgb(var(--light100));
}
div .mylike .post-rating p:before {
    color: rgb(var(--primary400))
}
.post[data-group-id="3"] .post-rating {
    display: none;
}
.isguest .post .post-rating {
    pointer-events: none;
}

/* Bookmarks
-------------------------------------------------------------*/

/* Panel */

#MyBookmarks {
    background: rgb(var(--light100));
}

#pun #MyBookmarks h2 {
    display: block;
    padding: var(--16);
}

#BookmCntToggle {
    top: var(--64);
}

/* In post *//* In post */

body .post .editBookmark {
    background: rgb(var(--light100));
    border-radius: 1rem;
    box-shadow: 0 var(--8) var(--64) rgb(var(--dark900c) / .38) !important;
}

body .post .editBookmark h1 {
    padding: var(--16) var(--16) 0 !important;
}

body .post .editBookmark .container {
    padding: var(--16) !important;
    margin: 0;
}

body span.delBookmark {
    color: inherit;
    line-height: 60%;
}

body .post .bookmark {
    right: calc(var(--32) * -1);
    cursor: pointer;
}

body .post .bookmark:not(.ncnfrm) {
    background: rgb(var(--danger));
}

body .post .bookmark:not(.ncnfrm)::before {
    border-color: rgb(var(--danger)) transparent;
}

body .post .bookmark.ncnfrm {
    animation: blinkColor .9s linear infinite;
}

/* Badges
-------------------------------------------------------------*/

body .bubble::after,
body .notify-bubble::after,
body span.num_msg::before {
    display: none;
}

body .bubble,
body .notify-bubble,
body span.num_msg {
    display: inline;
    position: relative;
    background: rgb(var(--danger));
    color: rgb(var(--light100c));
    font: 900 0.9rem/100% var(--font);
    padding: 0 var(--4);
    margin: 0 0 0 var(--4);
    left: unset;
    top: unset;
    right: unset;
    bottom: unset;
    min-width: unset;
    height: unset;
    border-radius: 0.3rem;
}

body span.num_msg {
    top: -2px;
    margin-left: 0 !important;
}

/* Tooltips
------------------------------------------------------------------ */

#tooltip {
    position: absolute;
    background-color: #000;
    z-index: 999999999;
    max-width: 220px;
    font-size: 1rem;
    line-height: 120%;
    display: none;
    color: rgb(255 255 255 / .87);
    text-align: center;
    padding: var(--4) var(--8);
    border-radius: 0.6rem;
    font-family: verdana, tahoma, arial, helvetica, sans-serif;
}

/* Reply form
------------------------------------------------------------------ */

/* Preview */

.button.full,
.button.cancel {
    margin-left: var(--4) !important;
    background: rgb(var(--secondary400) / .38);
    color: rgb(var(--text900));
}

/* Tags */

.custom_tag_indent {
    display: inline-block;
    margin: 0em 1.5em;
}

.custom_tag_float[alt=left] {
    float: left;
    margin: var(--16);
    text-align: left;
}

.custom_tag_float[alt=right] {
    float: right;
    margin: var(--16);
    text-align: right;
}

/* Additional buttons */

#button-transL::before {
    content: '\f891';
}

#button-justify::before {
    content: '\f039';
}

#button-indent::before {
    content: '\f878';
}

#form-buttons #button-image ~ #button-image::before {
    content: '\f03e' !important;
}

#button-float::before {
    content: '\f03c';
}

#button-smile::before {
    content: '\f118';
}

/* Flow Around */

#float {
    display: none;
    position: absolute;
    --width: 120px;
    margin-top: var(--32);
    left: calc(50% - var(--width));
    text-align: center;
    background: rgb(var(--light100)) repeat center center;
    padding: var(--12) var(--16);
    border-radius: 1rem;
    box-shadow: 0 var(--8) var(--64) rgb(var(--dark900c) / .2);
    z-index: 1;
}

#float strong {
    display: block;
    margin-bottom: var(--8);
}

#float i {
    font-size: var(--16);
    padding: 0 var(--8);
}

#float i:hover {
    opacity: .6;
}

/* Symbols counter */

#plng {
    display: inline-block;
    border: 1px solid rgb(var(--secondary400) / .38);
    border-radius: 2rem;
    font: 400 0.8rem/100% var(--font);
    text-transform: uppercase;
    padding: var(--8) var(--12);
    margin-right: var(--4);
}

/* Theme switcher
------------------------------------------------------------------ */

#theme_switcher {
    display: block;
    bottom: calc((var(--48) + var(--4)) * -1);
    left: 0;
    right: 0;
    position: absolute;
    text-align: center;
    padding: var(--16);
}

#theme_switcher li {
    display: inline-block;
}

#theme_switcher li label {
    display: none;
}

#theme_switcher li input {
    width: auto;
    height: auto;
    -webkit-appearance: none;
    margin: 0 !important;
    padding: 0;
    background: none;
    border: none;
    vertical-align: middle !important;
    box-shadow: none;
    display: inline-block;
}

#theme_switcher li:not(:last-child) input {
    margin-right: var(--8)!important;
}

#theme_switcher li input::before {
    font: 400 1.4rem/100% var(--fa);
    color: rgb(var(--primary400));
}

#theme_switcher li input#light::before {
    content: '\f111';
}

#theme_switcher li input#medium::before {
    content: '\f042';
}

#theme_switcher li input#dark::before {
    content: '\f111';
    font-weight: 600;
}

#theme_switcher li:hover input::before,
#theme_switcher li:has([type="radio"]:checked) input::before {
    color: rgb(var(--text900));
}

/* Up & Down arrows
------------------------------------------------------------------ */

.go-up,
.go-down {
    display: none;
    position: fixed;
    left: calc(100% - 100px);
    z-index: 0;
    cursor: pointer;
    width: 100px;
    height: 50%;
    box-sizing: border-box;
    z-index: 999;
}

.go-up {
    top: 0;
}

.go-down {
    bottom: 0;
}

.go-up .inside,
.go-down .inside {
    display: flex;
    justify-content: center;
    height: 100%;
    transition: opacity .1s ease;
}

.go-up .inside {
    align-items: flex-start;
    background: linear-gradient(to bottom, rgb(var(--light100c) / .12) 0%, transparent 100%);
    transition: background .2s ease;
}

.go-down .inside {
    align-items: flex-end;
    background: linear-gradient(to top, rgb(var(--light100c) / .12) 0%, transparent 100%);
    transition: background .2s ease;
}

.go-up .inside:hover {
    background: linear-gradient(to bottom, rgb(var(--light100c) / .38) 0%, transparent 100%);
}

.go-down .inside:hover {
    background: linear-gradient(to top, rgb(var(--light100c) / .38) 0%, transparent 100%);
}

.go-up .inside:before,
.go-down .inside:before {
    font-size: 1.4rem;
    color: rgb(var(--light100c));
    font-family: var(--fa);
    font-weight: 800;
    padding: var(--24) 0;
}

.go-up .inside:before {
    content: '\f077';
}

.go-down .inside:before {
    content: '\f078';
}

/* Additional menus © max, the murderer! */

#pun-navlinks .container li {
    position: relative;
}

#pun-navlinks .container li ul {
    display: flex;
    flex-direction: column;
    gap: var(--4);
    position: absolute;
    padding: var(--8);
    left: 0;
    min-width: 100%;
    width: max-content;
    background: rgb(var(--dark900c));
    box-sizing: border-box;
    transform: scaleY(0);
    border-radius: 0 0 1rem 1rem;
}

#pun-navlinks .container li:hover ul {
    transform: scaleY(1);
}

#pun-navlinks .container li ul li {
    display: block;
}

#pun-navlinks .container li ul li a {
    background: rgb(var(--light100c) / .12);
    border-radius: 0.8rem;
    display: block;
    text-align: left;
    font-size: 1rem;
    font-family: inherit;
    text-transform: none;
    padding: var(--8) var(--12);
    margin: 0;
}

#pun-navlinks .container li ul li a:hover {
    background: rgb(var(--primary400));
    color: rgb(var(--light100));
}

#pun-navlinks .container li ul ul {
    border-radius: 0 1rem 1rem 0;
    position: absolute;
    width: max-content;
    left: 100%;
    top: 0;
    transform: scaleX(0) !important;
}

#pun-navlinks .container li ul li.forms:hover ul {
    transform: scaleX(1) !important;
}

/* Menu on scroll */

#pun-navlinks.scrolled {
    border-radius: 0;
    margin: 0 calc(var(--32) * -1) var(--16);
}

/* Header table */

#header_table {
    background: var(--header-bg);
    border-radius: 2rem;
    height: 256px;
    margin-bottom: var(--8);
}

/* Announcements
------------------------------------------------------------------ */

#announcements {
    display: flex;
    position: relative;
    justify-content: center;
}

#announcements .inner {
    display: flex;
    overflow: auto hidden;
    gap: var(--8);
    padding-bottom: var(--8);
}

#announcements .inner::-webkit-scrollbar {
    height: 2px;
}

.announcement {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--6);
    box-sizing: border-box;
    background: rgb(var(--secondary400) / .2);
    border-radius: 1rem;
    overflow: hidden;
    flex-shrink: 0;
    color: rgb(var(--text900));
}

.announcement .column {
    overflow: hidden;
    padding: 0 var(--4);
}

.announcement em {
    font: 700 1rem/120% var(--font);
    text-transform: uppercase;
    display: block;
    height: 1lh;
    max-width: 15ch;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.announcement span {
    font: 400 0.9rem/120% var(--font);
    height: 1lh;
    max-width: 25ch;
    text-transform: lowercase;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.announcement .date {
    margin-right: var(--4);
    font: 800 1rem/120% var(--font);
    background: rgb(var(--primary400));
    color: rgb(var(--light100));
    padding: var(--6) var(--8);
    box-sizing: border-box;
    height: 100%;
    border-radius: 0.8rem;
}

.announcement:hover {
    cursor: pointer;
}

.announcement:hover {
    color: rgb(var(--light100));
    background: rgb(var(--primary400));
}

.announcement:hover .date {
    background: rgb(var(--light100));
    color: rgb(var(--text900));
}

Подпись автора

серра блэкфайр вдова иллирио мопатиса, мать эйгона блэкфайра

джон сноу бастард рейгара и лианны, воспитанник эртура дейна, рыцарь