/* RISC OS Open Beast theme stylesheet.
 *
 * Heavily based on the Beast default theme.
 */

@import url("https://www.riscosopen.org/css/risc_os_open_2025_v2.css");

#content form {margin-bottom: 0;}

#content p.subtle {
  margin: 0 0 0.5em;
  float: right;
}

#content .subtle a {
  color: #999;
  font-size: 0.7em;
}

#content img { border-width: 0; }

#content p.pages {
  font-size: 0.85em;
  margin-top: 1.2em;
}

#content span.pipe {
  color: #999;
  margin: 0 0.15em;
}

#content p.notice,
#content p.sections {
  background: #df9;
  padding: 7px 15px;
  border: 1px solid #bd7;
  margin-top: 0;
  font-size: 0.8em;
}

@media (prefers-color-scheme: dark) {
  #content p.notice,
  #content p.sections {
    background: #460;
    border-color: #bd7;
  }
}

#content p.error {
  background: #c00;
  color: white;
}

#content p.sections a.action { color: #c00; }

#content .subtitle,
#content .rss {
  font-size: 0.75em;
  color: #888;
  font-weight: bold;
}

#content .subtitle {
  margin-bottom: 2em;
}

#content h1 + .subtitle {
  margin-top: -1em;
}

#content .subtitle img,
#content .rss      img { vertical-align: bottom; }

#content .subtitle a,
#content .rss      a { border: none; }

/* Assume layout always wants this floating to the right via e.g. flexbox and
 * "space-between"; add left-hand padding in case of narrow viewports (without
 * needing to influence other spacing by using a container-wide gap value).
 *
 * The left-auto margin helps with NetSurf which doesn't like "space-between".
 */

#content .simple_flex_row .rss {
  padding-left: 10px;
  margin-left: auto;
}

/* The above floats right when this floats left, but it sometimes has other
 * things after (e.g. the "New topic") link - so use right margin this time.
 */

#content .simple_flex_row nav.pagy {
  margin-right: 10px;
}

/* The specific "> nav.pagy" accounts for subtle differences in containers for
 * Pagy, in the case of it having "New topic" shown after (which is pushed into
 * its own column, so the right-edge margin that kept a gap between Pagy and
 * "New topic" must go, so that the paginator is now centred) versus an *outer*
 * container having that class combination, but not the direct wrapper around
 * Pagy, where in that case any following text or links are taken to be *part
 * of* the paginator, for e.g. the "show last 25" / "show pages" links. In such
 * cases, that's all kept on the same line, so the left margin must remain.
 */

@media (max-width: 860px) {
  #content .simple_flex_row.becomes_column_if_narrow .rss,
  #content .simple_flex_row.becomes_column_if_narrow > nav.pagy
  {
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

#content h1 { margin-bottom: 20px; font-size: 2em; }
#content h1 span.inside_header { font-size: 60%; color: #999; font-weight: normal; padding-left: 10px;}

@media (max-width: 860px) {
  #content h1 span.inside_header {
    display: block;
    padding-left: 0;
  }
}

#content h2 { font-size: 1.0em; }

#content h5 {
  padding: 2px 10px 3px;
  background: #ddd;
  font-size: 80%;
}

@media (prefers-color-scheme: dark) {
  #content h5 {
    background-color: #222;
  }
}

#content h6 { margin-bottom: 0; }

@media (prefers-color-scheme: dark) {
  #content h5 {
    background-color: #222;
  }
}

#content hr {
  height: 0;
  border: 0;
  border-bottom: 1px solid #ccc;
  margin: 1em 0;
}

@media (prefers-color-scheme: dark) {
  #content hr {
    border-bottom-color: #555;
  }
}

#content ul.quotes,
#content ul.flat {
  margin-left: 0;
  padding-left: 0;
  font-size: 0.75em;
  list-style-type: none;
}

#content ul.talking li span {
  color: #666;
  font-size: 0.8em;
}

@media (prefers-color-scheme: dark) {
  #content ul.talking li span {
    color: #aaa;
  }
}

#content ul.flat li {
  background: url("/forum/assets/small_circle-12d6e209.gif") no-repeat 5px 6px;
  padding-left: 15px;
}

#content ul.ways li span {
  color: #666;
  font-size: 0.9em;
}

@media (prefers-color-scheme: dark) {
  #content ul.ways li span {
    color: #aaa;
  }
}

#content ul.quotes {
  font-size: 0.8em;
}

#content ul.quotes li {margin-bottom: 1em; }
#content ul.quotes span {
  color: #666;
  font-size: 0.9em;
}

@media (prefers-color-scheme: dark) {
  #content ul.quotes span {
    color: #aaa;
  }
}

#content ul.why {
  font-size: 1em;
  line-height: 1.25em;
  margin-top: 2em;
}

#content ul.why li p {
  margin-top: 0.5em;
  color: #666;
  font-size: 0.9em;
}

@media (prefers-color-scheme: dark) {
  #content ul.why li p {
    color: #aaa;
  }
}

#content ul.why li p strong { color: #c00; }

#content a.utility {
  font-weight: normal;
  font-size: 0.8em;
}

#content a.remove { color: #c00; }
#content a.subtle { color: #369; }
#content a.subtle:hover { color: blue; }

@media (prefers-color-scheme: dark) {
  #content a.subtle { color: #ace; }
  #content a.subtle:hover { color: #fff; }
}

#content div.asset {
  background: #e7e7e7;
  padding: 7px 15px;
  border-bottom: 1px solid #ccc;
  font-size: 0.8em;
  margin-bottom: 1em;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  #content div.asset {
    background-color: #171717;
    border-bottom-color: #444;
  }
}

#content input.submit {
  margin-right: 1em;
  float: right;
}

/* layout of paste */

#content .pastebox {
  width: 100%;
}

#content .legend {
  margin-top: 0;
  color: #999;
  font-size: 0.8em;
}

@media (prefers-color-scheme: dark) {
  #content .legend {
    color: #777;
  }
}

#content .legend span strong { color: black; }
#content .legend span {
  margin-right: 5em;
}

#content td.code,
#content .thePaste {
  padding-left: 0.75em;
}

#content label {
  color: #666;
  font-size: 0.8em;
  font-weight: normal;
}

@media (prefers-color-scheme: dark) {
  #content label {
    color: #999;
  }
}

#content label:has(+ br + input),
#content label:has(+ br + textarea),
#content label:has(+ br + select),
#content label:has(+ br + input[type="hidden"] + select),
#content label:has(+ br + div.field_with_errors > input),
#content label:has(+ br + div.field_with_errors > textarea) {
  font-weight: bold;
}

#content label + br + input,
#content label + br + textarea,
#content label + br + select,
#content label + br + input[type="hidden"] + select,
#content label + br + div.field_with_errors > input,
#content label + br + div.field_with_errors > textarea,
#content label + br + div.field_with_errors > select,
#content label + br + div.field_with_errors > input[type="hidden"] + select {
  margin-top: 3px;
}

#content div.field_group {
  margin-bottom: 1em;
}

/* random */

#content tr.post td.author span.fn,
#content tr.post td.author span.posts {
  display: inline;
}

#content tr.post td.author span.fn,
#content tr.post td.author span.posts {
  padding-right: 0.4em;
}

#content div.edit {
  margin-top: 10px;
}

#content .smallutils {
  margin-top: -0.5em;
  margin-bottom: 0em;
  text-align: right;
}

#content .smallutils a {
  color: #666;
  font-size: 0.7em;
}

@media (prefers-color-scheme: dark) {
  #content .smallutils a {
    color: #999;
  }
}

#content .smallutils a:hover {color: #369;}

@media (prefers-color-scheme: dark) {
  #content .smallutils a:hover {color: #ace;}
}

#content .admin_actions_alongside_header {
  margin-left: 20px;
  font-size: 0.75em;
}

/* tables */

#content table.noborder,
#content table.noborder tr,
#content table.noborder tr td {
  border: 0;
}

#content table.nopad td {
  padding-left: 0;
}

#content table {
  border-collapse: collapse;
}

#content table.forums tr th {
  background: #ddd;
}

@media (prefers-color-scheme: dark) {
  #content table.forums tr th {
    background-color: #333;
  }
}

/* forums */

#content h3.forum_category {
  margin-bottom: 0.5em;
}

#content div.forums_summary {
  margin: 0.5em 0 1.5em 0;
}

/* topics */

#content #forum_description,
#content #topic_body {
  width: 99%;
}

/* specific table styles */

#content table.forums tr td .title {
  font-size: 100%;
  font-weight: bold;
}

#content table.forums tr td .desc > p:first-child {
  margin-top: 6px;
}

#content table.forums tr td .desc > p:last-child {
  margin-bottom: 0;
}

#content table.forums tr th,
#content table.forums tr td {
  border: 1px solid #ddd;
}

@media (prefers-color-scheme: dark) {
  #content table.forums tr th,
  #content table.forums tr td {
    border-color: #333;
  }
}

#content table.forums tr td,
#content table.forums tr th:last-child {
  padding: 4px 10px;
}

#content table.forums .posts {
  color: #777;
}

#content table.forums .forum_stats {
  text-align: right;
  margin-left: 20px;
  font-size: 80%;
  color: #888;
}

#content table.forums tfoot tr,
#content table.forums tfoot td {
  border-left: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

@media (prefers-color-scheme: dark) {
  #content table.forums tfoot tr,
  #content table.forums tfoot td {
    border-left-color: #333;
    border-right-color: #333;
    border-bottom-color: #333;
  }
}

#content table.forums {
  width: 100%;
}

#content table.forums .la,
#content table.forums .c2 {
  width: 70%;
}

#content table.forums .lp {
  width: 30%;
}

#content table tr th.la  { text-align: left;    }
#content table tr td.ca  { text-align: center;  }
#content table tr td.vat { vertical-align: top; }

#content table tr td.narrow { padding: 2px 5px;}

/* last post */

#content table tr th.lp {
  text-align: right;
}

#content table tr td.lp,
#content table tr td.stats {
  font-size: 0.85em;
  color: #333;
  text-align: right;
}

@media (prefers-color-scheme: dark) {
  #content table tr td.lp,
  #content table tr td.stats {
    color: #bbb;
  }
}

#content table tr td.stats {
  font-size: 100%;
}

#content table tr td.lp span   { color: #666; }
#content table tr td.lp span a { color: #369; }

@media (prefers-color-scheme: dark) {
  #content table tr td.lp span   { color: #999; }
  #content table tr td.lp span a { color: #ace; }
}

#content table.forums tr td.c1 { border-right: 0; padding: 11px 10px 0   10px; }
#content table.forums tr td.c2 { border-left:  0; padding:  7px 10px 9px 0;    }

#content table.topics tr td.c2 small a { color: #666; }
#content table.topics tr td.stat { font-size: 0.9em; }

@media (prefers-color-scheme: dark) {
  #content table.topics tr td.c2 small a { color: #999; }
}

/* misc */

#content .button_or {
  color: #666;
  padding-left: 0.5em;
  font-size: 0.75em;
}

@media (prefers-color-scheme: dark) {
  #content .button_or {
    color: #999;
  }
}

#content .button_or a { color: #c00; }

/* The problem: Deletion is offered on the edit page to avoid accidental hits
 * and make people think about editing rather than deleting things. Since the
 * delete action requires a form since it's not GET-based, that button cannot
 * appear alongside the 'save' button, since the 'save' button is the
 * submission for the editing form and forms can't be nested in HTML. The
 * solution is a hack, but an effective one; float the button right and move it
 * up by an amount calculated to match the 'save' button row size. This does
 * mean that regular wrapping of float items won't work (the browser thinks the
 * body of the element is in a separate DIV entirely below the save form), we
 * must manually handle the small viewport case. See the "narrower viewports"
 * section for that.
 */
#content #delete_post_form_in_edit_page {
  display: inline-block;
  float: right;
  margin-top: -33px;
}

#content form.dialog {
  margin-top: 3em;
  background: #eee;
  width: 300px;
  padding: 15px;
}

@media (prefers-color-scheme: dark) {
  #content form.dialog {
    background-color: #111;
    color: #fff;
  }
}

#content form .entryhelp {
  font-size: 0.7em;
}

#content form .help {
  font-size: 0.8em;
}

#content form.inline {
  display: inline;
}

#content span.arrow {
  font-weight: normal;
  font-size: 0.9em;
  color: #999;
}

#content div.stats {
  margin-top: 2em;
  background: #e5ffd4 url("/images/risc_os_open/top_fade.png") top left repeat-x;;
  font-size: 0.8em;
  padding: 15px 15px;
}

@media (prefers-color-scheme: dark) {
  #content div.stats {
    border: 1px solid #0f0;
    background: #0f4000;
    color: #fff;
  }
}

#content div.stats .posts { float: right; text-align: right; }

/* breadcrumbs */

#content .crumbs {
  font-size: 0.75em;
}
#content .crumbs a { color: #468; }
#content .crumbs a:hover { color: #00c; }

@media (prefers-color-scheme: dark) {
  #content .crumbs a { color: #ace; }
  #content .crumbs a:hover { color: #fff; }
}

#content .crumbs .desc.subtitle > p:first-child { margin-top:    0; }
#content .crumbs .desc.subtitle > p:last-child  { margin-bottom: 0; }
#content .crumbs .desc.subtitle                  { margin-bottom: 0; font-size: 100%; }

@media (max-width: 860px) {
  #content .crumbs .desc.subtitle > p:first-child { margin-top:    10px; }
  #content .crumbs .desc.subtitle > p:last-child  { margin-bottom: 10px; }
}

/* posts */

#content table.posts {
  border-bottom: 2px solid #eee;
  width: 100%;
}

@media (prefers-color-scheme: dark) {
  #content table.posts {
    border-bottom-color: #333;
  }
}

#content table.posts.preview_for_move {
  border-bottom: none;
}

#content table.posts > tbody > tr > td {
  border: 0;
}

#content table.posts tr.spacer td {
  font-size: 1px;
  height: 10px;
  padding: 0;
}

#content table.posts table {
  margin-top: 10px;
  margin-bottom: 10px;
}

#content .post .author { width: 25%; }
#content .post .body   { width: 75%; }

#content .post .author {
  vertical-align: top;
  padding: 8px 10px;
  border-top: 2px solid #eee;
  font-size: 100%;
  background: #eee;
  color: #333;

  min-height: 32px;
  min-width: 12em;
}

@media (prefers-color-scheme: dark) {
  #content .post .author {
    border-top-color: #333;
    background: #1c1c1c;
    color: #fff;
  }
}

#content .post .author .date {
  font-weight: bold;
}

#content .post .author img {
  float: right;
  margin: 3px 0 5px 10px;
}

#content .post .author .posts {
  font-size: 80%;
  color: #666;
}

@media (prefers-color-scheme: dark) {
  #content .post .author .posts {
    color: #999;
  }
}

#content .post .author a {
  font-weight: normal;
  font-size: 90%;
}

#content .post .author .actions {
  margin-top: 8px;
  font-size: 90%;
}

#content .post .author .actions,
#content .post .author .actions a,
#content .post .author .actions input.text_link_button {
  color: #666;
}

@media (prefers-color-scheme: dark) {
  #content .post .author .actions,
  #content .post .author .actions a,
  #content .post .author .actions input.text_link_button {
    color: #999;
  }
}

#content a.admin,
#content .post .author a.admin {
  font-weight: bold
}

#content .posts .post .body {
  overflow-wrap: break-word;
}

#content .posts .post .body pre {
  overflow-wrap: normal;
  white-space: pre-wrap;
}

#content .post .date {
  font-size: 80%;
  color: #666;
  font-weight: normal;
  margin-bottom: 1px;
}

@media (prefers-color-scheme: dark) {
  #content .post .date {
    color: #999;
  }
}

#content .date a,
#content .date a abbr { border: none; }

#content .posts .post .body {
  border-top: 2px solid #eee;
  padding: 0 0 0 10px;
}

@media (prefers-color-scheme: dark) {
  #content .posts .post .body {
    border-top-color: #333;
  }
}

#content .posts.preview_for_move .post .body {
  border: 1px solid #4e713e;
  padding-left: 0;
}

#content .posts.preview_for_move .post .body > div.preview_wrapper {
  border: 10px solid transparent;
  max-height: 35vh;
  min-height: 5em;
  overflow-y: scroll;
}

#content div.preview_wrapper > *:first-child { margin-top:    0; }
#content div.preview_wrapper > *:last-child  { margin-bottom: 0; }

#content .post .body p.topic {
  font-size: 0.8em;
  font-weight: bold;
  background: #eee;
  padding: 2px 10px;
}

@media (prefers-color-scheme: dark) {
  #content .post .body p.topic {
    background-color: #111;
    color: #fff;
  }
}

/* other stuff */

#content p.online {margin-bottom: 0;}

#content img.icon {
  background: #696;
  border-radius: 3px;
  vertical-align: bottom;
}
#content img.reply { float: right; }
#content img.orange { background-color: darkorange; }
#content img.grey { background-color: #ccc; }
#content img.darkgrey { background-color: #999; }
#content img.green { background-color: #0c0;}

@media (prefers-color-scheme: dark) {
  #content img.grey { background-color: #555; }
  #content img.darkgrey { background-color: #000; }
  #content img.green { background-color: #0a0;}
}

#content .post .author .icon {
  float: right;
}

/* Reply */

#content div.editbox h3,
#content div.editbox p { margin: 0.5em 0 1em 0; }

#content textarea {
  box-sizing: border-box;
  width: 100%;
}

#content div.editbox h5 {
  background: #ddd;
  line-height: 200%;
  margin: 0.2em 0 0.5em;
}

@media (prefers-color-scheme: dark) {
  #content div.editbox h5 {
    background-color: #333;
    color: #aaa;
  }
}

#content div.editbox p.help span,
#content div.editbox ul.help span { color: #666; }
#content div.editbox p.help,
#content div.editbox ul.help {
  padding: 3px 20px;
  font-size: 0.75em;
  color: #888;
}

/*****************************************************************************\
 * Browser-specific styles: NetSurf
\*****************************************************************************/

/* Help NetSurf get sizes right, reducing page reformatting. Problems with
 * image sizing, even when width and height is specified in HTML, have long
 * existed in the browser. Harmless for other browsers.
 *
 * Suggested by M.Drake, 2011-03-18:
 *
 *   https://www.riscosopen.org/forum/forums/1/topics/591?page=2
 */

#content img.icon {
  display: block;
  width: 16px; /* Beast always uses "clearbits" 16x16 icon set images */
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}

#content .photo {
  display: block;
}

/* Fix strange extra top margin and missing bottom margin (v3.11, Dec 2023) */

.simple_flex_row.netsurf {
  border-top: 1px solid transparent;
}

/* Space-between style flex blocks often just collapse to the left, but in some
 * cases that are meant to be rightmost, an auto left margin sorts things out
 * without breaking the layout on other browsers.
 */

#content .crumbs .desc.subtitle                     { margin-left: auto; }
#content .simple_flex_row div.moderation:last-child { margin-left: auto; }

@media (max-width: 860px) {
  #content .crumbs .desc.subtitle                     { margin-left: 0; }
  #content .simple_flex_row div.moderation:last-child { margin-left: 0; }
}

/*****************************************************************************\
 * Narrower viewports
\*****************************************************************************/

@media (max-width: 860px) {
  #content table.collapsible .author
  {
    width: auto !important;
  }

  #content table.collapsible,
  #content table.collapsible td {
    border: none !important;
  }

  #content table.collapsible tr.spacer,
  #content table.forums      .lp,
  #content table.forums      .c1,
  #content table.topics      .c1,
  #content table.topics      .stat
  {
    display: none;
    width:   0;
  }

  #content table.forums tr.has_recents,
  #content table.topics tr.has_recents
  {
    border-top:    1px solid #0c0;
    border-bottom: 5px solid #0c0;
    border-left:   1px solid #0c0;
    border-right:  1px solid #0c0;
  }

  #content table.forums .la,
  #content table.forums .c2
  {
    width: 70%;
  }

  #content table.forums .la,
  #content table.forums .c2
  {
    width: 100%;
  }

  #content table.forums > tbody > tr > td { box-sizing: border-box; }
  #content table.forums > tfoot > tr > td { box-sizing: border-box; }
  #content table.forums > thead > tr > th { box-sizing: border-box; }

  #content table tr td.stats
  {
    text-align: left;
  }

  #content table.forums tr td .title,
  #content table.collapsible.topics td.c2
  {
    font-size: 110%;
  }

  #content table.collapsible.topics td.lp
  {
    font-size: 12pt;
    text-align: left;
  }

  #content table.collapsible.topics td.lp:before
  {
    content: 'Last post: '
  }

  #content table.forums tr td.c2
  {
    padding: 8px 10px;
  }

  #content table.forums tr td.c2 > div.simple_flex_row
  {
    align-items: baseline;
  }

  #content .posts .post .body
  {
    padding: 0 10px;
  }

  #content .post .body
  {
    box-sizing: border-box;
    width: 100%;
  }

  #content #delete_post_form_in_edit_page
  {
    display: block;
    float: none;
    margin-top: 20px;
  }

  #content .post .author .actions
  {
    display: inline-block;
  }
}