/* ==========================================================================
GXA — global.css
MyBB 1.8.40 · replaces the stock Default theme stylesheet
Mobile-first. No fixed widths. No sprite icons.
--------------------------------------------------------------------------
STRUCTURE
1. Tokens
2. Reset & base
3. Shell
4. Header — logo, menus, panel, search
5. Tables — forum furniture
6. Forum status indicators
7. Navigation & text helpers
8. Forms & buttons
9. Posts
10. Quotes, code, editor
11. Popups & pagination
12. Alerts & messages
13. Reputation
14. Polls, attachments, legends
15. Footer
16. Utilities
17. Modal / jGrowl / Impromptu
18. DVZ Shoutbox
19. RESPONSIVE ← all mobile rules live here, nowhere else
========================================================================== */
/* ==========================================================================
1. TOKENS
========================================================================== */
:root {
--ink: #0C0A09;
--charcoal: #16120F;
--raised: #1E1917;
--raised-alt: #221C19;
--cream: #EDE6D8;
--cream-dim: rgba(237, 230, 216, 0.62);
--cream-faint:rgba(237, 230, 216, 0.38);
--rule: rgba(237, 230, 216, 0.13);
--rule-strong:rgba(237, 230, 216, 0.28);
--gold: #C9922E;
--gold-deep: #8A6116;
--red: #B23A2B;
--red-deep: #7E2317;
--display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
--body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
--shell: 1180px;
/* Sampled from the GXA logo — used for the posting button hierarchy */
--logo-red: #C4342B;
--logo-red-dk: #9B2820;
--logo-orange: #E8791C;
--logo-amber: #EF9A1E;
}
/* ==========================================================================
2. RESET & BASE
========================================================================== */
* { box-sizing: border-box; }
body {
background: var(--ink);
color: var(--cream);
margin: 0;
font-family: var(--body);
font-size: 16px;
line-height: 1.6;
text-align: left;
-webkit-text-size-adjust: 100%;
}
img { border: none; max-width: 100%; height: auto; }
a:link,
a:visited {
color: var(--cream);
text-decoration: none;
border-bottom: 1px solid var(--rule-strong);
}
a:hover,
a:active {
color: var(--gold);
border-bottom-color: var(--gold);
text-decoration: none;
}
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
h1, h2, h3, h4 {
font-family: var(--display);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.15;
margin: 0 0 0.5em;
}
hr {
border: 0;
height: 1px;
background: var(--rule);
margin: 24px 0;
}
/* ==========================================================================
3. SHELL
========================================================================== */
#container {
background: var(--ink);
color: var(--cream);
font-family: var(--body);
font-size: 16px;
line-height: 1.6;
margin: 0;
min-width: 0;
width: 100%;
overflow-x: hidden;
}
.wrapper {
width: 100%;
min-width: 0;
max-width: var(--shell);
margin: 0 auto;
padding: 0 18px;
}
#header { min-height: 0; }
#content {
background: transparent;
width: auto !important;
padding: 28px 0 48px;
overflow: visible;
}
/* ==========================================================================
4. HEADER — logo, menus, panel, search
========================================================================== */
#logo {
background: var(--ink);
border-bottom: 1px solid var(--rule);
padding: 18px 0;
}
#logo .wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
}
#logo img {
width: 190px;
max-width: 60vw;
height: auto;
display: block;
}
#logo a { border-bottom: 0; }
#header ul.menu,
#footer ul.menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
}
#header ul.menu li,
#footer ul.menu li {
margin: 0;
display: block;
}
/* Kill the stock sprite icons — they were built for a light theme */
#header ul.menu li a,
#panel a,
#footer a {
background-image: none !important;
padding-left: 0;
}
#logo ul.top_links {
font-weight: 500;
text-align: right;
margin: 0;
}
#logo ul.top_links a {
display: inline-block;
padding: 10px 12px;
font-size: 14px;
letter-spacing: 0.02em;
border-bottom: 0;
color: var(--cream-dim);
line-height: 1.2;
}
#logo ul.top_links a:hover {
color: var(--gold);
}
/* ---------- Guest / member panel ---------------------------------------- */
#panel .upper {
background: var(--charcoal);
color: var(--cream);
border-top: 0;
border-bottom: 1px solid var(--rule);
padding: 14px 0;
clear: both;
}
#panel .upper .wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
}
#panel .upper a:link,
#panel .upper a:visited {
color: var(--cream);
font-weight: 500;
border-bottom: 0;
}
#panel .upper a:hover { color: var(--gold); }
#panel .upper a.register,
#panel .upper a.login {
display: inline-block;
padding: 9px 16px;
margin-left: 8px;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
font-family: var(--display);
}
#panel .upper a.register {
background: var(--red);
color: #F6EEE2;
}
#panel .upper a.register:hover {
background: var(--red-deep);
color: #F6EEE2;
}
#panel .upper a.login {
border: 1px solid var(--rule-strong);
color: var(--cream);
}
#panel .upper a.login:hover {
border-color: var(--gold);
color: var(--gold);
}
#panel .upper .welcome {
font-size: 15px;
line-height: 1.5;
}
#panel .upper .welcome strong {
font-family: var(--display);
font-weight: 400;
display: block;
font-size: 17px;
letter-spacing: -0.01em;
}
/* FIXED: was #0c0a09 — near-black text on the charcoal panel, effectively
invisible. Almost certainly a typo for the dim cream. */
#panel .upper .welcome_sub {
color: var(--cream-dim);
font-size: 14px;
}
#panel .upper .guest_actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
#panel .lower {
background: var(--charcoal);
color: var(--cream-dim);
border-bottom: 1px solid var(--rule);
padding: 10px 0;
font-size: 14px;
}
#panel .lower .wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px;
}
#panel .lower a:link,
#panel .lower a:visited {
color: var(--cream-dim);
border-bottom: 0;
padding: 6px 10px 6px 0;
display: inline-block;
}
#panel .lower a:hover { color: var(--gold); }
#panel .lower ul.panel_links,
#panel .lower ul.user_links {
float: none;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0 10px;
}
/* ---------- Search ------------------------------------------------------ */
#search {
border: 0;
padding: 0;
margin: 0;
float: none;
display: flex;
gap: 6px;
align-items: center;
}
#search input.textbox {
min-width: 160px;
}
#quick_login .remember_me input {
vertical-align: middle;
margin: 0 6px 0 4px;
}
/* ==========================================================================
5. TABLES — the core forum furniture
========================================================================== */
table {
color: var(--cream);
font-size: 15px;
border-collapse: collapse;
width: 100%;
}
.tborder {
background: transparent;
width: 100%;
margin: 0 0 26px;
border: 1px solid var(--rule);
padding: 0;
border-radius: 2px;
overflow: hidden;
}
.tfixed {
table-layout: fixed;
word-wrap: break-word;
}
/* Section header — the loudest thing on the page, on purpose */
.thead {
background: var(--ink);
color: var(--cream);
border-bottom: 2px solid var(--gold);
padding: 14px 16px;
font-family: var(--display);
font-size: 15px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.thead a:link,
.thead a:visited {
color: var(--cream);
border-bottom: 0;
}
.thead a:hover,
.thead a:active {
color: var(--gold);
}
.tcat {
background: #2c2c2c;
color: var(--cream-dim);
border-top: 0;
border-bottom: 1px solid var(--rule);
padding: 10px 16px;
font-size: 13px;
letter-spacing: 0.04em;
}
.tcat a:link,
.tcat a:visited { color: var(--cream-dim); border-bottom: 0; }
.tcat a:hover,
.tcat a:active { color: var(--gold); }
.trow1,
.trow2 {
background: var(--charcoal);
border: 0;
border-bottom: 1px solid var(--rule);
padding: 16px;
vertical-align: top;
}
.trow2 { background: var(--raised); }
.trow_shaded {
background: rgba(178, 58, 43, 0.14);
border-bottom: 1px solid rgba(178, 58, 43, 0.4);
padding: 16px;
}
.no_bottom_border { border-bottom: 0; }
.trow_sep {
background: var(--ink);
color: var(--cream-dim);
border-bottom: 1px solid var(--rule);
padding: 10px 16px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.trow_selected,
tr.trow_selected td {
background: rgba(201, 146, 46, 0.15);
color: var(--cream);
border-bottom-color: var(--gold-deep);
}
.trow_selected a:link,
.trow_selected a:visited,
.trow_selected a:hover,
.trow_selected a:active { color: var(--cream); }
.trow_deleted,
.post.deleted_post { background: rgba(126, 35, 23, 0.2); }
.thread_start_datetime { color: var(--cream-faint); }
.tfoot {
border-top: 1px solid var(--rule);
padding: 12px 16px;
background: var(--ink);
color: var(--cream-dim);
font-size: 14px;
}
.tfoot a:link,
.tfoot a:visited { color: var(--cream-dim); border-bottom: 0; }
.tfoot a:hover,
.tfoot a:active { color: var(--gold); }
.bottommenu {
background: var(--charcoal);
color: var(--cream);
border: 1px solid var(--rule);
padding: 14px 16px;
border-radius: 2px;
}
/* ==========================================================================
6. FORUM STATUS INDICATORS (sprites replaced with dots)
========================================================================== */
.forum_status {
height: 14px;
width: 14px;
background-image: none !important;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
border: 2px solid var(--cream-faint);
}
.forum_on {
background: var(--gold);
border-color: var(--gold);
}
.forum_off,
.forum_offclose,
.forum_offlink {
background: transparent;
border-color: var(--cream-faint);
}
.subforumicon {
height: 7px;
width: 7px;
display: inline-block;
margin: 0 6px;
background-image: none !important;
border-radius: 50%;
background-color: var(--cream-faint);
vertical-align: middle;
}
.subforum_minion { background-color: var(--gold); }
/* Collapse arrows and jump icons are dark PNGs — flip them for the dark UI */
.expcolimage,
.quick_jump {
filter: invert(1);
opacity: 0.55;
}
.expcolimage {
float: right;
width: auto;
vertical-align: middle;
margin-top: 3px;
}
.tcat_menu > .expcolimage { margin-top: 0; }
.quick_jump {
background: none;
width: 14px;
height: 14px;
padding-left: 14px;
margin-top: -3px;
border: none;
}
/* ==========================================================================
7. NAVIGATION & TEXT HELPERS
========================================================================== */
.navigation {
color: var(--cream-dim);
font-size: 14px;
margin-bottom: 18px;
}
.navigation a:link,
.navigation a:visited {
border-bottom: 0;
color: var(--cream-dim);
}
.navigation a:hover,
.navigation a:active { color: var(--gold); }
.navigation .active {
color: var(--cream);
font-size: inherit;
font-weight: 500;
}
.smalltext { font-size: 13px; color: var(--cream-dim); }
.largetext {
font-family: var(--display);
font-size: 22px;
font-weight: 400;
letter-spacing: -0.01em;
}
.online { color: var(--gold); }
.offline { color: var(--cream-faint); }
/* ==========================================================================
8. FORMS & BUTTONS
========================================================================== */
fieldset {
padding: 16px;
border: 1px solid var(--rule);
margin: 0 0 16px;
border-radius: 2px;
}
fieldset.trow1,
fieldset.trow2 { border-color: var(--rule); }
fieldset.align_right { text-align: right; }
legend {
font-family: var(--display);
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0 8px;
color: var(--cream-dim);
}
input.textbox,
textarea,
select {
background: var(--ink);
color: var(--cream);
border: 1px solid var(--rule-strong);
padding: 11px 12px;
outline: 0;
font-size: 16px;
font-family: var(--body);
border-radius: 2px;
max-width: 100%;
}
textarea { line-height: 1.6; }
input.textbox:focus,
textarea:focus,
select:focus {
border-color: var(--gold);
box-shadow: 0 0 0 2px rgba(201, 146, 46, 0.25);
}
input.textbox.portal_search { width: 100%; }
button,
input.button {
padding: 11px 20px;
cursor: pointer;
font-family: var(--display);
font-size: 14px;
letter-spacing: 0.05em;
text-transform: uppercase;
background: var(--red);
border: 1px solid var(--red);
color: #F6EEE2;
outline: 0;
border-radius: 2px;
min-height: 44px;
}
button:hover,
input.button:hover {
background: var(--red-deep);
border-color: var(--red-deep);
}
form { margin: 0; padding: 0; }
form #message { width: 100%; }
input.error, textarea.error, select.error {
border: 1px solid var(--red);
color: var(--cream);
}
input.valid, textarea.valid, select.valid { border: 1px solid var(--gold); }
label.error {
color: #E8836F;
margin: 6px 0;
padding: 0;
display: block;
font-weight: 500;
font-size: 13px;
}
.posticons_label { white-space: nowrap; }
/* ---------- Buttons (link-styled) --------------------------------------- */
a.button:link,
a.button:hover,
a.button:visited,
a.button:active {
background: var(--charcoal);
color: var(--cream);
display: inline-block;
padding: 11px 18px;
margin: 2px 4px 8px 0;
border: 1px solid var(--rule-strong);
border-radius: 2px;
font-family: var(--display);
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
min-height: 44px;
line-height: 22px;
}
a.button:hover {
border-color: var(--gold);
color: var(--gold);
}
a.button.new_thread_button,
a.button.new_reply_button {
background: var(--red);
border-color: var(--red);
color: #F6EEE2;
}
a.button.new_thread_button:hover,
a.button.new_reply_button:hover {
background: var(--red-deep);
border-color: var(--red-deep);
color: #F6EEE2;
}
a.button.small_button {
font-size: 12px;
margin: 0;
padding: 8px 12px;
min-height: 0;
line-height: 18px;
}
a.button span {
padding-left: 0;
display: inline;
background-image: none !important;
}
/* ---------- Posting button hierarchy ------------------------------------
Three identical red slabs give no signal about which one submits.
Red = submit, orange outline = preview, quiet outline = draft.
------------------------------------------------------------------------ */
input[name="submit"],
input.button.submit_button,
#content form input.button:first-of-type {
background: var(--logo-red) !important;
border-color: var(--logo-red) !important;
color: #F6EEE2 !important;
}
input[name="submit"]:hover,
input.button.submit_button:hover {
background: var(--logo-red-dk) !important;
border-color: var(--logo-red-dk) !important;
}
input[name="previewpost"] {
background: transparent !important;
border: 1px solid var(--logo-orange) !important;
color: var(--logo-amber) !important;
}
input[name="previewpost"]:hover {
background: rgba(232, 121, 28, 0.14) !important;
color: #F6EEE2 !important;
}
input[name="savedraft"] {
background: transparent !important;
border: 1px solid var(--rule-strong) !important;
color: var(--cream-dim) !important;
}
input[name="savedraft"]:hover {
border-color: var(--cream) !important;
color: var(--cream) !important;
}
/* ==========================================================================
9. POSTS
========================================================================== */
#posts_container { padding: 0; }
.post { overflow: hidden; }
.post.classic { padding-top: 0; }
.post .post_author {
border-bottom: 1px solid var(--rule);
border-top: 0;
background: var(--ink);
padding: 12px 16px;
overflow: hidden;
}
.post.classic .post_author {
border: 0;
border-right: 1px solid var(--rule);
float: left;
width: 20%;
margin: 0;
padding: 18px 16px;
background: var(--ink);
}
.post .post_author .buddy_status {
vertical-align: middle;
margin-top: -4px;
}
.post .post_author div.author_avatar { float: left; margin-right: 10px; }
.post.classic .post_author div.author_avatar {
float: none;
text-align: center;
margin: 0 0 10px;
}
.post .post_author div.author_avatar img {
padding: 0;
border: 1px solid var(--rule);
background: var(--charcoal);
border-radius: 2px;
}
.post .post_author div.author_information { float: left; padding: 2px 0; }
.post.classic .post_author div.author_information {
float: none;
padding: 0;
text-align: center;
}
.post .post_author div.author_statistics {
float: right;
font-size: 12px;
padding: 2px 0;
color: var(--cream-faint);
line-height: 1.5;
}
.post.classic .post_author div.author_statistics {
border-top: 1px solid var(--rule);
margin: 12px 0 0;
padding: 12px 0 0;
float: none;
text-align: center;
}
.post .post_head {
font-size: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--rule);
margin-bottom: 12px;
color: var(--cream-faint);
}
.post .post_head span.post_date { color: var(--cream-faint); }
.post .post_head span.edited_post {
font-size: 11px;
color: var(--cream-faint);
}
.post .post_head span.edited_post a { color: var(--cream-dim); }
.post_body {
font-size: 16px;
line-height: 1.7;
padding: 4px 0 12px;
max-width: 72ch;
}
.post.classic .post_content {
float: left;
width: 80%;
padding: 18px 20px;
}
.post_content {
padding: 16px;
background: var(--charcoal);
}
.post_content .signature {
margin-top: 16px;
border-top: 1px solid var(--rule);
padding: 12px 0 0;
font-size: 14px;
color: var(--cream-dim);
}
.post .post_meta {
margin: 6px 0;
font-size: 12px;
color: var(--cream-faint);
}
.post .post_meta a:link,
.post .post_meta a:visited,
.post .post_meta a:hover,
.post .post_meta a:active { color: var(--cream-dim); }
.post_controls {
clear: both;
background: var(--ink);
border-bottom: 1px solid var(--rule);
padding: 10px 16px;
overflow: hidden;
}
.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
display: inline-block;
padding: 8px 12px;
margin: 3px 4px 3px 0;
font-size: 12px;
letter-spacing: 0.03em;
background: transparent;
border: 1px solid var(--rule);
border-radius: 2px;
color: var(--cream-dim);
}
.postbit_buttons > a:hover {
border-color: var(--gold);
color: var(--gold);
}
.postbit_buttons a span {
padding-left: 0;
display: inline;
height: auto;
background-image: none !important;
}
.post:not(.deleted_post) .postbit_qrestore,
.post:not(.deleted_post) .status_type,
.post.deleted_post .postbit_mirage { display: none; }
.post.unapproved_post { background: rgba(178, 58, 43, 0.12); }
.post.unapproved_post .post_author { border-bottom-color: rgba(178, 58, 43, 0.4); }
.post.classic.unapproved_post .post_author { border-color: rgba(178, 58, 43, 0.4); }
.post.unapproved_post .post_controls { border-top-color: rgba(178, 58, 43, 0.4); }
.ignored_post,
.deleted_post_collapsed {
border-top: 2px solid var(--rule-strong);
padding: 16px;
}
.deleted_post_hidden {
border-top: 1px solid var(--rule);
padding: 16px;
}
.ignored_post .show_ignored_post,
.deleted_post_collapsed .show_deleted_post { margin-top: -8px; }
/* ==========================================================================
10. QUOTES, CODE, EDITOR
========================================================================== */
blockquote {
border: 0;
border-left: 3px solid var(--gold-deep);
margin: 14px 0;
background: var(--ink);
padding: 14px 16px;
border-radius: 0;
}
blockquote cite {
font-weight: 500;
border-bottom: 1px solid var(--rule);
font-style: normal;
display: block;
padding-bottom: 8px;
margin: 0 0 12px;
color: var(--gold);
}
blockquote cite > span {
float: right;
font-weight: 400;
font-size: 12px;
color: var(--cream-faint);
}
blockquote cite span.highlight {
float: none;
font-weight: 500;
padding-bottom: 0;
}
.codeblock {
background: var(--ink);
border: 1px solid var(--rule);
padding: 14px 16px;
border-radius: 2px;
margin: 14px 0;
}
.codeblock .title {
border-bottom: 1px solid var(--rule);
font-weight: 500;
padding-bottom: 8px;
margin: 0 0 12px;
color: var(--cream-dim);
font-size: 13px;
}
.codeblock code {
overflow: auto;
height: auto;
max-height: 320px;
display: block;
font-family: 'SF Mono', Consolas, Menlo, monospace;
font-size: 14px;
white-space: pre;
tab-size: 4;
color: var(--cream);
}
.editor {
background: var(--charcoal);
border: 1px solid var(--rule-strong);
}
.editor_control_bar {
background: var(--ink);
border: 1px solid var(--rule);
}
.post .editor_control_bar { background: var(--ink); }
/* ==========================================================================
11. POPUPS & PAGINATION
========================================================================== */
.popup_menu {
background: var(--raised);
border: 1px solid var(--rule-strong);
border-radius: 2px;
}
.popup_menu .popup_item_container { margin: 0; text-align: left; }
.popup_menu .popup_item {
background: transparent;
color: var(--cream);
display: block;
padding: 10px 14px;
white-space: nowrap;
text-decoration: none;
border-bottom: 0;
}
.popup_menu .popup_item:hover {
background: var(--gold);
color: var(--ink);
}
.popup_menu a.popup_item:hover { text-decoration: none; }
.pagination {
font-size: 14px;
padding-top: 12px;
margin-bottom: 8px;
}
.tfoot .pagination,
.tcat .pagination { padding-top: 0; }
.pagination .pages { font-weight: 500; color: var(--cream-dim); }
.pagination .pagination_current,
.pagination a {
padding: 9px 13px;
margin: 0 3px 4px 0;
display: inline-block;
border-radius: 2px;
}
.pagination a {
background: var(--charcoal);
border: 1px solid var(--rule);
color: var(--cream-dim);
}
.pagination .pagination_current {
background: var(--gold);
color: var(--ink);
border: 1px solid var(--gold);
font-weight: 500;
}
.pagination a:hover {
background: var(--raised);
color: var(--gold);
border-color: var(--gold);
text-decoration: none;
}
.pagination .go_page img { margin-bottom: -4px; }
.drop_go_page { background: var(--raised); padding: 8px; }
.pagination_breadcrumb {
background: var(--charcoal);
border: 1px solid var(--rule);
outline: 0;
padding: 8px 12px;
margin-top: 6px;
font-weight: 400;
}
.pagination_breadcrumb_link { vertical-align: middle; cursor: pointer; }
/* ==========================================================================
12. ALERTS & MESSAGES
========================================================================== */
div.error {
padding: 14px 16px;
border: 0;
border-left: 3px solid var(--gold);
background: rgba(201, 146, 46, 0.12);
font-size: 15px;
border-radius: 0;
}
div.error p { margin: 0; color: var(--cream); font-weight: 400; }
div.error p em {
font-style: normal;
font-weight: 500;
padding-left: 0;
display: block;
color: var(--gold);
background: none;
margin-bottom: 6px;
}
div.error ul { margin-left: 20px; }
.pm_alert {
background: rgba(201, 146, 46, 0.12);
border: 0;
border-left: 3px solid var(--gold);
color: var(--cream);
text-align: left;
padding: 14px 16px;
margin-bottom: 20px;
font-size: 15px;
border-radius: 0;
}
.red_alert {
background: rgba(178, 58, 43, 0.14);
border: 0;
border-left: 3px solid var(--red);
color: var(--cream);
text-align: left;
padding: 14px 16px;
margin-bottom: 20px;
font-size: 15px;
word-wrap: break-word;
border-radius: 0;
}
.red_alert a:link,
.red_alert a:visited,
.red_alert a:hover,
.red_alert a:active { color: var(--gold); }
.success_message {
color: var(--gold);
font-weight: 500;
font-size: 14px;
margin-bottom: 12px;
}
.error_message {
color: #E8836F;
font-weight: 500;
font-size: 14px;
margin-bottom: 12px;
}
.high_warning,
.high_banned { color: #E8836F; }
.moderate_warning,
.moderate_banned { color: #D9903F; }
.low_warning,
.low_banned { color: var(--gold); }
.imminent_banned { color: var(--red); }
.selectall {
background: rgba(201, 146, 46, 0.15);
border-bottom: 1px solid var(--gold-deep);
color: var(--cream);
text-align: center;
padding: 8px;
}
.highlight {
background: rgba(201, 146, 46, 0.28);
color: var(--cream);
padding: 2px 3px;
}
/* ==========================================================================
13. REPUTATION
========================================================================== */
.trow_reputation_positive { background: rgba(140, 180, 90, 0.14); }
.trow_reputation_negative { background: rgba(178, 58, 43, 0.14); }
.reputation_positive { color: #9CC46A; }
.reputation_neutral { color: var(--cream-dim); }
.reputation_negative { color: #E8836F; }
.repbox {
font-family: var(--display);
font-size: 18px;
padding: 8px 12px;
border-radius: 2px;
}
._neutral { background: var(--charcoal); color: var(--cream-dim); border: 1px solid var(--rule); }
._minus { background: rgba(178, 58, 43, 0.2); color: #E8836F; border: 1px solid var(--red-deep); }
._plus { background: rgba(140, 180, 90, 0.18); color: #9CC46A; border: 1px solid #5A7A32; }
/* ==========================================================================
14. POLLS, ATTACHMENTS, LEGENDS
Legends are hidden on mobile (see section 19) — these rules are desktop only.
========================================================================== */
.pollbar {
background: var(--gold);
background-image: none;
border: 0;
height: 10px;
border-radius: 2px;
}
.pollbar .percent { display: none; }
.poll_votedfor {
background: var(--raised);
border: 1px solid var(--gold-deep);
}
img.attachment {
border: 1px solid var(--rule);
padding: 3px;
background: var(--ink);
}
.thread_legend,
.thread_legend dd { margin: 0; padding: 0; }
.thread_legend dd {
padding-bottom: 6px;
margin-right: 18px;
color: var(--cream-dim);
font-size: 13px;
}
.thread_legend img { margin-right: 6px; vertical-align: bottom; }
.forum_legend,
.forum_legend dt,
.forum_legend dd { margin: 0; padding: 0; }
.forum_legend dd {
float: left;
margin-right: 14px;
margin-top: 8px;
color: var(--cream-dim);
font-size: 13px;
}
.forum_legend dt { margin-right: 14px; float: left; margin-top: 8px; }
.subject_new { font-weight: 600; }
.smilie { vertical-align: middle; }
.smilie_pointer { cursor: pointer; }
.separator {
margin: 6px;
padding: 0;
height: 0;
font-size: 1px;
list-style-type: none;
}
.scaleimages img { max-width: 100%; }
/* ==========================================================================
15. FOOTER
========================================================================== */
#footer {
clear: both;
border-top: 1px solid var(--rule);
background: var(--charcoal);
}
#footer .upper {
background: transparent;
border: 0;
border-bottom: 1px solid var(--rule);
padding: 16px 0;
font-size: 14px;
overflow: hidden;
}
#footer .upper .wrapper,
#footer .lower .wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#footer a:link,
#footer a:visited {
color: var(--cream-dim);
border-bottom: 0;
}
#footer a:hover,
#footer a:active { color: var(--gold); }
#footer .upper .language,
#footer .upper .theme { float: none; margin: 0; }
#footer .upper .language select,
#footer .upper .theme select {
border-color: var(--rule-strong);
padding: 8px 10px;
font-size: 14px;
}
#footer .upper ul.bottom_links { float: none; margin: 0; }
#footer .upper ul.bottom_links a { padding: 8px 10px 8px 0; display: inline-block; }
#footer .lower {
color: var(--cream-faint);
padding: 16px 0 28px;
overflow: hidden;
font-size: 13px;
background: var(--ink);
}
#footer .lower a:link,
#footer .lower a:visited { color: var(--cream-dim); font-weight: 500; }
#footer .lower a:hover,
#footer .lower a:active { color: var(--gold); }
#footer .lower #current_time { float: none; color: var(--cream-faint); }
#debug {
float: none;
text-align: left;
margin-top: 16px;
font-size: 12px;
color: var(--cream-faint);
}
/* ==========================================================================
16. UTILITIES
========================================================================== */
.clear { clear: both; }
.float_left { float: left; }
.float_right { float: right; }
.hidden { display: none; float: none; width: 1%; }
.hiddenrow { display: none; }
/* ==========================================================================
17. MODAL / jGROWL / IMPROMPTU
========================================================================== */
.blocker {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 9999;
padding: 20px;
background-color: rgba(0, 0, 0, 0.82);
text-align: center;
}
.blocker:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.05em;
}
.blocker.behind { background-color: transparent; }
.modal {
width: 420px;
max-width: 92%;
text-align: left;
background: var(--raised);
color: var(--cream);
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 2;
border: 1px solid var(--rule-strong);
border-radius: 3px;
box-shadow: none;
padding: 4px;
}
.modal a.close-modal {
position: absolute;
top: -12px;
right: -12px;
display: block;
width: 30px;
height: 30px;
text-indent: -9999px;
background: url(../../../images/close.png) no-repeat 0 0;
filter: invert(1);
z-index: 2;
border-bottom: 0;
}
.modal-spinner {
display: none;
width: 64px;
height: 64px;
position: fixed;
top: 50%;
left: 50%;
margin: -32px 0 0 -32px;
background: url(../../../images/spinner_big.gif) no-repeat center center;
}
.jGrowl {
z-index: 9999;
color: var(--cream);
font-size: 14px;
font-family: var(--body);
position: fixed;
}
.jGrowl.top-left { left: 0; top: 0; }
.jGrowl.top-right { right: 0; top: 0; }
.jGrowl.bottom-left { left: 0; bottom: 0; }
.jGrowl.bottom-right { right: 0; bottom: 0; }
.jGrowl.center { top: 0; width: 50%; left: 25%; }
.jGrowl.center .jGrowl-notification,
.jGrowl.center .jGrowl-closer { margin-left: auto; margin-right: auto; }
.jGrowl-notification {
background-color: var(--raised);
opacity: 0.97;
width: 260px;
padding: 14px;
margin: 12px;
text-align: left;
display: none;
border-radius: 2px;
border: 1px solid var(--rule-strong);
word-break: break-word;
}
.jGrowl .jGrowl-notification { min-height: 40px; }
.jGrowl-notification .jGrowl-header {
font-family: var(--display);
font-size: 13px;
letter-spacing: 0.04em;
}
.jGrowl-notification .jGrowl-close {
background-color: transparent;
color: inherit;
border: none;
z-index: 99;
float: right;
font-weight: 500;
font-size: 16px;
cursor: pointer;
min-height: 0;
padding: 0 4px;
}
.jGrowl-closer {
background-color: var(--ink);
color: var(--cream);
width: 260px;
padding: 8px 14px;
margin: 12px;
display: none;
border-radius: 2px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
text-align: center;
border: 1px solid var(--rule-strong);
}
.jGrowl .jGrowl-notification.jgrowl_success {
background: rgba(140, 180, 90, 0.2);
border-color: #5A7A32;
color: var(--cream);
}
.jGrowl .jGrowl-notification.jgrowl_error {
background: rgba(178, 58, 43, 0.2);
border-color: var(--red);
color: var(--cream);
}
.jGrowl .jGrowl-notification.jgrowl_process,
.jGrowl .jGrowl-closer {
background: rgba(201, 146, 46, 0.18);
border-color: var(--gold-deep);
color: var(--cream);
}
@media print {
.jGrowl { display: none; }
}
.jqifade { position: absolute; background-color: #000; }
iframe.jqifade { display: block; z-index: -1; }
div.jqi {
width: 420px;
max-width: 92%;
font-family: var(--body);
position: absolute;
background-color: var(--raised);
color: var(--cream);
font-size: 14px;
text-align: left;
border: 1px solid var(--rule-strong);
border-radius: 3px;
padding: 8px;
}
div.jqi .jqiclose {
position: absolute;
top: 6px; right: 2px;
width: 20px;
cursor: pointer;
color: var(--cream-faint);
font-weight: 500;
}
div.jqi .jqistate { background-color: var(--raised); }
div.jqi .jqititle {
padding: 10px 12px;
font-family: var(--display);
font-size: 16px;
line-height: 1.3;
border-bottom: 1px solid var(--rule);
}
div.jqi .jqimessage {
padding: 14px 12px;
line-height: 1.6;
color: var(--cream);
overflow: auto;
}
div.jqi .jqibuttonshide { display: none; }
div.jqi .jqibuttons {
text-align: right;
margin: 0 -8px -8px -8px;
border-top: 1px solid var(--rule);
background-color: var(--ink);
border-radius: 0 0 3px 3px;
}
div.jqi .jqibuttons button {
margin: 0;
padding: 14px 20px;
background-color: transparent;
border: none;
border-left: 1px solid var(--rule);
color: var(--cream-dim);
font-family: var(--display);
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
min-height: 44px;
}
div.jqi .jqibuttons button.jqidefaultbutton { color: var(--gold); }
div.jqi .jqibuttons button:hover,
div.jqi .jqibuttons button:focus {
color: var(--gold);
background: transparent;
outline: none;
}
div.jqi .jqibuttons button[disabled] { color: var(--cream-faint); }
.jqiwarning .jqi .jqibuttons { background-color: var(--red-deep); }
div.jqi .jqiparentstate::after {
background-color: #000;
opacity: 0.6;
content: '';
position: absolute;
inset: 0;
border-radius: 3px;
}
div.jqi .jqisubstate {
position: absolute;
top: 0;
left: 20%;
width: 60%;
padding: 8px;
border: 1px solid var(--rule-strong);
border-top: none;
border-radius: 0 0 3px 3px;
}
div.jqi .jqisubstate .jqibuttons button { padding: 12px 18px; }
.jqi .jqiarrow { position: absolute; height: 0; width: 0; line-height: 0; font-size: 0; border: solid 10px transparent; }
.jqi .jqiarrowtl { left: 10px; top: -20px; border-bottom-color: var(--raised); }
.jqi .jqiarrowtc { left: 50%; top: -20px; border-bottom-color: var(--raised); margin-left: -10px; }
.jqi .jqiarrowtr { right: 10px; top: -20px; border-bottom-color: var(--raised); }
.jqi .jqiarrowbl { left: 10px; bottom: -20px; border-top-color: var(--raised); }
.jqi .jqiarrowbc { left: 50%; bottom: -20px; border-top-color: var(--raised); margin-left: -10px; }
.jqi .jqiarrowbr { right: 10px; bottom: -20px; border-top-color: var(--raised); }
.jqi .jqiarrowlt { left: -20px; top: 10px; border-right-color: var(--raised); }
.jqi .jqiarrowlm { left: -20px; top: 50%; border-right-color: var(--raised); margin-top: -10px; }
.jqi .jqiarrowlb { left: -20px; bottom: 10px; border-right-color: var(--raised); }
.jqi .jqiarrowrt { right: -20px; top: 10px; border-left-color: var(--raised); }
.jqi .jqiarrowrm { right: -20px; top: 50%; border-left-color: var(--raised); margin-top: -10px; }
.jqi .jqiarrowrb { right: -20px; bottom: 10px; border-left-color: var(--raised); }
/* ==========================================================================
18. DVZ SHOUTBOX
Note: .entry rows are DIVs using display:table-row, not real table markup.
Mobile table rules that target tr/td therefore never touch this.
========================================================================== */
#shoutbox {
margin-bottom: 26px;
border: 1px solid var(--rule);
padding: 0;
background-color: var(--charcoal);
border-radius: 2px;
overflow: hidden;
}
#shoutbox .head {
padding: 12px 16px;
font-family: var(--display);
font-size: 14px;
letter-spacing: 0.05em;
text-transform: uppercase;
background: var(--ink);
border-bottom: 2px solid var(--gold);
}
#shoutbox.front .head { cursor: pointer; }
#shoutbox .head .right { float: right; margin: 0; font-size: 13px; text-transform: none; letter-spacing: 0; }
#shoutbox .head .right a { padding: 0 0 0 10px; }
#shoutbox.collapsed .head { opacity: 0.6; }
#shoutbox.collapsed .body { display: none; }
#shoutbox .panel { border-top: 1px solid var(--rule); }
#shoutbox input.text {
margin: 0;
padding: 14px 16px;
width: 100%;
box-sizing: border-box;
border: none;
background: var(--ink);
font-family: var(--body);
font-size: 16px;
color: var(--cream);
}
#shoutbox .minposts,
#shoutbox .blocked { padding: 10px 16px; font-size: 13px; }
#shoutbox .panel.minposts { background: rgba(201, 146, 46, 0.12); color: var(--gold); }
#shoutbox .panel.blocked { background: rgba(178, 58, 43, 0.14); color: #E8836F; }
#shoutbox .panel p { margin: 0; }
#shoutbox .window { border-top: 1px solid var(--rule); overflow-y: auto; }
#shoutbox .data {
display: table;
width: 100%;
border-top: 1px solid var(--rule);
font-family: var(--body);
font-size: 14px;
}
#shoutbox.front .data { border-top: none; }
#shoutbox .entry { display: table-row !important; width: 100%; }
#shoutbox .entry:nth-child(even) { background-color: var(--raised); }
#shoutbox .entry.new { background-color: rgba(201, 146, 46, 0.1); }
#shoutbox .entry:target { background-color: rgba(201, 146, 46, 0.16); }
#shoutbox .entry > div { border-bottom: 1px solid var(--rule); display: table-cell; padding: 10px 12px; }
#shoutbox .entry:last-child > div { border-bottom: none; }
#shoutbox .avatar { height: 24px; }
#shoutbox .avatar img {
margin: 0 auto;
vertical-align: middle;
max-height: 22px;
max-width: 22px;
border: 1px solid var(--rule);
cursor: pointer;
}
#shoutbox .user {
border-right: 1px solid var(--rule);
text-align: right;
white-space: nowrap;
}
#shoutbox .text { width: 100%; color: var(--cream); word-wrap: break-word; }
#shoutbox .info {
font-size: 12px;
color: var(--cream-faint);
white-space: nowrap;
text-align: right;
}
#shoutbox .entry.unread .info:before {
display: inline-block;
margin-right: 10px;
height: 5px;
width: 5px;
content: '';
background: var(--gold);
border-radius: 10px;
vertical-align: middle;
}
#shoutbox .info a { color: inherit; }
#shoutbox .mod {
padding: 6px 8px;
font-size: 11px;
font-weight: 500;
color: var(--cream-faint);
text-decoration: none;
}
#shoutbox .mod:nth-of-type(2) { margin-right: 6px; border-left: 1px solid var(--rule); }
#shoutbox .ip { margin-right: 10px; color: var(--cream-faint); }
/* ==========================================================================
19. RESPONSIVE
--------------------------------------------------------------------------
Every mobile rule in this theme lives below this line, in ONE block per
breakpoint. If you need to change mobile behaviour, change it here — do not
append a new @media block to the end of the file. That is how this
stylesheet ended up with five blocks fighting each other.
SCOPING NOTE, important:
The forum index, thread lists, search results and PM folders are all
.tborder tables. Any portal rule written as a DESCENDANT of a generic
table selector will reach them and unstack every forum on the site.
This has happened three times.
The Portal's outer layout table has no class and is NOT inside #content
(see the portal template: it sits between {$header} and {$footer}).
It is identified only by the hard-coded width="200" on its sidebar cell:
#container table:has(> tbody > tr > td[width="200"])
Never use #content table:not(.tborder):has(.tborder) — that selector
matches forum tables, not the portal.
========================================================================== */
/* ---------- Drawer navigation: hidden at desktop widths ----------------- */
#gxa-nav-toggle,
#gxa-drawer,
#gxa-scrim { display: none; }
@media (max-width: 900px) {
/* ------------------------------------------------------------------
19.1 Shell & header
------------------------------------------------------------------ */
.wrapper { padding: 0 14px; }
#logo { padding: 14px 0; }
/* Logo left, hamburger right */
#logo .wrapper {
justify-content: space-between;
flex-wrap: nowrap;
}
#panel .upper .wrapper,
#footer .upper .wrapper,
#footer .lower .wrapper { justify-content: center; text-align: center; }
#panel .upper .welcome { text-align: center; }
#panel .upper .guest_actions { width: 100%; justify-content: center; }
#panel .upper .guest_actions a { flex: 1; text-align: center; }
#search { width: 100%; }
#search input.textbox { flex: 1; min-width: 0; }
/* ------------------------------------------------------------------
19.2 Drawer navigation
The links are CLONED into the drawer by the script in the footer
template; the originals are hidden here rather than moved.
------------------------------------------------------------------ */
#logo ul.top_links,
#panel .lower { display: none; }
#gxa-nav-toggle {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 46px;
height: 46px;
padding: 0 11px;
background: transparent;
border: 1px solid var(--rule-strong);
border-radius: 2px;
cursor: pointer;
min-height: 0;
}
#gxa-nav-toggle span {
display: block;
height: 2px;
width: 100%;
background: var(--cream);
transition: transform .2s ease, opacity .2s ease;
}
body.gxa-drawer-open #gxa-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.gxa-drawer-open #gxa-nav-toggle span:nth-child(2) { opacity: 0; }
body.gxa-drawer-open #gxa-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#gxa-scrim {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.72);
z-index: 9998;
}
#gxa-scrim[hidden] { display: none; }
#gxa-drawer {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
right: 0;
height: 100dvh;
width: min(86vw, 330px);
background: var(--charcoal);
border-left: 1px solid var(--rule);
transform: translateX(101%);
transition: transform .22s ease;
z-index: 9999;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
body.gxa-drawer-open #gxa-drawer { transform: translateX(0); }
body.gxa-drawer-open { overflow: hidden; }
.gxa-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px;
background: var(--ink);
border-bottom: 2px solid var(--gold);
position: sticky;
top: 0;
}
.gxa-drawer-user {
font-family: var(--display);
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--cream);
line-height: 1.3;
}
#gxa-drawer-close {
background: transparent;
border: 0;
color: var(--cream-dim);
font-size: 30px;
line-height: 1;
padding: 0 6px;
min-height: 44px;
min-width: 44px;
cursor: pointer;
}
#gxa-drawer-close:hover { color: var(--gold); }
.gxa-drawer-group { border-bottom: 1px solid var(--rule); }
.gxa-drawer-group:last-child { border-bottom: 0; }
.gxa-drawer-links a:link,
.gxa-drawer-links a:visited {
display: block;
padding: 15px 16px;
font-size: 16px;
color: var(--cream);
border-bottom: 1px solid var(--rule);
border-left: 3px solid transparent;
}
.gxa-drawer-group a:last-child { border-bottom: 0; }
.gxa-drawer-links a:hover,
.gxa-drawer-links a:active {
color: var(--gold);
border-left-color: var(--gold);
background: var(--raised);
}
/* ------------------------------------------------------------------
19.3 Forum tables — drop the trailing columns
Counting from the END, not the start. Counting from the start
deletes thread titles on any page with two icon columns
(thread lists, search results, PM folders).
The :has(td:nth-child(5)) guard means single-cell rows — category
bars, "no threads" notices, footers — are never touched.
------------------------------------------------------------------ */
.thead { padding: 12px 14px; font-size: 14px; }
.tcat { padding: 10px 14px; }
.trow1, .trow2, .trow_shaded { padding: 14px; }
.tborder tr:has(td:nth-child(5)) > td:nth-last-child(-n+2) { display: none; }
.tborder tr > td.tcat ~ td.tcat:nth-last-child(-n+2) { display: none; }
/* ------------------------------------------------------------------
19.4 Posts
------------------------------------------------------------------ */
.post.classic .post_author,
.post.classic .post_content {
float: none;
width: 100%;
border-right: 0;
}
.post.classic .post_author {
border-bottom: 1px solid var(--rule);
display: flex;
align-items: center;
gap: 12px;
text-align: left;
padding: 12px 14px;
}
.post.classic .post_author div.author_avatar { margin: 0; }
.post.classic .post_author div.author_avatar img { max-width: 44px; }
.post.classic .post_author div.author_information { text-align: left; }
.post.classic .post_author div.author_statistics {
border-top: 0;
margin: 0 0 0 auto;
padding: 0;
text-align: right;
}
.post_body { font-size: 16px; }
/* ------------------------------------------------------------------
19.5 Quick Reply
------------------------------------------------------------------ */
/* Label column above the box, not beside it */
#quick_reply_form .trow1,
#quick_reply_form .trow2,
#quick_reply_form td {
display: block;
width: 100% !important;
padding: 10px 14px !important;
}
#quick_reply_form textarea,
#quick_reply_form #message {
width: 100% !important;
min-height: 160px;
}
#quick_reply_form label,
.post_options label {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
font-weight: 400;
}
#quick_reply_form input[type="checkbox"] {
flex: 0 0 auto;
margin: 0;
}
/* Stacked submit buttons. Block + bottom margin, NOT a flex parent —
the buttons sit in a container that varies by page, so styling the
buttons themselves is the only reliable approach. */
#quick_reply_form input.button,
#quick_reply_form button,
form[action*="newreply"] input.button,
form[name="input"] input.button {
display: block !important;
width: 100% !important;
margin: 0 0 10px !important;
float: none !important;
}
/* ------------------------------------------------------------------
19.6 Control forms — sort, search, inline moderation
The :not(:has(textarea)) guard keeps posting forms out of this.
------------------------------------------------------------------ */
#content form:not(:has(textarea)):has(select),
#content form:not(:has(textarea)):has(input.textbox) {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 10px !important;
}
#content form:not(:has(textarea)):has(select) select,
#content form:not(:has(textarea)):has(input.textbox) input.textbox {
flex: 1 1 120px;
min-width: 0;
width: auto;
}
#content form:not(:has(textarea)) input.button,
#content form:not(:has(textarea)) button {
flex: 0 0 auto;
width: auto !important;
min-width: 92px;
}
#content .float_right,
#content .float_left {
float: none !important;
width: 100%;
}
/* Stacked
between page sections only — NOT inside posts, where
they are the paragraph breaks. */
#content > .wrapper > br + br { display: none; }
/* ------------------------------------------------------------------
19.7 Portal
Two structures, do not confuse them:
- the OUTER layout table: no class, outside #content, sidebar cell
carries width="200"
- each announcement's INNER table: class="tfixed" inside a td.trow1
------------------------------------------------------------------ */
/* Stack the two columns */
#container > table:has(> tbody > tr > td[width="200"]),
#container > table:has(> tbody > tr > td[width="200"]) > tbody,
#container > table:has(> tbody > tr > td[width="200"]) > tbody > tr {
display: block !important;
width: 100% !important;
}
.portal_layout > tbody > tr > td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* The spacer cell between the columns
#container table:has(> tbody > tr > td[width="200"]) > tbody > tr > td:nth-child(2) {
display: none !important;
} */
/* Sidebar blocks kept the 200px context after stacking
#container td[width="200"] table.tborder,
#container td[width="200"] table.tborder > tbody,
#container td[width="200"] table.tborder > tbody > tr,
#container td[width="200"] table.tborder > tbody > tr > td {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
} */
/* Announcement body. The inner table is .tfixed, and the theme sets
table-layout: fixed — which splits the width 50/50 between the avatar
cell and the text cell. table-layout: auto is what undoes that. */
#content td.trow1 > table.tfixed,
#content td.trow1 > table.tfixed > tbody,
#content td.trow1 > table.tfixed > tbody > tr {
display: block !important;
width: 100% !important;
table-layout: auto !important;
}
#content td.trow1 > table.tfixed > tbody > tr > td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
text-align: left !important;
padding: 0 0 10px !important;
}
#content td.trow1 > table.tfixed img[src*="uploads/avatars"] {
display: block !important;
float: none !important;
max-width: 48px !important;
height: auto !important;
margin: 0 0 4px !important;
}
/* Smilies and the print/email icons stay inline */
#content img.smilie,
#content .smalltext img {
display: inline !important;
float: none !important;
margin: 0 3px !important;
max-width: none !important;
}
/* ------------------------------------------------------------------
19.7b Posting forms — new thread / new reply / edit
Two-column label|field tables. Stack them and stop the editor
overflowing.
------------------------------------------------------------------ */
#content form:has(textarea) table.tborder > tbody > tr > td.trow1,
#content form:has(textarea) table.tborder > tbody > tr > td.trow2 {
display: block !important;
width: 100% !important;
padding: 12px 14px !important;
}
#content form:has(textarea) td.trow1 > strong,
#content form:has(textarea) td.trow2 > strong {
display: block;
margin-bottom: 8px;
}
#content form:has(textarea) input.textbox,
#content form:has(textarea) textarea {
width: 100% !important;
}
/* SCEditor */
#content .sceditor-container {
width: 100% !important;
max-width: 100% !important;
}
#content .sceditor-container iframe,
#content .sceditor-container textarea {
width: 100% !important;
}
#content .sceditor-toolbar {
display: flex;
flex-wrap: wrap;
}
/* Post icon radio grid wraps instead of running off the right */
#content form:has(textarea) td:has(input[type="radio"]) {
display: flex !important;
flex-wrap: wrap;
gap: 6px 14px;
align-items: center;
}
/* Smilie picker: hidden on mobile. The editor's smilie button
(yellow face, second toolbar row) opens the same set.
NOTE: the :not(:has(textarea)) guard is load-bearing — without it
this selector matches the whole posting form and hides it. */
#content #smilieinsert,
#content form:has(textarea) .smilie_box,
#content form:has(textarea) table:has(img.smilie_pointer):not(:has(textarea)) {
display: none !important;
}
/* ------------------------------------------------------------------
19.8 Footer
------------------------------------------------------------------ */
#footer .upper ul.bottom_links,
#footer .upper .wrapper {
gap: 4px 18px;
justify-content: center;
}
#footer .upper ul.bottom_links a {
padding: 8px 0 !important;
}
/* ------------------------------------------------------------------
19.9 Hidden on mobile
Desktop keeps all of these; see section 14 for the legend styling.
------------------------------------------------------------------ */
/* Icon key — six labels nobody taps on a phone */
.thread_legend,
.forum_legend { display: none; }
/* Forum Jump — the drawer and breadcrumb already cover this */
#content form:has(select[name="fid"]) { display: none; }
}
@media (max-width: 560px) {
#logo img { width: 150px; }
/* One more column goes at this width */
.tborder tr:has(td:nth-child(5)) > td:nth-last-child(-n+3) { display: none; }
.tborder tr > td.tcat ~ td.tcat { display: none; }
a.button:link,
a.button:visited { width: 100%; text-align: center; margin-right: 0; }
#search { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
#gxa-drawer { transition: none; }
}
/* ==========================================================================
GXA — account pages, the chat gutter, and the collapse glyph
--------------------------------------------------------------------------
APPEND TO THE END OF global.css. Not the middle: it carries its own @media
block, and dropping that inside section 19's block breaks everything after
it.
Admin CP -> Templates & Style -> Themes -> your theme -> global.css
Scroll to the very bottom, paste, Save.
REPLACES every earlier version of this block. Delete whichever one you have.
The working menu toggles come from usercp-toggle.html, which goes in the
FOOTER template. This file on its own gives you the layout; the two go
together.
Tested at 390px against four page shapes, with the block on and off:
User CP home stacks (two columns -> one)
Edit Signature stacks (its layout table is wrapped in a