/*
	CSG Dark - amxbans / style.css
	cs-gamers.net ban panel, built to sit next to the forum and /stats/.

	This is a whole design, not a patch: the stock AMXBans sheet is a white
	Blueprint-era template with fixed pixel type and a 980px column, and
	nothing in it survives except the reset at the top, which the Smarty
	templates genuinely depend on.

	The palette, the type stack and the sizing ladder are copied verbatim from
	cache/themes/csgdark/global.css so a player moving between the forum, the
	stats pages and the ban list is looking at one site. If that file changes,
	change this one.

	Rules of the house, same as the forum sheet:
	  - every length is rem, so the root size below scales the whole panel
	  - borders and shadows stay in px, they are hairlines not type
	  - no rounded corners, no drop shadows; the only glows are the three the
	    forum theme sanctions, and they are marked where they are used
	  - colour always means something: red is us or active, green is online or
	    expired, amber is a warning, cyan is informational, grey is muted.
	    Never colour for decoration.

	Nothing here edits a .tpl file. The templates are shared with the stock
	design, which stays selectable in the AMXBans admin panel, so every
	difference between the two themes has to be expressible in CSS alone.
*/

/*
	The palette is sampled from the logo, images/csg4.png, rather than picked
	by eye. Its red measures hue 6 (#a02010); sitting a whole theme on hue 6
	read as orange at scale, so every red is pulled to hue 358 - a true red
	with no orange in it - and kept there.

	The hairlines are NOT red. Painting every grid line and panel edge red
	made the board one flat wash of it. They are neutral warm greys, and every
	panel carries a 1px white inset along its top edge. That lit edge and the
	neutral grid are what let the red read as an accent.
*/
:root {
	--bg:     #0a0707;
	--steel:  #171111;
	--steel2: #291f1f;
	--edge:   #332a2b;   /* hairlines - NEUTRAL, not red */
	--edge2:  #4d3f41;   /* raised borders */
	--red:    #b20e14;   /* dominant: active marks, 3px section rules */
	--red-b:  #ff3d44;   /* bright: only things you can click */
	--text:   #e8e2e1;
	--bright: #ffffff;
	--muted:  #9c9492;
	--new:    #22e5ff;
	--mid:    #ffb800;
	--ok:     #2be84f;
	--gold:   #ffd23d;
	--silver: #b4b4b4;
	--bronze: #d98a44;
	--mono:   "Consolas", "DejaVu Sans Mono", "Courier New", monospace;
}

/* ============================================================== RESET ==== */
/*
	Kept from the stock sheet. The templates lean on it - AMXBans writes
	<table border="1"> and relies on the reset to flatten the browser default
	- so it has to stay, minus the "force scrollbars" padding, which put a
	permanent 1px of dead space at the bottom of every page.
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend, table, caption, tbody, tfoot, tr, th, td,
textarea, input, select {
	margin: 0; padding: 0; border: 0;
	font-weight: inherit; font-style: inherit; font-size: 100%;
	font-family: inherit; vertical-align: baseline;
}
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: 0; }
:focus { outline: 0; }
* { box-sizing: border-box; }

/*
	AMXBans still writes presentational table attributes - border="1",
	frame="box", rules="groups". They draw the browser's own grey grid, which
	fights the one below, so they are neutralised here and the grid is drawn
	in CSS instead.
*/
table[border], table[frame], table[rules] { border: 0; }
table[border] > * > tr > td, table[border] > * > tr > th { border: 0; }

/* =============================================================== SCALE === */
/*
	One number sets the scale of the panel. A 2560 wide monitor is usually
	further from your face than a laptop is, so it gets a bigger root rather
	than the same fixed pixels rendered tiny. Phones stay at 16, they are
	close already and short on width.

	This ladder is the forum's, including the 3200 rung.
*/
html {
	font-size: 16px;
	height: auto;
	padding-bottom: 0;
	overflow-x: hidden;
}
@media (min-width: 1280px) { html { font-size: 17px; } }
@media (min-width: 1600px) { html { font-size: 18px; } }
@media (min-width: 2000px) { html { font-size: 19px; } }
@media (min-width: 2500px) { html { font-size: 20.5px; } }
@media (min-width: 3200px) { html { font-size: 22.5px; } }

/* ================================================================ BASE === */
body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--mono);
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;
	/*
		No bottom padding. It was breathing room under the content back when
		the page ended there; with the shared footer below it, it became 2.5rem
		of empty page under the footer bar on every screen.
	*/
	padding: 0;
	position: relative;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* The same brushed grain the forum and the stats pages carry. */
body::before {
	content: '';
	position: fixed; inset: 0;
	background:
		repeating-linear-gradient(118deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(62deg, rgba(178,14,20,.030) 0 1px, transparent 1px 9px);
	pointer-events: none;
	z-index: 0;
}

a, a:link, a:visited { color: var(--red-b); text-decoration: none; }
a:hover, a:active, a:focus { color: var(--bright); text-decoration: none; }

img { border: 0; max-width: 100%; height: auto; }
/*
	width="1" and the 20px icon columns are shrink-to-fit cells; against them
	the blanket max-width above would collapse the game/OS/VAC icons to
	nothing, so images in a fixed-width cell opt out.
*/
td[width="1"] img, th[width="1"] img,
td[class="_center"] img { max-width: none; }

hr { border: 0; border-top: 1px solid var(--edge); height: 0; margin: 1.125rem 0; }

/* ========================================================= TYPOGRAPHY ==== */
h1, h2, h3, h4, h5, h6 {
	color: var(--bright);
	font-weight: normal;
	line-height: 1.2;
	margin-bottom: 0.375rem;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: 0.9375rem; }
h5 { font-size: 0.875rem; }
h6 { font-size: 0.8125rem; }

p { margin-bottom: 0.875rem; }
abbr, acronym { border-bottom: 1px dotted var(--edge2); }
address { margin-bottom: 1.125rem; font-style: normal; }
blockquote {
	margin: 0.875rem 0;
	padding: 0.625rem 0.875rem;
	background: var(--steel2);
	border-left: 3px solid var(--red);
	color: var(--text);
	font-style: normal;
}
del { color: var(--muted); }
em, dfn { font-style: italic; }
strong, b, dfn { font-weight: bold; color: var(--bright); }
sup, sub { line-height: 0; }

pre, code, tt {
	font-family: var(--mono);
	font-size: 0.75rem;
	line-height: 1.5;
}
pre {
	margin: 0.875rem 0;
	padding: 0.75rem 0.875rem;
	background: #0d0909;
	border: 1px solid var(--edge);
	color: var(--text);
	overflow-x: auto;
	white-space: pre;
}

li ul, li ol { margin-left: 1.125rem; }
ul, ol { margin: 0 0 1.125rem 1.125rem; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
dl { margin: 0 0 1.125rem; }
dl dt { font-weight: bold; color: var(--bright); }
dd { margin-left: 1.125rem; }

/*
	Anything AMXBans marks as a heading or a label is metadata, so it reads as
	metadata: uppercase, letter-spaced, muted. Content is never uppercased.
*/
span.title {
	display: block;
	font-size: 0.8125rem;
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	color: var(--bright);
	font-weight: normal;
	background: linear-gradient(180deg, #1b1415, #16100f);
	border: 1px solid var(--edge);
	border-left: 3px solid var(--red);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
	padding: 0.75rem 1rem;
	margin-bottom: 0.875rem;
}
/* Inside a <legend> the same class is a caption, not a bar. */
legend span.title {
	display: inline;
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	color: var(--muted);
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
}

/*
	.fat is the label column of every detail grid on the panel - the ban
	details, the server info block, the admin field lists. AMXBans sizes that
	column with style="width:150px" on the header cell above it, and 150 fixed
	pixels stopped scaling the moment the rest of the page started to: at an
	18px root "Steam Community ID" and "Admin's SteamID" no longer fit and
	broke across two lines on a desktop with room to spare.

	Labels do not wrap. With nowrap the column's min-content is the label
	itself, and auto table layout widens past the 150px the attribute asks
	for, so the fixed number stops mattering at every rung of the ladder.
*/
.fat {
	font-weight: normal;
	color: var(--muted);
	white-space: nowrap;
	word-break: normal;
}
.quiet { color: var(--muted); }
.loud { color: var(--bright); }
.highlight { background: rgba(255,184,0,.22); color: var(--bright); padding: 0 0.125rem; }

.small    { font-size: 0.8125rem; }
.smaller  { font-size: 0.75rem; }
.smallest { font-size: 0.6875rem; }
.large    { font-size: 0.9375rem; }
.larger   { font-size: 1.0625rem; }
.largest  { font-size: 1.1875rem; }

.hidden { display: none; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-separator { padding: 0 0.3125rem; color: var(--edge2); }

._right  { text-align: right; }
._left   { text-align: left; }
._center { text-align: center; }
.vtop    { vertical-align: top; }

/* ============================================================== LAYOUT === */
/*
	The stock sheet caps the page at a fixed 980px. That is the fixed-pixel
	problem the whole project exists to remove, so the column is the forum's
	instead: 90% of the viewport, fluid, no ceiling. A ban list carries nine
	columns and wants the room.
*/
.center-wrapper {
	width: 90%;
	max-width: none;
	margin: 0 auto;
}
#site { position: relative; z-index: 1; }
#site > .center-wrapper { padding-bottom: 1.125rem; }

.spacer { display: block; height: 1.125rem; font-size: 0; line-height: 0; }

/* Floats and their clears, unchanged in behaviour. */
.left, .alignleft   { float: left; }
.right, .alignright { float: right; }
.clear, .clearer    { clear: both; }
.clearer { display: block; font-size: 0; line-height: 0; height: 0; }

.center, .aligncenter { display: block; margin-left: auto; margin-right: auto; }

img.bordered, img.alignleft, img.alignright, img.aligncenter {
	background: var(--steel2);
	border: 1px solid var(--edge);
	padding: 0.1875rem;
}
img.alignleft,  img.left  { margin: 0 1.125rem 0.75rem 0; }
img.alignright, img.right { margin: 0 0 0.75rem 1.125rem; }

/* ------------------------------------------------------ network bar ----- */
/*
	The strip across the top: language picker and page tabs on the left, the
	login form or the admin links on the right. It is the forum's #logo bar -
	a near-black gradient, one neutral hairline underneath, nothing else.

	The stock sheet floats .left and .right and clears them with a spacer div.
	That cannot wrap, so on a phone the login form ran off the side of the
	page. Flex with wrap replaces it; the .clearer stays in the markup and is
	simply given no size.
*/
/*
	Kept, but not reached any more: main_header.tpl hands the AMXBans tabs to
	the shared bar (/csg_shared/csg_bar.php) as its second row and prints no
	#network for this design. The rules stay until that has run on the live
	site long enough to be sure of it.
*/
#network {
	background: linear-gradient(180deg, #0b0708, #050304);
	border-bottom: 1px solid var(--edge);
	position: relative;
	z-index: 2;
}
#network > .center-wrapper {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.375rem 1.125rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}
#network > .center-wrapper > .left,
#network > .center-wrapper > .right {
	float: none;
	min-width: 0;
	color: var(--text);
}
#network > .center-wrapper > .right { margin-left: auto; }
#network > .center-wrapper > .clearer { display: none; }

ul.plain-list li, ul.nice-list li, ul.tabbed li { list-style: none; }
ul.tabbed {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}
ul.tabbed li { float: none; list-style: none; }

#network .tabbed a,
#network .install span {
	display: block;
	padding: 0.5rem 0.6875rem;
	font-size: 0.6875rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
}
#network li a:hover { background: var(--steel); color: var(--bright); }
/*
	The active tab. Red is "us or here", and the inset rule is the same mark
	the forum puts under the current nav item.
*/
#network li.current-tab a {
	background: var(--steel);
	color: var(--bright);
	font-weight: normal;
	box-shadow: inset 0 -2px 0 var(--red-b);
}
#network .text-separator, #network span { color: var(--muted); }

#network form { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; }
/* The language <form> carries an inline padding from the template. */
#network #menu-tabs form { padding: 0 0.5rem 0 0 !important; }
#network #admin-tabs li { padding: 0.25rem 0; }

/* ------------------------------------------------------------ header ---- */
#header { padding: 0.875rem 0 0.625rem; }
#site-title {
	font-size: 1.1875rem;
	padding-bottom: 0.75rem;
	color: var(--bright);
}
#site-title span { color: var(--muted); }
#site-title a { color: var(--bright); }
/*
	The banner, whatever is picked in Main Settings. Sized in rem so it moves
	with the ladder like everything else, and capped rather than stretched:
	max-height with auto width scales the image down to fit a phone without
	distorting it, and never blows a raster up past its own resolution.
*/
#site-title img {
	max-height: 4.5rem;
	max-width: 100%;
	width: auto;
	height: auto;
}

/* ------------------------------------------------------------ toolbar --- */
#toolbar {
	padding: 0.75rem 0 0.5rem;
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--muted);
}
#toolbar img { vertical-align: middle; }

/* ---------------------------------------------------------- main grid --- */
/*
	.main is the content row. In the stock sheet its two columns are fixed
	pixel widths (671 + 260 inside a 980 shell), which is what stopped the
	page from ever fitting a phone. It is a flex row here: the content column
	takes what is left, the sidebar keeps a sensible measure, and both stack
	below 900.
*/
.main {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1.125rem;
	margin-bottom: 1.125rem;
}
.main > .left, .main > #main-left,
.main > .right, .main > .sidebar { float: none; min-width: 0; }
.main > #main-left, .main > .left:not(.sidebar) { flex: 1 1 26rem; min-width: 0; }
.main > .sidebar, .main > .right.sidebar { flex: 0 1 18rem; min-width: 0; }
.main > .clearer, .main > .clear { display: none; }

.main#main-three-columns .sidebar,
.main#main-two-columns   .sidebar { width: auto; }
.main#main-three-columns #main-left,
.main#main-two-columns   #main-left { width: auto; }
.main#main-two-columns .sidebar-50-50,
.main#main-two-columns #main-left-50-50 { width: auto; flex: 1 1 20rem; min-width: 0; }

#sidebar-1 { margin-left: 0; }
.col3 { width: 32%; }
.col3-mid { margin-left: 2%; }

/*
	.post is the card the ban list, the search form and the detail views sit
	in. Same flat panel as a forum post: --steel body, 1px --edge all round,
	nothing rounded, nothing floating, one lit hairline along the top.
*/
.post {
	background: var(--steel);
	border: 1px solid var(--edge);
	padding: 0.875rem 1rem;
	margin-bottom: 1.125rem;
	min-width: 0;
}
.main > .post { flex: 1 1 100%; }
/*
	ban_list.tpl and search.tpl separate the pager from the table with a pair
	of <br />s. That is a fixed 2em of dead space that does not move with the
	rem ladder; the card's own margins do the spacing here.
*/
.post > br { display: none; }
.post a { text-decoration: none; }
.post a:hover { text-decoration: none; color: var(--bright); }
.post img.left, .post img.right { margin-bottom: 0; }
.post-body { font-size: 0.8125rem; }
.post-date { color: var(--muted); margin: 0.125rem 0 0.625rem; }
.post-date a { color: var(--text); }
.post-title h1, .post-title h2, .post-title h3 { margin-bottom: 0; }
.post-meta {
	background: var(--steel2);
	border: 1px solid var(--edge);
	color: var(--muted);
	padding: 0.375rem 0.625rem;
}
.post-meta a { color: var(--text); }
.post-meta a:hover { color: var(--bright); }

/* ---------------------------------------------------------- sections ---- */
/*
	The sidebar cards on view.php and the admin info page. Header strip in
	--steel2, body in --steel, the whole thing on the neutral grid.
*/
.section {
	background: var(--steel);
	border: 1px solid var(--edge);
	margin-bottom: 1.125rem;
	min-width: 0;
}
.section-title {
	background: var(--steel2);
	border-bottom: 1px solid var(--edge);
	border-left: 3px solid var(--red);
	color: var(--muted);
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	font-weight: normal;
	margin: 0;
	padding: 0.5rem 0.75rem;
	min-height: 0;
	overflow: hidden;
	clear: left;
}
.section-title .left  { color: var(--bright); }
.section-title .right { color: var(--muted); }
.section-content { padding: 0.5rem 0.75rem; }

ul.plain-list { margin: 0; }
ul.nice-list { margin-left: 0; margin-bottom: 0; }
ul.nice-list li {
	list-style: none;
	border-top: 1px solid var(--edge);
	padding: 0.3125rem 0;
	font-family: var(--mono);
	font-size: 0.6875rem;
	overflow: hidden;
}
ul.nice-list li:first-child { border-top: none; }
ul.nice-list li .left  { color: var(--muted); }
ul.nice-list li .right { color: var(--bright); }
li div.left { font-weight: normal; }

.content-separator, .archive-separator {
	background: var(--edge);
	clear: both;
	display: block;
	font-size: 0; line-height: 0; height: 1px;
}
.content-separator { margin: 1.25rem 0; }
.archive-separator { margin: 0.625rem 0; }

/* ================================================== ADMIN NAVIGATION ===== */
/*
	The panel's own two-row nav, built to read as the site bar one level in:
	row one is the same joined uppercase buttons on a steel field, row two the
	same quieter underlined links, so /amxbans/admin.php and the bar above it
	are recognisably one design. It is a box in the content column rather than
	a full-width strip - the bar says which site section you are in, this says
	where you are inside the panel.

	Which sub-row is open is written by ToggleMenu_open() on the #menu_n divs;
	admin_nav.tpl sets the first state from the query string and marks the
	current entry .current-tab in both rows. Red only ever marks that.
*/
#navigation { margin-bottom: 1.125rem; }
#navigation a { display: block; text-decoration: none; }

#main-nav {
	background: var(--steel);
	border: 1px solid var(--edge);
	border-bottom: 0;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
	overflow: hidden;
}
#main-nav ul.tabbed { flex-wrap: wrap; }
#main-nav li {
	background: none;
	border-right: 1px solid var(--edge);
	cursor: pointer;
}
#main-nav li:last-child { border-right: 0; }
#main-nav a {
	color: var(--muted);
	font-size: 0.6875rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	padding: 0.5625rem 0.875rem;
	white-space: nowrap;
}
#main-nav li:hover a, #main-nav a:hover { color: var(--bright); background: var(--steel2); }
#main-nav li.current-tab a {
	color: var(--bright);
	background: var(--steel2);
	box-shadow: inset 0 -2px 0 var(--red);
}
#main-nav .clearer { display: none; }

/*
	Row two is deliberately lighter than row one - no button borders, smaller
	type, a hairline mark - for the same reason the site bar's second row is:
	give both rows equal weight and the whole thing reads as one long list of
	equals again.
*/
#sub-nav {
	background: rgba(0,0,0,.25);
	border: 1px solid var(--edge);
	padding: 0;
}
#sub-nav ul.tabbed { flex-wrap: wrap; }
#sub-nav li { border-bottom: 2px solid transparent; }
#sub-nav a {
	color: var(--muted);
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	padding: 0.5rem 1.75rem;
	white-space: nowrap;
}
#sub-nav a:hover { color: var(--bright); }
#sub-nav li.current-tab { border-bottom-color: var(--red-b); }
#sub-nav li.current-tab a { color: var(--bright); }
#sub-nav .clearer { display: none; }

/*
	admin.php prints its panels inside an orphan <td id="main">. The parser
	drops a <td> that has no table around it, so #main usually does not reach
	the DOM at all; where it does, it must not be a table cell.
*/
#main, .admin_list#main { display: block; width: 100%; }

/* ============================================================== TABLES === */
/*
	The grid: --steel2 uppercase header row, 1px --edge row separators, flat
	rows with no zebra striping, hover in the bright red at nine percent.

	Wide tables have to scroll inside their own box rather than drag the page
	sideways - that is the one hard requirement of this design - and AMXBans
	does not wrap a single table in a div, so there is nothing obvious to
	scroll.

	The obvious trick, making the table itself display:block with
	overflow-x:auto and putting the row groups back to display:table, does not
	work here and was tried first. It turns <thead> and <tbody> into two
	independent tables that size their columns separately, and AMXBans writes
	its widths on the body cells only - style="width:13%" on the date column,
	nothing on the matching <th> - so the header row slid out of line with the
	data underneath it.

	So the table stays a real table and keeps its columns honest, it carries a
	min-width floor so it refuses to be crushed, and the card it sits in does
	the scrolling. Every content container that can hold a table is listed
	below. The one case with no container at all is a table with no <thead>,
	which has no header row to misalign, so that one is safe to scroll itself.
*/
table {
	display: table;
	max-width: 100%;
	margin-bottom: 1.125rem;
	font-size: 0.75rem;
	empty-cells: show;
}
/*
	Every table takes the full measure of its container, including the ones
	carrying a legacy width attribute. Honouring those attributes was tried
	and reverted: login.tpl asks for width='20%' on the field grid inside its
	fieldset, and at 20% the password field is a sliver and the log-in button
	is pushed out of view entirely. The attributes are 2009 artefacts, not
	intent.
*/
table { width: 100%; }

/* The cards that scroll. */
.post, #main, #main-left, .main > .left, .main > .right,
.section-content, td.server-info, .rcon_box {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
	The min-width floor is what makes a wide table refuse to crush its columns
	on a phone. It must not land on the two and three column tables the admin
	panels use for label/value pairs, or those scroll for no reason, so it is
	gated on the table actually having a fourth column somewhere. Browsers
	without :has() fall back to the browser's own squeeze, which is no worse
	than the theme we came from.
*/
table:has(> * > tr > td:nth-child(4)),
table:has(> * > tr > th:nth-child(4)) { min-width: 44rem; }
/*
	The ban list is the widest thing on the panel - nine columns - and its
	columns are declared in percentages that add up to 98, leaving the toggle
	column to take its min-content off the top and everything else to be
	scaled down from what is left. At the 44rem floor the 13% date column came
	out narrower than "2026-03-07" and every date broke in two on a phone.

	58rem is measured, not guessed: it is the first rung that leaves the date
	column wider than the string plus its padding once the player column has
	claimed the width of the longest nickname. Tables that get as far as a
	seventh column get it.
*/
table:has(> * > tr > td:nth-child(7)),
table:has(> * > tr > th:nth-child(7)) { min-width: 58rem; }
/* A nested table inside a detail cell is already inside a scroller. */
td table, th table { min-width: 0; }

/*
	No header row, nothing to misalign: this one can be its own scroller. It
	is how the admin panels' outer layout tables and the two-up server detail
	block behave.
*/
table:not(:has(> thead)) {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
table:not(:has(> thead)) > tbody,
table:not(:has(> thead)) > tfoot { display: table; width: 100%; }

th, td {
	padding: 0.5rem 0.6875rem;
	text-align: left;
	font-weight: normal;
	font-size: 0.75rem;
	vertical-align: middle;
	border-bottom: 1px solid var(--edge);
	/*
		overflow-wrap, never word-break.

		word-break:break-word drops a cell's min-content width to a single
		character, which hands a declared width total authority over the
		column. AMXBans declares plenty of those - style="width:15px" on the
		bcmath/gmp column of the admin info page, width:18px and width:5px
		elsewhere - and against a one-character min-content the browser
		honoured them literally: "yes" came out as y / e / s stacked down the
		page. Auto table layout is meant to refuse a width narrower than the
		longest word, and this is what was stopping it.

		overflow-wrap leaves min-content alone, so a declared width can no
		longer squeeze a column below the word in it, and a genuinely
		unbreakable string still breaks rather than escaping its cell.
	*/
	overflow-wrap: break-word;
	word-break: normal;
}
/*
	Column labels are letter-spaced uppercase and several sit in 5% columns,
	so left to themselves they break mid-word - "COMMEN / TS". They are two
	words at most; they do not wrap.
*/
thead th, thead td, tr.htable td, tr.htable th,
tr.htabletop td, tr.htablebottom td { white-space: nowrap; word-break: normal; }
td.vtop, th.vtop { vertical-align: top; }

/*
	Column heads are the stats <th>, verbatim: the label row, not a title bar.
*/
thead th, thead td, tr.htable td, tr.htable th,
tr.htabletop td, tr.htablebottom td,
.table_head td, .table_head th,
.table_details_head td, .table_details_head th,
.admin_head1 td, .search_head2 td {
	background: var(--steel2);
	color: var(--muted);
	font-weight: normal;
	font-family: var(--mono);
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	padding: 0.5rem 0.6875rem;
	border-bottom: 1px solid var(--edge);
	border-top: 0;
}
thead th a, tr.htable a, .table_head a { color: var(--muted); }
thead th a:hover, tr.htable a:hover, .table_head a:hover { color: var(--bright); }
/* A header cell that only holds a button keeps the button readable. */
thead th input, thead th select, thead th button { text-transform: none; letter-spacing: 0; }

tbody tr { background: transparent; }
tfoot { font-style: normal; color: var(--muted); }
caption {
	background: var(--steel2);
	color: var(--muted);
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	padding: 0.5rem 0.6875rem;
	text-align: left;
}

/* The stock sheet's zebra row. Striping is decoration; this board does not
   colour for decoration, so the even row is the same as the odd one. */
tr.even td { background: transparent; }

table.data-table { border: 1px solid var(--edge); margin-bottom: 1.5rem; }
table.data-table th {
	background: var(--steel2);
	border: 0;
	border-bottom: 1px solid var(--edge);
	color: var(--muted);
}
table.data-table tr { border-bottom: 1px solid var(--edge); }
table.data-table td { background: transparent; border: 0; border-bottom: 1px solid var(--edge); }
table.data-table tr.even td { background: transparent; }

/*
	.enter is the label cell of the login and admin field grids. At the stock
	sheet's 5% it is narrower than the word in it, so "Username:" came out as
	"Usernam / e:". It is a label: it shrinks to fit and does not wrap.
*/
td.enter { width: 1%; white-space: nowrap; word-break: normal; }

/* The panel chrome, applied to the tables that are cards in their own right. */
table.admin_list, table.table_list, table.table_details,
.main > .left > table, .main > #main-left > table,
#main > table, .post > table {
	background: var(--steel);
	border: 1px solid var(--edge);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.admin_list tr { border-bottom: 1px solid var(--edge); }
/* Nested tables inside a detail cell are content, not cards. */
td table, th table { background: transparent; border: 0; box-shadow: none; margin-bottom: 0; }
/*
	A table inside a fieldset is a form grid, not data. Row separators across
	a pair of labelled fields read as rules through the middle of the form.
*/
fieldset table td, fieldset table th { border-bottom: 0; }
fieldset table { margin-bottom: 0; }

/* ---------------------------------------------------------- table rows -- */
tr.list, tr.settings_line {
	background: transparent;
	border-bottom: 1px solid var(--edge);
}
tr.list { cursor: pointer; }
tr.list:hover > td { background: rgba(255,61,68,.09); }

/*
	The hover pair view.php swaps in with onmouseover/onmouseout. Same nine
	percent red as every other row hover on the site.
*/
.m_over { background: rgba(255,61,68,.09); color: var(--bright); cursor: pointer; }
.m_out  { background: transparent; color: var(--text); cursor: pointer; }
tr.m_over > td { background: rgba(255,61,68,.09); }

/*
	Expired versus live bans.

	ban_list.tpl writes the expired state inline - style="background: #DBF4D7",
	a light green that would be a hole punched in a dark page - so it is caught
	on the attribute and repainted.

	It is repainted as a rule down the left edge rather than as a wash across
	the row, and the live state gets a rule of its own, because of the actual
	ratio in the data: twenty-six of the thirty bans on page one are expired.
	Tinting the majority state paints most of the table one colour and leaves
	the four rows an admin is actually looking for as the ones with nothing on
	them. A 3px mark in the scan column says the same thing in both directions
	and says it at any ratio.

	The colours still mean what they mean everywhere else here: green is done
	with, red is live.
*/
tr.list[style*="#DBF4D7"], tr.list[style*="#dbf4d7"],
tr[style*="#DBF4D7"], tr[style*="#dbf4d7"] { background: transparent !important; }
tr[style*="#DBF4D7"] > td, tr[style*="#dbf4d7"] > td { color: var(--muted); }
tr[style*="#DBF4D7"] > td:first-child, tr[style*="#dbf4d7"] > td:first-child {
	box-shadow: inset 3px 0 0 rgba(43,232,79,.7);
}
tr[style*="#DBF4D7"]:hover > td, tr[style*="#dbf4d7"]:hover > td {
	background: rgba(43,232,79,.09);
	color: var(--text);
}
tr[style*="#DBF4D7"]:hover > td:first-child, tr[style*="#dbf4d7"]:hover > td:first-child {
	box-shadow: inset 3px 0 0 var(--ok);
}
/* A ban with no inline colour is still running. */
tr.list:not([style]) > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
tr.list:not([style]):hover > td:first-child { box-shadow: inset 3px 0 0 var(--red-b); }

/*
	Server up or server down, marked the same way the ban rows are: a rule in
	the scan column, not a wash across the row. Four of the five servers on
	view.php are usually down, so a red wash on the down state would paint
	most of the table red and leave the live one as the row with nothing on
	it. Green is up, red is down, and the row that is down also goes muted.
*/
.offline { background: transparent; color: var(--muted); }
tr.offline > td { background: transparent; color: var(--muted); }
tr.offline > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
tr.offline:hover > td { background: rgba(178,14,20,.10); }
/*
	Scoped to view.php's server table. The same mark on the ban list would
	mean something else entirely, and the ban list draws its own above.
*/
#main-left tr[onclick*="NewToggleLayer"]:not(.offline):not(.list) > td:first-child {
	box-shadow: inset 3px 0 0 var(--ok);
}

/*
	The narrow centred columns - mod, OS, VAC, player count - are icons and
	two or three character values. At a 20px column width they break into one
	character per line if left to wrap.
*/
td._center { white-space: nowrap; word-break: normal; }

/* The expanded detail cell under a ban or a server row. */
td.server-info {
	padding: 0.875rem 1.125rem;
	background: #120d0d;
	border-bottom: 1px solid var(--edge);
}
td.server-info table { border-right: 0; border-left: 0; border-bottom: 0; }
td.server-info td { border: 0; border-bottom: 1px solid var(--edge); }
td.server-info > div > table > * > tr > td { vertical-align: top; }

/*
	The map preview. view.tpl sizes it width="80%" of its cell, which was 260
	odd pixels inside the stock 980px shell; in a fluid column that is half a
	4K screen of placeholder JPEG. It is a thumbnail, so it is capped like one.
*/
td.server-info img,
td.server-info td._center img { max-width: 14rem; height: auto; }

/* The server rows on view.php get the same header treatment as everything. */
.main thead {
	background: var(--steel2);
	border-top: 0;
	border-bottom: 1px solid var(--edge);
	font-family: var(--mono);
	font-weight: normal;
}
.main thead th { padding: 0.5rem 0.6875rem; }

/* ==================================================== COLLAPSE TOGGLES === */
/*
	AMXBans has no expander graphic at all: the whole row is the hit area and
	the only feedback that a row can open is the cursor. The forum draws one
	mark for this everywhere - a minus that becomes a plus, in a bordered
	1.625rem box - so the ban rows and the server rows get the same mark.

	Two things carried over from the forum's implementation:

	  1. Nothing is added to the markup and no script is touched. The mark is
	     a pseudo-element on the row's first cell, so the cell keeps its game
	     icon and the row keeps its onclick.
	  2. The open/closed state is read straight off the DOM the toggle already
	     writes. NewToggleLayer() flips the inline display of the detail row
	     that follows, so :has(+ tr[style*="display:none"]) is the closed
	     state, and the plus stroke is drawn only there. jQuery writes the
	     property with and without a space after the colon depending on how it
	     got there, hence both spellings.
*/
tr[onclick*="NewToggleLayer"] > td:first-child {
	position: relative;
	padding-left: 2.75rem;
	white-space: nowrap;
}
/*
	The mark is drawn entirely on ::before: the border and fill make the box,
	and the two strokes are two background gradients on that same box.

	They have to share one element. The first version put the box and the
	minus on ::before and the upright of the plus on ::after, positioned with
	a hardcoded left offset - and the offset had to be measured from the box's
	border edge, which is rem, plus the 1px border, which is not. Mixing the
	two meant the arms of the plus crossed at a different point at every rung
	of the rem ladder: at a 16px root the upright sat half a pixel left of the
	bar, at 22.5px it was further out again. It never looked like a plus, only
	like a plus that had been knocked.

	Two background layers on one element cannot drift. Both take
	background-position:center, so they cross dead centre at any root size,
	and the box is centred on the row with translateY rather than a negative
	margin so the 1px border cannot throw that off either.
*/
tr[onclick*="NewToggleLayer"] > td:first-child::before {
	content: '';
	position: absolute;
	left: 0.625rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.625rem;
	height: 1.625rem;
	border: 1px solid var(--edge2);
	background-color: var(--steel2);
	background-repeat: no-repeat;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
	pointer-events: none;
	z-index: 1;
	transition: border-color .12s linear;

	/* Open: the bar of the minus, on its own. */
	background-image: linear-gradient(var(--muted), var(--muted));
	background-size: 0.625rem 2px;
	background-position: center;
}

/*
	Closed: the same bar plus the upright. State is read straight off the DOM
	the toggle already writes - NewToggleLayer() flips the inline display of
	the detail row that follows - so no script is touched. jQuery writes the
	property with and without a space after the colon depending on how it got
	there, hence both spellings.
*/
tr[onclick*="NewToggleLayer"]:has(+ tr[style*="display:none"]) > td:first-child::before,
tr[onclick*="NewToggleLayer"]:has(+ tr[style*="display: none"]) > td:first-child::before {
	background-image:
		linear-gradient(var(--red-b), var(--red-b)),
		linear-gradient(var(--red-b), var(--red-b));
	background-size: 0.625rem 2px, 2px 0.625rem;
	background-position: center, center;
}

tr[onclick*="NewToggleLayer"]:hover > td:first-child::before {
	border-color: var(--red);
	background-image: linear-gradient(var(--bright), var(--bright));
}
tr[onclick*="NewToggleLayer"]:hover:has(+ tr[style*="display:none"]) > td:first-child::before,
tr[onclick*="NewToggleLayer"]:hover:has(+ tr[style*="display: none"]) > td:first-child::before {
	background-image:
		linear-gradient(var(--bright), var(--bright)),
		linear-gradient(var(--bright), var(--bright));
}

/* =============================================================== FORMS === */
label { font-weight: normal; color: var(--muted); cursor: pointer; }

fieldset {
	background: var(--steel);
	border: 1px solid var(--edge);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
	padding: 0.875rem 1rem;
	margin: 0 0 0.875rem;
}
.fieldset { margin-bottom: 0.375rem; }
legend {
	font-family: var(--mono);
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: normal;
	padding: 0 0.375rem;
}

textarea { overflow: auto; }
input, textarea, select { font-family: var(--mono); }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=search], input[type=url], input[type=date], input.text,
textarea, select {
	font-family: var(--mono);
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--bright);
	background: var(--steel);
	border: 1px solid var(--edge2);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
	padding: 0.4375rem 0.5625rem;
	margin: 0;
	max-width: 100%;
}
textarea { line-height: 1.5; width: 100%; }
input::placeholder, textarea::placeholder { color: var(--muted); }
option { background: var(--steel); color: var(--text); }

/*
	This is the theme's sanctioned focus glow, the same one the forum uses on
	inputs and buttons. It is one of three in the whole design.
*/
input:focus, textarea:focus, select:focus {
	outline: 1px solid var(--red-b);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 10px rgba(178,14,20,.45);
}
input.text:focus, textarea:focus, select:focus { background: var(--steel); }

input[type=checkbox], input[type=radio] {
	accent-color: var(--red);
	vertical-align: middle;
	margin: 0 0.25rem 0 0;
	width: auto;
}
input[type=file] { color: var(--muted); font-size: 0.6875rem; max-width: 100%; }
.input_file { max-width: 100%; }

/*
	The templates write style="width:200px" on every search field. A fixed
	pixel width is exactly what the rem ladder exists to remove - at a 22.5px
	root it is a third of the box it used to be - so inside a content card the
	field takes the cell and caps at a sensible measure instead. An inline
	style can only be beaten with !important; this is the only place the sheet
	uses one for layout.
*/
.post td > input[type=text],
.post td > input[type=password],
#main td > input[type=text],
#main td > input[type=password] { width: 100% !important; max-width: 24rem; }

/* One button treatment for the three things AMXBans calls a button. */
input.button, input[type=submit], input[type=reset], button,
a.button, a.button:link, a.button:visited {
	display: inline-block;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--bright);
	background: var(--steel2);
	border: 1px solid var(--edge2);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
	padding: 0.4375rem 0.75rem;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	max-width: 100%;
}
/* Sanctioned glow number two: the things you can actually press. */
input.button:hover, input[type=submit]:hover, input[type=reset]:hover,
button:hover, a.button:hover, a.button:active {
	background: #1e1516;
	border-color: var(--red-b);
	color: var(--bright);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 10px rgba(178,14,20,.55);
}
input.button:active, button:active { border-style: solid; }

/* The image submit buttons - the page / edit / delete icons in the tables. */
.img_input, input[type=image] {
	border: 0;
	outline: 0;
	background: none;
	box-shadow: none;
	padding: 0;
	cursor: pointer;
	vertical-align: middle;
	opacity: .8;
}
.img_input:hover, input[type=image]:hover { opacity: 1; box-shadow: none; }

.form-error, input.form-error { border-color: var(--red) !important; }
span.error, span.errored { font-weight: normal; color: var(--red-b); }

/* ============================================================ MESSAGES === */
/*
	Amber warns, red stops, green confirms, cyan informs. Nothing else earns a
	colour.
*/
.error, .notice, .success, .admin_msg {
	display: block;
	font-size: 0.75rem;
	line-height: 1.5;
	border: 1px solid var(--edge2);
	margin-bottom: 1.125rem;
	padding: 0.6875rem 0.875rem;
	text-align: left;
}
.error {
	background: rgba(178,14,20,.08);
	border-left: 3px solid var(--red);
	color: var(--red-b);
}
.error a { color: var(--red-b); }
.notice {
	background: rgba(255,184,0,.07);
	border-left: 3px solid var(--mid);
	color: var(--text);
}
.notice a { color: var(--mid); }
.notice a:hover { color: var(--bright); }
.notice img { vertical-align: middle; margin-right: 0.375rem; }
.success {
	background: rgba(43,232,79,.07);
	border-left: 3px solid var(--ok);
	color: var(--ok);
}
.success a { color: var(--ok); }
/*
	"No access". It is a refusal, not a warning, so it takes the stop colour.
*/
.admin_msg {
	background: rgba(178,14,20,.08);
	border-left: 3px solid var(--red);
	color: var(--red-b);
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
}
td.admin_msg { display: table-cell; margin: 0; }

/* The framed error block the installer and the fatal handler print. */
.main_error {
	background: var(--steel);
	width: auto;
	max-width: 100%;
	margin: 0.875rem 0 1.125rem;
	border: 1px solid var(--edge);
	border-left: 3px solid var(--red);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.head_error {
	background: var(--steel2);
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	font-weight: normal;
	color: var(--red-b);
	padding: 0.5625rem 0.875rem;
	border-bottom: 1px solid var(--edge);
}
.block_error { margin-left: 0; padding: 0.75rem 0.875rem; color: var(--text); }

/* The rcon output box. It is a console, so it stays a console. */
.rcon_box {
	color: var(--text);
	background: #0d0909;
	border: 1px solid var(--edge);
	padding: 0.625rem 0.75rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: normal;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

/* ========================================================== PAGINATION === */
/*
	The pager, styled as the forum's: bordered cells on the neutral grid, the
	current page carrying the same inset red rule that marks the active thing
	everywhere else.
*/
.pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	justify-content: flex-end;
	margin: 0 0 0.875rem;
	text-align: left !important;
}
.pager a, .pager span {
	display: inline-block;
	float: none;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: normal;
	height: auto;
	line-height: 1.3;
	margin: 0;
	padding: 0.375rem 0.625rem;
}
.pager a {
	background: var(--steel);
	border: 1px solid var(--edge);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
	color: var(--text);
}
.pager a:hover { background: var(--steel2); border-color: var(--red-b); color: var(--bright); }
.pager a img { vertical-align: middle; }
/* A bare <span> in the pager is the page you are on. */
.pager span {
	background: var(--steel2);
	border: 1px solid var(--edge);
	color: var(--bright);
	box-shadow: inset 0 -2px 0 var(--red);
}
/* Except the first one, which is the "Page 1 of 102" label. */
.pager span.first {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--muted);
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	margin-right: auto;
	padding: 0.375rem 0;
}
.pager span.error { font-weight: normal; background: none; border: 0; box-shadow: none; }
.archive-pagination { margin-bottom: 1rem; }

/* ============================================================== ICONS ==== */
/*
	The sprite sheets ship with the panel and are light-on-transparent, which
	is the right way round for a dark page, so they are used unchanged. Only
	the paths move to this design's own _gfx folder.
*/
.icons-stats {
	display: inline-block;
	background-image: url(../design_csgdark_gfx/stats.png);
	background-repeat: no-repeat;
	width: 16px; height: 14px;
	margin: 0;
	vertical-align: middle;
}
.icon-stats { background-position: 0 0; }
.icon-clock { background-position: -16px 0; }
.icon-kicks { background-position: -32px 0; }

.icons-func {
	display: inline-block;
	background-image: url(../design_csgdark_gfx/functions.png);
	background-repeat: no-repeat;
	width: 15px; height: 17px;
	cursor: pointer;
	margin: 0;
	vertical-align: middle;
}
.icon-view     { background-position: 0 0; }
.icon-edit     { background-position: -15px 0; }
.icon-delete   { background-position: -30px 0; }
.icon-email    { width: 16px; background-position: -45px 0; }
.icon-download { background-position: -61px 0; }

.icons-connect {
	display: inline-block;
	background-image: url(../design_csgdark_gfx/connect.png);
	background-repeat: no-repeat;
	width: 80px; height: 15px;
	cursor: pointer;
	margin: 0;
	vertical-align: middle;
}
.icon-steam { background-position: 0 0; }
.icon-hlsw  { background-position: -80px 0; }

.icons-page {
	display: inline-block;
	background-image: url(../design_csgdark_gfx/pagenation.png);
	background-repeat: no-repeat;
	width: 16px; height: 16px;
	margin: 0;
	vertical-align: middle;
}
.icon-left-valid     { background-position: 0 0; cursor: pointer; }
.icon-left-notvalid  { background-position: -32px 0; opacity: .35; }
.icon-left-end       { background-position: -64px 0; cursor: pointer; }
.icon-right-valid    { background-position: -16px 0; cursor: pointer; }
.icon-right-notvalid { background-position: -48px 0; opacity: .35; }
.icon-right-end      { background-position: -80px 0; cursor: pointer; }

/*
	.icon-access and a.feed are in the stock sheet pointing at _gfx/access.png
	and _gfx/icon-feed.gif. Neither file has ever shipped with this install and
	neither class is used by any template, so the rules are not carried over
	rather than carried over as two guaranteed 404s.
*/
a.more { color: var(--red-b); font-weight: normal; }
a.more:hover { color: var(--bright); }

/* ============================================================ TOOLTIP ==== */
#tooltip {
	background: var(--steel2);
	opacity: 1;
	border: 1px solid var(--edge2);
	border-left: 3px solid var(--red);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
	color: var(--text);
	margin: 0;
	padding: 0.375rem 0.5625rem;
	position: absolute;
	visibility: hidden;
	z-index: 100;
	font-family: var(--mono);
	font-size: 0.6875rem;
	max-width: 22rem;
}

/* ============================================================= FOOTER ==== */
/*
	The shared CSG site chrome (/csg_shared/csg_shell.css) supplies the top bar
	and the footer, so its look is not repeated here - only the two things that
	depend on this panel's layout.

	main_header.tpl and main_footer.tpl emit it for design_csgdark only; switch
	the design back and the stock AMXBans markup returns untouched. The shell's
	own wrapper is 90% wide with the same 94%/96% steps as .center-wrapper
	below, so the bar, the content and the footer share one set of margins.
*/
#csg-topbar { position: relative; z-index: 3; }

/* #network is the panel's own nav; it sits directly under the site bar. */
#csg-topbar + #network { border-top: 0; }

/* ====================================================== OVERRIDE CLASSES = */
.noborder  { border: 0; }
.notborder { border-top: 0; }
.norborder { border-right: 0; }
.nobborder { border-bottom: 0; }
.nolborder { border-left: 0; }

.nomargin  { margin: 0; }
.notmargin { margin-top: 0; }
.normargin { margin-right: 0; }
.nobmargin { margin-bottom: 0; }
.nolmargin { margin-left: 0; }

.nopadding  { padding: 0; }
.notpadding { padding-top: 0; }
.norpadding { padding-right: 0; }
.nobpadding { padding-bottom: 0; }
.nolpadding { padding-left: 0; }

/* ========================================================= SCROLLBARS ==== */
/*
	The panel is near-black; a default light scrollbar next to it reads as a
	hole punched in the page. Applied to the whole document and to every inner
	scroller - the wide tables, the rcon box, code blocks - so they all match.

	Firefox takes the two-colour form, WebKit and Blink take the box model.
*/
* {
	scrollbar-width: thin;
	scrollbar-color: var(--edge2) var(--bg);
}
::-webkit-scrollbar { width: 0.625rem; height: 0.625rem; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-corner { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--edge2); border: 1px solid var(--bg); }
::-webkit-scrollbar-thumb:hover  { background: var(--red); }
::-webkit-scrollbar-thumb:active { background: var(--red-b); }

/* ========================================================= RESPONSIVE ==== */
/*
	Breakpoints are the forum's. The two that matter here are 900, where the
	sidebar drops below the content, and 600, where the network bar stops
	trying to be a bar.
*/
@media (max-width: 1100px) {
	.center-wrapper { width: 94%; }
}

@media (max-width: 900px) {
	.main { gap: 0.875rem; }
	.main > .sidebar, .main > .right.sidebar { flex: 1 1 100%; }
	.main > #main-left, .main > .left:not(.sidebar) { flex: 1 1 100%; }
	.main#main-two-columns .sidebar-50-50,
	.main#main-two-columns #main-left-50-50 { flex: 1 1 100%; }
}

@media (max-width: 767px) {
	.center-wrapper { width: 96%; }
	#network > .center-wrapper { gap: 0.25rem 0.625rem; }
	#network > .center-wrapper > .right { margin-left: 0; }
	#header { padding: 0.625rem 0 0.5rem; }
	#site-title { padding-bottom: 0.5rem; }
	.post { padding: 0.75rem 0.75rem; }
	#site > .center-wrapper > div[style*="font-style"] { justify-content: flex-start; }
}

@media (max-width: 600px) {
	#network > .center-wrapper > .left,
	#network > .center-wrapper > .right { flex: 1 1 100%; }
	#network .tabbed a { padding: 0.4375rem 0.5rem; }
	#network #admin-tabs form { width: 100%; }
	#network #admin-tabs input[type=text],
	#network #admin-tabs input[type=password] { flex: 1 1 8rem; min-width: 0; }
	#main-nav a, #sub-nav a { padding: 0.5rem 0.625rem; }
	th, td { padding: 0.4375rem 0.5rem; }
	td.server-info { padding: 0.625rem 0.75rem; }
	.pager { justify-content: flex-start; }
	.pager span.first { flex: 1 1 100%; margin-right: 0; }
}

@media (max-width: 480px) {
	.center-wrapper { width: 100%; padding-left: 0.625rem; padding-right: 0.625rem; }
	.post { padding: 0.625rem; }
	tr[onclick*="NewToggleLayer"] > td:first-child { padding-left: 2.5rem; }
}