/*
 * Vintage / minimal SMF 2.1 theme override
 *
 * Goals:
 * - SMF 1.1 / late-1990s-early-2000s forum appearance
 * - CSS-first: preserve SMF's existing templates and source order
 * - compact, bordered, information-dense presentation
 * - desktop-first, with only restrained narrow-screen accommodation
 * - based on the palette and control treatment in beige.css
 */

/* Page and typography */
html { background: #bb9; }
body { max-width: 1100px; margin: 0 auto; padding: 0 8px; background: #bb9; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.35; }
a { color: #000; }
a:hover, a:focus { color: #553; }
p { margin: .35em 0; }
hr { border-color: #ddb; }

/* Main structural containers */
#header { min-height: 48px; padding: 6px 0; border-bottom: 1px solid #775; }
#content_section { clear: both; }
#main_content_section { padding-top: 6px; }
#upper_section { min-height: 40px; }
#upper_section .user { margin: 0; }

/* Header: logo, user information, search */
h1.forumtitle { float: left; width: auto; margin: 0; padding: 0; }
h1.forumtitle a { display: block; padding: 4px 10px 4px 0; }
#top_info { float: none; margin: 0 0 0 180px; padding: 0; min-height: 32px; }
#top_info > li { margin: 0 4px 0 0; padding: 0; }
#top_info > li > a { padding: 3px 5px; }
#top_info .avatar, #top_info img.avatar, #profile_menu_top > img.avatar { width: 32px; height: 32px; max-width: 32px; max-height: 32px; }
#search_form { float: right; margin: 0; padding: 5px 0 0 8px; }
#search_form input { max-width: 180px; }

/* Main navigation: ordinary links, not action buttons; flatten dropdowns */
.menu_nav { clear: both; margin: 6px 0 0; padding: 3px 6px; border-top: 1px solid #775; border-bottom: 1px solid #775; background: #cca; }
.menu_nav > li { display: inline; margin: 0; padding: 0; }
.menu_nav > li:not(:last-child)::after { content: " | "; color: #775; }
.menu_nav > li > a { display: inline; padding: 0 3px; background: none; }
.menu_nav > li > a:hover, .menu_nav > li > a:focus { background: #ddb; }
.menu_nav > li > a.active { color: #553; }
.menu_nav > li > a::after { display: none; }
.menu_nav > li > ul { display: none !important; }

/* Other button strips */
.buttonlist { margin: 5px 0; padding: 0; }
.buttonlist li { margin: 0 2px 2px 0; }
.button, .buttonlist .button { padding: 3px 8px; border: 1px outset #775; border-radius: 2px; background: #d9d9c7 linear-gradient(155deg, #eec, #bb9); color: #000; }
.button:hover, .button:focus, .buttonlist .button:hover, .buttonlist .button:focus { background: #ccb linear-gradient(165deg, #ddc, #bba); color: #000; }
.button:active, .buttonlist .button:active { border-style: inset; background: #bba linear-gradient(135deg, #ccb, #aa9); }
.buttonlist .top_menu { display: none !important; }

/* Generic form controls, following beige.css */
input, select, textarea { box-sizing: border-box; background: #ddb; border: 1px solid #775; border-radius: 0; color: #000; }
input[type="button"], input[type="submit"], input[type="reset"], button { background: #d9d9c7 linear-gradient(155deg, #eec, #bb9); border: 2px outset #775; border-radius: 2px; color: #000; }
input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, button:active { background: #bba linear-gradient(135deg, #ccb, #aa9); border-style: inset; }
select { border-style: inset; }

/* Section/category bars */
.cat_bar, .title_bar { min-height: 0; margin: 7px 0 0; padding: 4px 7px; border: 1px solid #775; border-radius: 0; background: #b4b499; color: #000; }
.cat_bar h3, .title_bar h3 { margin: 0; padding: 0; font-size: 1em; }
.cat_bar .desc { margin: 1px 0 0; font-size: .9em; }
.cat_bar .desc a { color: #000; }

/* Board index: reproduce the old table-like row without changing DOM order. */
.boardindex_table { width: 100%; margin: 0; border: 1px solid #775; background: #cca; }
.boardindex_table .main_container > div:not(.cat_bar) { display: table; width: 100%; border-collapse: collapse; }
.boardindex_table .up_contain { display: table-row; width: 100%; border-bottom: 1px solid #775; }
.boardindex_table .board_icon, .boardindex_table .info, .boardindex_table .board_stats, .boardindex_table .lastpost { display: table-cell; vertical-align: middle; border-right: 1px solid #775; }
.boardindex_table .board_icon { width: 32px; padding: 5px; text-align: center; }
.boardindex_table .info { padding: 5px; }
.boardindex_table .info .subject { display: block; font-weight: bold; }
.boardindex_table .info .desc { display: block; margin-top: 1px; }
.boardindex_table .board_stats { width: 90px; padding: 5px; text-align: center; }
.boardindex_table .lastpost { width: 210px; padding: 5px; border-right: 0; }

/* Message/topic index: old forum table rows, using the existing source order. */
#messageindex, #topic_container { width: 100%; }
#messageindex .title_bar, #topic_header { border: 1px solid #775; }
#topic_container > .windowbg, #messageindex > .windowbg { display: table; width: 100%; border-collapse: collapse; }
#topic_container > .windowbg > .info, #topic_container > .windowbg > .board_stats, #topic_container > .windowbg > .lastpost,
#messageindex > .windowbg > .info, #messageindex > .windowbg > .board_stats, #messageindex > .windowbg > .lastpost { display: table-cell; vertical-align: middle; border-right: 1px solid #775; }
#topic_container .info, #messageindex .info { padding: 4px 6px; }
#topic_container .board_stats, #messageindex .board_stats { width: 100px; padding: 4px; text-align: center; }
#topic_container .lastpost, #messageindex .lastpost { width: 210px; padding: 4px 6px; border-right: 0; }

/* Common boxes */
.windowbg, .roundframe, .generic_list_wrapper { border: 1px solid #775; border-radius: 0; background: #cca; }
.windowbg:nth-of-type(even), .bg.even { background: #d2d2ae; }
.windowbg:nth-of-type(odd), .bg.odd { background: #cca; }
.information, .infobox, .noticebox, .errorbox { border: 1px solid #775; border-radius: 0; background: #ddb; color: #000; }
.information { margin: 5px 0; padding: 4px 7px; }

/* Tables */
table { border-collapse: collapse; border-color: #775; }
th, td { border: 1px solid #775; }
th { background: #b4b499; }
td { background: #cca; }

/* Topic display: traditional left poster column and right message column. */
#forumposts .windowbg, #forumposts .approvebg, #forumposts .approvebg2 { display: table; width: 100%; margin: 7px 0; border: 1px solid #775; border-radius: 0; background: #cca; }
#forumposts .post_wrapper { display: table-row; }
#forumposts .poster, #forumposts .postarea { display: table-cell; vertical-align: top; }
#forumposts .cat_bar { margin-bottom: 0; }
.poster { width: 150px; padding: 7px; border-right: 1px solid #775; background: #b4b499; }
.poster h4 { margin: 0 0 4px; font-size: 1em; }
.poster img.avatar { width: auto; height: auto; max-width: 100px; max-height: 100px; }
.user_info > li { margin: 1px 0; }
.postarea { padding: 0; }
.keyinfo { padding: 6px 7px; border-bottom: 1px solid #775; }
.postinfo { font-size: .9em; }
.postarea > .post { padding: 7px; }
.under_message { margin-top: 6px; padding-top: 4px; border-top: 1px solid #775; }

/* Pagination and small controls */
.pagesection { margin: 5px 0; }
.pagelinks { margin: 0; }
.pagelinks a, .pagelinks span { padding: 2px 5px; border: 1px solid #775; background: #cca; }
.pagelinks a:hover, .pagelinks a:focus { background: #ddb; }

/* Profile/secondary navigation: allow SMF's existing secondary lists to behave like sidebars */
#basicinfo { border: 1px solid #775; background: #b4b499; }
#basicinfo > * { margin: 5px; }
#detailedinfo { border: 1px solid #775; background: #cca; }

/* Avatars everywhere else: never let presentation exceed 100px */
img.avatar { max-width: 100px; max-height: 100px; }

/* Remove modern rounded/card effects and decorative shadows */
.roundframe, .windowbg, .title_bar, .cat_bar, .information, .infobox, .noticebox, .errorbox, .button { box-shadow: none; }

/* Accessibility: don't create a different reading order merely for appearance */
[hidden] { display: none !important; }
.skip:focus { border-color: #775; background: #cce; }

/* Modest narrow-screen accommodation: preserve source order and information */
@media (max-width: 700px) {
  body { max-width: none; padding: 0 4px; }
  h1.forumtitle { float: none; }
  #top_info { margin-left: 0; }
  #search_form { float: none; padding-left: 0; }
  .menu_nav > li { display: inline-block; }
  .boardindex_table .lastpost, #topic_container .lastpost, #messageindex .lastpost { width: 180px; }
  .boardindex_table .main_container > div:not(.cat_bar), #topic_container > .windowbg, #messageindex > .windowbg { min-width: 650px; }
  #forumposts .windowbg { overflow-x: auto; }
}