/* ============================================================
   NEXODYNE DESIGN SYSTEM — nx.css
   Component styles built atop colors_and_type.css.
   Period-correct: square corners, table layouts, GIF bars.
   ============================================================ */

@import url("colors_and_type.css");

/* ---------- PAGE FRAME ---------- */

html, body { background: var(--nx-black) url("assets/images/bg.gif"); }

.nx-rail-table { border-collapse: collapse; width: 100%; }
.nx-rail-table td.nx-rail-l,
.nx-rail-table td.nx-rail-r {
  padding: 0;
  width: 104px;
  vertical-align: top;
}
.nx-rail-table td.nx-rail-l { background-image: url("assets/images/bar_l_bg.gif"); }
.nx-rail-table td.nx-rail-r { background-image: url("assets/images/bar_r_bg.gif"); }
.nx-rail-cap-l { display: block; }
.nx-rail-cap-r { display: block; }

.nx-wrapper { background-color: var(--nx-panel); text-align: left; width: 100%; padding: 0; margin: 0; }
.nx-wrapper2 { text-align: left; margin: 0 auto; width: 98%; }
.nx-wrapper3 { background-color: var(--nx-page-bg); text-align: left; margin: 10px auto; width: 100%; }
.nx-wrapper4 { text-align: left; margin: 0 auto; width: 98%; padding-bottom: 12px; }

/* The 6px corner caps for #vbwrapper3 */
.nx-bordertop { width: 100%; height: 6px; overflow: hidden; }
.nx-bordertop-l { float: left; }
.nx-bordertop-r { float: right; }
.nx-borderbottom { background-color: var(--nx-page-bg); width: 100%; height: 6px; overflow: hidden; clear: both; }

/* ---------- LOGOSTRIP (header) ---------- */

.nx-logostrip {
  background: var(--nx-bar-bg) url("assets/images/logostrip_bg.gif") repeat-x;
  padding: 0; margin: 0;
  height: 106px; width: 100%;
  display: flex; justify-content: space-between; align-items: stretch;
  overflow: hidden;
}
.nx-logostrip img { display: block; }

/* ---------- SUBMENU (top nav image buttons) ---------- */

.nx-submenu {
  background-image: url("assets/images/submenu_bg.gif");
  height: 25px;
  text-align: center;
  white-space: nowrap;
  font-size: 0; /* kill inline-gap */
}
.nx-submenu img { vertical-align: top; }
.nx-submenu a { display: inline-block; line-height: 0; }
.nx-submenu a img.nx-hover-on { display: none; }
.nx-submenu a:hover img.nx-hover-off { display: none; }
.nx-submenu a:hover img.nx-hover-on { display: inline-block; }

/* ---------- BREADCRUMB / TOPBOX ---------- */

.nx-topbox-table { border-collapse: collapse; width: 100%; }
.nx-topbox-l { padding: 0; width: 43px; }
.nx-topbox-r { padding: 0; width: 43px; }
.nx-topbox-mid {
  background-image: url("assets/images/topbox_bg.gif");
  padding: 0; vertical-align: top;
}
.nx-breadcrumb { font-size: 10pt; padding: 6px; color: var(--nx-fg); }
.nx-breadcrumb img { vertical-align: middle; margin-right: 2px; }
.nx-breadcrumb strong { color: var(--nx-fg-bright); }

/* ---------- TABLE TYPOGRAPHY (tborder / tcat / thead / alt) ---------- */

.tborder {
  background-color: var(--nx-tborder);
  color: var(--nx-fg);
  padding: 0; margin: 0;
  border-collapse: separate;
  border-spacing: var(--nx-cellspacing);
  width: 100%;
}
.tborder > tbody > tr > td { padding: var(--nx-cellpadding); }

.tcat {
  background: #000 url("assets/images/cat_top_bg.gif") repeat-x;
  color: var(--nx-tcat-text);
  font: var(--nx-font-bold);
  /* The cat_top_bg gif is 31px tall — match the cell to it and vertically center the text */
  height: 31px;
  line-height: 19px;
  vertical-align: middle;
}
.tborder > tbody > tr > td.tcat { padding-top: 0; padding-bottom: 0; }
.tcat, .tcat a, .tcat a:link, .tcat a:visited { color: #000; text-decoration: none; }
.tcat a:hover, .tcat a:active { color: #000; text-decoration: underline; }

.thead {
  background: #000 url("assets/images/tile_sub.gif") repeat-x;
  color: var(--nx-fg);
  font: var(--nx-font-thead);
  height: 18px;
  padding: 4px;
}
.thead a { color: var(--nx-fg); }
.thead a:hover { color: var(--nx-fg-hover); }

.tfoot {
  background-color: var(--nx-tfoot);
  color: var(--nx-fg);
  border-bottom: var(--nx-border-tfoot);
}

.alt1, .alt1Active, .alt2, .alt2Active { background-color: var(--nx-panel); color: var(--nx-fg); }

/* ---------- BUTTONS / INPUTS ---------- */

.button, button.nx-btn, input.nx-btn, .nx-btn {
  font: var(--nx-font-body);
  background: linear-gradient(#3a3f41, #25292a);
  color: var(--nx-fg);
  border: 2px outset;
  padding: 1px 8px;
  cursor: pointer;
}
.nx-btn:hover { color: var(--nx-fg-hover); }
.nx-btn:active { border-style: inset; }

textarea, .bginput, input.bginput, select.bginput {
  background-color: var(--nx-black);
  color: var(--nx-fg);
  font: var(--nx-font-body);
  border: var(--nx-border-input);
  padding: 1px 2px;
  border-radius: 0;
}

select {
  background-color: var(--nx-black);
  color: var(--nx-fg);
  font: var(--nx-font-body);
  border: 1px solid var(--nx-fg);
  border-radius: 0;
}

/* ---------- PANELS ---------- */

.panel {
  background-color: var(--nx-panel);
  color: var(--nx-fg);
  padding: 10px;
  border: 2px outset;
}
.panelsurround { background-color: var(--nx-panel); color: var(--nx-fg); }
legend {
  color: var(--nx-fg);
  font: var(--nx-font-bold);
  font-family: var(--nx-font-family-tahoma);
}

/* ---------- VBMENU ---------- */

.vbmenu_control {
  background-color: transparent;
  color: var(--nx-fg);
  font: var(--nx-font-bold);
  font-family: var(--nx-font-family-tahoma);
  padding: 3px 6px;
  white-space: nowrap;
}
.vbmenu_popup { background-color: var(--nx-panel); color: var(--nx-fg); }
.vbmenu_option {
  background-color: var(--nx-panel); color: var(--nx-fg);
  font: var(--nx-font-body);
  white-space: nowrap; cursor: pointer; padding: 4px 8px;
}
.vbmenu_hilite {
  background-color: var(--nx-fg); color: var(--nx-fg-inverse);
  font: var(--nx-font-body);
  white-space: nowrap; cursor: pointer; padding: 4px 8px;
}

/* ---------- FOOTER ---------- */

.nx-footer {
  background-image: url("assets/images/footer_bg.gif");
  background-repeat: repeat-x;
  height: 36px;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  font: var(--nx-font-body);
  color: var(--nx-fg);
}

/* ---------- POSTBIT (thread post block) ---------- */

.nx-postbit { width: 100%; border-collapse: separate; border-spacing: 1px; background: var(--nx-tborder); }
.nx-postbit > tbody > tr > td { padding: var(--nx-cellpadding); }
.nx-postbit-user {
  width: 175px; background: var(--nx-panel); color: var(--nx-fg);
  vertical-align: top; padding: 8px;
}
.nx-postbit-user .nx-username { font-size: 14pt; font-weight: bold; color: var(--nx-fg-bright); display: block; margin-bottom: 2px; }
.nx-postbit-user .nx-usertitle { font-style: italic; font-size: 10px; color: var(--nx-fg); margin-bottom: 6px; }
.nx-postbit-user .nx-avatar { width: 100px; height: 100px; background: #000; border: 1px solid var(--nx-fg); display: block; margin: 6px 0; }
.nx-postbit-user .nx-userstats { font-size: 10px; color: var(--nx-fg); line-height: 1.4; }

.nx-postbit-body { background: var(--nx-panel); color: var(--nx-fg); vertical-align: top; padding: 8px 10px; }
.nx-postbit-body .nx-postdate { font-size: 10px; color: var(--nx-fg-muted); margin-bottom: 6px; }
.nx-postbit-body .nx-posttext { font: var(--nx-font-body); line-height: 1.45; }
.nx-postbit-body .nx-sig { border-top: 1px solid var(--nx-tfoot-rule); margin-top: 14px; padding-top: 6px; color: var(--nx-fg-muted); font-size: 10px; }

/* ---------- INLINE COLOUR ACCENTS (period-correct user "shouting") ---------- */
.nx-c-deepskyblue { color: var(--nx-accent-deepskyblue); }
.nx-c-yellow      { color: var(--nx-accent-yellow); }
.nx-c-red         { color: var(--nx-accent-red); }
.nx-c-magenta     { color: var(--nx-accent-magenta); }
.nx-c-blue        { color: var(--nx-accent-blue); }

/* ---------- LITTLE BITS ---------- */
.nx-chev::before { content: "» "; }
.nx-section-title { font: var(--nx-font-body); font-weight: bold; }

img.inlineimg { vertical-align: middle; }
img { border: 0; }

/* ---------- MOBILE (progressive collapse below 720px) ---------- */
@media (max-width: 720px) {
  /* Last-resort safety net so nothing makes the page horizontally scrollable */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* Drop the 104px gutter rail GIFs */
  .nx-rail-table td.nx-rail-l,
  .nx-rail-table td.nx-rail-r { display: none; }
  .nx-rail-table { table-layout: fixed; }

  /* Full-bleed the inner wrappers */
  .nx-wrapper2,
  .nx-wrapper3,
  .nx-wrapper4 { width: 100%; max-width: 100%; box-sizing: border-box; }

  /* Logostrip: let it shrink with the viewport */
  .nx-logostrip { height: auto; }
  .nx-logostrip img { max-width: 50%; height: auto; }

  /* Submenu: horizontal scroll instead of clipping the 8 image buttons */
  .nx-submenu { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Collapse the main 3-column content table into a stack, featured first */
  table.page { table-layout: fixed; max-width: 100%; }
  table.page > tbody,
  table.page > tbody > tr { display: flex; flex-direction: column; width: 100%; }
  table.page > tbody > tr > td.sidebar-l { order: 2; width: 100% !important; max-width: 100%; box-sizing: border-box; }
  table.page > tbody > tr > td.featured  { order: 1; width: 100% !important; max-width: 100%; box-sizing: border-box; }
  table.page > tbody > tr > td.sidebar-r { order: 3; width: 100% !important; max-width: 100%; box-sizing: border-box; }
  table.page > tbody > tr > td.gutter    { display: none; }

  /* Force every inner table (stickies, sidebar blocks, mini-cal, latest topics)
     to respect the column width and break long unbreakable strings (URLs, etc.) */
  td.featured table,
  td.sidebar-l table,
  td.sidebar-r table { table-layout: fixed; width: 100% !important; max-width: 100%; }
  td.featured td,
  td.sidebar-l td,
  td.sidebar-r td {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Marquees in "Latest Forum Topics" — keep them contained */
  td.sidebar-r marquee { display: block; width: 100%; max-width: 100%; }

  /* Tighten misc fixed widths */
  .tborder { width: 100% !important; max-width: 100%; }
  .timebar { width: 100% !important; max-width: 100%; }
}