/* forum-archive.css — the only stylesheet written in 2026.
 *
 * Everything else on these pages comes from the forum's own files:
 * forum/style/styles.css and forum/sub.css, lifted from the 2013 backup. This
 * adds only what the 2011 forum had no reason to style — the read-only notice,
 * the marker standing in for photos the upload centre lost, and the request
 * form — plus two repairs for reading a fixed-width 2011 layout on a phone.
 */

/* the strip where DLE printed the login box */
.anj-note {
  font-size: 12px;
  line-height: 1.9;
  color: #444;
  text-align: right;
  direction: rtl;
}
.anj-note a { font-weight: bold; }

/* emoticons kept their own size in 2011; without this the page CSS stretches
   them to the width of the post */
img.anj-emo {
  display: inline-block;
  vertical-align: middle;
  max-height: 26px;
  width: auto;
  margin: 0 2px;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* a photo, or a run of them, that no longer exists anywhere */
.anj-gone {
  display: inline-block;
  margin: 4px 2px;
  padding: 6px 11px;
  background: repeating-linear-gradient(45deg, #eceae5, #eceae5 6px, #e4e2dc 6px, #e4e2dc 12px);
  border: 1px dashed #c3c0b8;
  color: #7d7a72;
  font-size: 12px;
  direction: rtl;
}
.anj-gone b { color: #a9a59b; font-weight: normal; }

/* DLE hid spoilers behind a javascript: link; <details> needs no script */
details.anj-spoiler {
  background: #f6f6f4;
  border: 1px solid #ddd;
  padding: 6px 10px;
  margin: 8px 0;
  direction: rtl;
  text-align: right;
}
details.anj-spoiler summary { cursor: pointer; color: #5a6b5d; font-size: 12px; }

/* the takedown request form and its answers */
.anj-form { direction: rtl; text-align: right; }
.anj-form label { display: block; margin-bottom: 10px; font-size: 12px; color: #666; }
.anj-form textarea,
.anj-form input[type=text] {
  display: block; width: 100%; margin-top: 4px; font: inherit;
  padding: 6px 8px; border: 1px solid #ccc; background: #fff; color: #333;
}
.anj-form button {
  font: inherit; padding: 6px 20px; cursor: pointer;
  border: 1px solid #5a6b5d; background: #5a6b5d; color: #fff;
}
.anj-form.anj-search { display: flex; gap: 6px; align-items: center; }
.anj-ok  { background: #eaf4e0; border: 1px solid #baccbe; padding: 9px 12px; margin-bottom: 10px; }
.anj-err { background: #fdecea; border: 1px solid #e0a5a0; padding: 9px 12px; margin-bottom: 10px; }

/* ── the phone ─────────────────────────────────────────────────────────────
   The 2012 chrome is a login bar, a masthead, a category strip and a footer,
   absolutely positioned inside a 990px frame. Folding it down to 390px failed
   three times — the page scaled to nothing, then went blank, then came back
   with the bars piled on each other — so below 761px it is not folded. It is
   hidden whole, boofboofi.min.css is never fetched (the @import in the head
   carries the media condition), and what stands in its place is a header of
   our own: the name, a hamburger, the breadcrumb.

   Restoration, in his words, and only where the building cannot be lived in.
   Above 761px none of this exists and the desktop page is the 2012 page. */

img { max-width: 100%; height: auto; }

/* nothing the phone needs is rendered above 761px */
.anj-burger, .anj-mnav, .anj-mcrumbline, .anj-burger-t { display: none; }

@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  body {
    -webkit-text-size-adjust: 100%;
    margin: 0; padding: 0; width: auto !important; min-width: 0 !important;
    background: #83d300 url(forum/images/forum_bg.png);
    font: 13px/1.9 Tahoma, Vazirmatn, "Segoe UI", Arial, sans-serif;
    color: #2c2c2c; direction: rtl;
  }

  /* every piece of 2012 chrome, gone rather than squeezed */
  /* The header stays. Only the menu bar folds into the hamburger, and only
     because ten items cannot sit across a phone. */
  #navBarBackgroundWrap, #navBar, #swapable, .mastheadAd,
  .dfp728x90, #catsMenu, .footer, #navigation, .forum_navigation,
  .loading-layer, .activeusers, .related,
  /* and the blocks the 2016 frame added, which say nothing an archive can
     keep: who was online that Sunday, the welcome card, the app badges, the
     new-address notice, the register banner, the search bar */
  .lastusersforum, .rlastuser, .noteforum, .newnote, .mbnote, .dlapps,
  .gsearchbar, .searchbar, .trendingNow, .onlinestat, .noteforuser,
  .loginbox, .radial, .cont_1, .cont_3, .listforum,
  #lastusersforum, #rlastuser, #noteforum, #newnote, #mbnote, #dlapps,
  #gsearchbar, #searchbar, #ijadetopic, #trendingNow, #onlinestat,
  /* the frame prints its own breadcrumb in a 550px box; ours replaces it */
  div[style*="width:550px"], div[style*="width: 550px"] { display: none !important; }

  #outerWrap, #innerWrap, #boofboofi, #dle-content, #content,
  #columnContainer, .mainContent, #forumposts, .forumContainer,
  /* the profile hangs inside a list the site sized for a sidebar */
  #contentListing, ul.list, ul.list > li {
    width: auto !important; max-width: 100% !important; min-width: 0 !important;
    float: none !important; overflow: visible !important;
    margin: 0 !important; padding: 0 !important; position: static !important;
  }

  /* ── the forum's own header, kept ───────────────────────────────────── */
  #masthead {
    display: block !important; width: auto !important; max-width: 100% !important;
    height: auto !important; padding: 6px 8px !important; overflow: hidden;
    position: static !important;
  }
  #masthead img { max-width: 100%; height: auto; }

  /* the hamburger floats over it, top left, where nothing else sits */
  .anj-burger {
    display: block; position: fixed; top: 8px; left: 8px; z-index: 30;
    width: 40px; padding: 8px 7px; cursor: pointer;
    background: rgba(63,106,9,.92); border-radius: 6px;
  }
  .anj-burger span {
    display: block; height: 3px; margin: 4px 0; background: #fff; border-radius: 2px;
  }
  .anj-mnav {
    display: none; background: #3f6a09; padding: 8px 12px 12px;
    position: fixed; top: 56px; left: 8px; right: 8px; z-index: 29;
    border-radius: 6px; max-height: 75vh; overflow-y: auto;
  }
  .anj-burger-t:checked ~ .anj-mnav { display: block; }
  .anj-mnav a {
    display: block; color: #fff; padding: 9px 2px; font-size: 14px;
    text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.15);
  }
  .anj-mnav a:last-of-type { border-bottom: 0; }
  /* an item whose destination closed with the forum */
  .anj-mnav .anj-mdead {
    display: block; padding: 9px 2px; font-size: 14px; color: #a9c98a;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .anj-mnav a font, .anj-mnav a span { color: inherit !important; font-size: inherit !important; }
  .anj-mnav img { display: none; }
  .anj-mcrumb { padding-top: 8px; font-size: 12px; color: #cfe6a8; }
  .anj-mcrumb a { display: inline; border: 0; padding: 0; color: #eaf7d4; }
  .anj-mcrumbline {
    display: block; padding: 7px 12px; font-size: 11.5px;
    background: rgba(255,255,255,.8); color: #1d3d08;
  }
  .anj-mcrumbline a { color: #14400a; }

  /* ── the thread ─────────────────────────────────────────────────────── */
  .topictitle h2 { font-size: 17px !important; margin: 12px 10px 2px; line-height: 1.6; }
  .topictitle h3, .topictitleicons, img.tnpic { display: none !important; }
  .topicdetails, .tags { font-size: 11px; color: #2f4a17; padding: 0 10px; }

  #forumposts { list-style: none; margin: 0; padding: 0; }
  .item {
    list-style: none; background: #fff; border: 1px solid #d8d8d8;
    border-radius: 6px; margin: 8px; padding: 9px; overflow: hidden;
  }
  .commentHeader { padding: 0 !important; }
  .avatars, .lcol {
    float: right !important; width: 54px !important;
    margin: 0 0 6px 9px !important; padding: 0 !important; text-align: center;
  }
  .avatars img { max-width: 50px !important; height: auto; border-radius: 4px; }
  .avatars .maxIcon, .avatars .emtiazAvatar, .rep { display: none !important; }

  .dcont, .rcol { margin: 0 !important; width: auto !important; overflow: hidden; }
  .dcont h1 { margin: 0 0 5px; font-size: 14px !important; font-weight: bold; color: #1c4b74; line-height: 1.6; }
  .dcont h1 label { display: block; font-size: 10px !important; color: #999; font-weight: normal; }
  .econt { margin: 0 !important; padding: 0 !important; background: none !important; }
  .posttext { font-size: 13px; line-height: 1.95; }

  .title_quote { background: #e9eef2; border: 1px solid #cfd8de; border-bottom: 0; padding: 4px 8px; font-size: 11px; }
  .quote { background: #f6f8f9; border: 1px solid #cfd8de; padding: 7px 9px; margin-bottom: 8px; font-size: 12px; }

  .comedit, .selectmass, .bluremza { font-size: 11px; }
  .anj-thx { font-size: 10px; padding: 5px 2px 0; color: #8a8a8a; }
  .anj-postfoot { text-align: left; padding: 4px 2px 0; font-size: 10px; }
  img.anj-emo { max-height: 22px; }
  .anj-gone { font-size: 11px; padding: 4px 8px; }
  .anj-more { padding: 12px; font-size: 12px; text-align: center; color: #1d3d08; }

  /* ── a board list, a profile ─────────────────────────────────────────── */
  .borderwrap { background: #fff; margin: 8px; border-radius: 6px; overflow-x: auto; }
  .maintitle { font-size: 14px; padding: 8px 10px; }
  table { max-width: 100% !important; }
  td, th { word-break: break-word; font-size: 12px; }

  /* The profile is a two-column table with a 210px avatar cell. Left as a
     table on a phone the other column collapses to the width of one letter
     and the Persian runs down the screen a character at a time. It stacks. */
  #contentListing, ul.list { list-style: none !important; }
  .stcenter, .stcenter tbody, .stcenter tr, .stcenter td,
  .stcenter + table, #contentListing table, #contentListing tbody,
  #contentListing tr, #contentListing td {
    display: block !important; width: auto !important; max-width: 100% !important;
  }
  .stcenter td { padding: 8px 10px !important; text-align: right !important; }
  .stcenter td[width="210"] { text-align: center !important; }
  fieldset { margin: 8px 0; padding: 8px 10px; min-width: 0; }
  fieldset legend { font-size: 12px; }
  .anj-prow { font-size: 12.5px; line-height: 1.9; }
  #boardsin > div, #categorys_forums { width: auto !important; max-width: 100% !important; }
  /* the board list is a ul of rows, not a table; it only needs room */
  .radifeasli, .radifeasli span { display: block; width: auto !important; }
  .radifeasli .akharint { display: none; }
  .radifeasli { padding: 8px 10px; }
  .radifeasli .title h3 { font-size: 14px; margin: 0; }
  .radifeasli .akharint, .radifeasli .topipost { font-size: 11px; }
  fieldset { margin: 8px; }
}

/* the line that replaces the post's reply buttons */
.anj-postfoot {
  clear: both; direction: rtl; text-align: left;
  padding: 2px 12px 10px; font-size: 11px;
}
.anj-postfoot a { color: #9a9a9a; }

/* The frame is the capture of a BOARD page, and the index's own block carries
   a hardcoded width:975px from a wider layout. Inside this frame that pushes
   the board names past the right edge, so the block is allowed to fit. */
#boardsin > div[style*="975"] { width: auto !important; max-width: 100%; }
#categorys_forums { max-width: 100%; }

/* the medal the member had earned, where the reputation control used to be */
.anj-rank { text-align: center; font-size: 11px; color: #5a6b5d; line-height: 1.5; }
.anj-rank img { max-width: 90px; height: auto; }
/* who thanked this post */
.anj-thx { display: block; font-size: 11px; color: #8a8a8a; direction: rtl; padding: 0 12px; }

/* the profile's own lines, inside the sections the 2012 page already drew */
.anj-username h1 { margin: 0 0 8px; font-size: 20px; color: #3d5a1e; direction: rtl; text-align: right; }
.anj-prow { direction: rtl; text-align: right; font-size: 12px; line-height: 2; }
.anj-prow b { color: #5a6b5d; font-weight: bold; }
.anj-repolog { margin-top: 8px; border-top: 1px dashed #cfcfcf; padding-top: 6px; }

/* the score standing in for the give-a-point arrows */
.anj-rep { font-weight: bold; }
.anj-rep.pos { color: #4a8f1e; }
.anj-rep.neg { color: #b03a3a; }

/* The foot of the list, watched by the observer.
   It must stay in the layout even when it says nothing: a display:none element
   has no box, never intersects anything, and the next page never arrives. */
.anj-more {
  min-height: 28px; direction: rtl; text-align: center;
  padding: 14px 10px; color: #5a6b5d; font-size: 12px;
}


/* ── the menu bar, restored ────────────────────────────────────────────────
   Measured against the capture first: the 2012 bar gave three of its ten items
   a background and left the other seven sitting on the bar's own green, so
   half the row read as tabs and half as loose text. That was the page, not a
   fault in the rebuild — and it is one of the places he asked to have
   restored rather than preserved.

   Every item gets the same tab now, in the two greens the bar already used:
   #5e9215 for a tab and #73b700 for the one you are on. Nothing else about
   the header is touched, and the items, their order and their labels are the
   bar's own. */

@media (min-width: 761px) {
  #catsMenu { background: #4f7d0d; overflow: visible; }
  #catsMenu a {
    background: #5e9215 !important;
    border-left: 1px solid rgba(255,255,255,.22);
    color: #fff !important;
    text-align: center;
    transition: background .15s;
  }
  #catsMenu a:first-child { border-left: 0; }
  #catsMenu a:hover { background: #73b700 !important; text-decoration: none; }
  #catsMenu a.active, #catsMenu a.navunited-states { background: #73b700 !important; }
  #catsMenu a font, #catsMenu a span { color: inherit !important; }
}

/* ── the profile's three collections ───────────────────────────────────────
   Medals, honour stars and gift coins all arrived as loose images whose whole
   meaning sat in a title attribute: what the medal was, who sent the coin and
   why. A title is unreachable on a touch screen and easy to miss on a mouse,
   so each one is parsed back into its facts and written out. The page keeps
   its own fieldsets, its greens and its right-to-left reading. */

.anj-medals, .anj-gifts {
  display: flex; flex-wrap: wrap; gap: 10px;
  direction: rtl; text-align: center; padding: 4px 0;
}
.anj-medal, .anj-gift {
  margin: 0; width: 124px; box-sizing: border-box;
  background: #fbfcf8; border: 1px solid #dbe4cf; border-radius: 6px;
  padding: 9px 6px; line-height: 1.55;
}
.anj-medal img, .anj-gift img {
  display: block; margin: 0 auto 6px; max-width: 100%; height: auto;
}
.anj-medal figcaption, .anj-gift .anj-kind {
  display: block; font-size: 11px; font-weight: bold; color: #3d5a1e;
}
.anj-medal .anj-at, .anj-gift .anj-from, .anj-gift .anj-why, .anj-gift .anj-when {
  display: block; font-size: 10px; color: #7d8a77; margin-top: 3px;
}
.anj-gift .anj-why { color: #5a6b5d; }
.anj-gift .anj-when { direction: ltr; color: #9aa495; }
.anj-gifts .anj-count {
  width: 100%; margin: 0; font-size: 11px; color: #5a6b5d; text-align: right;
}

/* the rank medal, kept beside the score where the 2012 page had the whole set */
.anj-rankmedal { direction: rtl; font-size: 11px; color: #3d5a1e; line-height: 1.5; }
.anj-rankmedal img { display: block; margin: 0 auto 5px; }

/* one star, one reason, on its own line */
.anj-stars { list-style: none; margin: 0; padding: 0; direction: rtl; }
.anj-stars li {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 5px 0; border-bottom: 1px dashed #e4e8dd;
  font-size: 12px; color: #4a5a48; text-align: right;
}
.anj-stars li:last-child { border-bottom: 0; }
.anj-stars img { flex: 0 0 auto; margin-top: 3px; }
.anj-stars .anj-x { flex: 0 0 auto; font-weight: bold; font-size: 11px; color: #a0761e; }
.anj-stars .anj-why { flex: 1 1 auto; }

/* a long collection, folded the way the 2012 page folded it */
.anj-fold { direction: rtl; }
.anj-fold > summary {
  cursor: pointer; font-size: 12px; font-weight: bold; color: #3d5a1e;
  padding: 4px 2px; list-style-position: inside;
}
.anj-fold > summary:hover { color: #4a8f1e; }
.anj-fold[open] > summary { border-bottom: 1px dashed #dbe4cf; margin-bottom: 8px; }

/* On a phone the cards share the row instead of keeping a desktop width.
   This block sits after the card rules on purpose: same specificity, and the
   later one wins. */
@media (max-width: 760px) {
  .anj-medals, .anj-gifts { gap: 6px; justify-content: flex-start; }
  .anj-medal { width: calc(50% - 3px); padding: 7px 4px; }
  .anj-gift  { width: calc(50% - 3px); }
  .anj-stars li { font-size: 11.5px; }
  .anj-medal figcaption { font-size: 11.5px; }
}

/* a picture the uploader lost and the Wayback Machine kept */
.anj-mini { max-width: 100%; height: auto; }

/* ── the front-page tiles ────────────────────────────────────────────────
   The markup is the forum's own (.hocontainer > .grid > figure.effect-ruby)
   and component.css styles it. Only two things are ours: a tile must not
   stretch a recovered picture out of shape, and on a phone two fit a row. */
/* Measured against the capture at the same 1280px viewport rather than
   guessed: there the tile was 286.5 wide, the figure 287 and the picture 290,
   which is three to a row inside the 882px the container gets from its 5%
   margins. Ours came out 318 and fitted two. The geometry is pinned to what
   the original measured; the picture fills its box without being stretched. */
@media (min-width: 761px) {
  .hocontainer { width: 286px; }
  .grid, .grid figure { width: 286px; }
}
.grid figure.effect-ruby img { height: 190px; object-fit: cover; }
@media (max-width: 760px) {
  .hocontainer { width: 50% !important; margin: 2px 0 !important; padding: 0 2px; box-sizing: border-box; float: right; }
  .grid, .grid figure { width: 100% !important; }
  .grid figure.effect-ruby img { width: 100% !important; height: 120px; }
  .topics_sort { font-size: 12px; }
  .chideman { display: block; margin-bottom: 4px; }
}