/* hardtraxx style.css — the single stylesheet for the forum. Concatenation of the former cascade, in original load order: 1. stylesheet.min.css (legacy phpBB/subsilver base, minified) 2. style.min.css (hardtraxx desktop skin) 3. mobile.css (responsive layer: base chrome / <=999px / <=767px) Relative url() paths resolve against this directory, unchanged. */ :root{--brand:#b01820;--brand-hover:#ef463c;--brand-bright:#d50909;--accent:#ff8a00;--error:#d00;--success:#070;--text:#282828;--text-soft:#555;--text-faint:#696969;/* min 4.5:1 op --bg-panel/--bg-chrome/#ededed (WCAG AA) */--border:#c4c4c4;--border-soft:#dedede;--bg-chrome:#ececec;--bg-panel:#f6f6f6;} /* Inter variable font (self-hosted, weights 100-900). Latin-ext loads only when its codepoints appear. */ @font-face {font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('./fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face {font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('./fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} *{margin:0;padding:0;}html{font-size:100%;}a{outline:none;}body{background:#FFF;color:var(--text-soft);font-size:0.875rem;line-height:1.5;margin:0;padding:0;}#wrapheader{min-height:120px;height:auto!important;height:120px;padding:0;}#wrapcentre{margin:15px 25px 0 25px;}#wrapfooter{text-align:center;clear:both;}#wrapnav{width:100%;margin:0;background-color:var(--bg-chrome);border-width:1px;border-style:solid;border-color:var(--border);}#logodesc{margin-bottom:5px;padding:5px 25px;background:#d9dfe4;border-bottom:1px solid #4787a7;}#menubar{margin:0 25px;}#datebar{margin:10px 25px 0 25px;}#findbar{width:100%;margin:0;padding:0;border:0;}.forumrules{background-color:#f9cc79;border-width:1px;border-style:solid;border-color:#bb9860;padding:4px;font-weight:normal;font-size:0.875rem;}.forumrules h3{color:var(--error);}#pageheader{padding:0;}h1{color:black;font-weight:600;font-size:1.25rem;text-decoration:none;}h2{font-weight:600;font-size:0.875rem;text-decoration:none;}h3{font-size:0.875rem;font-weight:600;line-height:1.25;}h4{margin:0;font-size:0.875rem;font-weight:600;}p{font-size:0.875rem;}p.moderators{margin:0;float:left;color:black;font-weight:600;}.rtl p.moderators{float:right;}p.linkmcp{margin:0;float:right;white-space:nowrap;}.rtl p.linkmcp{float:left;}p.breadcrumbs{margin:0;float:left;color:black;font-weight:600;white-space:normal;font-size:0.75rem;}.rtl p.breadcrumbs{float:right;}p.datetime{margin:0;float:right;white-space:nowrap;font-size:0.75rem;}.rtl p.datetime{float:left;}p.searchbar{padding:2px 0;white-space:nowrap;}p.searchbarreg{margin:0;float:right;white-space:nowrap;}.rtl p.searchbarreg{float:left;}p.forumdesc{font-size:0.75rem;color:var(--text-faint);}p.topicauthor{margin:1px 0;}p.topicdetails{margin:1px 0;font-size:0.75rem;}.postreported,.postreported a:visited,.postreported a:hover,.postreported a:link,.postreported a:active{margin:1px 0;color:var(--error);font-weight:600;}.postapprove,.postapprove a:visited,.postapprove a:hover,.postapprove a:link,.postapprove a:active{color:var(--success);font-weight:600;}.postapprove img,.postreported img{vertical-align:bottom;}.postauthor{color:var(--text);font-size:0.875rem;}.postdetails{color:var(--text);}.postbody{font-size:0.875rem;line-height:1.5;color:var(--text);}.postbody a:link,a:active,a:visited,a:hover{text-decoration:underline;color:var(--brand);}.postbody li,ol,ul{margin:0 0 0 1.5em;}.postbody img{max-width:740px;height:auto;}.rtl .postbody li,.rtl ol,.rtl ul{margin:0 1.5em 0 0;}.posthilit{background-color:yellow;}.nav{margin:0;color:black;font-weight:600;}.pagination{padding:4px;color:black;font-size:0.75rem;font-weight:600;}.gen{margin:1px 1px;font-size:0.875rem;}.genmed{margin:1px 1px;font-size:0.875rem;}.gensmall{margin:1px 1px;font-size:0.75rem;}.copyright{background:#FFF;font-size:0.75rem;margin:0 0 5px 0;padding:10px;padding-bottom:0;text-align:right;}.titles{font-weight:600;font-size:inherit;text-decoration:none;}.error{color:var(--error);}th{height:23px;color:var(--text);font-size:0.75rem;font-weight:600;white-space:nowrap;padding:0 10px 0 6px;text-align:left;}td{padding:1px 2px 1px 1px;}td.profile{padding:3px 0 15px 8px;border-right:1px var(--bg-chrome) solid;}.hard-avatar img{padding:1px;border:1px var(--border) solid;}.tablebg{background-color:var(--bg-panel);border:1px var(--border-soft) solid;margin:0 0 12px 0;/*-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;*/}.catdiv{height:26px;margin:0;padding:0;border:0;background:white url('./images/cellpic2.jpg') repeat-y scroll top left;}.rtl .catdiv{background:white url('./images/cellpic2_rtl.jpg') repeat-y scroll top right;}.cat{height:30px;margin:0;padding:0;border:0;background-color:var(--bg-chrome);text-indent:4px;border-top:1px var(--border-soft) solid;}.cattext{text-align:left;font-size:0.875rem;font-weight:600;text-decoration:none;padding:7px 0 6px 0;color:var(--brand);}.cattext a:link{text-align:left;color:var(--brand);text-decoration:none;}.cattext a:visited{text-align:left;color:var(--brand);text-decoration:none;}.cattext a:hover{text-align:left;color:var(--brand);text-decoration:underline;}.cattext a:active{text-align:left;color:var(--brand);text-decoration:none;}a.cattext:link{text-align:left;color:var(--brand);text-decoration:none;}a.cattext:visited{text-align:left;color:var(--brand);text-decoration:none;}a.cattext:hover{text-align:left;color:var(--brand);text-decoration:underline;}a.cattext:active{text-align:left;color:var(--brand);text-decoration:none;}.row1{padding:1px 4px 1px 4px;border-top:1px var(--border-soft) solid;}.row2{padding:1px 4px 1px 4px;border-top:1px var(--border-soft) solid;}.row3{padding:4px;border-top:1px var(--border-soft) solid;}.spacer{background-color:#FFF;}hr{height:1px;border-width:0;background-color:var(--border-soft);color:var(--border-soft);}.legend{text-align:center;margin:0 auto;}a:link,a:visited,a:active{background:transparent;color:var(--text-soft);text-decoration:underline;}a:hover{background:transparent;color:var(--brand-hover);}a.forumlink{color:var(--text-soft);font-weight:600;font-size:0.875rem;}a.topictitle{margin:0 0 1px;font-weight:600;font-size:0.875rem;}a.topictitle:visited{color:var(--text);text-decoration:none;}a.topictitle:active{color:var(--text);text-decoration:none;}a.topictitle:link{color:var(--text);text-decoration:none;}a.topictitle:hover{color:var(--text);text-decoration:underline;}th a,th a:visited{color:var(--brand)!important;text-decoration:none;}th a:hover{color:var(--brand-hover);text-decoration:underline;}form{margin:0;padding:0;border:0;}input{color:var(--text);font-size:0.875rem;font-weight:normal;padding:1px;border:1px solid var(--border);background-color:#fff;}textarea{background-color:#fff;color:var(--text);font-family:Inter,system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:0.875rem;line-height:1.4;font-weight:normal;border:1px solid var(--border);padding:2px;}select{color:var(--text);background-color:#fff;font-family:Inter,system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:0.875rem;font-weight:normal;border:1px solid var(--border);padding:1px;}option{padding:0 1em 0 0;}option.disabled-option{color:graytext;}.rtl option{padding:0 0 0 1em;}input.radio{border:none;background-color:transparent;}.post{background-color:white;border-style:solid;border-width:1px;}.btnbbcode{color:var(--text);font-weight:normal;font-size:0.75rem;font-family:Inter,system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;background-color:var(--bg-chrome);border:1px solid var(--text-soft);}.btnmain{font-weight:600;background-color:var(--bg-chrome);border:1px solid var(--border);cursor:pointer;padding:1px 5px;font-size:0.875rem;}.btnlite{font-weight:normal;background-color:var(--bg-chrome);border:1px solid var(--border);cursor:pointer;padding:1px 5px;font-size:0.875rem;}.btnfile{font-weight:normal;background-color:var(--bg-chrome);border:1px solid var(--border);padding:1px 5px;font-size:0.875rem;}.helpline{background-color:#dee3e7;border-style:none;}.quotetitle,.attachtitle{background:var(--bg-chrome) url('./images/css_img_quote.gif') no-repeat right;border:1px solid var(--border);border-bottom:0;color:var(--text);font-weight:600;font-size:0.75rem;margin:2px auto 0 auto;padding:3px;}.quotetitle .quotetitle{font-size:0.75rem;}.quotecontent,.attachcontent{background:#fff;border:1px solid var(--border);border-top:0;color:var(--text);padding:4px;margin:0 auto 0 auto;}.attachcontent{font-size:0.75rem;}.codetitle{background:var(--brand-bright) url('./images/css_img_code.gif') no-repeat right;color:#FFF;font-weight:600;margin:0 auto 0 auto;padding:3px;}.codecontent{font-family:ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;background:var(--bg-panel);border:1px dotted var(--text-soft);color:var(--text-soft);margin:0 auto 0 auto;padding:2px;}.syntaxbg{color:#FFF;}.syntaxcomment{color:var(--accent);}.syntaxdefault{color:#00B;}.syntaxhtml{color:var(--text);}.syntaxkeyword{color:var(--success);}.syntaxstring{color:var(--error);}.pm_marked_colour{background-color:var(--text);}.pm_replied_colour{background-color:var(--border);}.pm_friend_colour{background-color:var(--success);}.pm_foe_colour{background-color:var(--error);}img{border:none;}.sep{color:black;background-color:#ffa34f;}table.colortable td{padding:0;}pre{font-size:0.875rem;font-family:ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;}.nowrap{white-space:nowrap;}.username-coloured{font-weight:600;}#header{position:relative;left:0;top:0;height:160px;}#logo{position:absolute;left:0;top:70px;width:827px;height:52px;}#top_menu{position:absolute;right:0;top:130px;text-align:right;width:500px;}#menu{position:absolute;top:130px;background:var(--brand-bright);width:825px;height:23px;color:#fff;border-top:4px solid var(--border);border-bottom:6px solid var(--border);}div.item{padding-top:.6em;}#top_menu a,#top_menu a:link,#top_menu a:visited{color:var(--text-soft);padding-left:5px;padding-right:5px;text-decoration:none;font-weight:normal;text-transform:lowercase;}#top_menu a:hover,#top_menu a.active{text-decoration:underline;}#top_menu ul,#top_menu li,#menu ul,#menu li{list-style-type:none;list-style-image:none;padding:0;margin:0;}#top_menu li{float:right;}#menu ul{height:23px;}#menu ul li{float:left;height:23px;line-height:23px;background:url('./images/menu_bg.gif') right top no-repeat;}#menu ul li a,#menu ul li a:link,#menu ul li a:visited{color:#fff;font-size:0.75rem;text-decoration:none;padding-left:15px;padding-right:15px;text-transform:uppercase;}#menu ul li:hover,#menu ul li.over,#menu ul li#current{background:black url('./images/menu_bg.gif') right top no-repeat;}.borderwrap,.borderwrapm{background:var(--border);border:0;padding:0;margin:0;}.borderwrapm{margin:5px;}.borderwrap h3,.maintitle,.maintitlecollapse{background:#FFF;border:0;border-bottom:0;color:var(--text-soft);font-size:0.875rem;font-weight:600;margin:0;padding:8px;padding-left:0;}.maintitle td{color:var(--text);font-size:0.875rem;font-weight:600;}.maintitlecollapse{border:0;}.maintitle p,.maintitlecollapse p,.formsubtitle p{background:transparent!important;border:0!important;margin:0!important;padding:0!important;}.maintitle p.expand,.maintitle p.goto,.maintitlecollapse p.expand,.formsubtitle p.members{float:right;width:auto!important;}.maintitle a:link,.maintitle a:visited,.maintitlecollapse a:link,.maintitlecollapse a:visited{background:transparent;color:var(--text-soft);text-decoration:none;}.maintitle a:hover,.maintitle a:active,.maintitlecollapse a:hover,.maintitlecollapse a:active{background:transparent;color:var(--text-soft);}#ipbwrapper{margin:0 auto 0 auto;text-align:left;width:960px;}#userlinks,#userlinksguest{background:#FFF;border:0;margin:5px 0 5px 0;padding:0 5px 0 5px;}#userlinksguest{background:#FFF;border:0;}#userlinks p,#userlinksguest p{background:transparent!important;border:0!important;font-size:0.75rem;font-weight:600;letter-spacing:1px;margin:0!important;padding:7px 0 7px 0;text-align:right;}#userlinks p,#userlinksguest p{font-weight:normal;letter-spacing:0;}#userlinksguest p.pcen{text-align:center;}#userlinks p.home,#userlinksguest p.home{float:left;}#navstrip{background:transparent;color:var(--text);font-size:0.875rem;font-weight:600;margin:0 0 5px 0;padding:14px 0 8px 0;}.newslink{background:#FFF;border-bottom:1px solid var(--border);margin:0;width:100%;}.newslink td{color:var(--text);font-size:0.75rem;padding:5px 5px 5px 10px;}.newslink span{background:transparent;color:var(--text-soft);font-style:italic;font-weight:normal;}.newslink input{background:#FFF;border:1px solid var(--border);color:var(--text);font-size:0.75rem;padding:3px;vertical-align:middle;width:auto;}.newslink input.button{background:transparent;border:0;color:var(--brand);vertical-align:middle;}.fieldwrap{background:var(--bg-panel);border:1px solid var(--border);border-top:0;margin:5px;padding:0;text-align:left;}.fieldwrap h4{background:var(--bg-chrome);border:1px solid var(--border);border-left:0;border-right:0;color:var(--text-soft);font-size:0.875rem;font-weight:600;margin:0;padding:5px;}.activeusers{background:#FFF;border:1px solid var(--border);color:var(--text);margin:0;padding:1px;}table.icons,tr.icons,td.icons{background:transparent;color:var(--text);font-size:0.75rem;line-height:1.5;}.icons td,.divpad{padding:5px;}td.nopad{padding:0;}th{text-align:left;}div.gymsublist{display:block;position:relative;padding-left:10px;padding-top:5px;padding-bottom:10px;padding-right:0;margin:0;}div.gymsublist ul{display:block;position:relative;height:1%;padding-left:30px;}div.gymsublist ul li{display:block;position:relative;line-height:1.5;font-size:0.75rem;}.postlink a:link,a:active,a:visited{color:var(--brand);text-decoration:underline;}.postlink a:hover{color:var(--brand);text-decoration:none;} /* ========================================================================== SECTION 2: hardtraxx desktop skin (formerly style.min.css) ========================================================================== */ /*@import 'normalize.css';*/ .tabber { display: none; } * { margin: 0; padding: 0; } html { overflow: 0; } body, td, input, textarea { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 0.875rem; font-weight: normal; font-style: normal; font-variant: normal; line-height: 1.5; letter-spacing: normal; word-spacing: normal; word-wrap: normal; word-break: normal; color: var(--text); } /* local-dev stand-in for ad slots (rendered instead of ad tags when APPLICATION_ENV != production, see the branches in the templates); never rendered on prod but the rule is harmless there */ .ad-placeholder { font-size: 0.75rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 728px; height: 90px; margin: 0 auto; color: var(--text-faint); border: 1px dashed var(--border); background: var(--bg-panel); } /* placeholder size label: desktop shows .ad-ph-d, mobile swaps in .ad-ph-m */ .ad-ph-m { display: none; } /* Ad slot wrappers: reserve the creative's final size up front so a slot filling in (or staying empty) never shifts content. Desktop serves 728x90 everywhere; the phone block overrides min-height to the mobile creative sizes (GPT 320x100, TradeTracker rotator 300x250). The faded background keeps an unfilled reservation from reading as a broken gap. */ .htx-ad-inner { width: 728px; min-height: 90px; margin: 0 auto; text-align: center; background: var(--bg-panel); } /* header unit: reserved via min-height only (no background — it sits in the black bar, a tinted band there reads as a broken ad; see 2026-09-01) */ /* AdSense units ("custom-sized responsive"): the CSS size IS the requested ad size, so it must exactly match the reservations above — a creative the reservation doesn't fit reintroduces the ad-load layout shift. Phone sizes are overridden in the phone block below. */ ins.htx-ads-header { display: inline-block; width: 728px; height: 90px; } ins.htx-ads-content { display: inline-block; width: 728px; height: 90px; } /* browser default for b/strong is 700; the theme's bold weight is 600 */ b, strong { font-weight: 600; } body { background-color: #fff; padding-bottom: 150px; } textarea, input { font-size: 0.875rem; padding: 3px; color: var(--text); border: 1px var(--border) solid; } input[type=file] { border: 0; } form { margin: 0; padding: 0; } em { font-style: italic; } a:link { text-decoration: none; color: var(--text); } a:visited { text-decoration: none; color: var(--text); } a:hover { text-decoration: underline; color: var(--text); } a:active { text-decoration: none; color: var(--text); } a.permalink-red:link, a.permalink-red:visited, a.permalink-red:active { font-weight: 600; text-decoration: underline; color: var(--brand); } a.permalink-red:hover { color: var(--text); } a.permalink-small:link, a.permalink-small:visited, a.permalink-small:hover, a.permalink-small:active { font-size: 0.625rem; text-decoration: none; color: var(--text-faint); } #full a:link, #full a:visited, #full a:active { font-weight: 600; text-decoration: none; color: var(--brand); } #full a:hover { font-weight: 600; text-decoration: underline; color: var(--brand); } #header-link { display: block; cursor: pointer; } #header-top { width: 100%; height: 90px; margin: 0 auto; background-color: var(--text); /*background-image: url('images/header.jpg');*/ background-repeat: no-repeat; background-position: center; } #header-logo { overflow: hidden; width: 960px; margin: 0 auto; padding: 20px 0 0; } #header-logo h1 { float: left; width: 220px; height: 50px; text-indent: -9000px; background: url('images/logo-png.png') no-repeat 0 0; } #header-logo h4 { float: left; width: 220px; height: 50px; text-indent: -9000px; background: url('images/logo-png.png') no-repeat 0 0; } #header-nav { width: 100%; height: 30px; margin: 0 auto; border-top: 1px var(--brand-bright) solid; background-color: var(--brand); } #header-nav ul { font-size: 0.875rem; font-weight: 600; width: 960px; margin: 0 auto; list-style: none; color: #fff; } #header-nav li { display: block; float: left; } #header-nav li a { display: block; line-height: 1.15; margin: 0 6px 0 0; padding: 6px 12px 8px; text-align: center; color: #fff; } #header-nav li a:hover { color: var(--text); background-color: var(--bg-chrome); } #header-nav li .selected { color: var(--text); background-color: var(--bg-chrome); } #header-nav li a:link, a:visited, a:active { text-decoration: none; } #header-breadcrumbs { font-size: 0.75rem; width: 100%; height: 19px; margin: 0 auto; padding: 4px 0 2px; background-color: var(--bg-chrome); border-bottom: 1px solid var(--border); } #header-breadcrumbs .breadcrumbs-container { overflow: hidden; width: 960px; margin: 0 auto; padding: 0; } #header-breadcrumbs p { font-size: 0.75rem; float: left; overflow: hidden; width: 590px; margin: 0; padding: 0; white-space: nowrap; color: var(--text-soft); } #header-breadcrumbs a { text-decoration: none; } #header-breadcrumbs p a { font-size: 0.75rem; text-decoration: none; color: var(--text-soft); } #header-breadcrumbs .account-info { font-size: 0.75rem; float: right; overflow: hidden; width: 340px; margin: 0 0 0 20px; text-align: right; white-space: nowrap; } #header-breadcrumbs .account-info .link { font-size: 0.75rem; font-weight: 600; text-decoration: none; color: var(--brand); } .small { font-size: 0.75rem; color: var(--brand); } .small-gray { font-size: 0.75rem; margin: 0; padding: 0; color: var(--text-faint); } hr { width: 100%; height: 2px; margin: 4px 0 6px; padding: 0; border-top: 1px var(--border) solid; border-right: 0; border-bottom: 1px #fff solid; border-left: 0; } .sound-icon { padding: 0 0 4px; border: 0; } .comment-icon { font-size: 0.625rem; font-weight: 600; float: right; width: 25px; height: 23px; padding: 1px 0 0; text-align: center; background-image: url('images/icons/comments.png'); background-repeat: no-repeat; } .nav-button { font-weight: 600; width: 150px; margin: 0 0 0 428px; padding: 5px 15px; color: var(--brand); border: 1px var(--border) solid; background-color: #fff; } h1 { font-size: 1.25rem; font-weight: 600; line-height: 1.2; margin: 0 0 10px; color: var(--text); } h2, h3, h4 { font-size: 1rem; font-weight: 600; margin: 0 0 10px; color: var(--text); } .icon { margin: 0 1px 4px 0; border: 0; } .page-navigation { width: 550px; margin: 30px 0 0; } .clear { clear: both; } #container { overflow: hidden; width: 975px; margin: 0 auto; background-image: url('images/container-bg.png'); } #container img { display: inline-block; margin: 0; padding: 0; vertical-align: middle; } #container-left { float: left; width: 590px; padding: 15px 15px 15px 5px; } #container-right { float: left; width: 335px; height: 100%; padding: 15px; } .article-container { overflow: hidden; width: 100%; height: auto !important; min-height: 100px; margin: 0; } .article-container h3 { font-size: 1rem; font-weight: 600; font-style: normal; line-height: 18px; max-width: 460px; margin: -2px 0 2px; padding: 0; letter-spacing: normal; color: var(--text); } .article-container #full ul, .article-container #full ol { margin: -12px 0 10px; padding: 0 0 0 20px; } .article-container #full li { margin: 0; padding: 0; } .article-container #full h2 { font-size: 0.875rem; font-weight: 600; margin: 0; padding: 0; } .article-container #full img.aligncenter { display: block; margin: 0 auto; } .article-container #full blockquote { font-style: italic; margin: 0 20px 20px 20px; padding: 10px 10px 0 10px; border: 1px solid var(--border-soft); background-color: var(--bg-panel); } .article-container .permalink-red { display: inline-block; } #page h3 { font-size: 1rem; font-weight: 600; font-style: normal; margin: 0; padding: 0; letter-spacing: normal; color: var(--text); } #page p { font-size: 0.875rem; line-height: 17px; margin: 0 0 12px; } table.itemList { font-size: 0.75rem; width: 100%; margin: 0 0 15px; padding: 0 1px; empty-cells: show; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-left: 1px solid var(--border); background-color: var(--bg-panel); } table.itemList td { font-size: 0.75rem; line-height: 16px; padding: 5px 4px 4px; vertical-align: top; border-top: 1px solid #fff; border-bottom: 1px solid var(--border); } table.itemList th { font-weight: 600; padding: 6px 4px 5px; text-align: left; vertical-align: top; white-space: nowrap; color: var(--text); border-top: 1px solid #fff; border-bottom: 1px solid #fff; background-color: var(--bg-chrome); background-repeat: repeat-x; } .table.itemList a { font-size: 0.75rem; } .itemList .heading { font-weight: 600; background-color: var(--bg-chrome); } .article-container a.permalink:link, a.permalink:visited, a.permalink:active { text-decoration: none; } .article-container a.permalink:hover { text-decoration: none; color: var(--brand); } .article-container .picdiv { float: left; width: 90px; color: #fff; } .article-container .picdiv .inner { width: 80px; height: 80px; border: 1px #000 solid; } .article-container .picdiv .category { font-size: 0.75rem; font-weight: 600; position: relative; top: 64px; width: 80px; height: 16px; margin: 0 auto; text-align: center; color: white; background-color: var(--text); } .article-container .pic { float: left; margin: 2px 10px 5px 0; border: 1px var(--text) solid; } .article-container .floatleft { float: left; width: 500px; } .article-container p { line-height: 16px; margin: 0 0 12px; color: var(--text); } .article-container .date { font-size: 0.75rem; display: inline-block; width: 100%; margin: 5px 0; color: var(--text-faint); } .article-container .category { font-size: 0.75rem; display: inline-block; width: 150px; margin: 5px 0; color: var(--text-faint); } .article-container .comments { font-size: 0.75rem; display: inline-block; width: 190px; margin: 5px 0; color: var(--text-faint); } .article-container .relpic { margin: 0 10px 5px 0; border: 1px var(--text) solid; } #full p { font-size: 0.875rem; text-align: justify; } #related-articles { overflow: hidden; margin: 0 0 15px; padding: 10px; border: 1px var(--border) solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: var(--bg-chrome); } #related-articles li { margin: 0; padding: 0 0 5px 0; list-style: none; } #related-articles li a { padding: 5px 0 5px 1px; color: var(--text); } #comments { padding: 10px; border: 1px var(--border) solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: var(--bg-chrome); } #comments_add { margin: 15px 0 0 0; padding: 10px; border: 1px var(--border) solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: var(--bg-chrome); } #comments h4, #comments_add h4 { font-size: 1rem; font-weight: 600; float: left; width: 100px; margin: 0 0 5px; } #comments .comment, #comments_add .comment { overflow: hidden; width: 550px; margin: 8px 0 5px 9px; padding: 0; background-image: url('images/article-comment-bg.png'); background-repeat: no-repeat; } #comments .comment p, #comments_add .comment p { line-height: 16px; margin: 2px 0 10px; } #comments .comment p-div, #comments_add .comment p-div { float: left; width: 470px; } #comments .comment .styling, #comments_add .comment .styling { clear: both; overflow: hidden; width: 534px; min-height: 80px; margin: 13px 0 0; padding: 0 6px 0 8px; border-right: 1px var(--border) solid; border-bottom: 1px var(--border) solid; border-left: 1px var(--border) solid; background-color: #fff; } #comments .styling .username, #comments_add .styling .username { font-size: 1rem; font-weight: 600; float: left; padding: 0 0 0 1px; } #comments .styling .datetime, #comments_add .styling .datetime { font-size: 0.625rem; float: right; color: var(--text-faint); } #comments .small-left, #comments_add .small-left { font-size: 0.75rem; font-weight: 600; float: left; text-decoration: underline; color: var(--brand); } #comments .small-right, #comments_add .small-right { font-size: 0.75rem; font-weight: 600; float: right; text-decoration: underline; color: var(--brand); } .avatar { float: left; width: 50px; margin: 5px 5px 0 0; padding: 0 0 10px; } .user_avatar { border: 1px var(--text) solid; } #comments blockquote { margin: 2px 20px 10px 10px; padding: 5px; border: 1px var(--border) solid; background-color: var(--bg-panel); background-repeat: no-repeat; background-position: top left; } #comments .add, #comments_add .add { clear: both; overflow: hidden; width: 548px; margin: 0 0 5px; padding: 9px 0 0; background-image: url('images/article-comment-bg.png'); background-repeat: no-repeat; } #comments .add .styling, #comments_add .add .styling { margin: 1px 0 0; padding: 5px 6px 0; border-right: 1px var(--border) solid; border-bottom: 1px var(--border) solid; border-left: 1px var(--border) solid; background-color: #fff; } #comments .add .comment-textarea, #comments_add .add .comment-textarea { width: 528px; height: 150px; margin: 0; padding: 0; border: 0; } #comments .add .comment-input, #comments_add .add .comment-input { float: right; width: 460px; height: 20px; margin: 5px 0; padding: 5px 2px 1px 5px; border: 1px var(--border) solid; } #comments .add .comment-button, #comments_add .add .comment-button { font-weight: 600; width: 120px; margin: 0 0 0 428px; padding: 5px 15px; color: var(--brand); border: 1px var(--border) solid; background-color: #fff; } #comments .add .comment-label, #comments_add .add .comment-label { font-weight: 600; display: block; float: left; width: 77px; padding: 10px 0; } #comments #add-comment, #comments_add #add-comment { margin: 0; padding: 0; } #overview-container { margin: 20px 0 0; text-decoration: none; } #overview-container .overviewlinks { display: block; overflow: hidden; width: 570px; height: 21px; margin: 2px 0; text-decoration: none; } #overview-container a.overviewlinks:hover { color: var(--brand); background-color: var(--bg-chrome); } #overview-container .date { font-size: 0.75rem; font-weight: 600; display: inline-block; width: 45px; padding: 2px 5px; text-align: center; color: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-color: var(--brand); } #overview-container h4 { font-size: 1rem; font-weight: 600; display: block; margin: 0; padding: 0; } #overview-container .time { font-size: 0.75rem; padding: 5px 5px 5px 2px; color: var(--text-faint); } #overview-container .title { font-size: 0.875rem; font-weight: 600; padding: 5px 5px 5px 2px; } #f-overview-container { margin: 15px 0 0; text-decoration: none; } #f-overview-container h4 { font-size: 1rem; font-weight: 600; display: block; margin: 0; padding: 0; } #f-overview-container .overviewlinks { display: block; overflow: hidden; width: 570px; height: 21px; margin: 2px; text-decoration: none; } #f-overview-container a.overviewlinks:hover { color: var(--brand); background-color: var(--bg-chrome); } #f-overview-container .date { font-size: 0.75rem; font-weight: 600; display: inline-block; width: 46px; padding: 2px 5px; text-align: center; color: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-color: var(--brand); } #f-overview-container .time { font-size: 0.75rem; padding: 5px 5px 5px 2px; color: var(--text-faint); } #f-overview-container .title { font-size: 0.875rem; font-weight: 600; padding: 5px 5px 5px 2px; } #video-container { overflow: hidden; margin: 20px 0 0; } #video-container h4 { font-size: 1rem; font-weight: 600; display: block; margin: 0; padding: 0; } #video-container h1 { font-size: 1rem; margin: 0 0 5px; text-decoration: none; } #video-container p { margin: 0 0 5px; } #video-container a.permalink:link, a.permalink:visited, a.permalink:active { text-decoration: none; } #video-container a.permalink:hover { text-decoration: underline; } #video-container .single-video { clear: both; overflow: hidden; min-height: 95px; } #video-container .single-video h3, h4 { font-size: 1rem; margin: 0 0 5px; text-decoration: none; } #video-container .single-video .date { font-size: 0.625rem; display: inline-block; width: 170px; margin: 5px 0; color: var(--text-faint); } #video-container .single-video .comments { font-size: 0.75rem; display: inline-block; width: 200px; margin: 5px 0; color: var(--text-faint); } #video-container .single-video .icon { margin: 0 1px 4px 0; border: 0; } #video-container .single-video .pic { float: left; margin: 0 10px 15px 0; border: 1px var(--text) solid; } .video-container .pic { float: left; margin: 0 10px 15px 0; border: 1px var(--text) solid; } .video-container { min-height: 95px; } .video-container .picdiv { float: left; width: 128px; } .video-container .floatleft { float: left; width: 440px; padding: 0 0 0 10px; } .video-container h3, h4 { font-size: 1rem; font-weight: 600; font-style: normal; line-height: 17px; margin: 0 0 3px; padding: 0; letter-spacing: normal; color: var(--text); } .video-thumbs { float: left; width: 125px; height: 145px; margin: 5px 20px 0 0; } .video-thumbs .pic { border: 1px var(--text) solid; } .video-thumbs .date { font-size: 0.625rem; float: left; margin: 0; padding: 0; color: var(--text-faint); } .video-thumbs .comment { font-size: 0.75rem; float: right; margin: 0; padding: 0; text-align: right; } .video-thumbs .icon { margin: 0 0 3px; border: 0; } .video-thumbs .permalink-red { font-size: 0.75rem; line-height: 14px; display: block; overflow: hidden; width: 130px; height: 28px; text-decoration: none; } .right-list { margin: 0 0 5px; text-decoration: none; } .right-list h3 { font-size: 1rem; font-weight: 600; margin: 0; } .right-list .overviewlinks { display: block; overflow: hidden; width: 330px; height: 22px; margin: 0; margin: 2px 0 2px 1px; text-decoration: none; } .right-list a.overviewlinks:hover { color: var(--brand); background-color: var(--bg-chrome); } .right-list .date { font-size: 0.75rem; font-weight: 600; display: inline-block; width: 46px; padding: 2px 5px; text-align: center; color: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-color: var(--brand); } .right-list .time { font-size: 0.75rem; padding: 5px 5px 5px 2px; color: var(--text-faint); } .right-list .title { font-size: 0.875rem; font-weight: 600; padding: 0 5px 0 2px; } #poll-right { margin: 0 0 5px; padding: 0; text-decoration: none; } #poll-right h4 { font-size: 1rem; font-weight: 600; margin: 0 0 5px; } #poll-right .overviewlinks { display: block; margin: 0; margin: 2px; text-decoration: none; } #poll-right a.overviewlinks:hover { background-color: var(--bg-chrome); } #poll-right .date { font-weight: 600; display: inline-block; width: 40px; padding: 3px 7px; text-align: center; color: #fff; background-color: var(--brand); } #poll-right .title { font-size: 0.875rem; font-weight: 600; padding: 0 5px 0 2px; } #comments-right { margin: 0 0 5px; text-decoration: none; } #comments-right h4 { font-size: 1rem; font-weight: 600; margin: 0 0 5px; } #comments-right .comment { display: block; margin: 0; padding: 13px 0 0; background-image: url('images/front-comment-bg.png'); background-repeat: no-repeat; } #comments-right p { display: block; overflow: hidden; width: 316px; height: 34px; min-height: 25px; margin: 0 0 5px; padding: 0 7px 2px 5px; border-right: 1px var(--border) solid; border-bottom: 1px var(--border) solid; border-left: 1px var(--border) solid; background-color: #fff; } #comments-right a { text-decoration: none; } .search-term { font-size: 0.75rem; width: 170px; padding: 3px 3px 3px 4px; border: 1px var(--border) solid; } .search-section { width: 85px; padding: 2px 0; border: 1px var(--border) solid; } .search-button { font-weight: 600; width: 60px; padding: 2px; color: #fff; border: 0; background-color: var(--brand); } #footer { clear: both; overflow: hidden; width: 100%; height: 355px; margin: 0 auto; padding: 0; color: var(--text-faint); background-color: var(--text); } #inside { width: 960px; margin: 0 auto; padding: 20px; } #footer h3 { font-size: 1rem; font-weight: 600; margin: 0 0 10px; color: #fff; } #nieuws { float: left; width: 280px; margin: 0 35px 0 0; color: #fff; } #links { float: left; width: 180px; margin: 0 35px 0 15px; color: #fff; } #inside ul { margin: 0; padding: 0; } #inside li { margin: 0 0 5px 10px; list-style: none; } a.foot-link:link, a.foot-link:visited, a.foot-link:active { display: block; overflow: hidden; width: 270px; height: 17px; padding: 3px 3px 3px 5px; text-decoration: none; color: #fff; background-color: var(--text); } a.foot-link:hover { overflow: hidden; width: 270px; height: 17px; text-decoration: none; background-color: var(--brand); } #about { float: left; width: 325px; margin: 0 15px; padding: 0 0 0 10px; } #footer p { padding: 0 0 0 10px; color: var(--text-faint); } #footer-nav { font-size: 0.875rem; font-weight: 600; } #footer img { border: 0; } #copyright { clear: both; padding: 20px 0; text-align: center; } #copyright p { margin: 0 0 10px; } #copyright a { text-decoration: underline; color: var(--text-faint); } .postbody a { text-decoration: underline; color: var(--brand); } .postbody a:hover { text-decoration: none; color: var(--brand); } div.wpcf7 { margin: 0; padding: 0; } div.wpcf7-response-output { margin: 2em .5em 1em; padding: .2em 1em; } div.wpcf7-mail-sent-ok { border: 2px solid var(--success); } div.wpcf7-mail-sent-ng { border: 2px solid red; } div.wpcf7-spam-blocked { border: 2px solid orange; } div.wpcf7-validation-errors { border: 2px solid #f7e700; } .wpcf7-display-none { display: none; } .vvqbox { display: block; visibility: visible !important; max-width: 100%; } .vvqbox img { max-width: 100%; height: 100%; } .vvqbox object { max-width: 100%; } .wp-pagenavi { margin: 0 0 10px; text-transform: uppercase; } .wp-pagenavi a, .wp-pagenavi a:link { font-weight: 600; margin: 2px; padding: 3px 5px 4px; text-decoration: none; color: var(--brand); border: 1px solid var(--border); background-color: #fff; background-image: url('images/button-gradient.png'); } .wp-pagenavi a:visited { margin: 2px; padding: 3px 5px 4px; text-decoration: none; color: var(--brand); border: 1px solid var(--border); background-color: #fff; background-image: url('images/button-gradient.png'); } .wp-pagenavi a:hover { color: var(--brand); border: 1px solid var(--border); background-color: var(--bg-chrome); background-image: none; } .wp-pagenavi a:active { margin: 2px; padding: 3px 5px 4px; text-decoration: none; color: var(--brand); border: 1px solid var(--border); background-color: #fff; background-image: url('images/button-gradient.png'); } .wp-pagenavi span.pages { font-weight: 600; float: left; margin: 0 2px 10px; padding: 0 10px 4px 5px; color: var(--text); background-color: #fff; } .wp-pagenavi span.current { font-weight: 600; margin: 2px; padding: 3px 5px 4px; color: var(--text); border: 1px solid var(--border); background-color: var(--bg-chrome); background-image: none; } .wp-pagenavi span.extend { margin: 2px; padding: 3px 5px 4px; color: var(--brand); background-color: #fff; } .seperator { width: 335px; height: 2px; margin: 5px 0; background-image: url('images/seperator.png'); } .seperator_big { width: 545px; height: 2px; margin: 5px 0 5px 5px; background-image: url('images/seperator.png'); } .AdContainer { overflow: hidden; margin: 10px 0 5px; padding: 5px 0; border: 1px solid var(--border); background-color: var(--bg-panel); } .AdContainer .advertisement { width: 728px; height: 90px; margin: 0 auto; } .tabberlive .tabbertabhide { display: none; } .tabberlive { margin-top: 3px; } ul.tabbernav { font-weight: 600; margin: 0; padding: 0 0 0 5px; border-bottom: 1px solid var(--border); } ul.tabbernav li { display: inline; margin: 0; padding: 0; list-style: none; } ul.tabbernav li a { font-size: 0.75rem; margin-left: 2px; padding: 3px .5em; text-align: center; text-decoration: none; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 0; border-bottom: 0; border-left: 1px solid var(--border); background: var(--border-soft); } .right-list ul.tabbernav li a { font-size: 0.75rem; margin-left: 2px; padding: 2px 5px; text-align: center; text-decoration: none; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 0; border-left: 1px solid var(--border); background: var(--border-soft); } ul.tabbernav li a:link { color: var(--text-soft); } ul.tabbernav li a:visited { color: var(--text-soft); } ul.tabbernav li a:hover { color: var(--text); border-color: var(--border); background: var(--border-soft); } .right-list ul.tabbernav li a:hover { color: var(--text); border-color: var(--border); background: var(--bg-chrome); } ul.tabbernav li.tabberactive a { font-weight: 600; border-bottom: 1px #fff solid; background-color: #fff; } .right-list ul.tabbernav li.tabberactive a { font-weight: 600; border-bottom: 1px var(--bg-chrome) solid; background-color: var(--bg-chrome); } ul.tabbernav li.tabberactive a:hover { border-bottom: 1px #fff solid; background: white; } .right-list ul.tabbernav li.tabberactive a:hover { border-bottom: 1px var(--bg-chrome) solid; background: var(--bg-chrome); } .widget-wrapper { display: inline-block; overflow: hidden; width: 100%; height: 270px; } .widget-wrapper > .tabbernav { display: none; } .tabberlive .tabbertab { height: 250px; padding: 1px 0; border-top: 1px solid var(--border); border-top: 0; } .tabberlive .tabbertab h2 { display: none; } .tabberlive .tabbertab h3 { display: none; } .tabberlive#tab2 .tabbertab { overflow: auto; height: 200px; } .hardtraxx_merchandise { display: inline-block; width: 100px; height: 100px; text-decoration: none; border: 1px var(--text) solid; } .hardtraxx_merchandise span { font-size: 0.75rem; display: block; height: 18px; margin: 80px 0 0 0; padding: 2px 0 0 0; text-align: center; text-decoration: none; color: #fff; background: var(--text); } .featured_message { position: relative; left: -5px; width: 580px; height: 90px; min-height: 92px; padding: 10px 5px 0 10px; border: 1px var(--border) solid; background: var(--bg-panel); } .featured_text { font-size: 0.625rem; font-weight: 600; position: relative; top: -20px; float: right; margin-bottom: -25px; color: var(--border); } .featured_message .floatleft { width: 490px; } .featured_message .comment-icon { margin: 0 5px 0 0; } .header_ad { position: relative; float: right; width: 468px; height: 60px; margin: -5px -10px 0 0; padding: 0; } .forumdesc a { font-size: 0.75rem; color: var(--text-faint); } .forumdesc strong { font-size: 0.75rem; } .row1 .gensmall a { color: var(--text-faint); } .sidebar_ad { height: 250px; margin: 0 0 30px 0; } .table-review { clear: both; margin-bottom: 15px; padding: 7px 15px 15px 15px; border-spacing: 0; text-align: left; border: 1px solid var(--border-soft); background-color: var(--bg-panel); } .table-review th { font-size: 0.875rem; font-weight: 600; } .table-review th { padding: 7px 0 7px 0; border-bottom: 1px var(--border-soft) solid; } .table-review td { padding: 7px 0 7px 0; border-bottom: 1px var(--border-soft) solid; } .table-review tr:last-child td { padding-bottom: 0; border-bottom: 0; } .table-review tr.score td { font-weight: 600; } .table-review td.heading { font-size: 0.875rem; font-weight: 600; padding: 7px 0 12px 0; text-align: center; } #cse-search-box { margin-bottom: 20px; } /* Generate smiley css list below with this script on the Smilies admin page: Array.from(document.querySelectorAll('#smilies tr')).map(row => { const code = row.querySelector('[name*="code"]')?.value; const width = row.querySelector('[name*="width"]')?.value; const height = row.querySelector('[name*="height"]')?.value; console.log(` img[alt="${code}"] { width: ${width}px; height: ${height}px; } `); }); */ img[alt=":)"] { width: 18px; height: 18px; } img[alt=":P"] { width: 20px; height: 20px; } img[alt=";)"] { width: 18px; height: 18px; } img[alt=":D"] { width: 20px; height: 20px; } img[alt=":("] { width: 20px; height: 20px; } img[alt=":$"] { width: 18px; height: 18px; } img[alt=":cool:"] { width: 20px; height: 20px; } img[alt=":cry:"] { width: 18px; height: 18px; } img[alt="^^"] { width: 20px; height: 20px; } img[alt=":huh:"] { width: 20px; height: 20px; } img[alt=":mad:"] { width: 20px; height: 20px; } img[alt="-.-"] { width: 20px; height: 20px; } img[alt=">.<"] { width: 18px; height: 18px; } img[alt=":/"] { width: 20px; height: 20px; } img[alt=":x"] { width: 20px; height: 20px; } img[alt="xd"] { width: 20px; height: 20px; } img[alt=":woot:"] { width: 18px; height: 20px; } img[alt=":love:"] { width: 18px; height: 18px; } img[alt=":drool:"] { width: 18px; height: 25px; } img[alt=":lol:"] { width: 20px; height: 20px; } img[alt=":oh:"] { width: 20px; height: 20px; } img[alt=":thumbup:"] { width: 25px; height: 19px; } img[alt=":thumbdown:"] { width: 29px; height: 20px; } img[alt=":thumbsup:"] { width: 38px; height: 20px; } img[alt=":aww:"] { width: 46px; height: 20px; } img[alt=":bomb:"] { width: 28px; height: 24px; } img[alt=":evil:"] { width: 18px; height: 23px; } img[alt="(L)"] { width: 19px; height: 19px; } img[alt=":innocent:"] { width: 18px; height: 22px; } img[alt=":corn:"] { width: 35px; height: 35px; } img[alt=":list:"] { width: 26px; height: 26px; } img[alt=":sick:"] { width: 18px; height: 18px; } img[alt=":slow:"] { width: 34px; height: 22px; } img[alt=":whistle:"] { width: 27px; height: 20px; } img[alt=":worship:"] { width: 33px; height: 25px; } img[alt=":loving:"] { width: 22px; height: 29px; } img[alt=":yawn:"] { width: 18px; height: 18px; } img[alt=":yay:"] { width: 42px; height: 27px; } img[alt=":yes:"] { width: 20px; height: 20px; } img[alt=":nono:"] { width: 23px; height: 25px; } img[alt=":sleep:"] { width: 38px; height: 23px; } img[alt=":surrender:"] { width: 28px; height: 20px; } img[alt=":clap:"] { width: 28px; height: 30px; } img[alt=":kiss2:"] { width: 18px; height: 18px; } img[alt=":kiss:"] { width: 40px; height: 18px; } img[alt=":beer:"] { width: 58px; height: 30px; } .forum-image, .forum-image img { width: 80px; height: 45px; } img[alt="Last Post"] { width: 10px; height: 10px; } img[alt="Antwoord op onderwerp"] { width: 80px; height: 24px; } img[alt="Plaats een nieuw onderwerp"] { width: 90px; height: 24px; } /* Shoutbox timestamps: small, faded, tabular figures (chat_body.html) */ .chat-time { font-size: 0.75rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* ========================================================================== SECTION 3: responsive layer (formerly mobile.css) ========================================================================== */ /* ========================================================================== Responsive layer Loads after the two legacy sections above. Three sub-layers: 1. base (no media query) — the modern chrome shared by ALL viewports: the 4-step type scale, the combined breadcrumb/account bar (the old nav bar and quicklinks are gone everywhere), forum icon tiles, flat topic icons, real buttons, boxed pagination, the 12px list-gutter system, form controls 2. <= 999px — make the fixed 950/960px shell fluid 3. <= 767px — phone layout: stacked tables, flattened post rows, collapsed crumbs, hidden columns The base layer keeps the desktop COLUMN STRUCTURE intact — it restyles widgets, never table layout. ========================================================================== */ /* Placeholder tile for posters without an avatar: rendered by viewtopic_body.html but only shown on phones (see below). */ .avatar-placeholder-row { display: none; } /* Phone-only elements (forum counts pill, UCP menu toggle): rendered by the templates but invisible outside the phone media query. */ .mob-only, .ucp-menu-toggle, .ucp-menu-label { display: none; } /* Reply-count chat icon in viewforum topic rows: phone-only (desktop shows the reply-count column instead) */ .mob-replies { display: none; } /* Last-reply time in forum index rows: phone-only (desktop shows the last-post column instead) */ .mob-lastpost { display: none; } /* ========================================================================== Base layer: modern chrome at every viewport ========================================================================== */ /* --- Type scale (1rem = the browser default, normally 16px): 0.75rem = 12px meta (dates, counts, breadcrumbs, descriptions, footer) 0.875rem = 14px body text, titles in lists (matches the legacy body size) 1.25rem = 20px page titles (set globally in the legacy sections) One scale for every viewport; the legacy sheets' odd sizes (11px dates, mixed list sizes) are pinned onto it here. --- */ .gen, .genmed { font-size: 0.875rem; } .gensmall, .pagination, p.forumdesc, p.topicdetails, p.topicauthor { font-size: 0.75rem; } a.topictitle, span.topictitle a { font-size: 0.875rem; } .quotetitle, .attachtitle, .attachcontent, .btnbbcode { font-size: 0.75rem; } .btnmain, .btnlite, .btnfile { font-size: 0.875rem; } .postbody { font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; word-wrap: break-word; } /* roomier quote boxes so nested quotes don't hug their parent's edges; no ❝❞ background image — flat design at every viewport */ .quotetitle { padding: 6px 8px; background-image: none; } .quotecontent { padding: 10px; } .postauthor { font-size: 0.875rem; } .post-date { font-size: 0.75rem; color: var(--text-faint); } .copyright, .copyright .gensmall { font-size: 0.75rem !important; line-height: 1.6; } /* --- Header: the nav bar and the floating Shoutbox/Zoeken quicklinks are gone at every viewport — the forum sections are all reachable from the index, everything else lives in the breadcrumb/account bar below. --- */ #header-nav { display: none; } .quicklinks { display: none; } /* breathing room between the breadcrumb bar and the page content */ #ipbwrapper { padding-top: 10px; } /* --- Breadcrumbs + account links (all viewports): the combined mobile bar. One 36px flex row: home icon + chevron-separated crumbs on the left (phones collapse the intermediate crumbs, see the phone block), icon-only account links (Zoeken/Shoutbox/Contact/Opties/Inbox/Uitloggen) on the right. Overrides the legacy fixed 590/340px floats. --- */ #header-breadcrumbs { height: auto; padding: 0; } #header-breadcrumbs .breadcrumbs-container { display: flex; align-items: center; gap: 10px; } #header-breadcrumbs p, #header-breadcrumbs .account-info { float: none; width: auto; max-width: none; margin: 0; padding: 11px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.75rem; } /* the crumb line is a flex row with a fixed height: with height:auto the bar grew 2px on deeper pages because the line box spans the union of baseline text and the -3px-aligned icons, which differs per page */ #header-breadcrumbs p:not(.account-info) { flex: 1 1 0; min-width: 0; /* 35px + the bar's 1px bottom border = a 36px bar */ display: flex; align-items: center; height: 35px; padding: 0; } #header-breadcrumbs p b { display: flex; align-items: center; gap: 2px; min-width: 0; } #header-breadcrumbs p b > a:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #header-breadcrumbs p a, #header-breadcrumbs .account-info .link { font-size: 0.75rem; display: inline-block; padding: 2px 1px; } /* keep the icon side no taller than the 35px crumb row */ #header-breadcrumbs .account-info { flex: 0 1 auto; max-width: 76%; padding: 6px 0; text-align: right !important; border-top: 0; } #header-breadcrumbs .account-info br { display: none; } /* "Forumoverzicht" collapses to the home icon at every viewport (unscoped: the footer breadcrumb trail matches the header bar) */ .crumb-home-text { display: none; } .crumb-home-icon { display: inline-block; vertical-align: -3px; color: var(--text); } #header-breadcrumbs a.crumb-home { display: inline-block; padding: 2px 4px 2px 0; } /* separators draw a lucide chevron-right instead of the » glyph (font-size 0 hides the glyph, the icon is a ::before mask) */ .crumb-sep { display: inline-block; font-size: 0; vertical-align: -3px; } /* --- List tables: the 12px gutter system. Headers, icon cells and title cells share the same 12px side gutters and 8-10px row padding. --- */ .tablebg th { padding: 8px 12px; height: auto; font-size: 0.75rem; } /* viewforum's "Onderwerpen" header: its inline-padded inner div and small font made it taller than the index category headers — match those */ .tablebg th > div { padding: 0 !important; font-size: 0.875rem; } /* Safari distributes the colspan'd category header's width into the icon column; a zero-width box takes the title out of that math */ .tablebg th .cattext { display: inline-block; width: 0; white-space: nowrap; padding: 0; } .cat { text-indent: 12px; } /* .cat box headers (Statistieken, Wie is er online): same size as the category headers instead of the legacy 1rem h4 with its bottom margin */ td.cat h4 { font-size: 0.875rem; margin: 0; } .mob-title { padding: 10px 12px; } td[width='25'][align='center'] { padding: 10px 12px; } a.forumlink { padding: 0; line-height: 1.2; } a.marklink { padding: 10px 0 10px 12px !important; } /* --- Forum icon tiles (forumlist_body.html): rounded-square colored tile with a lucide icon per forum, replacing the old banner images at every viewport. Icon map + category colors further down. Cell: 34px tile in a fixed 48px box with the 12px left gutter, centered on the row. --- */ td:has(> a.forum-image) { vertical-align: top; text-align: left; width: 48px !important; max-width: 48px; padding: 10px 0 10px 12px !important; } td:has(> a.forum-image) > a { display: block; padding: 0; line-height: 0; width: 34px; height: 34px; } /* Unread indicator dot after forum names */ .unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: 4px; } /* --- Subforum line (forumlist rows): a lucide corner-down-right icon instead of the "Subforums:" label, and every subforum link prefixed with a small rounded square in the parent category's color (the fico- class on the span carries the color variables). font-size 0 swallows the bare ", " text nodes phpBB emits between the links. --- */ .subforums { font-size: 0; color: var(--text-faint); } .subforums .sf-ico { vertical-align: -3px; margin-right: 8px; } .subforums a { font-size: 0.75rem; display: inline-block; margin-right: 12px; } .subforums a::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--fico-bg, #64748b); margin-right: 5px; } /* --- "Laatste bericht" columns: the timestamp itself links to the latest post, styled as plain meta text --- */ .lastpost-link { color: inherit; text-decoration: none; } .lastpost-link:hover { text-decoration: underline; } /* --- a11y (Lighthouse/axe) --- */ /* Screenreader-only label text (o.a. sorteer-selects in viewforum) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Category-titelrij is een (td-has-header); render identiek aan de oude td.cat, ondanks de generieke th-regel bovenin */ th.cat { height: 30px; padding: 0; border: 0; border-top: 1px var(--border-soft) solid; background-color: var(--bg-chrome); text-indent: 4px; text-align: left; font-weight: normal; font-size: 0.875rem; white-space: normal; color: inherit; } /* Tap-targets van dichte lijstlinks naar >=24px zonder de layout te verschuiven: verticale padding op inline elementen schuift regels niet op */ p.topicdetails a, td.row1 span.gensmall a, td.row2 span.gensmall a, a.gensmall { padding-block: 5px; } a.topictitle { padding-block: 2px; } /* --- Inline icon links (all viewports). newest-link: jump-to-first-unread arrow before unread titles, accent like the unread dot. attach-ico: the attachment paperclip. tool-link: small faint utility icons (rapporteer/ waarschuw/verwijder on posts, chat delete). --- */ a.newest-link { color: var(--accent); text-decoration: none !important; } a.newest-link svg { vertical-align: -2px; } .attach-ico { color: var(--text-faint); vertical-align: -2px; } a.tool-link { color: var(--text-faint); text-decoration: none !important; display: inline-block; padding: 2px 3px; } a.tool-link:hover { color: var(--text); } a.tool-link svg { vertical-align: -3px; } /* contact icon buttons (memberlist, profiles, PM view, poster sidebar) */ a.cbtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 30px; box-sizing: border-box; vertical-align: middle; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--text); text-decoration: none !important; } /* shoutbox: online-status dot and the ajax activity spinner */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--border); vertical-align: 1px; } .status-dot.st-online { background: var(--success); } .chat-spinner { display: inline-block; width: 13px; height: 13px; box-sizing: border-box; border: 2px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: ht-spin .8s linear infinite; } @keyframes ht-spin { to { transform: rotate(360deg); } } /* placeholder for members without an avatar (UCP/MCP) */ .avatar-none { display: inline-block; width: 96px; height: 96px; border-radius: 50%; background: var(--bg-chrome); position: relative; } .avatar-none::after { content: ""; position: absolute; inset: 26px; background: var(--text-faint); -webkit-mask: var(--uico) center / contain no-repeat; mask: var(--uico) center / contain no-repeat; --uico: url('data:image/svg+xml;utf8,'); } /* flat chrome: kill the legacy background images the old sheets still set */ #header-top { background-image: none; } .catdiv, .rtl .catdiv { background: var(--bg-chrome); } .codetitle { background-image: none; } /* ---------- Tablet + phone: make the fixed 950/960px shell fluid ---------- */ @media (max-width: 999px) { #ipbwrapper { width: auto; margin: 0 12px; } #header-logo, #header-breadcrumbs .breadcrumbs-container { width: auto; margin: 0 12px; } /* Header: below 1000px the 220px logo + 728px ad slot can't sit side by side; the ad unit moves to its own centered row below the logo, inside the same black bar. Both GPT and the TradeTracker fallback serve 728x90 down to 768px and mobile sizes below that (GPT size mappings + the responsive TT embed script, both in overall_header.html). */ #header-logo > div:not(.htx-header-unit) { display: none !important; } #header-top { height: auto; overflow: hidden; } #header-logo { padding: 8px 0 !important; text-align: left; } #header-logo a { float: none !important; display: inline-block; padding: 8px 0 !important; } .htx-header-unit { float: none !important; clear: both; width: auto !important; height: auto !important; min-height: 90px; padding: 0 0 8px !important; text-align: center; } .htx-header-unit > div { display: inline-block; margin: 0 auto; max-width: 100%; } .htx-header-unit > .ad-placeholder { display: inline-flex; } .postbody img { max-width: 100% !important; height: auto; } .postbody iframe, .postbody object, .postbody embed { max-width: 100%; } /* Ad slots have no mobile sizes: just make sure their fixed-width wrappers can never widen the page. The slots themselves are left alone. */ .AdContainer > div, .AdContainer > div > div, .htx-ad-inner, div[id^='div-gpt-ad'] { width: auto !important; max-width: 100%; } .AdContainer iframe, td iframe[width='728'] { max-width: 100%; } } /* ------------------------------ Phone ------------------------------------ */ @media (max-width: 767px) { /* iOS paints the strip under the status bar/pill (and the overscroll areas) with the root background — this is how tweakers.net gets its chrome color up there. Split gradient: black behind the top (blends into the black header), white behind the bottom (no dark flash when rubber-banding past the footer). body's own white bg covers the page. */ html { background: linear-gradient(to bottom, #000 0%, #000 50%, #fff 50%, #fff 100%); } body, td { -webkit-text-size-adjust: 100%; } /* 1rem (16px) form fields stop the iOS focus-zoom */ input, select, textarea { font-size: 1rem; max-width: 100%; } textarea { width: 100% !important; box-sizing: border-box; } body { padding-bottom: 40px; } /* --- Compact logo bar: scaled-down wordmark (220:28 aspect); total bar height ~49px, a touch taller than the 44px breadcrumb bar below it --- */ #header-logo { padding: 6px 0 !important; } #header-logo a { padding: 10px 0 !important; } #header-logo svg { width: 157px; height: 20px; } } /* --- Account bar (all viewports): Zoeken, Shoutbox, Contact, Opties, Inbox and Uitloggen as icon-only links, with the unread count as a badge on the inbox envelope. Identical padding on every icon link and identical .acc-sep dividers between. --- */ #header-breadcrumbs .account-info .bar-search, #header-breadcrumbs .account-info .bar-shout, #header-breadcrumbs .account-info .bar-contact, #header-breadcrumbs .account-info .bar-opties, #header-breadcrumbs .account-info .bar-inbox, #header-breadcrumbs .account-info .bar-logout { text-decoration: none; display: inline-block; padding: 2px 5px; } #header-breadcrumbs .account-info .bar-search svg, #header-breadcrumbs .account-info .bar-shout svg, #header-breadcrumbs .account-info .bar-contact svg, #header-breadcrumbs .account-info .bar-opties svg, #header-breadcrumbs .account-info .bar-inbox svg, #header-breadcrumbs .account-info .bar-logout svg { vertical-align: -3px; } #header-breadcrumbs .account-info .bar-opties-icon, #header-breadcrumbs .account-info .bar-logout-icon { display: inline-block; } #header-breadcrumbs .account-info .bar-opties-text, #header-breadcrumbs .account-info .bar-logout-text { display: none; } /* separator pipes: a light tint of the brand red */ #header-breadcrumbs .account-info .acc-sep { color: rgba(176, 24, 32, 0.35); margin: 0 1px; } /* Inbox: envelope icon with the unread count in a badge on its corner. The badge is absolutely positioned, so the link is the positioning box. */ #header-breadcrumbs .account-info .bar-inbox { position: relative; } #header-breadcrumbs .account-info .bar-inbox-icon { display: inline-block; } #header-breadcrumbs .account-info .bar-inbox-text { display: none; } #header-breadcrumbs .account-info .bar-inbox-count { display: inline-block; position: absolute; top: -5px; right: -3px; width: 15px; height: 15px; line-height: 15px; border-radius: 50%; padding: 0; box-sizing: border-box; background: var(--brand); color: #fff; font-size: 8px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; } .crumb-sep::before { content: ""; display: inline-block; width: 14px; height: 14px; background: var(--text-faint); -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } @media (max-width: 767px) { /* Breadcrumbs on phones: intermediate crumbs and their separators are hidden — only the home icon, one chevron and the deepest crumb show */ #header-breadcrumbs b > a:not(.crumb-home):not(:last-child) { display: none; } #header-breadcrumbs b > .crumb-sep { display: none; } #header-breadcrumbs b > .crumb-sep:last-of-type { display: inline-block; } /* --- Generic tables: never wider than the page; scroll inside if needed --- */ .tablebg { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tablebg > tbody { display: table; width: 100%; } /* Low-value columns (post counts, views, last-post info): hidden on mobile */ .mob-hide { display: none !important; } /* Form tables (label column + field column): stack label above field. Only direct children, so nested tables keep their own layout. */ .mob-stack { display: block; overflow-x: visible; } .mob-stack > tbody, .mob-stack > tbody > tr, .mob-stack > tbody > tr > td, .mob-stack > tbody > tr > th { display: block; width: auto !important; height: auto !important; } .mob-stack > tbody { border-spacing: 0; } /* stacked header cells are full-width blocks: the base sheet's th nowrap would push long titles past the viewport */ .mob-stack th { white-space: normal; } .mob-stack > tbody > tr > td { box-sizing: border-box; } /* label/value rows lose their side borders when stacked; tighten padding */ .mob-stack > tbody > tr > td.row1, .mob-stack > tbody > tr > td.row2 { padding: 6px 8px; } /* the smiley panel next to the message box: hidden on mobile */ .mob-smilies { display: none !important; } /* stacked forms (login, posting subject, PM options): text fields take the full row instead of their size-attribute width */ .mob-stack input.post { width: 100%; } /* Single-line titles in topic/forum lists: truncate, never wrap (gutters/padding come from the base layer) */ .mob-title { max-width: 0; width: 100%; overflow: hidden; vertical-align: top; } /* forum rows wrap name+description in a content-sized float; unfloat it so the description can actually truncate against the cell edge */ .mob-title > div { float: none !important; overflow: hidden; min-width: 0; line-height: 1.2; /* title line as a flex row: long titles shrink+ellipsize while the unread dot and counts pill keep their width; the description (flex-basis 100%) wraps to its own line */ display: flex; flex-wrap: wrap; align-items: center; } .mob-title > div > a.forumlink { flex: 0 1 auto; } .mob-title p.forumdesc { flex: 0 0 100%; margin-top: 2px; } .unread-dot { flex: none; } .forum-counts { display: inline-block; flex: none; font-size: 0.6875rem; line-height: 1.4; color: var(--text-faint); margin-left: 7px; font-variant-numeric: tabular-nums; } .forum-counts .fc-ico { width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; } a.topictitle, a.forumlink, span.topictitle a { display: inline-block; max-width: 100%; vertical-align: bottom; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } span.topictitle { display: block; overflow: hidden; } /* topic lists (viewforum): the "jump to newest" arrow icon before unread titles is redundant next to the orange reply bubble — hide it */ .mob-title > a.newest-link { display: none; } /* topic lists (viewforum): titles wrap instead of truncating, and a topic's mini page links drop to their own line below the title (the inline-block there is an inline style, hence the !important) */ a.topictitle, span.topictitle a { white-space: normal; overflow: visible; } .mob-title p.gensmall { display: block !important; margin: 0; } /* the template's
after the title adds a blank line before the block-level pagination row — drop it so row spacing stays even */ .mob-title br { display: none; } /* reply count in an outlined speech bubble at the row's top right (tweakers-style); orange when the topic has unread posts (link then goes to the first unread post, otherwise to the last post) */ .mob-title:has(.mob-replies) { position: relative; padding-right: 62px; } } /* Forum rows (all viewports): rounded-square colored tile with a lucide icon as a CSS mask; per-forum icon + per-category Tailwind color via the custom properties set further down */ .forum-ico { display: block; width: 34px; height: 34px; border-radius: 8px; position: relative; background: var(--fico-bg, #64748b); } .forum-ico::after { content: ""; position: absolute; inset: 8px; background: var(--fico-c, #e2e8f0); -webkit-mask: var(--fico) center / contain no-repeat; mask: var(--fico) center / contain no-repeat; } @media (max-width: 767px) { /* the unread dot moves from behind the forum name into the last-reply column itself, inline before the date's first line */ .mob-title:has(.mob-lastpost) > div .unread-dot { display: none; } .mob-lastpost .unread-dot { margin: 0 3px 0 0; vertical-align: 0; width: 6px; height: 6px; } /* forum index rows: time of the last reply on the right edge, vertically centered (wraps to date / time on two lines); taps through to the post */ .mob-title:has(.mob-lastpost) { position: relative; padding-right: 78px; } .mob-lastpost { display: block; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 62px; text-align: right; font-size: 0.625rem; line-height: 1.4; color: var(--text-faint); text-decoration: none !important; font-variant-numeric: tabular-nums; } .mob-replies { display: block; position: absolute; right: 12px; top: 10px; color: var(--text-faint); text-decoration: none !important; } .mob-replies.unread { color: var(--accent); } .mob-replies-count { display: inline-block; position: relative; min-width: 30px; padding: 3px 5px; box-sizing: border-box; border: 1px solid currentColor; border-radius: 4px; text-align: center; font-size: 0.625rem; line-height: 1.2; font-variant-numeric: tabular-nums; } /* bubble tail: rotated square straddling the bottom border; its background matches the row (--bg-panel) to mask the border behind it */ .mob-replies-count::after { content: ""; position: absolute; left: 8px; bottom: -4px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--bg-panel); border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; } p.forumdesc { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.3; } /* Reserve dot room on the ellipsized title only when a dot follows (.unread-dot itself is styled in the base layer) */ a.forumlink:has(+ .unread-dot) { max-width: calc(100% - 14px); } /* Pagination rows: allow the page-number links to wrap, bigger touch targets. "Pagina x van y" (td.nav) stays on one line. */ .pagination, td.gensmall[nowrap] { white-space: normal !important; } .pagination a, td.gensmall a { display: inline-block; padding: 8px 4px; } td.nav { white-space: nowrap !important; } /* --- Page-nav bars (viewforum/viewtopic, top + bottom): one clean row with the action button left and "Pagina x van y" right, then the page links on their own full-width line below. --- */ table.pagenav { display: flex; flex-wrap: wrap; align-items: center; margin: 8px 0 !important; } table.pagenav > tbody, table.pagenav > tbody > tr { display: contents; } table.pagenav td { display: block; height: auto !important; } td.pagenav-act { flex: 0 0 auto; } td.pagenav-act a { display: inline-block; padding: 6px 0; margin: 0 !important; } td.pagenav-pages { order: 2; width: 100% !important; flex: 0 0 100%; text-align: left !important; white-space: normal !important; padding: 2px 0 4px !important; } } /* --- Pagination (all viewports): page numbers as bordered boxes, commas hidden (page-sep spans), previous/next as chevron buttons --- */ /* "Pagina x van y" is redundant next to the page-number links */ table.pagenav td.pagenav-num { display: none; } td.pagenav-pages .page-sep { display: none; } td.pagenav-pages a:not(.pag-prev):not(.pag-next), td.pagenav-pages b > strong { display: inline-block; min-width: 28px; height: 28px; box-sizing: border-box; padding: 0 6px; line-height: 28px; margin: 2px 6px 2px 0; text-align: center; vertical-align: middle; border: 1px solid var(--border); border-radius: 4px; text-decoration: none !important; font-variant-numeric: tabular-nums; } /* current page: highlighted box */ td.pagenav-pages b > strong { border-color: var(--brand); color: var(--brand); } td.pagenav-pages .page-dots { color: var(--text-faint); margin-right: 6px; } /* previous/next as chevron buttons wherever pagination.html renders */ a.pag-prev, a.pag-next, td.gensmall a.pag-prev, td.gensmall a.pag-next { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; box-sizing: border-box; vertical-align: middle; padding: 0 !important; margin: 2px 0; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-chrome); text-decoration: none !important; } a.pag-next { margin-left: 6px; } a.pag-prev { margin-right: 6px; } .pag-chevron { display: block; } .pag-label { display: none; } @media (max-width: 767px) { /* --- Ads: GPT requests mobile sizes (320x100 / 320x50 / 300x250) via the size mappings in overall_header.html; unfilled slots collapse via collapseEmptyDivs. The TradeTracker fallback picks a mobile rotator (320x50 header, 300x250 content) via its embed script. --- */ /* GPT slots + dev placeholders: drop the fixed 728px footprint (but keep the .htx-ad-inner min-height reservations below — no min-height: 0 here, that reintroduces the ad-load layout shift) */ div[id^='div-gpt-ad'], .AdContainer > div { width: auto !important; height: auto !important; } /* dev placeholders mirror the mobile creative: 320x100 content, 320x50 header, 300x250 TradeTracker content */ .ad-placeholder { width: 320px; max-width: 100%; height: 100px; } .htx-header-unit .ad-placeholder { height: 50px; } .ad-placeholder.ad-ph-tt { width: 300px; height: 250px; margin: 0 auto; } /* AdSense mobile request sizes (must fit the reservations below) */ ins.htx-ads-header { width: 320px; height: 50px; } ins.htx-ads-content { width: 320px; height: 100px; } /* reserve the mobile creative heights (see .htx-ad-inner base rule) */ .htx-ad-inner { min-height: 100px; } .htx-ad-inner-tt { min-height: 250px; } .htx-header-unit { min-height: 50px; } .ad-ph-d { display: none; } .ad-ph-m { display: inline; } /* =================== viewtopic: flatten each post table =================== */ /* Desktop is a 2-col table (author sidebar + body). On mobile each post becomes: [avatar] [username] [date .... edit/quote] on one row, then the post body full-width below it. */ .post-table { display: flex; flex-wrap: wrap; align-items: center; overflow: visible; } .post-table > tbody, .post-table > tbody > tr { display: contents; } .post-table > tbody > tr > td { display: block; width: auto !important; box-sizing: border-box; } /* avatar cell pulled in front of the username, shrunk to a fixed 32px box */ .post-table td.profile { order: -1; flex: 0 0 auto; border: 0 !important; padding: 8px 0 8px 12px !important; } .post-table td.profile .hard-avatar { width: auto !important; margin: 0; } .post-table td.profile .hard-avatar td { padding: 0; } .post-table td.profile .hard-avatar img { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; padding: 0; border: 0; } /* rank title/img + PM/www block under the avatar: hidden for compactness */ .post-table td.profile .postdetails { display: none; } .post-table td.profile .hard-avatar tr:not(:last-child) { display: none; } /* no avatar: solid placeholder tile, same 32px box as a real avatar */ .post-table .avatar-placeholder-row { display: table-row; } .post-table .avatar-placeholder { width: 24px; height: 24px; box-sizing: border-box; background: var(--text); border: 1px solid var(--text); border-radius: 50%; } /* username: beside the avatar, truncating if needed. flex-basis 0 means it can never force the date/buttons onto a second line (wrapping uses the basis, not the final size); it then grows back to its own content (max-width: max-content) or whatever space the date+buttons leave. */ .post-table td.post-author-cell { border-bottom: 0 !important; padding: 8px 0 8px 8px !important; flex: 999 1 0; min-width: 0; max-width: max-content; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* date + edit/quote buttons: rest of the same row. Never shrinks below its content (the date must not wrap); the username yields instead. */ .post-table td.post-meta-cell { flex: 1 0 auto; height: auto !important; border-bottom: 0 !important; padding: 8px 0 !important; } /* inside the meta cell the date is a float beside the taller quote/edit buttons; flatten the nested table into one centered flex row so the date sits on the same centerline as avatar + username */ .post-table td.post-meta-cell > table, .post-table td.post-meta-cell > table > tbody { display: block; } .post-table td.post-meta-cell > table > tbody > tr { display: flex; align-items: center; } .post-table td.post-meta-cell > table > tbody > tr > td { display: block; } .post-table td.post-meta-cell td.gensmall { display: flex; align-items: center; width: 100%; min-width: 0; } .post-table .post-date { float: none; font-size: 0.75rem !important; margin: 0; padding: 0 0 0 8px !important; white-space: nowrap; } .post-table .posted-on { display: none; } /* 12px right inset matches the avatar's left gutter; the template's trailing   that used to provide it is collapsed by font-size 0 */ .post-table .post-buttons { float: none; margin: 0 12px 0 auto !important; } .post-table .post-buttons a { display: inline-block; padding: 10px 4px; line-height: 0; } /* post body: full width. overflow-wrap must be `anywhere` (not break-word): the postbody sits in a class-less wrapper table whose auto layout sizes to the longest unbreakable word — a long pasted URL widens it past the viewport and every width:100% embed tracks the widened table. Only `anywhere` lets long words shrink the table's min-content width. */ .post-table td.post-body-cell { width: 100% !important; padding: 2px 6px 12px !important; } .post-table td.post-body-cell > table { width: 100% !important; table-layout: fixed; } /* quotes / code / attachments scroll inside their own box */ .quotecontent, .codecontent, .attachcontent { overflow-x: auto; } .postbody table { display: block; overflow-x: auto; max-width: 100%; } /* --- UCP/PM pages: collapse the sidebar menu behind a toggle so the actual content comes first (pure CSS, checkbox + label) --- */ .ucp-menu-label { display: block; margin: 0 0 8px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-panel); font-weight: 600; font-size: 0.875rem; cursor: pointer; } .ucp-menu-label::after { content: " \25BE"; color: var(--text-faint); } .ucp-menu-body { display: none; } .ucp-menu-toggle:checked ~ .ucp-menu-body { display: block; } } /* --- Form controls (all viewports): the native-styled buttons and fields (BBCode row, media buttons, Voorbeeld/Bevestig, text inputs) get the pagination-box design language. Selects keep their native look. --- */ .btnbbcode, .btnmain, .btnlite, .btnfile { appearance: none; -webkit-appearance: none; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-chrome); color: var(--text); height: 32px; padding: 0 10px; box-sizing: border-box; width: auto !important; margin: 2px 6px 2px 0; } .btnmain { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 600; } input.post, textarea.post { border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--text); padding: 5px 8px; box-sizing: border-box; } @media (max-width: 767px) { /* --- Posting form: drop the hover-tip line, give the font-size tool its own line so the button toolbar flows cleanly --- */ input.helpline { display: none; } .fontsize-tool { display: block; margin: 8px 0 2px; } /* --- Posting form: topic review (posting_topic_review.html). The author/message table is stacked (mob-stack); the 150px author sidebar becomes a line above the message instead of forcing sideways scroll. Stacked rows make the Auteur/Bericht column headers meaningless. --- */ .topicreview { height: auto !important; max-height: 60vh; } .topicreview .mob-stack th { display: none; } .topicreview .tr-author { width: auto !important; } .topicreview .tr-author td { text-align: left; padding: 0; } /* the "Geplaatst: " strip: inline left-aligned line instead of a three-cell table pushing the date to the right edge */ .topicreview .tr-date, .topicreview .tr-date tbody, .topicreview .tr-date tr { display: block; text-align: left; } .topicreview .tr-date td { display: inline; padding: 0; } /* --- Shoutbox: the table is stacked (mob-stack); the message input flexes, the button keeps its size --- */ td.cat.nav { padding: 6px 8px; } #text { display: flex; align-items: center; gap: 6px; } #text #message { flex: 1 1 auto; width: auto !important; min-width: 0; } #text input[type='submit'] { flex: 0 0 auto; } } /* ---- forum icon map (all viewports): lucide icon per forum id ---- */ .forum-ico, .fico-78 { --fico: url('data:image/svg+xml;utf8,'); } .fico-79 { --fico: url('data:image/svg+xml;utf8,'); } .fico-80 { --fico: url('data:image/svg+xml;utf8,'); } .fico-29 { --fico: url('data:image/svg+xml;utf8,'); } .fico-71 { --fico: url('data:image/svg+xml;utf8,'); } .fico-72, .fico-67, .fico-62, .fico-65 { --fico: url('data:image/svg+xml;utf8,'); } .fico-68, .fico-63, .fico-66 { --fico: url('data:image/svg+xml;utf8,'); } .fico-30 { --fico: url('data:image/svg+xml;utf8,'); } .fico-33 { --fico: url('data:image/svg+xml;utf8,'); } .fico-34 { --fico: url('data:image/svg+xml;utf8,'); } .fico-35 { --fico: url('data:image/svg+xml;utf8,'); } .fico-10 { --fico: url('data:image/svg+xml;utf8,'); } .fico-14 { --fico: url('data:image/svg+xml;utf8,'); } .fico-11, .fico-27 { --fico: url('data:image/svg+xml;utf8,'); } .fico-19 { --fico: url('data:image/svg+xml;utf8,'); } .fico-37 { --fico: url('data:image/svg+xml;utf8,'); } .fico-28 { --fico: url('data:image/svg+xml;utf8,'); } .fico-77 { --fico: url('data:image/svg+xml;utf8,'); } .fico-56 { --fico: url('data:image/svg+xml;utf8,'); } /* genre forums: monospace monogram instead of an icon (scoped to .forum-ico — bare fico- classes elsewhere only carry the color variables, e.g. on the .subforums line) */ .forum-ico.fico-85::after, .forum-ico.fico-3::after, .forum-ico.fico-4::after, .forum-ico.fico-86::after, .forum-ico.fico-60::after, .forum-ico.fico-26::after, .forum-ico.fico-61::after, .forum-ico.fico-25::after { -webkit-mask: none; mask: none; background: transparent; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--fico-c, #e2e8f0); font: 700 13px ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.5px; } .forum-ico.fico-85::after, .forum-ico.fico-3::after, .forum-ico.fico-4::after { content: 'HS'; } .forum-ico.fico-86::after, .forum-ico.fico-60::after, .forum-ico.fico-26::after { content: 'HC'; } .forum-ico.fico-61::after, .forum-ico.fico-25::after { content: 'HD'; } /* ---- category colors (Tailwind: 600 for the icon, 100/200 for the circle) ---- */ .fico-78, .fico-79, .fico-80, .fico-29, .fico-71, .fico-72 { --fico-c: #dbeafe; --fico-bg: #3b82f6; } /* Algemeen: blue */ .fico-56, .fico-85, .fico-86 { --fico-c: #fef3c7; --fico-bg: #f59e0b; } /* Track of the Year: amber */ .fico-3, .fico-68, .fico-67, .fico-60, .fico-63, .fico-62, .fico-61, .fico-66, .fico-65 { --fico-c: #fee2e2; --fico-bg: #ef4444; } /* Releases: red */ .fico-4, .fico-26, .fico-25, .fico-30 { --fico-c: #ede9fe; --fico-bg: #8b5cf6; } /* Livesets: violet */ .fico-33, .fico-34 { --fico-c: #ccfbf1; --fico-bg: #14b8a6; } /* Vraag & Aanbod: teal */ .fico-35, .fico-10, .fico-14, .fico-11 { --fico-c: #e2e8f0; --fico-bg: #64748b; } /* Off-topic: slate */ .fico-19, .fico-27 { --fico-c: #d1fae5; --fico-bg: #10b981; } /* International: emerald */ .fico-37 { --fico-c: #fce7f3; --fico-bg: #ec4899; } /* Donateurs: pink */ .fico-28 { --fico-c: #e5e5e5; --fico-bg: #737373; } /* Hardtraxx: neutral */ .fico-77 { --fico-c: #e5e7eb; --fico-bg: #6b7280; } /* Beheer: gray */ /* --- Topic/PM list folder gifs (viewforum, search results, PM folders, all viewports): the yellow folders clash with the flat design. Every row gets a flat lucide icon instead: speech bubble for regular topics (accent orange when unread), pin/megaphone/lock for sticky, announcement and locked topics (lock wins, so the _locked rule comes last). --- */ td[width='25'][align='center'] > img[src*='imageset/'] { display: none; } td[width='25'][align='center']:has(> img[src*='imageset/'])::after { content: ""; display: inline-block; width: 15px; height: 15px; background: var(--text-faint); vertical-align: middle; -webkit-mask: var(--tico) center / contain no-repeat; mask: var(--tico) center / contain no-repeat; } td[width='25'][align='center'] { --tico: url('data:image/svg+xml;utf8,'); } td[width='25'][align='center']:has(> img[src*='unread'])::after { background: var(--accent); } td[width='25'][align='center']:has(> img[src*='imageset/sticky_']) { --tico: url('data:image/svg+xml;utf8,'); } td[width='25'][align='center']:has(> img[src*='imageset/announce_']) { --tico: url('data:image/svg+xml;utf8,'); } td[width='25'][align='center']:has(> img[src*='imageset/'][src*='_locked']) { --tico: url('data:image/svg+xml;utf8,'); } @media (max-width: 767px) { /* --- Memberlist: stack the "Gebruikersnaam begint met" filter and the "Zoek een lid" link instead of squeezing them side by side --- */ form[name='charsearch'] table, form[name='charsearch'] tbody, form[name='charsearch'] tr, form[name='charsearch'] td { display: block; width: auto; text-align: left !important; } form[name='charsearch'] td + td { padding-top: 6px; } } /* --- Action buttons: the "Nieuw topic"/"Antwoord" gifs become real buttons in the btnmain style; the small Quote/Wijzig post buttons get the same box style one step smaller. All CSS-only: gif hidden, label re-drawn as ::after text on the anchor. --- */ a.btn-primary, a:has(> img[src*='button_topic_new']), a:has(> img[src*='button_topic_reply']), a:has(> img[src*='button_pm_new']), a:has(> img[src*='button_pm_reply']), a:has(> img[src*='icon_pm_reply']) { /* !important: the mobile ".pagination a" / "td.pagenav-act a" rules set inline-block with equal/higher specificity, which loses the flex centering of the label (same fight as a.pbtn below) */ display: inline-flex !important; align-items: center; justify-content: center; height: 32px; padding: 0 12px !important; box-sizing: border-box; border: 1px solid var(--brand); border-radius: 4px; background: var(--brand); color: #fff; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.3px; white-space: nowrap; text-decoration: none !important; vertical-align: middle; line-height: normal; } a > img[src*='button_topic_new'], a > img[src*='button_topic_reply'], a > img[src*='button_pm_new'], a > img[src*='button_pm_reply'], a > img[src*='icon_pm_reply'] { display: none; } a:has(> img[src*='button_topic_new'])::after { content: 'Nieuw topic'; } a:has(> img[src*='button_topic_reply'])::after, a:has(> img[src*='button_pm_reply'])::after, a:has(> img[src*='icon_pm_reply'])::after { content: 'Antwoord'; } a:has(> img[src*='button_pm_new'])::after { content: 'Nieuw bericht'; } a.pbtn, a:has(> img[src*='icon_post_quote']), a:has(> img[src*='icon_post_edit']) { /* !important: .post-table .post-buttons a sets inline-block with more specificity, which loses the flex centering of the label */ display: inline-flex !important; align-items: center; justify-content: center; height: 22px; padding: 0 6px !important; box-sizing: border-box; /* fixed white: bg-chrome read differently against the alternating odd/even post-row backgrounds */ border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--text); font-weight: 600; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.3px; text-decoration: none !important; vertical-align: middle; line-height: normal !important; margin: 0 0 0 6px !important; } a > img[src*='icon_post_quote'], a > img[src*='icon_post_edit'] { display: none; } a:has(> img[src*='icon_post_quote'])::after { content: 'Quote'; } a:has(> img[src*='icon_post_edit'])::after { content: 'Wijzig'; } /* the base sheet's ".row1 .gensmall a" (faint post-date links) outranks the button rule, fading the label on every other post — pin it back */ .row1 .gensmall a.pbtn, .row1 .gensmall a:has(> img[src*='icon_post_quote']), .row1 .gensmall a:has(> img[src*='icon_post_edit']) { color: var(--text); } /* Wijzig+Quote as one segmented group: font-size 0 kills the template's whitespace/  gaps, the -1px overlap shares the middle border and only the outer corners stay rounded */ .post-buttons { font-size: 0; } .post-buttons .pbtn:not(:last-of-type) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .post-buttons .pbtn + .pbtn { margin-left: -1px !important; border-top-left-radius: 0; border-bottom-left-radius: 0; } @media (max-width: 767px) { /* viewforum: the NIEUW TOPIC button moves up beside the forum title — right-aligned, vertically centered on the h1 (mode=post only matches the new-topic link, not viewtopic's reply button). The !importants override the anchor's inline position style. */ #ipbwrapper { position: relative; } #pagecontent a[href*='mode=post'] { position: absolute !important; top: 15px !important; right: 0; z-index: 1; } }