/* Sonnenstaatland 2.15.0 — colour customisation of prosilver for phpBB 3.3.19.
 * Column layout, status icons and responsive behaviour: prosilver.
 * overall_header.html adds a full-width masthead; all upstream template events remain.
 */
@import url("../../prosilver/theme/stylesheet.css");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");

:root {
	--ssl-blue: #355c7d;
	--ssl-blue-hover: #24465f;
	--ssl-yellow: #d4ac4b;
	--ssl-ink: #2c3540;
	--ssl-line: #cbd3db;
	--ssl-light: #f0f3f5;
	--ssl-font: "Open Sans", Arial, sans-serif;
}

/* Keep prosilver's calculation base: its nested em sizes depend on it. */
html { height: auto; background: #dde3e7; }
body { position: relative; z-index: 0; min-height: 100vh; padding: 0; background: transparent; color: var(--ssl-ink); font-family: var(--ssl-font); font-size: 10px; }
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: #c8d2cb url("./images/ssl-bg-blur-small.jpg") center top / cover no-repeat;
	pointer-events: none;
}
.wrap {
	box-sizing: border-box;
	width: calc(100% - 64px);
	max-width: 1320px;
	min-width: 0;
	margin: 24px auto;
	padding: 18px;
	background: #fff;
	border: 1px solid #c8d1d9;
	border-radius: 7px;
	box-shadow: 0 6px 24px rgba(30, 46, 55, .12);
}
h1, h2, h3, h4, fieldset, input, select, textarea, .button { font-family: var(--ssl-font); }
h2 { color: #2c3540; font-size: 20px; font-weight: 600; line-height: 1.4; }
h3 { color: #344f66; border-bottom-color: var(--ssl-line); }
a { color: #2d526f; }
a:hover { color: var(--ssl-blue); }

/* Compact full-width brand/menu bar, separate from the forum surface. */
.ssl-top-header { background: #304c60; border-bottom: 2px solid var(--ssl-yellow); color: #fff; }
.ssl-top-inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	width: calc(100% - 64px);
	max-width: 1320px;
	min-height: 88px;
	margin: 0 auto;
	padding: 10px 18px;
}
.ssl-top-header .site-description { display: flex; align-items: center; gap: 16px; float: none; width: auto; min-width: 0; }
.ssl-top-header .logo { display: block; float: none; flex-shrink: 0; padding: 0; }
.ssl-top-header .site_logo { display: block; width: 112px; height: 67px; background: url("./images/SSL-LOGO-26.png") center / contain no-repeat; }
.ssl-brand-copy { min-width: 0; }
.ssl-top-header .site-description h1 { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: .01em; color: #fff; }
.ssl-top-header .site-description p { display: block; margin: 0; font-size: 12px; line-height: 1.5; color: #d9e3ea; }
.ssl-utility-bar { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.ssl-utility-links { display: flex; align-items: center; gap: 18px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ssl-utility-links a, .ssl-utility-placeholder { padding: 7px 0; border-bottom: 2px solid transparent; color: #e4ebf0; }
.ssl-utility-links a[aria-current="true"] { border-bottom-color: var(--ssl-yellow); color: #fff; }
.ssl-utility-links a:hover { border-bottom-color: var(--ssl-yellow); color: #fff; text-decoration: none; }
.ssl-utility-placeholder { color: #b9c9d5; cursor: default; }
.ssl-utility-search { float: none; margin: 0; }
.ssl-utility-search fieldset { display: flex; align-items: stretch; margin: 0; padding: 0; font-size: 12px; }
.ssl-utility-search .inputbox {
	box-sizing: border-box;
	width: 170px;
	height: 32px;
	padding: 0 10px;
	border-color: #b6c6d1;
	border-radius: 4px 0 0 4px;
	font-size: 12px;
	background: #fff;
}
.ssl-utility-search .button { box-sizing: border-box; height: 32px; padding: 0 8px; line-height: 30px; }
.ssl-utility-search .button-search-end { border-radius: 0 4px 4px 0; }
.ssl-top-header a:focus-visible { outline-color: #f0cf7c; }

/* Navigation clearly separated from header and forum content. */
.navbar { background: #e7ecf0; border: 1px solid #c7d1d9; }
.navbar ul.linklist > li { font-size: 12px; }
.navbar a { color: #344f66; }
.navbar a:hover { color: var(--ssl-blue); }
ul.navlinks { border-top-color: #c9d2da; }
.badge { background-color: var(--ssl-blue); }

/* Personal welcome, native account controls, secondary links, breadcrumbs. */
.ssl-member-navbar { margin-bottom: 14px; padding: 0; background: #fff; border: 0; border-radius: 0; }
.ssl-member-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 0 12px; border: 0; }
.ssl-member-greeting { box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; padding: 12px 14px; background: #eaf2f8; border: 1px solid #b8cddd; border-radius: 6px; }
.ssl-member-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; color: #7890a2; background: #e8eef3; border-radius: 4px; overflow: hidden; }
.ssl-member-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ssl-member-avatar > .icon { font-size: 24px; }
.ssl-member-copy { display: block; min-width: 0; }
.ssl-member-title { margin: 0; font-size: 16px; line-height: 1.45; color: #294b65; overflow-wrap: anywhere; }
.ssl-member-title strong { font-weight: 700; }
.ssl-member-shortcuts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; font-size: 12px; line-height: 1.5; }
.ssl-member-navbar ul.ssl-account-actions { display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; padding: 0; }
.ssl-member-navbar ul.ssl-account-actions > li { float: none; margin: 0; padding-top: 0; font-size: 12px; line-height: 1.5; }
.ssl-account-actions > li::before { display: none; }
/* Consistent controls; primary action and account get distinct emphasis below. */
.ssl-member-shortcuts > a,
.ssl-account-actions > li > a,
.ssl-account-actions .header-avatar {
	box-sizing: border-box;
	display: inline-block;
	min-height: 32px;
	padding: 6px 10px;
	border: 1px solid #b9c8d4;
	border-radius: 4px;
	background: #fff;
	color: #294b65;
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	text-decoration: none;
}
.ssl-member-shortcuts > a:hover,
.ssl-account-actions > li > a:hover,
.ssl-account-actions .header-avatar:hover {
	background: #e8eff5;
	border-color: #819bae;
	color: #18364c;
	text-decoration: none;
}
.ssl-member-navbar a:focus-visible { outline: 2px solid #355c7d; outline-offset: 2px; }
.ssl-member-shortcuts > a[href*="search_id=unreadposts"] { background: var(--ssl-blue); border-color: var(--ssl-blue); color: #fff; font-weight: 600; }
.ssl-member-shortcuts > a[href*="search_id=unreadposts"]:hover { background: var(--ssl-blue-hover); border-color: var(--ssl-blue-hover); color: #fff; }
.ssl-account-actions #username_logged_in { order: 3; }
.ssl-account-actions .ssl-account-pm { order: 1; }
.ssl-account-actions .ssl-account-notifications { order: 0; }
.ssl-account-actions .header-profile { padding-left: 0; border-left: 0; }
.ssl-account-actions .header-avatar { font-weight: 400; background: #f6f8fa; border-color: #b9c8d4; }
.ssl-account-actions .badge { margin-left: 3px; background: var(--ssl-yellow); color: #292f35; }
.ssl-member-navbar #nav-main { margin: 0; padding: 3px 8px; border-top: 1px solid #e2e5e7; border-bottom: 1px solid #e2e5e7; background: #fafbfc; }
.ssl-member-navbar #nav-main > li { margin-right: 2px; padding-top: 0; font-size: 12px; }
.ssl-member-navbar #nav-main > li > a { display: inline-block; padding: 2px 8px; border-radius: 3px; color: #303b45; font-weight: 400; text-decoration: none; }
.ssl-member-navbar #nav-main > li > a:hover { background: #e8eef3; color: #18364c; }
.ssl-member-navbar #nav-main > li > a:focus-visible { outline-color: var(--ssl-blue); }
.ssl-member-navbar #nav-breadcrumbs { margin: 0; padding: 4px 16px; border-top: 0; border-bottom: 1px solid #e2e5e7; background: #fff; border-radius: 0; }
.ssl-member-navbar #nav-breadcrumbs > li { font-size: 11.5px; }
.ssl-member-navbar #nav-breadcrumbs .crumb a { font-weight: 400; color: #4a5a67; }
.ssl-member-navbar #nav-breadcrumbs .crumb:last-child a { font-weight: 600; color: #303b45; }
/* Round the surfaces themselves, not a clipping wrapper: dropdowns stay visible. */
.ssl-navigation-row { display: block; border: 1px solid #d2dae1; border-radius: 6px; background: #fafbfc; }
.ssl-member-navbar .ssl-navigation-row #nav-main { border: 0; border-radius: 5px 5px 0 0; }
.ssl-member-navbar .ssl-navigation-row #nav-breadcrumbs { clear: both; border: 0; border-top: 1px solid #e2e5e7; border-radius: 0 0 5px 5px; background: #fff; }
/* Dates and the native mark-read action share one secondary index row. */
.ssl-index-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; font-size: 11px; color: #5b6269; }
.ssl-index-times { display: flex; flex-wrap: wrap; gap: 3px 16px; }
.ssl-index-meta p.time { float: none; margin: 0; font-size: 11px; line-height: 1.5; }
.ssl-index-meta .action-bar { margin: 0; }
.ssl-index-meta .mark-read { float: none; }
@media (max-width: 900px) {
	.ssl-member-row { flex-wrap: wrap; gap: 10px; }
	.ssl-member-greeting { width: auto; }
	.ssl-member-navbar ul.ssl-account-actions { justify-content: flex-start; width: 100%; gap: 6px; }
}
@media (max-width: 700px) {
	.ssl-member-row { padding: 0 0 10px; }
	.ssl-member-greeting { padding: 10px 12px; }
	.ssl-member-navbar #nav-main { padding-left: 4px; padding-right: 4px; }
	.ssl-member-navbar #nav-breadcrumbs { padding-left: 12px; padding-right: 12px; }
	.ssl-member-avatar { flex-basis: 40px; width: 40px; height: 40px; }
	.ssl-member-title { font-size: 15px; }
	.ssl-member-shortcuts { gap: 6px; }
	.ssl-account-actions .header-profile { padding-left: 0; border-left: 0; }
	.ssl-member-navbar ul.ssl-account-actions > li { font-size: 11.5px; }
}

/* Restrained slate-blue category strips with clear neutral frames. */
.forabg, .forumbg {
	margin-bottom: 18px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--ssl-line);
	border-radius: 6px;
}
.forabg li.header, .forumbg li.header { padding: 5px 5px; background: #3f586c; border-bottom: 1px solid #354c5e; border-radius: 5px 5px 0 0; }
.forabg li.header dl.row-item dt .list-inner, .forumbg li.header dl.row-item dt .list-inner { padding-left: 10px; }
.forabg li.header dt, .forumbg li.header dt {
	color: #fff;
	font-family: var(--ssl-font);
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
}
.forabg li.header dd, .forumbg li.header dd {
	color: #fff;
	font-family: var(--ssl-font);
	font-size: 11px;
	text-transform: none;
}
table.table1 thead th a { color: #344f66; }
.forabg .header a, .forumbg .header a, .forumbg table.table1 thead th a { color: #fff; }
.forabg .header a:hover, .forumbg .header a:hover, .forumbg table.table1 thead th a:hover { color: var(--ssl-yellow); }
/* Neutral conversation panel, distinct from the blue forum categories. */
.forabg.stoker-chat { margin-bottom: 26px; background: #fff; border-color: #b9c2c9; }
.forabg.stoker-chat ul.topiclist li.header { background: #3d454a; border-bottom-color: #30383d; box-shadow: none; }
.forabg.stoker-chat ul.topiclist li.header dt { font-family: var(--ssl-font); font-size: 14px; font-weight: 700; line-height: 1.6; }
.forabg.stoker-chat .stoker-chat-header { padding: 0 10px; }
.forabg.stoker-chat .stoker-chat-title,
.forabg.stoker-chat .stoker-chat-title a { font: inherit; }
.forabg.stoker-chat .stoker-chat-title,
.forabg.stoker-chat .stoker-chat-title a,
.forabg.stoker-chat .stoker-chat-title a:link,
.forabg.stoker-chat .stoker-chat-title a:visited,
.forabg.stoker-chat .stoker-chat-title i.fa { color: #fff; }
.forabg.stoker-chat .stoker-chat-title a:hover { color: #fff; text-decoration: underline; }
.forabg.stoker-chat .stoker-chat-title i.fa { display: inline-block; width: 1.25em; margin-right: 6px; font-size: 1em; transform: none; text-align: center; }
.section-index .forabg.stoker-chat:not(.stoker-chat-standalone) .stoker-chat-messages { height: 156px; }
.forabg.stoker-chat .stoker-chat-messages { padding: 6px 15px; background: #fff; border-bottom-color: transparent; }
.forabg.stoker-chat .stoker-chat-msg { align-items: flex-start; padding: 6px 0; border-bottom: 0; }
.forabg.stoker-chat .stoker-chat-time,
.forabg.stoker-chat .stoker-chat-edited { color: #626b73; }
.forabg.stoker-chat .stoker-chat-login,
.forabg.stoker-chat .stoker-chat-load-older { background: #fff; color: #4b5660; border-color: #d9dfe4; }
.forabg.stoker-chat .stoker-chat-input { padding-left: 15px; padding-right: 15px; }
/* Integrate chat controls without changing extension templates or behaviour. */
.forabg.stoker-chat .stoker-chat-input { background: #f3f5f7; border-top-color: #d9dfe4; border-radius: 0 0 5px 5px; }
.forabg.stoker-chat .stoker-chat-input-wrap { background: #fff; border-color: #b9c2c9; }
.forabg.stoker-chat .stoker-chat-input-wrap:focus-within { border-color: var(--ssl-blue); box-shadow: 0 0 0 1px var(--ssl-blue); }
.forabg.stoker-chat .stoker-chat-input-wrap:focus-within .stoker-chat-counter { border-color: var(--ssl-blue); }
.forabg.stoker-chat .stoker-chat-counter { background: #fff; color: #56616b; }
.forabg.stoker-chat .stoker-chat-input button#stoker-chat-send { background: var(--ssl-blue); border-color: var(--ssl-blue); color: #fff; font-family: var(--ssl-font); font-weight: 600; }
.forabg.stoker-chat .stoker-chat-input button#stoker-chat-send:hover:not(:disabled) { background: var(--ssl-blue-hover); border-color: var(--ssl-blue-hover); color: #fff; }
.forabg.stoker-chat .stoker-chat-input button#stoker-chat-send:disabled { background: #e2e7ec; border-color: #c2ced8; color: #53616e; cursor: default; }
.forabg.stoker-chat .stoker-chat-input button:focus-visible { outline: 2px solid var(--ssl-blue); outline-offset: 2px; }
ul.forums { background: #fafbfc; }
li.row { border-top-color: #fff; border-bottom-color: #d4dce3; }
li.row:nth-child(even) { background-color: #f0f3f5; }
li.row:hover { background-color: #f7f2e5; }
ul.topiclist li { color: #53616e; }
ul.topiclist dt { font-size: 12px; line-height: 1.6; }
ul.topiclist li.row dl { padding-top: 3px; padding-bottom: 3px; }
ul.topiclist dd, li.row:hover dd { border-left-color: #d4dce3; }
dd.posts, dd.topics, dd.views, dd.lastpost, dd.redirect, dd.info { font-size: 12px; }
a.forumtitle, a.topictitle { font-family: var(--ssl-font); font-size: 14px; font-weight: 600; color: #2d526f; }
a.forumtitle:hover, a.topictitle:hover { color: var(--ssl-blue); }

/* Stronger list hierarchy only; leave posts and extension widgets untouched. */
.forabg ul.topiclist li.row, .forumbg ul.topiclist li.row {
	background-color: #fff;
	color: #50565d;
	border-bottom-color: #c2ced8;
}
.forabg ul.topiclist li.row:nth-child(even), .forumbg ul.topiclist li.row:nth-child(even) { background-color: #f6f7f7; }
.forabg ul.topiclist li.row:hover, .forumbg ul.topiclist li.row:hover { background-color: #f5edda; }
.forabg ul.topiclist li.row dd, .forumbg ul.topiclist li.row dd { border-left-color: #e6e9eb; }
.forabg a.forumtitle, .forumbg a.topictitle { color: #283139; }
.forabg a.forumtitle:hover, .forumbg a.topictitle:hover { color: #18364c; text-decoration: underline; }

/* Assigned by search_results.html only for search_id=unreadposts. */
.forumbg .ssl-last-post-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	min-height: 32px;
	margin-left: 5px;
	border: 1px solid #b8cddd;
	border-radius: 4px;
	background: #eaf2f8;
	color: #294b65;
	vertical-align: middle;
	text-decoration: none;
}
.forumbg .ssl-last-post-button .icon { font-size: 14px; color: inherit; }
.forumbg .ssl-last-post-button:hover { background: #355c7d; border-color: #355c7d; color: #fff; text-decoration: none; }
.forumbg .ssl-last-post-button:focus-visible,
.forumbg .ssl-last-post-mobile:focus-visible { outline: 2px solid #355c7d; outline-offset: 2px; }
.forumbg .ssl-last-post-mobile { display: inline-block; padding: 4px 6px; border-radius: 3px; background: #eaf2f8; color: #294b65; }

/* Alternating post surfaces and clear boundaries for panels/statistics. */
.bg1 { background-color: #fafbfc; }
.bg2 { background-color: #f0f3f5; }
.bg3 { background-color: #e3e9ee; }
.post {
	margin-bottom: 14px;
	padding: 14px 16px;
	border: 1px solid #c3cfd9;
	border-top: 2px solid #7890a2;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(44, 62, 76, .04);
}
.post.bg1 { background-color: #f8fafc; }
.post.bg2 { background-color: #f1f4f7; }
.post:target { border-top-color: var(--ssl-blue); }
.postprofile { box-sizing: border-box; padding: 0; border-radius: 0; background: transparent; }
.postbody h3, .postbody h3.first { font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.postbody p.author { font-size: 11px; line-height: 1.5; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid #d9e1e8; color: #647281; }
.post.unreadpost { border-left: 3px solid var(--ssl-yellow); border-top-color: var(--ssl-blue); }
.post.reported { background-color: #f9e9ed; border-color: #dba4b0; }
.post.warned { border-color: #c8aa53; }
.postprofile { color: #53616e; border-color: #c4ced8; }
.postbody .content { color: #303740; font-family: var(--ssl-font); font-size: 13.5px; font-weight: 400; line-height: 1.55; overflow-wrap: break-word; }
/* Do not allow prosilver's .content p (1.2em/Trebuchet) to enlarge paragraphs. */
.postbody .content p { font-family: inherit; font-size: 1em; line-height: inherit; margin: 0 0 .9em; }
.postbody .content p:last-child { margin-bottom: 0; }
.postbody h3 { font-family: var(--ssl-font); }
.postlink { color: #2d526f; border-bottom-color: #8da4b6; }
.postlink:visited { color: #594783; border-bottom-color: #b9acc9; }
.postlink:hover { color: var(--ssl-blue); background-color: #f5edda; }
.signature, .notice { border-top-color: #c4ced8; }
.postbody .signature { padding-top: 9px; font-family: var(--ssl-font); font-size: 11.5px; line-height: 1.45; color: #647281; }
.postbody .signature p { font-family: inherit; font-size: 1em; line-height: inherit; }
blockquote { padding: 10px 12px; background-color: #eef2f6; border: 1px solid #d2dce5; border-left: 3px solid #8da2b4; border-radius: 3px; }
blockquote cite { color: #3b5368; }
blockquote .content { font-size: inherit; }
blockquote blockquote { background-color: #fafbfc; }
blockquote blockquote blockquote { background-color: #eef2f6; }
.postbody .content blockquote { margin: .85em 0; font-size: 1em; background-color: #e9eef3; }
.postbody .content blockquote blockquote { margin-left: 12px; background-color: #f7f9fb; }
.postbody .content blockquote cite { margin-bottom: 5px; font-family: inherit; font-size: 11.5px; line-height: 1.4; font-weight: 600; color: #4c6275; }
.codebox, .attachbox { background-color: #fff; border-color: #c4ced8; }
.panel { margin-bottom: 8px; background-color: var(--ssl-light); color: var(--ssl-ink); border: 1px solid #c4ced8; }
.panel h2, .content h2 { color: #344f66; border-bottom-color: var(--ssl-line); }
.panel p { font-size: 13px; line-height: 1.6; }
.stat-block { margin: 10px 0; padding: 9px 12px; background: #f3f5f7; border: 1px solid #c4ced8; border-radius: 5px; }
.stat-block h3 { margin: 0 0 7px; padding-bottom: 6px; font-size: 13px; }
.stat-block p { margin-bottom: 0; font-size: 12px; line-height: 1.6; }
.stat-block.online-list { background-image: none; }

/* Buttons, controls and user panels keep their original positions. */
.button { background: #fff; border-color: #bcc9d3; color: #344f66; box-shadow: none; text-shadow: none; }
.button .icon { color: #607c91; }
.button:hover, .button:focus { background: #f5edda; border-color: #afc0cc; color: #2d526f; text-shadow: none; }
.button:hover .icon, .button:focus .icon { color: #2d526f; }
.action-bar > .button, input.button1, a.button1 { background: var(--ssl-blue); border-color: #35546c; color: #fff; text-shadow: none; }
.action-bar > .button .icon { color: #fff; }
.action-bar > .button:hover, .action-bar > .button:focus, input.button1:hover, a.button1:hover { background: var(--ssl-blue-hover); color: #fff; }
input.button2, a.button2 { background: #fff; border-color: #bcc9d3; color: #344f66; }
.inputbox, select { background-color: #fff; border-color: #aebdc9; color: #2c3540; }
.inputbox:focus, select:focus { border-color: var(--ssl-blue); }
.pagination li a { background: #fff; border-color: #bcc9d3; color: #344f66; }
.pagination li.active span, .pagination li a:hover { background: var(--ssl-blue); border-color: var(--ssl-blue); color: #fff; }
.tabs .tab > a { background: #e2e8ed; color: #344f66; }
.tabs .tab > a:hover { background: #f5edda; color: #2d526f; }
.tabs .activetab > a, .tabs .activetab > a:hover { background: #f0f3f5; border-color: #c4ced8; color: #2d526f; box-shadow: none; }
#navigation a { background: #e2e8ed; color: #344f66; }
#navigation a:hover, #navigation #active-subsection a { background: #d1dce4; color: #2d526f; }
.dropdown .dropdown-contents { background-color: #fff; border-color: #c4ced8; }
.dropdown-extended .header, .dropdown-extended .footer { background-color: #f0f3f5; color: #344f66; }
.dropdown-extended ul li:hover { background-color: #f5edda; }
table.table1 thead th { color: #344f66; }
.panel-container table.table1 thead th { color: #344f66; }
.forumbg table.table1 thead th { background: #3f586c; color: #fff; }
table.table1 tbody td { color: #53616e; border-top-color: #fff; }
table.table1 tbody tr:hover { background-color: #f5edda; }
div.rules { background: #f7efdb; color: #705b2a; border: 1px solid #ddcca4; }
.copyright { color: #66727d; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ssl-blue); outline-offset: 2px; }

/* Only topic posts change sides; PMs, search results and editor review retain their layouts. */
@media (min-width: 701px) {
	.section-viewtopic .post.has-profile .postprofile {
		float: left;
		width: 176px;
		margin: 0;
		padding: 2px 16px 4px 0;
		border-width: 0 1px 0 0;
		border-right-color: #cbd6df;
		font-family: var(--ssl-font);
		font-size: 11px;
	}
	.section-viewtopic .post.has-profile .postprofile dt,
	.section-viewtopic .post.has-profile .postprofile dd { margin-left: 0; line-height: 1.5; }
	.section-viewtopic .post.has-profile .postprofile dd { margin-top: 3px; }
	.section-viewtopic .post.has-profile .postprofile .username,
	.section-viewtopic .post.has-profile .postprofile .username-coloured { font-size: 13px; font-weight: 700; }
	.section-viewtopic .post.has-profile .postprofile .avatar img { width: auto; height: auto; max-width: 120px; max-height: 140px; border-radius: 3px; }
	.section-viewtopic .post.has-profile .postbody { float: right; width: calc(100% - 196px); }
}

@media (max-width: 1100px) {
	.ssl-top-inner { gap: 18px; }
	.ssl-utility-bar { gap: 16px; }
	.ssl-utility-search .inputbox { width: 140px; }
	.ssl-top-header .site_logo { width: 96px; height: 58px; }
	.ssl-top-header .site-description h1 { font-size: 17px; }
}
@media (max-width: 900px) {
	.ssl-top-inner { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
	.ssl-top-header .site-description { width: 100%; }
	.ssl-utility-bar { justify-content: space-between; width: 100%; }
	.wrap { width: calc(100% - 40px); margin: 20px auto; padding: 14px; }
	.ssl-top-inner { width: calc(100% - 40px); }
}
@media (max-width: 700px) {
	.wrap { width: calc(100% - 20px); min-width: 0; margin: 14px auto; padding: 12px; border-radius: 5px; }
	.ssl-top-inner { width: calc(100% - 32px); padding: 12px 6px; }
	.ssl-top-header .site-description { gap: 12px; text-align: left; }
	.ssl-top-header .site-description h1 { font-size: 17px; text-align: left; overflow: visible; }
	.ssl-top-header .site-description p { font-size: 11px; text-align: left; overflow: visible; }
	.ssl-top-header .site_logo { width: 90px; height: 54px; }
	.ssl-utility-links { gap: 14px; font-size: 12px; }
	.ssl-utility-search .inputbox { width: 120px; }
	.navbar, .forabg, .forumbg, .post, .panel { margin-left: 0; margin-right: 0; }
	.forabg, .forumbg { margin-bottom: 10px; }
	.post { margin-bottom: 12px; padding: 11px; border-radius: 4px; }
	.post .postprofile { padding: 0 0 8px; border-bottom: 1px solid #c7d3dd; }
	.postbody .content { font-size: 14px; line-height: 1.55; }
	.postbody h3, .postbody h3.first { font-size: 13.5px; }
	.stat-block { padding: 9px 10px; }
}
@media (max-width: 480px) {
	.ssl-utility-bar { flex-wrap: wrap; gap: 8px; }
	.ssl-utility-links { width: 100%; }
	.ssl-utility-search { width: 100%; }
	.ssl-utility-search fieldset { width: 100%; }
	.ssl-utility-search .inputbox { width: 0; flex: 1; min-width: 0; }
}
@media print {
	body::before, .ssl-top-header { display: none; }
	body { min-height: 0; background: #fff; }
	.wrap { width: 100%; max-width: none; margin: 0; border: 0; box-shadow: none; }
	.post { box-shadow: none; }
}