:root {
    --vb-blue-dark:  #2E4A6B;
    --vb-blue-mid:   #4A6A8A;
    --vb-blue-light: #6E8FAD;
    --vb-blue-pale:  #DCE6F0;
    --vb-blue-pale2: #EEF3F8;
    --vb-border:     #A5B8CC;
    --vb-text:       #1A1A1A;
    --vb-text-muted: #555555;
    --vb-link:       #003366;
    --vb-link-hover: #CC0000;
    --vb-white:      #FFFFFF;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: var(--vb-text);
    background: var(--vb-blue-pale2);
}

body { padding: 8px; }

a {
    color: var(--vb-link);
    text-decoration: none;
}
a:hover {
    color: var(--vb-link-hover);
    text-decoration: underline;
}

table.tborder {
    background: var(--vb-white);
    border-collapse: separate;
    border-spacing: 1px;
    border: 1px solid var(--vb-border);
    width: 100%;
    margin-bottom: 8px;
}

table.tborder td {
    padding: 6px;
    vertical-align: top;
}

.tcat, .thead {
    background: var(--vb-blue-dark);
    color: var(--vb-white);
    font-weight: bold;
    font-size: 11px;
    padding: 6px 8px;
    border: 1px solid var(--vb-blue-dark);
}
.thead a, .tcat a { color: var(--vb-white); }

.tfoot {
    background: var(--vb-blue-pale);
    color: var(--vb-text-muted);
    border: 1px solid var(--vb-border);
    text-align: center;
    padding: 4px;
}

.alt1 { background: var(--vb-white); }
.alt2 { background: var(--vb-blue-pale); }

td.alt2[width="175"] {
    background: var(--vb-blue-pale);
    border-right: 1px solid var(--vb-border);
    width: 175px;
}

.bigusername {
    font-size: 14px;
    font-weight: bold;
    color: var(--vb-blue-dark);
}
.bigusername:hover { color: var(--vb-link-hover); }

.smallfont {
    font-size: 10px;
    color: var(--vb-text-muted);
    line-height: 1.4;
}

div[id^="post_message_"] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--vb-text);
}

div[style*="margin:20px"] {
    margin: 8px 0 !important;
    padding: 0;
}
div[style*="margin:20px"] table {
    background: var(--vb-blue-pale2);
    border: 1px solid var(--vb-border);
}
div[style*="margin:20px"] td.alt2 {
    background: var(--vb-blue-pale2);
    font-style: italic;
    color: var(--vb-text-muted);
}
div[style*="margin:20px"] .smallfont {
    color: var(--vb-blue-dark);
    font-weight: bold;
}

div[id^="post_message_"] ~ div {
    border-top: 1px solid var(--vb-border);
    padding-top: 6px;
    margin-top: 8px;
    font-size: 10px;
    color: var(--vb-text-muted);
}

hr {
    border: 0;
    border-top: 1px solid var(--vb-border);
    height: 1px;
    margin: 4px 0;
}

img[src*="buttons/"] {
    display: inline-block;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
}

a[href*="newreply"]::after,
a[href*="newpm"]::after {
    display: inline-block;
    padding: 2px 8px;
    background: var(--vb-blue-mid);
    color: var(--vb-white);
    border: 1px solid var(--vb-blue-dark);
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    vertical-align: middle;
}
a[href*="newreply"]::after { content: "Reply With Quote"; }
a[href*="newpm"]::after   { content: "Send PM"; }

a[href*="newreply"]:hover::after,
a[href*="newpm"]:hover::after {
    background: var(--vb-blue-dark);
}

img[src*="statusicon/post_old"],
img[src*="statusicon/user_offline"],
img[src*="statusicon/user_online"] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0;
    vertical-align: middle;
}
img[src*="statusicon/post_old"]      { background: #C8C8C8; }
img[src*="statusicon/user_offline"]  { background: #9AA7B3; }
img[src*="statusicon/user_online"]   { background: #4CAF50; }

img[src*="smilies/"] {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: var(--vb-blue-pale);
    border: 1px solid var(--vb-border);
    border-radius: 3px;
    vertical-align: middle;
}

img[src*="im_icq"] {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #6AA84F;
    border-radius: 3px;
    vertical-align: middle;
}

.vbmenu_popup { display: none !important; }

form { margin: 0; }

input.button,
#close_button {
    padding: 3px 10px;
    background: var(--vb-blue-mid);
    color: var(--vb-white);
    border: 1px solid var(--vb-blue-dark);
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
}
input.button:hover,
#close_button:hover { background: var(--vb-blue-dark); }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--vb-blue-pale); }
::-webkit-scrollbar-thumb { background: var(--vb-blue-mid); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--vb-blue-dark); }


/* ---------- Layout ---------- */
.body_wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 8px;
}

/* ---------- Header ---------- */
#header {
    background: var(--vb-blue-dark);
    padding: 10px 12px;
    border-bottom: 2px solid var(--vb-blue-light);
    color: var(--vb-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
#header a { color: var(--vb-white); }
.logo-image img {
    max-height: 48px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}
#toplinks ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 11px;
}
#toplinks li { display: inline-block; }

/* Форма логина в шапке */
#navbar_loginform .logindetails { display: inline-block; }
#navbar_loginform .textbox {
    padding: 3px 6px;
    border: 1px solid var(--vb-blue-light);
    border-radius: 3px;
    font-size: 11px;
    margin-right: 4px;
    background: var(--vb-white);
    color: var(--vb-text);
}
#navbar_loginform .loginbutton {
    padding: 4px 10px;
    background: var(--vb-blue-mid);
    color: var(--vb-white);
    border: 1px solid var(--vb-blue-dark);
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}
#navbar_loginform .loginbutton:hover { background: var(--vb-blue-light); }
#remember { display: inline-block; margin-left: 8px; font-size: 10px; color: var(--vb-white); }

/* ---------- Navbar ---------- */
.navbar {
    background: var(--vb-blue-mid);
    border-bottom: 1px solid var(--vb-blue-dark);
    padding: 0;
    margin-bottom: 10px;
}
.navtabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.navtabs > li {
    position: relative;
}
.navtabs > li > a.navtab,
.navtabs > li > a {
    display: inline-block;
    padding: 8px 14px;
    color: var(--vb-white);
    font-weight: bold;
    font-size: 11px;
    text-decoration: none;
    border-right: 1px solid var(--vb-blue-dark);
}
.navtabs > li > a:hover {
    background: var(--vb-blue-dark);
    color: var(--vb-white);
    text-decoration: none;
}
.navtabs > li.selected > a {
    background: var(--vb-blue-pale2);
    color: var(--vb-blue-dark);
}

/* Подменю */
.navtabs ul.floatcontainer {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--vb-blue-dark);
    border: 1px solid var(--vb-blue-light);
    min-width: 180px;
    z-index: 100;
}
.navtabs > li:hover > ul.floatcontainer,
.navtabs > li:hover > ul.popupbody {
    display: block;
}
.navtabs ul.floatcontainer li,
.navtabs ul.popupbody li {
    display: block;
    padding: 0;
}
.navtabs ul.floatcontainer li a,
.navtabs ul.popupbody li a {
    display: block;
    padding: 6px 12px;
    color: var(--vb-white);
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
}
.navtabs ul.floatcontainer li a:hover,
.navtabs ul.popupbody li a:hover {
    background: var(--vb-blue-mid);
}

/* Поиск */
.globalsearch {
    padding: 6px 12px;
    background: var(--vb-blue-dark);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.navbar_search { display: flex; gap: 4px; align-items: center; }
.navbar_search .textbox {
    padding: 3px 8px;
    border: 1px solid var(--vb-blue-light);
    border-radius: 3px;
    font-size: 11px;
    width: 220px;
    background: var(--vb-white);
}
.navbar_search .searchbutton {
    padding: 3px 8px;
    background: var(--vb-blue-mid);
    color: var(--vb-white);
    border: 1px solid var(--vb-blue-dark);
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
}
.navbar_advanced_search { list-style: none; margin: 0; padding: 0; }
.navbar_advanced_search li a { color: var(--vb-blue-pale2); font-size: 10px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
    background: var(--vb-blue-pale);
    border: 1px solid var(--vb-border);
    padding: 6px 10px;
    margin-bottom: 10px;
    font-size: 11px;
}
.breadcrumb ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; align-items: center; }
.breadcrumb li { display: inline-block; }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--vb-text-muted); }
.breadcrumb .navbit span { color: var(--vb-text-muted); }
.breadcrumb hr { display: none; }

/* ---------- Notices ---------- */
.notices ol { margin: 0; padding-left: 20px; }
.notices li {
    background: var(--vb-blue-pale);
    border-left: 3px solid var(--vb-blue-mid);
    padding: 6px 10px;
    margin-bottom: 4px;
    font-size: 11px;
    list-style: none;
}

/* ---------- Page title ---------- */
#pagetitle {
    padding: 8px 0;
    border-bottom: 2px solid var(--vb-blue-mid);
    margin-bottom: 10px;
}
#pagetitle h1 {
    margin: 0;
    font-size: 18px;
    color: var(--vb-blue-dark);
    font-weight: bold;
}
#pagetitle .description {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--vb-text-muted);
}

/* ---------- Forums list ---------- */
ol#forums {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Категория */
li[id^="cat"] {
    margin-bottom: 14px;
}
.forumhead {
    background: var(--vb-blue-dark);
    color: var(--vb-white);
    padding: 6px 10px;
    border: 1px solid var(--vb-blue-dark);
}
.forumhead h2 {
    margin: 0;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.forumhead .forumtitle a { color: var(--vb-white); }
.forumhead .forumlastpost {
    font-size: 10px;
    font-weight: normal;
    color: var(--vb-blue-pale2);
    min-width: 90px;
    text-align: right;
}
.forumhead .collapse img { vertical-align: middle; margin-left: 6px; }

/* Форум-строка */
li[id^="forum"] {
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--vb-border);
    border-right: 1px solid var(--vb-border);
    border-bottom: 1px solid var(--vb-border);
    background: var(--vb-white);
}
li[id^="forum"]:nth-child(even) {
    background: var(--vb-blue-pale2);
}
.forumrow.table {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.forumrow.table > .td {
    display: table-cell;
    vertical-align: top;
    padding: 8px;
}
.forumrow .foruminfo {
    width: auto;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.forumicon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.forumdata .titleline {
    margin-bottom: 2px;
}
.forumtitle {
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    display: inline;
}
.forumtitle a {
    color: var(--vb-link);
    text-decoration: none;
}
.forumtitle a:hover {
    color: var(--vb-link-hover);
    text-decoration: underline;
}
.viewing {
    font-size: 10px;
    color: var(--vb-text-muted);
    margin-left: 6px;
}
.forumdescription {
    font-size: 11px;
    color: var(--vb-text-muted);
    margin: 2px 0 0;
    line-height: 1.4;
}
.forumstats {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 10px;
    color: var(--vb-text-muted);
    width: 100px;
    text-align: right;
}
.forumstats li { line-height: 1.5; }
.forumlastpost {
    width: 220px;
    font-size: 10px;
    color: var(--vb-text-muted);
    text-align: right;
}
.forumlastpost .lastposttitle {
    margin: 0;
    font-size: 11px;
}
.forumlastpost .lastposttitle a.threadtitle {
    font-weight: bold;
    color: var(--vb-link);
}
.lastpostby { margin: 2px 0; }
.lastpostby a.username { color: var(--vb-text); }
.lastpostdate { margin: 0; color: var(--vb-text-muted); }

/* Метки */
.nocss_label { display: none; }
.forumactionlinks { display: none; }

/* ---------- navlinks ---------- */
.navlinks {
    padding: 6px 10px;
    background: var(--vb-blue-pale);
    border: 1px solid var(--vb-border);
    text-align: right;
    font-size: 10px;
    margin-bottom: 10px;
}
.navlinks a { color: var(--vb-link); }

/* ---------- What's going on ---------- */
.wgo_block {
    background: var(--vb-white);
    border: 1px solid var(--vb-border);
    margin-bottom: 10px;
}
.blockhead {
    background: var(--vb-blue-mid);
    color: var(--vb-white);
    padding: 6px 10px;
    margin: 0;
    font-size: 13px;
}
.wgo_subblock {
    padding: 10px;
    border-bottom: 1px solid var(--vb-border);
}
.wgo_subblock:last-child { border-bottom: 0; }
.blocksubhead {
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--vb-blue-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}
#wgo_stats dl {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0 0 6px;
    font-size: 11px;
}
#wgo_stats dt { font-weight: bold; color: var(--vb-blue-dark); }
#wgo_stats dd { margin: 0 0 0 4px; }
.icon_legends {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    margin: 0;
    font-size: 10px;
}
.icon_legends dt { margin: 0; }
.icon_legends dd { margin: 0; }

/* ---------- Footer ---------- */
.footer {
    background: var(--vb-blue-dark);
    color: var(--vb-white);
    padding: 10px 12px;
    margin-top: 14px;
    font-size: 11px;
}
.footer a { color: var(--vb-blue-pale2); }
.footer_links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.below_body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px;
    font-size: 10px;
    color: var(--vb-text-muted);
    text-align: center;
}
.below_body a { color: var(--vb-link); }


.body_wrapper center,
.body_wrapper > div > center {
    margin: 8px 0;
}


.forumicon[src*="-48"] { width: 32px; height: 32px; }
.icon_legends img { width: 16px; height: 16px; vertical-align: middle; }
#wgo_legend img { width: 16px; height: 16px; }


@media (max-width: 800px) {
    .forumrow.table { display: block; }
    .forumrow.table > .td { display: block; width: auto !important; }
    .forumlastpost { text-align: left; }
    .forumstats { text-align: left; width: auto; }
    #toplinks ul { flex-wrap: wrap; gap: 6px; }
}


.tcat .post-title {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    display: inline-block;
    line-height: 1.2;
}
.tcat a {
    text-decoration: none;
    color: #FFFFFF;
}
.tcat a:hover {
    text-decoration: underline;
}