/* INTRODUCTION
 * This is the standard Elkarte default theme.
 * This file contains essential layout code only.
 *
 * Colors, gradients, images, etc. are in index_variant.css in the _variant directory
 * All theme variants depend on this layout code for stability.
 * It is better to copy code to a variant CSS file for testing.
 * -------------------------------------------------------
 * $CONTENTS
 *
 *      $CONSTANTS...........CSS Vars for easy updates
 *      $FRONT MATTER........Global page defaults
 *		$GENERAL.............Global resets, clearfixes, etc.
 *		$COMMON..............Common classes to drive you bonkers.
 *		$BBC.................Quotes, code blocks, BBC styles.
 *		$AJAX................The "loading" bar (quick edit, etc).
 *
 *		$MAIN................Forum header, wrapper, and footer.
 *		$MENUS...............Main and secondary menus.
 *		$LINKTREE............The breadcrumbs.
 *		$BUTTONS.............Most button strips.
 *		$PAGELINKS...........Page navigation links.
 *
 *		$TABLES..............Generic tables (error log, etc.).
 *		$SETTINGS............Generic lists for settings pages.
 *		$BOARDS..............Board index, sub-boards.
 *      $MESSAGE.............Message (topic) Index
 *		$DRAG-N-DROP.........Post attachment area, including Drag and Drop
 *
 *		$TOPICS..............The display template (topic view), including send.
 *		$EDITOR..............Main editor (posts, events, polls) and topic summary.
 *		$MODERATE............Move topic, split topic, merge topic.
 *      $OTHER...............Miscellaneous items, viewquery, etc
 *
 *		$PROFILE.............The profile areas.
 *		$PERSONAL............The personal messages (PM) areas.
 *		$CALENDAR............Antz (and the calendar).
 *		$STATISTICS..........The statistics centre.
 *		$LIKE STATS..........The like stats area
 *
 *		$HELP................Help pages, help icons and pop-ups, tooltips.
 *		$SEARCH..............Search pages, including memberlist search.
 *		$MEMBERLIST..........The memberlist table.
 *		$LOGIN...............Login and registration, maintenance mode.
 *
 *		$BOXES...............Message boxes (error, warning, info, etc).
 *		$PROGRESS............Nifty progress bars.
 *		$MEDIA...............Experimental media queries.
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 *	$CONSTANTS
 * -------------------------------------------------------
 */
:root {
	/* font size px to em based on 15px base font (.9375em) */
	--font9: 0.6rem;
	--font10: 0.6667rem;
	--font11: 0.7333rem;
	--font12: 0.8rem;
	--font13: 0.8667rem;
	--font14: 0.9333rem;
	--font15: 1.0rem;
	--font16: 1.0667rem;
	--font17: 1.1333rem;
	--font18: 1.2rem;
	--font19: 1.2667rem;
	--font20: 1.3333rem;
	--font21: 1.4rem;
	--font22: 1.4667rem;
	--font23: 1.5333rem;
	--font24: 1.6rem;
	--font25: 1.6667rem;
	--font26: 1.7333rem;
	--font27: 1.8rem;
	--font28: 1.8667rem;
	--font29: 1.9333rem;
	--font30: 2.0rem;
	/* The height of the main menu when stuck to the page top */
	--sticky: 65px;
}

/* -------------------------------------------------------
 *	$FRONT MATTER
 * -------------------------------------------------------
 */

/* Most pages need a vertical scroll, show it by default to prevent page
   Prevent font size changes on screen rotation */
html {
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding: 80px 0 0 0;
}

/* Set a font that will look the mostly the same in all browsers.

   Specifying a 15px base font and 1.5 for line-height for main content.
   This will help people experiencing low vision conditions.
   If the page is zoomed to increase the text size, using a unitless line height value ensures
   that it will scale proportionately. */
html, body {
	/* Should you change this you will need to change the --font translation table. */
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
}

body {
	color: #141414;
}

/* Global box sizing, for stabilising fluid layouts.
   Remove margin and padding in all browsers. */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------
 *	$GENERAL
 * -------------------------------------------------------
 */

/* Width control for top bar, header, main content and footer content.*/
.wrapper {
	/* Next controls forum width, when it is not set in admin. */
	width: 90%;
	/* Next limits maximum width on wide screens.
	   Sized in em, since some people require larger text.
	   For ease of reading, content really should not be too wide. */
	max-width: 150em;
	margin: 0 auto;
	--wrapper: 90%;
}

/* Normal, standard links. */
a, a:link, a:visited,
/* Links that open in a new window. */
a.new_win:link, a.new_win:visited {
	text-decoration: none;
}

/* Cursor declared here. Should not be required anywhere else. */
a:hover, a.new_win:hover {
	cursor: pointer;
	text-decoration: underline;
}

body, input, button, select, textarea, .editor {
	/* Set a font-family
	   Start with calling OSx system’s UI font with -apple-system, BlinkMacSystemFont this will pull in
	   (San Francisco, Neue Helvetica and Lucida Grande depends on OS version)
	   Then Windows (Segoe UI), Android (Roboto), Unix (KDE, Ubuntu, Gnome), Old Android (Droid Sans),
	   OSx pre apple-system support (Helvetica Neue), fallbacks (Arial, sans-serif) */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Droid Sans", "Helvetica Neue", "Trebuchet MS", Arial, sans-serif;
}

/* Use a specific demi bold font weight for some areas, less jarring then 700/bold,
   with fallback to default font stack if not available. */
.codeheader, .quoteheader, .expand_pages, .table_head > th, .topic_sorting_row > h3, .topic_name h4 a,
.poster .name, .keyinfo h5 a, .keyinfo h5 a strong, .ui-dialog .ui-dialog-titlebar,
#creator dt strong, .settings label, .popup_heading {
	font-family: "Segoe UI Semibold", "Segoe UI", "Helvetica Neue Medium", -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Droid Sans", "Helvetica Neue", "Trebuchet MS", Arial, sans-serif;
	font-weight: 600;
	/* Apple specific fixes */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

legend {
	font-size: var(--font16);
	margin-left: 15px;
	cursor: pointer;
}

legend::before, .collapsed legend::before {
	display: inline-block;
	width: 16px;
	height: 16px;
	padding: 0 0 0 1em;
	content: "";
	background-repeat: no-repeat;
}

/* Tables should show empty cells. */
table {
	empty-cells: show;
}

/* Default most presentational elements to 1em allows parent container to set the size
   Declare these separately to divs to avoid padding and margin problems. */
h1, h2, h3, h4, h5, h6,
ul, ol, li,
dl, dd, dt,
p, fieldset,
form, input, button, select, textarea,
.input_text, .editor {
	/* Dont use var(--font#) here */
	font-size: 1em;
	font-weight: normal;
}

/* Fieldsets are used to group elements.
   Declaring as overflow: auto; is probably a good idea. */
fieldset {
	overflow: auto;
	margin: 5px 0;
	padding: 0.35em 0.75em 0.625em;
	border: 1px solid transparent;
	border-radius: 5px;
}

/* Collection of pseudo element clearfixes. */
.category_header::after, .wrapper::after, .editor_wrapper::after,
#main_content_section::after, #main_container::after, .quickbuttons::after,
.attachment_name::after, .attachment_name::before,
#poll_options .options li::after {
	display: block;
	clear: both;
	content: "";
}

/* Simple spacer for between sections */
.separator {
	clear: both;
	margin: 4px 0;
}

/* Set list-style to none by default. Best in most places.*/
ul, ol {
	list-style: none;
}

/* Prevent sub and sup from affecting the line height */
sub, sup {
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* No image should have a border when linked. */
a img {
	border: 0;
}

/* The following is necessary. */
textarea, .editor {
	line-height: 1.4;
	border: 1px solid;
	border-radius: 4px;
}

/* Style the different types of inputs to be uniform for all browsers.
   NOTE:
   This does require some browser-specific code to get good results.
   Padding on all types of inputs are set here.
   If specific styling is wanted for some inputs, be aware of browser
   differences when adding custom padding, or it will drive you mental. */

/* Remove the inner border and padding in Firefox. */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	padding: 0;
	border-style: none;
}

/* These values are to suppress the browsers `focus ring` which don't match the
   theme (instead we use border colors).  However we still want to allow keyboard
   users to see which button / submit is active.
   Focusing with a keyboard will show an assistive dashed black line on button type elements. */
input[type="submit"]:focus-visible, button:focus-visible, .linkbutton:focus-visible {
	outline: 2px dashed black;
}

/* Focusing with a mouse or touch will not change its indication. */
input:focus:not(:focus-visible), input.input_text:focus, button:focus:not(:focus-visible) {
	outline: none;
}

/* Other text areas we style with border during the :focus event */
textarea:focus, select:focus, .editor:focus {
	outline: none;
}

/* Correct clickable types in iOS and Safari. */
button,
[type="button"],
[type="submit"] {
	-webkit-appearance: button;
}

/* Declarations for inputs, selects and buttons */
input, .input_text, button, select {
	font-size: var(--font14);
	line-height: 1.4;
	overflow: visible;
	height: 2em;
	padding: 0 .4em;
	vertical-align: middle;
}

input, button, select {
	text-transform: none;
	border: 1px solid;
	border-radius: 3px;
}

input:focus, textarea:focus, button:focus, select:focus, .editor:focus {
	border: 1px solid;
}

select {
	overflow: hidden;
	max-width: 95%;
	padding-left: .13em;
	white-space: nowrap;
	text-overflow: ellipsis;
}

select option {
	padding: 0 .25em;
}

select[size],
input[type="file"] {
	overflow-y: auto;
	height: auto;
	max-height: none;
}

/* jquery.multiselect */
.select_multiple {
	height: auto;
	min-height: 10em;
}

input[type="number"] {
	padding: 0 0 0 .4em;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/* No borders around checkboxes or radio buttons, and middle aligned. */
input[type="checkbox"], input[type="radio"] {
	font-size: var(--font14);
	font-weight: normal;
	width: 1em;
	height: 1em;
	margin: -.13em .13em 0;
	padding: .13em;
	vertical-align: middle;
	border: none;
	background: none;
}

/* Fix search box appearance in iOS */
[type="search"] {
	outline-offset: -.2px;
	-webkit-appearance: none;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/* Common submit button styling. */
input[type="submit"], button[type="submit"], input[type="button"],
/* Anchors styled to look like buttons. */
.linkbutton:link, .linkbutton:visited {
	display: inline-block;
	margin-top: -0.05em;
	margin-right: 0.1em;
	margin-left: 0.1em;
	padding: .13em .4em;
	border: 1px solid;
	border-radius: 2px;
}

.linkbutton:link, .linkbutton:visited {
	font-size: var(--font15);
	position: relative;
	height: 2em;
}

/* Hover effects. */
input[type="submit"]:hover, button[type="submit"]:hover, input[type="button"]:hover,
.linkbutton:hover {
	cursor: pointer;
	text-decoration: none;
}

/* Don't show disabled buttons as active on hover */
input[type=submit][disabled]:hover, button[disabled], button[disabled]:hover {
	border: 1px solid;
}

/* Use new class that is defined to suit, and with a sensible name. */
.submitbutton {
	display: flex;
	clear: both;
	overflow: visible;
	align-items: center;
	justify-content: flex-end;
	padding: .4em 0;
}

/* The new "button" */
.topic_name h4 .new_posts, .new_posts, .require_approval {
	font-family: verdana, sans-serif;
	font-size: var(--font11);
	font-weight: bold;
	padding: .065em .25em .13em .25em;
	border-radius: 2px;
}

.new_posts:hover {
	text-decoration: underline;
}

.childboards .new_posts {
	font-size: var(--font11);
	padding: .1em .2em .12em;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr {
	overflow: visible;
	box-sizing: content-box;
	height: 0;
	margin: .8em 0;
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-left: 0;
}

/* -------------------------------------------------------
 *	$COMMON
 * -------------------------------------------------------
 */

/* em as italics */
em, .em {
	font-style: italic;
}

/* We use this alot */
.hide {
	display: none;
}

/* HTML5 additions for deprecated tags. */
.tt {
	font-family: monospace;
}

/* Alternative for u tag. */
.underline {
	text-decoration: underline;
}

/* Floats, overflows, clears. @todo */
.floatright {
	float: right;
}

.floatleft {
	float: left;
}

.floatcenter {
	display: block;
	margin: 0 auto;
}

.flow_auto {
	overflow: auto;
}

.flow_flex {
	display: flex;
	overflow: hidden;
	align-items: center;
	flex-wrap: nowrap;
	margin-top: .5em;
}

/* @todo remove important, currently the fight with ".generic_list_wrapper .additional_row" */
.flow_flex_additional_row, .flow_flex_right, .below_table_data {
	flex: 0 0 auto;
	margin-left: auto !important;
	padding-top: .1em !important;
}

.flow_flex_right {
	order: 2;
}

.flow_hidden {
	overflow: hidden;
}

.clear {
	clear: both;
}

.clear_left {
	clear: left;
}

.clear_right {
	clear: right;
}

/* Since these are purely presentational classes, they should be used sparingly. */
.smalltext {
	font-size: var(--font14);
}

.largetext {
	font-size: var(--font18);
}

/* justify-content here allows chaining with a flex container */
.centertext {
	justify-content: center;
	text-align: center;
}

.righttext {
	justify-content: right;
	text-align: right;
}

.lefttext {
	justify-content: left;
	text-align: left;
}

.nowrap {
	white-space: nowrap;
}

.wordbreak {
	word-break: break-all;
}

.nosel {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Styles for main headers. */
.category_header, .forum_category .category_header {
	font-size: var(--font18);
	line-height: 1.8em;
	padding: .1em .5em;
	border: 1px solid;
	border-radius: 4px 4px 0 0;
}

.forum_category .category_header {
	font-size: var(--font17);
}

/* Styles for subsection headers. */
.secondary_header {
	font-size: var(--font16);
	line-height: 2em;
	margin-top: 0.4em;
	padding: 0 .67em;
	border: 1px solid;
}

/* Category Header icons as sprites, many available to custom themes */
.hdicon::before {
	display: inline-block;
	width: 30px;
	height: 24px;
	content: "";
	vertical-align: text-bottom;
	background-image: url(../images/icons/header.png);
	background-repeat: no-repeat;
}

.cat_img_attachments::before {
	background-position: 0 0;
}

.cat_img_buddies::before {
	background-position: 0 -24px;
}

.cat_img_config::before {
	background-position: 0 -48px;
}

.cat_img_contacts::before {
	background-position: 0 -72px;
}

.cat_img_helptopics::before {
	background-position: 0 -96px;
}

.cat_img_inbox::before {
	background-position: 0 -120px;
}

.cat_img_login::before {
	background-position: 0 -144px;
}

.cat_img_mail::before {
	background-position: 0 -168px;
}

.cat_img_moderation::before {
	background-position: 0 -192px;
}

.cat_img_plus::before {
	background-position: 0 -216px;
}

.cat_img_posts::before {
	background-position: 0 -240px;
}

.cat_img_profile::before {
	background-position: 0 -264px;
}

.cat_img_search::before {
	background-position: 0 -288px;
}

.cat_img_stats_info::before {
	background-position: 0 -312px;
}

.cat_img_topics::before {
	background-position: 0 -336px;
}

.cat_img_write::before {
	background-position: 0 -360px;
}

.cat_img_database::before {
	background-position: 0 -384px;
}

.cat_img_address::before {
	background-position: 0 -408px;
}

.cat_img_calendar::before {
	background-position: 0 -432px;
}

.cat_img_minus::before {
	background-position: 0 -456px;
}

.cat_img_star::before {
	background-position: 0 -480px;
}

.cat_img_clock::before {
	background-position: 0 -504px;
}

.cat_img_eye::before {
	background-position: 0 -528px;
}

.cat_img_piechart::before {
	background-position: 0 -552px;
}

.cat_img_talk::before {
	background-position: 0 -576px;
}

/* Expand/Collapse image in the various headers */
.collapse, .expand {
	float: right;
}

#upshrink {
	border: 0;
}

/* General code for generic divs. Should make them behave. */
.content {
	overflow: auto;
	padding: 0.5em 1em;
	border: 1px solid;
}

.content p {
	margin: 0 0 .4em 0;
}

/* Other highlighted text, such as search results. */
.highlight {
	font-size: var(--font15);
	font-weight: bold;
}

/* above/below create list items */
.additional_row {
	padding: .4em 0;
}

/* The generic wrapper thingy. Used by generic list template */
.generic_list_wrapper {
	overflow: auto;
	margin-top: .25em;
	padding: .5em .5em 1em .5em;
	border: 1px solid;
	border-radius: 7px;
}

.generic_list_wrapper .additional_row {
	margin: 0;
	padding: .67em 0 0;
	border-radius: 0;
}

.generic_list_wrapper .title_bar {
	border-bottom: 1px solid;
	border-radius: 0;
}

/* The .information box is used by the after_title additional row */
.generic_list_wrapper .information .additional_row {
	padding: .4em 0;
	border: none;
}

.generic_list_wrapper .information {
	margin: 0;
	padding: 0;
	border: none;
	border-bottom: 1px solid;
}

/* Styles used by the auto suggest control. */
.auto_suggest_div {
	position: absolute;
	z-index: 100;
	visibility: hidden;
	border: 1px solid;
	border-radius: 0 0 4px 4px;
}

.auto_suggest_div:focus {
	outline: none !important;
}

.auto_suggest_item, .auto_suggest_item_hover {
	padding: .1em .25em;
}

.auto_suggest_item_hover {
	cursor: pointer;
}

/* To ensure the question and the input are on two different lines */
.verification_question label {
	display: block;
	width: 100%;
}

/* -------------------------------------------------------
 *	$BBC
 * -------------------------------------------------------
 */

/* Set a consistent monospace font */
.bbc_code, .bbc_tt, .bbc_pre {
	font-family: "DejaVu Sans Mono", Monaco, Menlo, Consolas, 'Roboto Mono', 'Andale Mono', 'Ubuntu Mono', monospace;
}

/* The "Quote:" and "Code:" header parts... */
.codeheader, .quoteheader {
	font-size: var(--font13);
	font-weight: 600;
	margin: .4em 0 0 0;
	padding: .2em .4em;
	border: 1px solid;
	border-bottom: none;
}

.codeheader {
	border-top: 3px solid;
}

/* [Select] link to copy code. */
.codeoperation {
	font-weight: normal;
}

/* A quote, perhaps from another post. */
.bbc_quote,
/* A code block - maybe PHP ;) - shared styles. */
.bbc_code {
	font-size: var(--font13);
	overflow: auto;
	margin: 0 0 1em 0;
	padding: .4em .67em;
	border: 1px solid;
	border-top: none;
}

/* Expanding quotes */
.quote-read-more {
	position: relative;
}

/* Constrain the quote area height.  Use max height so we can have a smooth transition */
.quote-read-more > .bbc_quote {
	overflow: hidden;
	max-height: 12em;
}

/* Specific targeting of our checkbox.  100% wide with a gradient to cover/fade the bottom of the blockquote */
input[type=checkbox].quote-show-more {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 8em;
	margin: 0 1px 1px 1px;
	padding-top: 6em;
	cursor: pointer;
	text-align: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* The read moar, with the 100% width clicking anywhere in the quote base will work
   note content: is set in display controller for localization reasons */
input[type=checkbox].quote-show-more:after {
	font-size: var(--font16);
	font-weight: 600;
}

/* When clicked, hide the checkbox and expand the quote */
input[type=checkbox].quote-show-more:checked {
	display: none;
}

/* 750em is simply to avoid the clipping of any length quote, do not use none as
   it will not transition */
input[type=checkbox].quote-show-more:checked + .bbc_quote {
	max-height: 750em;
	transition: 1.5s max-height ease-in;
}

/* Extra code block styling. */
.bbc_code {
	height: auto;
	max-height: 20em;
	resize: vertical;
	white-space: nowrap;
	border-top: 3px solid;
	border-bottom: 3px solid;
}

.bbc_code .tab {
	display: inline-block;
	width: 4ex;
	white-space: pre;
}

/* Styling for BBC tags */
.bbc_size {
	line-height: 1.4em;
}

/* the "inherit" declarations allow bbc tag color nesting to work, due to strong,
   anchors and others having a color defined */
.bbc_color a {
	color: inherit;
}

strong, .bbc_strong {
	font-weight: bold;
	color: inherit;
}

.bbc_table {
	font: inherit;
	color: inherit;
}

.bbc_table td {
	font: inherit;
	padding: 0 0.5em;
	vertical-align: top;
	color: inherit;
}

.bbc_table th {
	font: inherit;
	font-weight: bold;
	padding: 0 0.5em;
	color: inherit;
}

/* Styling for bbc tables inside posts */
.inner > .bbc_table_container > .bbc_table,
.messageContent > .bbc_table_container > .bbc_table {
	border-collapse: collapse;
}

.inner > .bbc_table_container > .bbc_table th,
.messageContent > .bbc_table_container > .bbc_table th {
	text-align: center;
}

.bbc_img {
	max-width: 100%;
	border: 0;
}

.bbc_img.floatleft {
	padding: .1em .75em .1em 0;
}

.bbc_img.floatright {
	padding: .1em 0 .1em .75em;
}

.bbc_img.floatcenter {
	padding: .5em .25em;
}

/* bbc links wrapped in [s] */
del .bbc_link:link, del .bbc_link:visited {
	text-decoration: line-through;
}

/* bbc links wrapped in sub / sup */
sup a.bbc_link {
	vertical-align: sub;
}

sub a.bbc_link {
	vertical-align: middle;
}

.bbc_u {
	text-decoration: underline;
}

.bbc_list {
	padding: 0 0 0 2.5em;
	list-style-type: square;
	text-align: left;
}

.bbc_pre {
	overflow: auto;
}

/* bbc footnotes and their links */
.bbc_footnotes {
	font-size: var(--font13);
	overflow: auto;
	margin-top: .5em;
	padding: .25em .4em .25em 0;
}

div.bbc_footnotes {
	border-top: 1px solid;
}

sup.bbc_footnotes, sup.bbc_footnotes a {
	font-weight: 700;
}

div.bbc_footnotes .meaction {
	display: inline-block;
}

.footnote_return {
	font-size: var(--font20);
}

/* Shorten url's inside posts. */
a.bbc_link {
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
	vertical-align: bottom;
	white-space: nowrap;
	text-overflow: ellipsis;
	word-wrap: normal;
}

.bbc_link:hover {
	text-decoration: none;
}

/* use /me in a post */
.meaction::before {
	font-size: var(--font22);
	line-height: 1em;
	content: "\270c";
	outline: none;
}

.spoiler {
	padding: 0.3em;
	border: 1px solid;
}

.spoilerheader {
	font-size: var(--font13);
	font-weight: bold;
	cursor: pointer;
}

/* -------------------------------------------------------
 *	$AJAX
 * -------------------------------------------------------
 */

/* The "Loading" bar for quick edit, etc. */
#ajax_in_progress, .ajax_infobar {
	font-size: var(--font19);
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	padding: 1em;
	text-align: center;
	border-bottom: 4px solid;
}

/* Spinner and close button */
#ajax_in_progress a, #ajax_in_progress span {
	margin-left: 1em;
	text-decoration: underline;
}

#quick_edit_body_container {
	width: 90%;
}

#quick_edit_body_container .editor {
	width: 100%;
	margin-bottom: .7em;
	padding: .125em;
}

#quick_edit_body_container .input_text {
	width: 85%;
}

/* -------------------------------------------------------
 *	$MAIN.
 * -------------------------------------------------------
 */

/* The top Section. */
#top_section {
	border-top: 4px solid;
}

/* Very top bar, holds search and login (top_section_notice) forms */
#top_header {
	display: flex;
	justify-content: flex-end;
}

#top_section_notice {
	font-weight: 700;
	flex: 1 1 auto;
	padding: .75em .5em .25em .25em;
}

#top_section_notice .toggle_login {
	display: inline;
	cursor: pointer;
}

#top_section_notice form {
	width: 100%;
	white-space: nowrap;
}

#password_login {
	display: inline-block;
	vertical-align: middle;
}

/* Search input, search dropdown, search button group */
#search_form_button, #search_form_button_close {
	order: 21;
}

#search_form_button_close {
	display: none;
}

#search_form_menu {
	position: absolute;
	z-index: 100;
	right: 34px;
	display: none;
	align-items: center;
	order: 20;
}

#search_form_menu input, #search_form_menu select, #search_form_menu button {
	line-height: 2.1;
	height: 33px;
}

#search_form_menu select {
	min-width: 115px;
}

/* The logo and slogan. @todo - Simplify. and use flex */
#header {
	padding: .13em .13em 0 .13em;
}

/* The main title. */
#forumtitle, .rightheader #forumtitle {
	font-size: var(--font28);
	padding: .8em .4em .4em .4em;
}

.centerheader .forumlink {
	display: none;
}

.rightheader #forumtitle .forumlink {
	float: right;
}

/* Holds the logo and slogan */
#logobox {
	margin: 0 auto;
	text-align: center;
}

/* Float these items to the right. */
#logobox, .rightheader #logobox {
	float: right;
	max-width: 40%;
	padding: 0 .4em;
}

.centerheader #logobox {
	width: 100%;
}

.rightheader #logobox, .rightheader #logo {
	float: left;
	padding-bottom: .5em;
}

.centerheader #logobox, .centerheader #logo, .centerheader #siteslogan {
	display: block;
	float: none;
	margin: 0 auto;
	text-align: center;
}

#siteslogan {
	font-size: var(--font16);
	display: block;
	margin-top: -.5em;
}

.rightheader #logo {
	margin: 0 0 0 .5em;
}

/* Main forum area. */
#wrapper {
	margin-top: 1em;
	padding: 1.2em 1em;
	border: 3px solid;
	border-radius: 5px;
}

/* The user info, news, etc.*/
#news {
	font-size: var(--font14);
	line-height: 1.3;
	padding: 0 0 1em 0;
	vertical-align: top;
}

#news .bbc_link {
	display: inline;
}

#news > h2 {
	font-size: var(--font19);
	font-weight: 700;
	font-variant: small-caps;
	float: left;
	height: 1em;
	margin: -.25em 1em 0 0;
}

#news > h2::after {
	content: "\2026";
}

#news_line, #news {
	overflow: auto;
	height: 60px;
	min-height: 60px;
	padding: .2em .8em;
	resize: vertical;
	border: 1px solid;
}

/* The content section, below the news and bread crumbs */
#main_content_section {
	min-height: 180px;
	padding: 2em 0 0 0;
}

/* The footer with copyright links etc. */
#footer_section {
	margin: 2.25em 0 0 0;
	border-top: 6px solid;
}

#footer_section .wrapper {
	padding: 1.25em .25em;
}

#footer_section p, #footer_section a {
	font-size: var(--font13);
}

#footer_section li {
	display: inline;
	padding-right: .25em;
}

#footer_section .copyright {
	font-family: Verdana, Arial, sans-serif;
	font-size: var(--font13);
	display: inline;
	visibility: visible;
}

#footer_section .rssfeeds {
	float: right;
	margin: auto;
	text-align: center;
	border-radius: 0.3em;
}

#footer_section .rssfeeds i {
	margin: .25em;
}

#debug_logging {
	width: 90%;
	max-width: 90em;
	margin: 0 auto;
}

/* -------------------------------------------------------
 *	$MENUS
 * -------------------------------------------------------
 */

/* This section contains code for the main forum menu (#main_menu),
   and for the secondary menus in admin/profile/pm (.admin_menu),
   and for the tertiary menu strip in admin/etc (#adm_submenus).

   Top level <ul> elements have the class or id mentioned above.
   <li> elements are for positioning only (classes are listlevel1, etc).
   Top level links (like main menu buttons) have the class linklevel1.
   Drop menu wrappers are either menulevel2 or menulevel3.
   Drop menu links are either linklevel2 or linklevel3. */

/* Main menu bar: wrapper/background on nav */
#menu_nav {
	position: sticky;
	z-index: 10;
	top: -1px;
	display: flex;
	align-items: center;
	height: var(--sticky);
	padding: 0 .4em;
	border-bottom: 4px solid;
}

/* Main menu container, on the ul */
#main_menu {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	/* pull the menu down allows for a smaller sticky menu strip while
	   still leaving room for indicator bubbles */
	transform: translateY(5px);
}

/* Wrapper for primary admin/profile/etc menus. */
.admin_menu {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 3px;
}

/* Show a Dropdown / Disclose Indicator arrow next to the "admin" tabs.  Named
   admin_menu since they are used in profile and other areas, and admin */
.admin_menu .listlevel1.subsections .linklevel1::after {
	display: inline-block;
	margin-left: 0.25em;
	content: "";
	transform: translateY(3px);
	border: 0.35rem solid transparent;
	border-top-color: #B7B7B7;
}

/* Wrapper for secondary admin/profile/etc tab menus, same as above but
   left separate for easy changes */
#adm_submenus {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 3px;
}

/* ditto */
.generic_menu {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: .4em 0;
}

/* When using th above adm_submenus / generic_menu tabs, this is the content div
   added by GenericMenu.template */
#admin_content {
	clear: both;
	padding-top: .5em;
}

/* Level 1 button positioning, used on li elements of main_menu
   Bottom padding allows hover outside button to work and allows
   our dropdown menu position to be off button */
.listlevel1 {
	line-height: 2.1;
	position: relative;
}

.listlevel1:hover {
	z-index: 6;
}

/* position 10 is hidden, items ordered after this will be 'floated' right */
.listlevel1#button_none {
	order: 10;
	margin-left: auto;
}
/* The My Profile and top header collapse buttons on the right
   arbitrary 15/16 order, leaving room for 4 other "right" buttons */
.listlevel1#button_profile {
	order: 19;
}

.listlevel1#collapse_button {
	order: 20;
}

/* Upshrink image in the page top for the header collapse */
#collapse_button .linklevel1, #search_form_button .linklevel1, #search_form_button_close .linklevel1 {
	display: flex;
	justify-content: center;
	width: 2.2em;
	height: 2.2em;
	padding: 3px;
	border: 1px solid;
}

/* For swapping out the icon with a mini of the user's avatar if they have one.
   @TODO: There is probably a cleaner way to make an icon special like this.
   E.g. in principle we could do the same with buddy icons, for example. */
.i-menu-profile::before {
	position: absolute;
	width: 28px;
	height: 28px;
	transform: translate(-6px, -2px);
	border-radius: 6px 0 0 6px;
	background: no-repeat;
	background-size: contain;
}

/* Helper class for the top menu icons, wide screens only */
#main_menu .icon-menu {
	line-height: 2.1;
	position: relative;
	width: 18px;
	height: 18px;
	transform: translate(0, -5px);
}

/* Level 1 Menu bar: link or button. */
.linklevel1 {
	display: block;
	margin: 0 .1em;
	padding: 0 .4em;
	white-space: nowrap;
	border: 1px solid;
	border-radius: 4px;
}

/* Menu hover and focus effects. */
.linklevel1:hover, .listlevel1:hover .linklevel1,
.linklevel2:hover, .listlevel2:hover .linklevel2,
.linklevel3:hover, .listlevel3:hover .linklevel3,
#menu_sidebar .linklevel1:hover, #menu_sidebar .listlevel1:hover .linklevel1 {
	text-decoration: none;
	border: 1px solid;
}

/* Level 1 active button. */
.linklevel1.active, .listlevel1:hover .active {
	font-weight: bold;
	border: 1px solid;
}

/* Hover effects for those buttons. */
.linklevel1.active:hover, .listlevel1:hover .linklevel1.active,
#collapse_button .linklevel1:hover {
	border: 1px solid;
}

/* The next two are the Top level Dropdown / Disclose Indicator arrow next to the name */
#main_menu .subsections .linklevel1::after,
#main_menu .subsections:hover .linklevel1::after {
	display: inline-block;
	margin-left: 0.25em;
	content: "";
	transform: translateY(3px);
	border: 0.35rem solid transparent;
}

/* Levels 2 and 3: drop menu wrapper, hidden until hover or click */
.menulevel2, .menulevel3 {
	position: absolute;
	z-index: 90;
	/* Pull up to slightly overlap the parent */
	top: calc(100% - 1px);
	visibility: hidden;
	min-width: calc(100% + 30px);
	padding: 0.6em;
	/* Speed of transition during on/off focus/hover plus a 350ms delay for a hover intent */
	transition: 350ms all 125ms ease-in;
	/* Rotate it in to the page to provide a transition element */
	transform: rotateX(-90deg);
	transform-origin: top left;
	border: 1px solid;
	border-radius: 4px;
}

/* Top pointer of level1 dropdown menu, like a speech bubble pointer */
.listlevel1.subsections::after {
	position: absolute;
	z-index: 90;
	/* 1/2 the diagonal length of this box, the +1px is for the menu offset above) */
	top: calc(100% - (1.4142 * var(--pointersize)) / 2 + 1px);
	left: 10%;
	display: block;
	width: var(--pointersize);
	height: var(--pointersize);
	content: '';
	transition: 350ms all 125ms ease-in;
	transform: rotate(-45deg);
	opacity: 0;
	border: 1px solid;
	/* Simple variable to change if you want to change the size */
	--pointersize: 12px;
}

/* The next two show the menulevel 2/3 flyout and level1 pointer arrow
   Rotate Level 2 menu out of the page, sets visibility */
.no_js .listlevel1:hover .menulevel2,
.no_js .listlevel2:hover .menulevel3,
.listlevel1 .menulevel2.selected,
.listlevel2 .menulevel3.selected {
	visibility: visible;
	transform: rotateX(0);
}

.no_js .listlevel1:hover.subsections::after,
.listlevel1.open.subsections::after {
	opacity: 1;
}

/* Classes selected, un_selected and open are added by javascript.  Here its a
   click menu and no hover intent ambiguity, so speed up the reveal / rollup */
.listlevel1 .menulevel2.selected,
.listlevel2 .menulevel3.selected,
.listlevel1 .menulevel2.un_selected,
.listlevel2 .menulevel3.un_selected,
.listlevel1.open.subsections::after {
	transition: 100ms ease-in;
}

.listlevel1 .menulevel2.un_selected,
.listlevel2 .menulevel3.un_selected {
	transition: 150ms ease-out;
}

/* Reverse the menu flyout direction for the right side buttons so they stay on page */
.listlevel1#button_profile .menulevel2 {
	right: 0;
	left: auto;
}

/* Level 3: drop menu positioning, move to a a flyout position to the right of
   its disclose arrow */
.menulevel3 {
	min-width: 20ch;
	margin: -1.5em 0 0 calc(100% - 6px);
}

/* Levels 2 and 3 list style */
.listlevel2, .listlevel3 {
	position: relative;
	white-space: nowrap;
}

/* Levels 2 and 3 links style */
.linklevel2, .linklevel3 {
	display: block;
	padding: 1px 7px;
}

.linklevel2:link, .linklevel2:visited, .linklevel3:link, .linklevel3:visited {
	border: 1px solid;
}

/* Level 2: subsection indicator, simple right pointing arrow */
.listlevel2.subsections .linklevel2::after,
#menu_sidebar .subsections .linklevel1::after,
#menu_sidebar .subsections:hover .linklevel1::after {
	font-size: var(--font22);
	position: absolute;
	top: -5px;
	right: 6px;
	content: "\2192";
}

/* Make room for the menulevel3 indicators */
.listlevel2.subsections .linklevel2 {
	margin-right: 2em;
}

/* Level 2: Simple HR divider between admin/moderation in the dropdown */
#button_admin .listlevel2.subsections {
	margin-top: .5em;
	padding-top: .25em;
	border-top: 1px solid;
}

/* Admin menu icons. */
.linklevel2 > img {
	margin: 0 0 0 -.25em;
	vertical-align: middle;
}

/* Corrections for other menus. */
.linklevel2.help {
	display: inline-block;
}

/* Tricky PM / Likes indicator. Define it carefully,
  just in case someone tries to use this class elsewhere. */
.pm_indicator, .likes_indicator {
	font-size: var(--font14);
	font-weight: 700;
	line-height: 1.4em;
	position: absolute;
	z-index: 2;
	top: -1em;
	right: -0.4em;
	float: left;
	padding: 0 0.7em;
	border: 1px solid;
	border-radius: 8px 8px 8px 0;
}

.likes_indicator {
	font-size: .857em;
	line-height: 1.467em;
	top: -1.2em;
	border-radius: 6px 6px 6px 0;
}

#dropdown_menu_1 .pm_indicator {
	margin-top: 5px;
	margin-right: .13em;
}

/* Hover effects for pm indicator in top menu */
.linklevel1:hover .pm_indicator {
	border: 1px solid;
}

.linklevel1.active:hover .pm_indicator {
	border-bottom: 1px solid;
}

/* Styles for sidebar menus. */
#main_admsection {
	overflow: auto;
}

/* Main sidebar div */
#menu_sidebar {
	position: relative;
	float: left;
	width: 220px;
	padding: 0 5px 0 0;
}

#menu_sidebar .linklevel1 {
	padding: 0 1.5em 0 0;
	white-space: normal;
	border: 1px solid;
	overflow-wrap: break-word;
}

/* The ul that holds each section */
.sidebar_menu {
	padding: .25em 0 .7em 0;
}

/* Same styling for Level 1 and Level 2, more compact than dropdown */
#menu_sidebar .listlevel1 {
	padding: .1em 0 0 4px;
}

/* Flyout menu position next to arrow close to the top for max mouse tunnel */
#menu_sidebar .listlevel1:hover .menulevel2 {
	top: 10%;
	left: calc(100% - 8px);
}

/* Turn transition speed off so the sidebar flyouts behave */
#menu_sidebar .menulevel2, #menu_sidebar .menulevel3 {
	transition: 0ms;
}

/* No need to show the dropdown indicator since we dont have them here */
#menu_sidebar .listlevel1:hover.subsections::after {
	opacity: 0;
}

#menu_sidebar .pm_indicator {
	font-size: var(--font9);
	font-weight: normal;
	margin: 8% 50% 0 0;
}

/* Used on the sidebar, elsewhere ? */
.linklevel1.chosen, .linklevel2.chosen {
	font-weight: 700;
}

/* -------------------------------------------------------
 *	$LINKTREE / $BREADCRUMBS
 * -------------------------------------------------------
 */

.breadcrumb {
	display: flex;
	overflow: hidden;
	flex-wrap: wrap;
	margin-top: 1em;
	border-radius: 4px;
	/* Defines the breadcrumb height */
	--arrow: 30px;
}

.breadcrumb .crumb {
	font-size: var(--font13);
	line-height: var(--arrow);
	position: relative;
	flex: 0 1 auto;
	flex-wrap: wrap;
	padding: 0 .7em 0 2.5em;
	text-decoration: none;
	outline: none;
}

.breadcrumb .crumb a {
	display: block;
	overflow: hidden;
}

/* No arrow on the first link = less padding */
.breadcrumb .crumb:first-child {
	padding-left: 1.5em;
	border-radius: 4px 0 0 4px;
}

/* Add arrows using rotated cube vs border trick to provide better styling (gradient) opportunities */
.breadcrumb .crumb::after {
	position: absolute;
	z-index: 1;
	top: 0;
	/* Prevent the arrows from getting covered under the next link */
	right: calc((var(--arrow) / 2 - 1px) * -1);
	width: var(--arrow);
	height: calc(var(--arrow));
	content: "";
	/* Scale the rotated square based on its diagonal length */
	transform: scale(0.7071) rotate(45deg);
	/* 50px seems help prevent hover glitches caused by the border shadow */
	border-radius: 0 4px 0 50px;
}

.breadcrumb > .crumb > a > i {
	margin: 0 0 -3px 0;
	padding: 0;
}

/* No arrow after the last link */
.breadcrumb .crumb:last-child::after {
	content: none;
}

.breadcrumb .crumb:last-child {
	padding-right: 1.8em;
	border-radius: 0 calc(var(--arrow) / 6) calc(var(--arrow) / 6) 0;
}

/* -------------------------------------------------------
 *	$BUTTONS
 * This section contains code for the quickbuttons (quote, quick edit, etc)
 * and for the buttonlist class (reply, add poll, notify, etc).
 * These classes share some styling.
 * Declarations are amalgamated where styling is shared.
 * -------------------------------------------------------
 */

/* Styles for the standard button lists. */
.buttonlist {
	display: flex;
	align-items: center;
	padding: 0 .2em;
}

.buttonlist.rtl {
	flex-direction: row-reverse;
}

.buttonlist li {
	line-height: 2.1em;
	flex: 0 0 auto;
	margin: 0 0 0 .1em;
}

.buttonlist li a {
	font-size: var(--font12);
	line-height: 2.1em;
	padding: 0 .6em;
}

.buttonlist li a.linklevel1 {
	text-transform: uppercase;
}

.icon.hamburger_30 {
	display: none;
}

/* The quick buttons like quote, quick edit, etc. */
.quickbuttons {
	margin: .5em 0 .4em 0;
	padding-top: .5em;
	text-align: right;
}

nav > .quickbuttons, menu > .quickbuttons {
	display: flex;
	align-items: center;
	/* The buttons are in reverse order in the markup bleh! */
	flex-direction: row-reverse;
}

.quickbuttons li {
	white-space: nowrap;
}

/* Follow ups need it a bit different. */
.follow_ups {
	float: right;
	margin: -.5em 0 0 .5em;
}

/* Most of them. */
.quickbuttons .listlevel1 {
	font-size: var(--font13);
	margin: .12em 0;
	padding: .12em 0;
}

/* Odd cases. */
.moderation_link, .moderation_link:visited {
	font-weight: bold;
}

.follow_ups .listlevel1 {
	font-size: var(--font15);
}

.quickbuttons .modified {
	/* This is first since we reversed the row */
	order: 10;
	margin-right: auto;
	padding: 0 0 0 .4em;
}

.quickbuttons .inline_mod_check {
	margin: .25em .25em .25em 0;
	padding: 0 .25em;
}

.quickbuttons .linklevel1 {
	line-height: 2.1em;
	float: left;
	padding: 1px .4em 0 1.5em;
	cursor: pointer;
	border-radius: 0;
}

/* The icons in front of them. */
.quickbuttons .linklevel1::before, .quickbuttons .linklevel2::before {
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 3px;
	display: block;
	width: 18px;
	height: 24px;
	margin-top: -.8em;
	content: "";
	background-image: url(../images/theme/quickbuttons.png);
	/* A rare example of where longhand background declarations work well. */
	background-repeat: no-repeat;
}

.quickmod_check {
	left: 3px;
}

/* The long list of sprite coordinates is much less verbose this way. */
.quote_button::before {
	background-position: 0 0;
}

.remove_button::before {
	background-position: 0 -24px;
}

.modify_button::before {
	background-position: 0 -48px;
}

.approve_button::before {
	background-position: 0 -72px;
}

.restore_button::before {
	background-position: 0 -96px;
}

.split_button::before {
	background-position: 0 -120px;
}

.reply_button::before {
	background-position: 0 -144px;
}

.reply_all_button::before {
	background-position: 0 -144px;
}

.notify_button::before {
	background-position: 0 -168px;
}

.unapprove_button::before {
	background-position: 0 -192px;
}

.close_button::before {
	background-position: 0 -216px;
}

.im_reply_button::before {
	background-position: 0 -240px;
}

.details_button::before {
	background-position: 0 -264px;
}

.ignore_button::before {
	background-position: 0 -288px;
}

.report_button::before {
	background-position: 0 -312px;
}

.warn_button::before {
	background-position: 0 -336px;
}

.quotetonew_button::before {
	background-position: 0 -360px;
}

.react_button::before {
	background-position: 0 -384px;
}

.unreact_button::before {
	background-position: 0 -408px;
}

.star_button::before {
	background-position: 0 -432px;
}

.quick_edit::before {
	background-position: 0 -456px;
}

.reacts_button::before {
	background-position: 0 -480px;
}


/* Radius left end of the first (Quote) button, last-child as this is in reverse order */
.quickbuttons li:last-child a {
	border-radius: 4px 0 0 4px;
}

/* Radius right end of the last button. */
.quickbuttons .listlevel1.subsections a, .linklevel1.post_options, .linklevel1.remove_button {
	border-radius: 0 4px 4px 0;
}

/* Single buttons get all corners rounded. */
.follow_ups .linklevel1, #topic_summary .linklevel1 {
	border-radius: 4px;
}

/* No icon here. */
.linklevel1.post_options::before,
.follow_ups .linklevel1::before {
	display: none;
}

/* "More..." and Followup gets custom padding (no icon). */
.linklevel1.post_options, .follow_ups .linklevel1 {
	padding: 1px .4em 0 .4em;
}

/* Quickbutton, Buttonlist, and follow ups drop menus, flyout to the left.
   These are the More... flyout menus on the message display page */
.quickbuttons .menulevel2, .buttonlist .menulevel2 {
	right: 0;
	left: auto;
}

.quickbuttons .menulevel2, .follow_ups .menulevel2, .buttonlist .menulevel2 {
	width: auto;
	padding: 0.5em;
	text-align: left;
}

/* Show appropriate like/unlike action */
.react_button::before, .reacts_button::before {
	background-position: 0 -480px;
}

.react_button:hover::before {
	background-position: 0 -384px;
}

.follow_ups .listlevel2 {
	width: 20em;
}

.follow_ups .linklevel2 {
	overflow: hidden;
	text-overflow: ellipsis;
}

.quickbuttons .linklevel2 {
	line-height: 2.1em;
	padding: 0 .4em 0 26px;
}

/* -------------------------------------------------------
 *	$PAGELINKS
 * -------------------------------------------------------
 */

/* The page navigation container, holds page nav and buttons */
.pagesection {
	display: flex;
	clear: both;
	overflow: visible;
	align-items: center;
	flex-wrap: wrap;
	max-width: 100%;
	padding: .2em .25em;
}

.pagesection.rtl {
	flex-direction: row-reverse;
}

/* Main containing UL for pagelinks, note pagelink markup is defined in themes.php */
.pagelinks {
	font-size: var(--font14);
	display: flex;
	align-items: center;
	flex: 1;
	flex-wrap: wrap;
}

.pagelinks :first-child {
	border-radius: 2px 0 0 2px;
}

.pagelinks :last-child {
	border-radius: 0 2px 2px 0;
}

.pagelinks .current_page {
	font-weight: bold;
	padding: .1em .5em;
}

.pagelinks .navPages, .pagelinks .current_page, .expand_pages, .small_pagelinks .navPages {
	flex: 0 0 auto;
}

.pagelinks .navPages {
	padding: .1em .4em;
	border: 1px solid;
}

.pagelinks .navPages:hover, .pagelinks .current_page {
	text-decoration: none;
	border: 1px solid;
}

/* Some gaps between the page link teeth */
.linavPages {
	margin: 0 .25em 0 0;
}

/* Button list in a page section (flexbox), "float" right */
.pagesection .buttonlist {
	margin-left: auto;
}

/* Horizontal ellipsis */
.expand_pages {
	font-size: var(--font16);
	min-width: 1.4em;
	cursor: pointer;
	text-align: center;
}

.next_page, .previous_page {
	padding: 0 .13em;
	text-transform: capitalize;
}

#pages_scroll_left, #pages_scroll_right {
	position: absolute;
	top: 0;
	margin: 0;
}

/* Used on message index, applied to ul */
.small_pagelinks {
	display: flex;
	float: right;
	align-items: center;
}

/* our buddies &laquo; &raquo; */
.small_pagelinks li:first-child::before {
	font-size: var(--font14);
	content: '\2B9C';
}

.small_pagelinks li:last-child::after {
	font-size: var(--font14);
	content: '\2B9E';
}

.small_pagelinks li {
	position: relative;
	flex: 0 0 auto;
}

/* Used to define gap between page numbers */
.small_pagelinks .navPages {
	font-size: var(--font14);
	padding: 0 2px;
}

/* Globally accessible top/bottom links. */
#gotop, #gobottom {
	font-size: 2em;
	position: fixed;
	z-index: 9;
	bottom: 50%;
	left: 0;
	height: 2.5em;
	padding: 0.6em 0.1em 0 0.1em;
	transform: translateZ(0);
	border: 1px solid;
	border-bottom: none;
	border-radius: 0 20px 0 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

#gobottom {
	top: 50%;
	border-top: none;
	border-radius: 0 0 20px 0;
}

#gotop:hover, #gobottom:hover {
	text-decoration: none;
}

/* Skip header navigation link, access with back tab, hidden until then. */
#top {
	font-size: var(--font16);
	font-weight: bold;
	position: absolute;
	z-index: 1000;
	top: -10em;
	left: 3em;
	padding: 1em 2em;
	transition: top .5s ease-out 0s, background 1s linear 0s;
	border: 4px solid;
	border-radius: 0 0 6px 6px;
}

#top:focus {
	top: -4px;
}

/* -------------------------------------------------------
 *	$TABLES
 * -------------------------------------------------------
 */

/* A general table class. */
.table_grid {
	width: 100%;
	margin: 0;
	border-spacing: 0;
	border: 1px solid;
	border-top: none;
}

.table_head > th {
	font-size: var(--font15);
	font-weight: bold;
	position: sticky;
	z-index: 1;
	top: 0;
	padding: .2em .5em;
	text-align: left;
	border-top: 2px solid;
	border-bottom: 3px solid;
}

.table_head > th.centertext, .table_head > td.centertext {
	text-align: center;
}

/* Its either this level of targeting, or the use of !important
   most tables want the checkbox vertically centered */
#admin_form_wrapper .table_grid thead th > input[type="checkbox"],
#admin_form_wrapper .table_grid tbody td > input[type="checkbox"] {
	vertical-align: middle;
}

/* Basic cells. */
.table_grid td {
	padding: 5px 8px;
	border-bottom: 1px solid;
}

.table_grid textarea {
	width: 100%;
}

.table_grid .statsbar div {
	display: none;
}

/* Some grid helpers for tables col widths and divs */
.grid4 {
	width: 4%;
}

.grid8 {
	width: 8%;
}

.grid17 {
	width: 17%;
}

.grid20 {
	width: 20%;
}

.grid25 {
	width: 25%;
}

.grid30 {
	width: 30%;
}

.grid33 {
	width: 33%;
}

.grid40 {
	width: 40%;
}

.grid50 {
	width: 50%;
}

.grid60 {
	width: 60%;
}

/* For Errors.template.php. */
#errorfile_table .current {
	font-weight: bold;
	border: 1px solid;
}

/* -------------------------------------------------------
 * $SETTINGS
 * -------------------------------------------------------
 */

/* Lists - settings use these a lot. */
.settings {
	clear: right;
	overflow: auto;
	margin: 0 0 .7em 0;
}

.settings dt {
	float: left;
	clear: both;
	width: 45%;
	margin: 0 0 .7em 0;
}

.settings dd {
	float: right;
	overflow: auto;
	width: 55%;
	min-height: 2em;
	margin: 0 0 3px 0;
	padding: 0 0 0 .12em;
}

.settings img {
	margin: 0 .67em 0 0;
	vertical-align: middle;
}

.settings textarea {
	width: 85%;
	padding: 0 0.5em;
}

.settings label {
	vertical-align: top;
}

.settings .smalltext {
	display: inline-block;
	padding-left: 1em;
}

/* -------------------------------------------------------
 *	$BOARDS
 * -------------------------------------------------------
 */

/* The small stats, under upper linktree when the info centre stats is off. */
#index_common_stats {
	font-size: var(--font13);
	margin: 0 8px .4em 8px;
}

.forum_category, .content_category {
	border-radius: 4px 4px 0 0;
}

/* The board categories and newsfader - some shared styling. */
.forum_category {
	clear: both;
	margin: 0 0 1em 0;
}

/* Grid layout specifics, separated for easy modding */
.category_boards .board_row {
	display: grid;
	grid-template-columns: [bicon] 75px [info] auto [avatar] 60px [latest] 32% [stats] minmax(80px, 120px) [end];
	grid-template-rows: [primary] auto [children] auto;
}

.category_boards .board_icon {
	grid-column: bicon;
	grid-row-start: primary;
	place-self: start center;
}

.category_boards .board_info {
	grid-column: info;
	grid-row-start: primary;
}

.category_boards .board_avatar {
	justify-self: center;
	grid-column: avatar;
	grid-row-start: primary;
}

.category_boards .board_latest {
	overflow: hidden;
	grid-column: latest;
	grid-row-start: primary;
}

.category_boards .board_lastposter {
	display: block;
}

.category_boards .board_stats {
	display: flex;
	justify-content: center;
	grid-column: stats;
	grid-row-start: primary;
}

.childboard_row {
	font-size: var(--font13);
	grid-column-start: info;
	grid-column-end: end;
	grid-row-start: children;
	margin-top: .3em;
}

/* Styles for the grid content */
.board_icon {
	display: block;
	width: 45px;
	height: 45px;
}

.board_info {
	font-size: var(--font14);
	padding: 0 8px;
}

.board_name {
	font-size: var(--font17);
}

.moderators {
	font-size: var(--font14);
}

.board_avatar {
	min-height: 45px;
	padding-top: .3em;
	padding-left: .7em;
	border-left: 1px solid;
}

.board_avatar .avatar {
	width: 50px;
	max-height: 50px;
	object-fit: scale-down;
}

.board_latest {
	font-size: var(--font14);
	padding: 0 8px;
}

.lastpost_link, .board_lastposter, .board_lasttime {
	overflow: hidden;
	white-space: pre;
}

.lastpost_link > a {
	font-size: var(--font15);
}

.board_lasttime {
	display: block;
}

.board_row,
.forumposts > li,
.content_category > div, .content_category > li {
	border: 1px solid;
}

.board_row {
	margin-bottom: 0.1em;
	padding: 1em 0 .2em 0;
}

.childboards li:nth-child(n+3)::before {
	content: " - ";
}

.childboards {
	border-top: 1px solid;
}

.childboards > li {
	display: inline-block;
	padding: .4em 0.3em .25em 0;
}

.childboard_row h4, .board_new_posts {
	font-weight: 700;
}

/* Sticky category headers, stuck just below the stuck menu bar */
.category_header.boardindex {
	position: sticky;
	z-index: 1;
	top: calc(var(--sticky) - 1px);
}

/* The posting icons and mark read button. */
#posting_icons {
	display: flex;
	align-items: center;
	margin: 0 0 1em .25em;
}

#posting_icons p {
	font-size: var(--font13);
	line-height: 1.25em;
	display: table-cell;
	padding: 0 .25em;
}

/* Two columns, board list on left, info center on right */
#board_container {
	display: flex;
	align-items: flex-start;
}

#board_container > main {
	flex: 0 1 auto;
	width: calc(100% - 250px);
	padding-right: 10px;
}

#board_container > aside {
	flex: 0 0 auto;
	width: 250px;
}

/* Upshrink image in the general category headers */
#category_toggle, #category_toggle_more, #upshrink_header {
	border-radius: 2px;
}

/* Styles for the info center on the board index. */
.ic_block {
	margin-bottom: 1em;
}

.ic_block .secondary_header {
	z-index: 8;
	padding: .4em 0.25em 0 .4em;
	border-radius: 4px 4px 0 0;
}

.ic_section_header {
	font-size: var(--font14);
	position: sticky;
	top: calc(var(--sticky) - 1px);
	margin-top: 0;
	padding: 4px 0 0 0;
}

/* Info center recent posts container */
.ic_recent {
	display: flex;
	padding: 8px 4px;
}

.ic_recent:not(:last-child) {
	border-bottom: 1px solid;
}

.ic_recent_avatar, .ic_recent_avatar > img {
	align-items: flex-start;
	justify-content: center;
	width: 30px;
	max-height: 30px;
	object-fit: cover;
}

.ic_recent_post {
	flex: 1;
	padding-left: 6px;
	word-break: break-all;
}

/* Info center lists */
.ic_list {
	font-size: var(--font13);
	padding: 0 0 12px 18px;
	list-style-type: square;
	text-align: left;
	word-break: break-all;
}

#ic_recentposts {
	font-size: var(--font13);
	padding: 0 6px;
}

/* Profile center */
#ps_recentposts, #ps_recenttopics {
	font-size: var(--font13);
	width: 95%;
	margin: 0 auto;
	border-collapse: collapse;
}

#ps_recentposts .norecent, #ps_recenttopics .norecent {
	padding: 1em;
	text-align: center;
}

#ps_recentposts td, #ps_recentposts th, #ps_recenttopics td, #ps_recenttopics th {
	overflow: hidden;
	max-width: 40em;
	padding: .12em .25em;
	text-overflow: ellipsis;
}

#ps_recentposts td, #ps_recenttopics td {
	border-top: 1px solid;
}

/* Generic info center P */
.inline {
	font-size: var(--font13);
	padding: 0 2em;
}

/* Sort topics container on the message index, recent, etc */
#sort_by {
	font-size: var(--font14);
	display: flex;
	align-items: center;
	height: 35px;
	margin-left: auto;
	border: 2px solid;
	border-bottom: none;
	border-radius: 5px 5px 0 0;
}

#sort_by.topic_sorting_recent {
	border: 1px solid;
	border-bottom: none;
}

#topic_sorting #sort_by {
	transform: translateY(7px);
}

#sort_by > li {
	padding: 0 .5em;
}

.i-sortdown::before, .i-sortup::before {
	vertical-align: text-top
}

/* Sort topics dropdown, flyout to the left, positioned directly under its control */
.no_js .listlevel1:hover #sortby {
	transform: translateX(50%) rotateX(0deg);
}

#sortby {
	right: calc(100% - 32px);
	left: auto;
	transform: translateX(50%) rotateX(-90deg);
}

/* Checkbox when quick moderation is set to checkbox, tweak to align */
#unread_sort #sort_by input[type="checkbox"] {
	margin-right: .5em;
}

/* We need to allow the menu to show, these are the containers that hold the sort_by container */
#unread_sort, #topic_sorting {
	overflow: visible;
}

#topic_sorting.flow_flex {
	margin-top: 0;
}

/* Message index, move the sort tab down to the form */
.generalinfo #topic_sorting #sort_by {
	transform: translateY(9px);
}

/* -------------------------------------------------------
 *	$MESSAGE ... Styles for the message (topic) index.
 * -------------------------------------------------------
 */

/* The board description and who-is-viewing items above the main listing. */
#description_board {
	margin: .7em 0 0 0;
	border-radius: 4px 4px 0 0;
}

#description_board .generalinfo, #forumposts .generalinfo {
	margin: .12em 0 3px 0; /* px here to prevent sort_by issues in Fx */
	padding: .25em .25em .25em .8em;
	border: 1px solid;
}

/* Applied to the ul of the topic listing page */
.topic_listing {
	width: 100%;
}

/* Each li defined as a grid, since its single line could use flex here as well */
.topic_listing > li {
	display: grid;
	grid-template-columns: [topic_icon] 50px [topic_info] auto [topic_latest] 350px [topic_stats] 150px [topic_moderation] 75px;
	grid-template-rows: auto;
	padding: .5em 0;
	border: 1px solid;
}

/* Container, holds the topic icon and fred */
.topic_icons {
	grid-column-start: topic_icon;
	/* To keep an icon with fred aligned */
	padding-left: 1em;
	place-self: center left;
}

/* Indicator if you posted in this topic */
.fred:before {
	position: relative;
	top: -14px;
	right: 4px;
	max-width: .8em;
}

/* Container, holds topic name, starter, small page links and locked/sticky */
.topic_info {
	grid-column-start: topic_info;
	margin: 0 0 0 .8em;
	padding: .4em .8em .4em .8em;
}

.topic_name h4 {
	line-height: 1.4em;
	overflow-wrap: break-word;
}

.topic_starter {
	font-size: var(--font14);
}

/* Container, Holds last poster and time, link to end */
.topic_latest {
	font-size: var(--font14);
	grid-column-start: topic_latest;
	white-space: nowrap;
}

.topic_latest .board_avatar {
	float: left;
	margin: 0 .5em;
}

.topic_latest .i-last_post {
	float: right;
}

/* Container, Holds the message stats */
.topic_stats {
	font-size: var(--font14);
	line-height: 1.4;
	grid-column-start: topic_stats;
	padding: 0 .5em;
	text-align: right;
}

/* Container, holds moderation checkbox or icons */
.topic_moderation, .topic_moderation_alt {
	grid-column-start: topic_moderation;
}

.topic_moderation {
	padding: 0 .7em;
	place-self: center right;
}

.topic_moderation_alt {
	place-self: center center;
}

.topic_moderation_alt a {
	line-height: 1.4;
	padding: 0 .12em;
}

.topic_listing .warningbox {
	margin-bottom: 0;
}

/* Message index icons, topic status & quick moderation */
.topicicon::before {
	display: inline-block;
	width: 18px;
	height: 18px;
	content: "";
}

/* sticky / locked icons for the upper right of the topic_info div */
.sticky_row .topic_info::before,
.locked_row .topic_info::before,
.sticky_row .topic_details::before,
.locked_row .topic_details::before,
.locked_row.sticky_row .topic_info::before,
.locked_row.sticky_row .topic_info .topic_name::before {
	position: relative;
	top: -5px;
	right: -5px;
	float: right;
	width: 16px;
	height: 16px;
	padding: 0 1px;
}

/* Actions and icons below the message listing */
.qaction_row {
	display: flex;
	align-content: center;
	justify-content: flex-end;
	padding: .4em;
}

#message_index_jump_to.qaction_row {
	float: right;
	width: 50%;
}

#topic_icons {
	float: left;
	width: 100%;
	margin-top: .67em;
	padding: .5em .8em;
	border: 1px solid;
	border-radius: 3px;
}

#topic_icons p {
	line-height: 2em;
	padding: 0 .4em;
}

.jump_to_header {
	padding: 0 .25em;
	border: none;
}

/* -------------------------------------------------------
 *	$TOPICS ... The display template (topic view)
 * -------------------------------------------------------
 */

/* Events and poll information */
.linked_events {
	padding: .8em 0;
}

.edit_event {
	margin: 0 5px 0 0;
	vertical-align: middle;
}

#poll, #edit_poll {
	overflow: hidden;
}

#poll_main #question, #poll_main .poll_main input {
	margin-left: 2em;
}

#poll_main .poll_main li {
	margin: .13em 0;
	padding-left: 2em;
}

#poll_main .poll_main, dl.poll_options {
	overflow: hidden;
	padding: 0 0 8px 8px;
}

#poll_main ul {
	margin-top: 8px;
}

#poll_main, #poll_options, #poll_reset {
	clear: both;
	overflow: hidden;
	padding: .4em;
}

#poll_options .options {
	overflow: auto;
	margin: 0 0 2em;
	padding: .8em 30px 0 25px;
	border-top: 1px solid;
}

#poll_options .poll_options dd {
	width: 65%;
}

#poll_options .poll_options dd input {
	margin-left: 0;
}

#poll_options .poll_options dt {
	width: 33%;
	padding: 0 0 0 .8em;
}

#poll_options > dl.stats {
	width: 100%;
	border: none;
}

#pollmoderation {
	display: flex;
	overflow: auto;
	align-items: center;
	margin: 0;
	padding: 0 0 1em 0;
}

#pollquestion {
	padding: 0 0 .4em 16px;
}

.poll_gradient {
	height: .75em;
	border: 1px solid;
	border-radius: .25em;
}

/* The MAIN post container, holds one entire post including .poster
   and all of the postarea data.  The postarea has a min of 0 to prevent
    items like <pre> from blowing out the grid */
.post_wrapper {
	display: grid;
	grid-template-columns: [poster] 225px [postarea] minmax(0, auto);
	grid-template-rows: [keyinfo] auto [messageContent] auto [attachments] auto [quickbuttons] auto [signature] auto;
	padding-top: 1em;
}

aside > .poster {
	grid-column: poster;
	grid-row-start: keyinfo;
	grid-row-end: footer;
}

/* Poster container, holds mugshot, flyout, poster info etc */
.poster {
	font-size: var(--font13);
	display: flex;
	align-items: center;
	flex-direction: column;
}

/* li lines in poster, could use flex / flex row here */
.poster .listlevel1 {
	line-height: 1.667em;
	width: 100%;
	padding: 0 .4em;
	text-align: center;
}

.poster .name {
	font-size: var(--font17);
	overflow: hidden;
	/* Enough room for a two line name, truncated ... */
	max-height: 3em;
	padding-bottom: 2px;
	white-space: normal;
	text-overflow: ellipsis;
	word-break: normal;
}

/* No border around the poster name on hover */
.linklevel1.name:hover, .poster:hover a.name {
	border: none;
}

.linklevel1.name:hover {
	text-decoration: underline;
}

/* Start of nifty flyout menu for the poster info.
   Note: this can be a bit particular with input elements, links, icons */
.poster .menulevel2 {
	top: calc(100% + 2px);
	text-align: left;
}

/* Top speech pointer needs to be shifted */
.poster .listlevel1.subsections::after {
	top: calc(100% - 4px);
	left: 45%;
}

/* Dropdown `business card` grid, left is avatar, right is information */
.poster_div_container {
	display: grid;
	grid-template-columns: [poster] 135px [details] 275px;
}

.poster_div_avatar {
	align-self: center;
	justify-self: center;
	grid-column: poster;
	text-align: center;
}

.poster_div_details {
	grid-column: details;
	padding-left: 10px;
	border-left: 1px solid #CCCCCC;
}

/* Information in the dropdown */
.report_separator {
	height: 1px;
	margin: .4em 0 0 0;
	border-bottom: 1px solid;
}

/* Icon tweaks in the dropdown */
.listlevel2.warning::before:hover,
.listlevel2.poster_ip::before:hover {
	margin: 0 .25em 0 -.25em;
	padding: .1em;
}

/* Dont let long ipv6 ids overflow */
.listlevel2.poster_ip .help {
	overflow: hidden;
	max-width: 80%;
	vertical-align: middle;
	text-overflow: ellipsis;
	word-wrap: normal;
}

.warning .linklevel2 .warnicon {
	margin: 0 .4em 0 0;
}

/* Links like Karma, IP etc just underline no background, shadows, etc */
.poster .linklevel2, .poster .linklevel2:focus,
.poster .listlevel2:hover .linklevel2 {
	padding: 0;
	border: 1px solid;
}

.poster .listlevel2 a.linklevel2:hover {
	text-decoration: underline;
}

/* OL in the dropdown holds custom fields with icons and email / website / */
.listlevel2 > ol > li {
	display: table-cell;
}

.karma_allow > .linkbutton {
	font: var(--font13);
	display: inline-block;
}

/* End nifty new flyout. */

.avatar {
	width: auto;
	max-width: 180px;
	height: auto;
	max-height: 240px;
}

/* The visible stuff below the avatar. */
.poster .membergroup {
	font-weight: bold;
}

.poster_online .linklevel1 {
	position: relative;
	display: block;
	margin: 3px 1.5em;
	border: 1px solid;
	border-radius: 2px;
}

.poster_online .linklevel1:hover {
	text-decoration: none;
}

.poster .pm_indicator {
	font-size: var(--font11);
}

.poster li.poster_online:hover .linklevel1 {
	border: 1px solid;
}

/* Custom tile, 2 lines only, overflow preventions */
.poster .title {
	line-height: 1.5;
	overflow: hidden;
	max-width: 95%;
	max-height: 3em;
	white-space: normal;
	overflow-wrap: break-word;
}

/* Hidden poster information option, instead you get a flyout menu link in the keyinfo area */
.poster.poster2 {
	display: inline-block;
	float: left;
}

.poster.poster2 .listlevel1 {
	font-size: var(--font13);
	text-align: center;
}

.poster.poster2 .name {
	font-size: var(--font13);
	margin-top: 0;
	padding: 0 8px 0 0;
	text-align: left;
}

/* Do one override here for .poster. Still saves code all round. */
.poster_avatar .linklevel1, .poster_avatar:hover .linklevel1,
.poster_avatar .linklevel1:focus,
.name.linklevel1, .name.linklevel1:hover, .name.linklevel1:focus {
	border: none;
}

/* ------------------------------------------------------------------------
   This holds all data related to the post
   keyinfo -> messageContent -> attachments -> quickbuttons -> signature */
.postarea {
	grid-column: postarea;
	grid-row-start: keyinfo;
	grid-row-end: footer;
	padding: 0 1em 0 1.25em;
}

/* Area above the message, icon, reply number, date, subject */
.keyinfo {
	font-size: var(--font13);
	display: flex;
	align-items: center;
	grid-row: keyinfo;
	padding: 1px 0 5px 0;
}

.keyinfo .post_subject {
	overflow: hidden;
	order: 2;
	max-width: 15em;
	margin-left: auto;
	white-space: pre;
	text-overflow: ellipsis;
}

.keyinfo .messageicon {
	margin: 0 .4em 0 0;
}

.keyinfo .messageicon img {
	margin: 0 auto;
	vertical-align: top;
}

/* The icon selection dropdown you get by clicking on the icon in message view */
.keyinfo .messageicon .dropdown {
	margin: 0 auto;
	padding: 2px;
	cursor: pointer;
	vertical-align: top;
	border: 1px solid;
}

.keyinfo .messageicon .dropdown:hover {
	padding: 2px;
}

/* This div and items are added by javascript for the icon selection */
#iconList {
	display: flex;
	align-items: center;
	padding: 4px 6px 2px 6px;
	border: 1px solid;
}

#iconList > .messageIcon {
	padding: 2px 3px;
	border: 1px solid;
}

#iconList > .messageIcon > img {
	height: 18px;
}

#iconList > .messageIcon:hover {
	border: 1px dotted;
}

/* The actual message, what the entire software package is about */
.messageContent {
	grid-row: messageContent;
	min-height: 70px;
	padding: 1em 1em .25em .5em;
	border-top: 1px solid;
	overflow-wrap: break-word;
}

/* Don't let an ILA align cascade past the end */
.postarea > footer {
	clear: both;
}

/* The attachments below the post */
footer .attachments {
	grid-row: attachments;
}

.attachments {
	font-size: var(--font13);
	overflow: auto;
	border-top: 1px solid;
}

/* Container attachments (thumbnail or full) and info */
.attachment_block, .attachment {
	display: inline-block;
	overflow: hidden;
	min-width: 225px;
	margin: 0 .4em 1em 0;
	text-align: center;
}

/* Auto scaling of images in that attachment block */
.attachment_image {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 800px;
	margin: 2em 0 0 0;
}

.attachment_name, .attachment_details {
	display: block;
	overflow: hidden;
	width: 100%;
	padding: 0 .5em;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.attachment_details {
	border-top: none;
	border-radius: 0 0 .5em .5em;
}

.attachment_thumb, .attachment_name {
	margin: 0 auto;
	overflow-wrap: break-word;
}

.attachment_thumb > a > img {
	max-width: 100%;
}

.generic_border .attachment_name {
	border-radius: 0 0 4px 4px;
}

/* Not sure these need their own row, but harmless either way */
footer nav {
	grid-row: quickbuttons;
}

footer .signature {
	grid-row: signature;
}

/* All the signatures used in the forum. */
.signature, .custom_fields_above_signature {
	font-size: var(--font13);
	overflow: auto;
	padding: 8px 0;
	border-top: 1px solid;
}

/* On to the posts, this is the main container for all posts on a page */
#forumposts {
	margin: .2em 0 0 0;
	border-radius: 4px 4px 0 0;
}

#forumposts .category_header {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Number of views and previous /next links in the category header */
.nextlinks {
	font-size: var(--font15);
	float: right;
	white-space: pre;
}

.views_text {
	font-size: var(--font13);
	white-space: pre;
}

/* Used a spacer between posts */
.forumposts {
	margin-top: .13em;
	border: 1px solid;
}

/* Other Topic information, in the description box, above the listing */
#whoisviewing, #redirectfrom {
	font-size: var(--font13);
	padding: .25em 0 3px 0;
}

#redirectfrom {
	display: inline-block;
}

/* Small negative margin on #new anchor for better viewport position */
#new::before {
	display: block;
	visibility: hidden;
	margin-top: -1em;
	content: '';
}

/* Emoji and smiley icons in the post */
.smiley {
	vertical-align: bottom;
}

.emoji {
	max-width: 24px;
	padding: 0 .13em;
	vertical-align: text-bottom;
}

.emoji_tpl {
	max-width: 22px;
	padding: 0 .13em 0 0;
	vertical-align: middle;
}

/* Auto scaling of bbc images in posts and sigs */
.messageContent .bbc_img, .signature .bbc_img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 800px;
}

.messageContent .bbc_img.ila_pending {
	padding: 2px;
	border: 1px solid;
}

/* Poor Mans lightbox support */
#elk_lightbox {
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
}

#elk_lightbox::before {
	display: inline-block;
	height: 100%;
	content: '';
	vertical-align: middle;
}

#elk_lb_content {
	position: relative;
	display: inline-block;
	min-width: 30%;
	margin-top: 2em;
	margin-right: 3%;
	margin-left: 3%;
	white-space: normal;
}

#elk_lb_content div {
	position: fixed;
	top: 50%;
	left: 50%;
}

#elk_lb_next, #elk_lb_prev, #elk_lb_expand {
	line-height: .9;
	position: absolute;
	top: 50%;
	right: -3%;
	display: inline-block;
	width: 2em;
	height: 2em;
	border: 2px solid;
	border-radius: 4px;
}

#elk_lb_content.expand {
	position: absolute;
	overflow: auto;
	padding: 0;
	border: 1px solid;
}

#elk_lb_expand {
	top: -5%;
}

#elk_lb_prev {
	left: -3%;
}

#elk_lb_expand::before {
	font-size: 2em;
	line-height: .85;
	content: "\1F875";
}

#elk_lb_next::before {
	font-size: 2em;
	content: "\1F842";
}

#elk_lb_prev::before {
	font-size: 2em;
	content: "\1F840";
}

.elk_lb_no_scrolling {
	overflow: hidden;
}

/* Separator of posts. More useful in the print stylesheet. */
.post_separator {
	display: none;
}

/* New post HR, --\/--separates the read from the new */
.new_post_separator {
	display: block;
	height: 0;
	margin-top: .5em;
}

/* Border trick to create 2 down pointing triangles, one shifted to make a pointer */
.new_post_separator::after, .new_post_separator::before {
	position: relative;
	z-index: 1;
	top: -11px;
	left: 50%;
	display: block;
	width: 0;
	content: '';
	border-width: 10px 10px 0;
	border-style: solid;
}

.new_post_separator::before {
	top: 1px;
}

/* The header above the video, allows to collapse the video box */
.elk_videoheader {
	padding: .4em;
	border: 1px solid;
}

/* Video/Preview image container */
.elk_video {
	position: relative;
	height: 0;
	padding-bottom: min(480px, 75%);
	border-top: 0;
}

.elk_video iframe {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

/* Class applied to the video preview image */
.elk_previewvideo {
	display: block;
	margin: 0 auto;
}

/* Basic stuff for the bottom of Display.template.php, moderation buttons, jump box. */
#moderationbuttons {
	display: flex;
	align-items: center;
	margin: 1em 0 .5em 0;
}

/* The jump to box */
#display_jump_to {
	margin-left: auto;
	white-space: nowrap;
}

/* Container for the quick reply area., holds header and editor areas */
#quickreplybox {
	margin: .4em 0 0 0;
	border-radius: 4px 4px 0 0;
}

.editor_wrapper {
	max-width: 75%;
	margin: 0 auto;
}

/* The QR textarea */
#quickReplyOptions .quickreply {
	height: 150px;
	padding: 0 4px;
	outline: none;
}

/* The QR buttons may be better suited not being over the topic buttons */
#post_confirm_buttons {
	justify-content: flex-start;
}

/* The rest is for the share/send topic popup window. */
fieldset.send_topic {
	overflow: visible;
	margin: 0;
	padding: .4em;
	border: none;
	box-shadow: none;
}

dl.send_topic {
	overflow: visible;
	margin-bottom: 0;
}

dl.send_mail dt {
	width: 35%;
}

dl.send_mail dd {
	width: 64%;
}

/* Added by JS when they try to submit with missing fields */
.requiredfield::before {
	position: absolute;
	bottom: 90%;
	left: 5%;
	width: 0;
	height: 0;
	content: ' ';
	border: 10px solid transparent;
}

.requiredfield {
	font-size: var(--font13);
	position: absolute;
	z-index: 100;
	top: 35px;
	left: 5%;
	border: 1px solid;
}

.popup_content .r_name,
.popup_content .r_email,
.popup_content .y_name,
.popup_content .y_email {
	position: relative;
	overflow: visible !important;
}

.popup_content dl.settings dt {
	margin-bottom: 15px;
}

/* end of relatively useless share button stuff */

/* -------------------------------------------------------
 *	$EDITOR ... The main post editor section
 * -------------------------------------------------------
 */

/* Postmodify is the overall container, holds it all */
#postmodify #message {
	width: 100%;
}

#postmodify .lastedit {
	font-weight: bold;
}

/* Container for the preview area above the editor */
#preview_section {
	border-radius: 4px 4px 0 0;
}

#preview_body {
	overflow: auto;
	margin: .13em 0 0;
	padding: 0.5em 1em;
	border: 1px solid;
}

/* Just the draft saved confirmation bar, above the post */
#draft_section {
	margin-top: 1em;
}

/* Area just above the editor, subject, message icon */
#post_header {
	overflow: hidden;
	padding: .4em;
}

#post_header dt {
	font-weight: bold;
	float: left;
	width: 15%;
	margin: .4em 0 0 0;
	padding: 0;
}

#post_header dd {
	float: left;
	width: 83%;
	margin: .25em 0;
	padding: 0;
}

#post_header img {
	padding: 0 0 .13em 5px;
	vertical-align: middle;
}

/* Checkboxes of options below the editor */
ul.post_options {
	overflow: auto;
	margin: 0 0 0 .8em;
}

ul.post_options li {
	float: left;
	width: 25%;
	margin: .13em 0;
}

/* Header when enable collapsible additional post options is on */
#postAdditionalOptionsHeader, #postDraftOptionsHeader {
	margin: 1em 0 0 0;
}

#postAdditionalOptions, #postDraftOptions {
	overflow: auto;
	margin: 0;
	border: 1px solid;
	border-top: none;
	border-radius: 0 0 4px 4px;
}

/* The non collapsible area */
#postAdditionalOptionsNC {
	overflow: visible;
	margin: 0;
	border: 1px solid;
	border-radius: 4px;
}

/* Keep additional options spaced (collapsed or not) from topic summary */
#forumposts .forumposts {
	padding-bottom: 1em;
}

.shortcuts {
	font-size: var(--font13);
	margin-right: auto;
}

#mobile .shortcuts {
	display: none;
}

/* area below post buttons/shortcuts to show the last draft save time */
.draftautosave {
	font-size: var(--font13);
	overflow: hidden;
	height: 1.6em;
	margin: -.3em 0 .3em 0;
	text-align: right;
}

/* Container for loadable drafts */
#postDraftOptions .settings dd,
#postDraftOptions .settings dt {
	font-size: var(--font13);
	width: 60%;
	margin: 0;
	padding: 5px .67em;
	border-top: 1px solid;
}

#postDraftOptions .settings dd {
	width: 40%;
}

#postDraftOptions .settings dd:nth-child(2),
#postDraftOptions .settings dt:first-child {
	border-top: none;
}

#postDraftOptions .settings strong {
	font-size: var(--font15);
}

/* Verification control for making a post */
.post_verification {
	margin-top: .4em;
}

.post_verification #verification_control {
	margin: .25em 0 .25em .8em;
}

.verification_control_valid {
	display: none;
}

.verification_control .smalltext {
	margin: .25em 0 8px 0;
}

/* topic_summary is the summary section on the new post page */
#topic_summary {
	margin-top: .25em;
	border-radius: 4px 4px 0 0;
}

#topic_summary .keyinfo {
	display: flex;
	align-items: center;
}

#topic_summary .quickbuttons {
	margin: 0;
	padding: 0;
}

#topic_summary .keyinfo nav {
	margin-left: auto;
}

/* The event editor section. */
#event_main, #poll_options, #poll_main {
	margin-bottom: 0.5em;
	padding-top: .5em;
}

#event_main .well {
	overflow: auto;
	padding: .8em 12%;
}

#event_main fieldset {
	clear: both;
}

#event_main label {
	vertical-align: middle;
}

#datepicker, #caption_evtitle {
	display: inline-block;
	padding-left: 1em;
}

#datepicker {
	white-space: nowrap;
}

#evtitle {
	margin-top: 0.5em;
}

#event_main .event_options {
	overflow: hidden;
	margin: 0;
	padding: .7em 0.5em 0.5em 1em;
}

#event_main .event_options li {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

#event_main select, .event_options li select,
#event_main ul.event_options li input[type="checkbox"] {
	margin: 0 .8em 0 0;
}

/* -------------------------------------------------------
 *	$DRAG-N-DROP
 * -------------------------------------------------------
 */

.drop_area {
	font-size: var(--font24);
	position: relative;
	display: none;
	padding: 1em 0;
	text-align: center;
	opacity: 0.6;
	border: dashed 1px;
}

.drop_area_fileselect {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	cursor: pointer;
	opacity: 0.0001;
}

.drop_area_fileselect_text {
	position: relative;
	padding: 0 .25em;
	white-space: nowrap;
	border: 1px solid;
	border-radius: 4px;
}

.drop_area_fileselect_text input {
	overflow-y: hidden;
}

.drop_area .mobile {
	display: none;
	border: 1px solid;
	border-radius: 0.125em;
}

/* container for each uploaded item */
.statusbar {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	min-height: 85px;
	padding: 0 5px;
	border-top: 1px solid;
	border-bottom: 1px solid;
}

.info {
	overflow: hidden;
	width: 60%;
}

.postattach_thumb img {
	width: 100px;
	height: 80px;
	object-fit: scale-down;
}

.postattach_thumb {
	display: flex;
}

/* holds the inline button and the insert overlay control injected via JS */
.ila_container {
	position: relative;
	margin: 0 5px;
	border: 1px solid;
	border-radius: 4px;
}

.ila_container .icon.share {
	width: 3em;
	margin: 5px 5px 0 5px;
	cursor: pointer;
}

.control.icon.abort, .control.icon.remove {
	order: 4;
	margin-left: auto;
	cursor: pointer;
	border: none;
}

/* The dropdown menu when selecting the ILA (share) icon */
.statusbar .insertoverlay {
	position: absolute;
	z-index: 1000;
	min-width: 175px;
	padding: 0.2em;
	border: 1px solid;
	border-radius: 4px;
}

.insertoverlay .tabs {
	display: flex;
	justify-content: space-between;
	white-space: nowrap;
}

.insertoverlay .tabs li {
	flex-grow: 1;
	cursor: pointer;
	text-align: center;
	border-bottom: 1px solid;
}

.statusbar .insertoverlay label {
	display: block;
}

.statusbar .insertoverlay .visualizesize,
.statusbar .insertoverlay .range {
	display: inline-block;
	max-width: 45%;
	margin-top: 0.5em;
}

.statusbar .insertoverlay .ila_container {
	display: block;
}

.statusbar .insertoverlay .visualizesize {
	float: right;
}

.statusbar .insertoverlay .button {
	font-weight: bold;
	position: absolute;
	top: -35px;
	left: -5px;
	width: 60px;
	height: 35px;
	border-radius: 4px;
}

/* Upload progress bar */
.progressBar {
	width: 20%;
	text-align: center;
	border: 1px solid;
}

.progressBar div {
	border-radius: 5px;
}

.drop_attachmnts_error {
	overflow: hidden;
	padding: .67em 0;
}

#postMoreOptions {
	border-top: 1px solid;
}

#postMoreOptions, #postAttachment2 {
	margin: -1px 0 0 0;
	padding: .67em;
}

#postAttachment2 dd {
	margin: .25em 1%;
}

#postAttachment2 dt {
	font-weight: bold;
}

.attachmenterrors {
	padding: 0 1em;
}

/* -------------------------------------------------------
 *	$MODERATE
 * -------------------------------------------------------
 */

/* The move topic section. */
#move_topic dl {
	margin-bottom: 0;
}

#move_topic dl.settings dt {
	width: 40%;
}

#move_topic dl.settings dd {
	width: 59%;
}

.move_topic {
	text-align: left;
}

.move_topic fieldset {
	padding: .4em;
}

/* The report topic section. */
#report_topic dl.settings dt {
	width: 20%;
}

#report_topic dl.settings dd {
	width: 80%;
}

#report_comment {
	height: 10em;
}

/* The split topic section. */
#selected, #not_selected {
	width: 50%;
}

.split_messages .content {
	margin: .2em;
}

.split_messages .split_icon {
	padding: 0 .4em;
}

.split_messages .post {
	padding: .8em 0 0 0;
	border-top: 1px solid;
}

/* The merge topic section. */
dl.merge_topic dt {
	width: 25%;
}

dl.merge_topic dd {
	width: 74%;
}

.merge_options {
	clear: both;
	padding: 0.5em;
}

.custom_subject {
	margin: .4em 0;
}

/* -------------------------------------------------------
 *	$MISCELLANEOUS
 * -------------------------------------------------------
 */

/* The debug view query item that you get by clicking on view querys when in debug mode */
.action_viewquery a {
	font-weight: bold;
	text-decoration: none;
}

.action_viewquery .explain {
	font-family: serif;
	width: 70%;
	margin-bottom: 1em;
	empty-cells: show;
	border-collapse: collapse;
}

.action_viewquery .explain th,
.action_viewquery .explain td {
	width: 5%;
	padding: .13em;
	border: 1px solid;
}

.action_viewquery .query {
	margin: 1em;
}

/* next two only in manage member groups?  Move to Admin */
.groupicon {
	float: left;
	margin: .13em 0 0 .13em;
}

.groupicon img {
	padding: 0 3px 0 3px;
}

/* Counter number shown in search, recent posts, user posts, etc */
.counter {
	font-size: var(--font24);
	font-weight: bold;
	float: right;
}

/* Styles for the tooltips. */
.tooltip {
	position: absolute;
	z-index: 999;
	left: -9999px;
	max-width: 350px;
	padding: .4em 9px;
	border: 1px solid;
	border-radius: 4px;
	overflow-wrap: break-word;
}

/* -------------------------------------------------------
 *	$PROFILE
 * -------------------------------------------------------
 */

#profile_attachments {
	overflow: auto;
	margin: .8em 0 0 0;
	border: 1px solid;
	border-radius: 4px;
}

/* Adjust recent activity areas */
.ui-tabs .ui-tabs-panel {
	clear: both;
	padding-top: 8px;
	border: 1px solid;
}

.profile_center .attachments {
	margin-top: .5em;
	border-top: none;
}

.content_noframe {
	border: none;
}

.profile_content {
	overflow: auto;
}

.profile_content.attachment_thumb {
	overflow: hidden;
	height: 120px;
}

.profile_content > a > img {
	max-height: 100%;
}

/* Summary page blocks */
.profileblock {
	margin-top: .25em;
	padding: .25em .5em;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

.profileblock_left {
	float: left;
	width: 50%;
	padding: 0 .25em 1em .25em;
}

.profileblock_right {
	float: right;
	width: 50%;
	padding: 0 .25em 1em .25em;
}

.profileblock_left h3, .profileblock_right h3 {
	margin-bottom: .8em;
}

.profileblock ul li {
	display: block;
	float: left;
	margin-right: 5px;
}

.generic_border {
	padding: .25em;
	border: 1px solid;
	border-radius: 6px;
}

.generic_border .avatar {
	max-width: 40px;
	max-height: 40px;
}

/* Custom Profile Field Icons */
ul.cf_icons {
	margin-top: -.5em;
	border-top: 1px solid #CCCCCC;
}

li.cf_icon {
	margin-top: .25em;
}

.cf_icon > a > img {
	padding: 0 .25em .13em .25em;
	vertical-align: middle;
}

/* Vertical " | " spacer between icons */
ul.cf_icons li:not(:first-child)::before {
	content: "\20\7C\20";
}

/* Main block of user summary */
#detailedinfo {
	float: right;
	width: 70%;
	margin-top: 0;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* The basic user info on the left of the block (avatar title etc) */
#basicinfo {
	float: left;
	width: 30%;
}

#basicinfo h4 {
	font-size: var(--font18);
	font-weight: 100;
	overflow: hidden;
	padding-right: .12em;
	white-space: pre-wrap;
}

#basicinfo .avatar {
	display: block;
	margin: .67em 0 0 0;
}

#userstatus {
	display: block;
	clear: both;
	margin-top: .4em;
}

#userstatus img {
	vertical-align: middle;
}

#detailedinfo dl, #tracking dl, .profileblock dl {
	clear: right;
	overflow: auto;
	margin: 0 0 1em 0;
}

#detailedinfo dt, #tracking dt, .profileblock dt {
	font-weight: bold;
	float: left;
	clear: both;
	width: 35%;
	margin: 0 0 .1em 0;
	padding: .4em 0 0 0;
}

#detailedinfo dd, #tracking dd, .profileblock dd {
	float: left;
	width: 65%;
	margin: .4em 0 .1em 0;
	padding: 0;
}

.profileblock_signature dd {
	width: auto;
	overflow-wrap: break-word;
}

/* Avatar selection screen */
#personal_picture {
	display: block;
	margin-bottom: .25em;
}

#avatar_server_stored div {
	float: left;
	padding-right: .5em;
}

#avatar_upload {
	overflow: auto;
}

/* The sidebar menu layout adjustment in profile summary */
#main_admsection #basicinfo, #main_admsection #detailedinfo {
	width: 100%;
}

#main_admsection #basicinfo h4 {
	float: left;
	width: 35%;
}

#main_admsection #basicinfo .avatar {
	float: right;
	margin: .1em;
}

#main_admsection #basicinfo ul {
	clear: left;
}

#main_admsection #basicinfo #userstatus {
	clear: left;
}

#main_admsection #basicinfo #infolinks {
	display: none;
	clear: both;
}

/* Profile statistics */
#generalstats .content dt {
	font-weight: bold;
	float: left;
	clear: both;
	width: 50%;
	margin: 0 0 .25em 0;
	padding: 0;
}

#generalstats .content dd {
	float: left;
	width: 50%;
	margin: 0 0 .25em 0;
	padding: 0;
}

#show_attachments th {
	text-align: left;
}

.activity_stats {
	margin: 0;
	padding: 0;
}

.activity_stats li {
	float: left;
	width: calc(100% / 24);
	margin: 0;
	padding: 0;
}

.activity_stats li span {
	font-size: var(--font12);
	display: block;
	text-align: center;
	border: 1px solid;
	border-right-style: none;
	border-left-style: none;
}

.activity_stats .last span {
	border-right: none;
}

.activity_stats li .bar {
	width: 50%;
	max-width: 30px;
	margin: 0 auto;
	border: 1px solid;
	border-bottom: none;
}

.activity_stats li .bar span {
	display: none;
}

/* Most popular boards by posts and activity */
#popularposts {
	float: left;
	width: 50%;
	padding: .4em .4em 0 0;
}

#popularactivity {
	float: right;
	width: 50%;
	padding: .4em 0 0 .4em;
}

#popularposts div.content dt, #popularactivity div.content dt {
	font-weight: bold;
	float: left;
	clear: both;
	width: 65%;
	margin: 0 0 .4em 0;
}

#popularposts div.content dd, #popularactivity div.content dd {
	float: left;
	width: 35%;
	margin: 0 0 .4em 0;
}

.profile_pie {
	float: left;
	width: 20px;
	height: 20px;
	margin: 0 .8em 0 0;
	text-indent: -1555em;
	background: url(../images/stats_pie.png);
}

/* Buddy section stuff. */
.add_buddy .well, .add_buddy .title_bar {
	margin-top: 5px;
	border: none;
	background: none;
}

/* View posts & topics container */
#recentposts article {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: [header] 60px [article] auto [nav] auto;
}

/* Grid locations called out here for easy finding */
#recentposts article .messageContent {
	grid-row: article;
}

#recentposts header {
	align-self: center;
	grid-row: header;
}

#recentposts nav {
	grid-row: nav;
}

/* Attempt to make recent posts less overwhelming. */
#recentposts .messageContent {
	position: relative;
	overflow: auto;
	max-height: 20em;
}

#recentposts {
	border-radius: 4px 4px 0 0;
}

/* Header section */
.topic_details {
	padding: 0 .25em .25em .25em;
}

/* Definition lists, mostly used in profile */
#creator dl {
	margin: .25em 0 0;
}

#creator dl:first-child {
	margin: 0;
}

#creator dt {
	float: left;
	clear: both;
	width: 40%;
}

#creator dt label {
	font-weight: 600;
}

#creator dd {
	float: right;
	overflow: visible;
	width: 55%;
	margin: 0 0 .67em .13em;
	padding-bottom: 1px;
}

.ignoreboards {
	width: 50%;
	padding: 0 1%;
}

.ignoreboards a {
	font-weight: bold;
	padding: .1em 0;
	border-bottom: 1px solid;
}

.ignoreboards a:hover {
	text-decoration: none;
}

.ignoreboards li {
	clear: both;
}

.ignoreboards li.category {
	width: 100%;
	margin: 8px 0 0 0;
}

.ignoreboards li ul {
	margin: .13em 0 0 0;
}

/* Issue a warning */
#warn_body, .warn_input {
	font-size: var(--font13);
	width: 80%;
	margin-top: .2em;
}

#warning_bar {
	margin: 0;
}

#slider-range-min {
	width: 80%;
	margin: 1em 0 1em .6em;
}

/* Other tweaks */
#qrcode {
	margin-top: .67em;
}

.recent_attachments > img {
	max-width: 80px;
	height: auto;
}

/* -------------------------------------------------------
 * $PERSONAL
 * -------------------------------------------------------
 */

/* This is the wrapper around the PM new message form, that is why its called folder */
#pmFolder {
	border-radius: 4px 4px 0 0;
}

/* If you have labels, these are the drop down selector under quote, reply, delete */
#personal_messages .labels {
	padding: .1em 0 0;
}

div.labels {
	display: block;
	text-align: right;
}

#personal_messages .signature {
	overflow: visible;
}

#personal_messages .capacity_bar {
	width: 10em;
	height: 20px;
	margin: 0 .8em;
	border: 1px solid;
	border-radius: 4px;
}

#personal_messages .capacity_bar span {
	display: block;
	height: 20px;
	border-right: 1px solid;
}

#searchLabelsExpand li {
	padding: .25em .4em;
}

#manrules div.righttext {
	padding: .25em .1em;
}

.addrules dt.floatleft {
	width: 18em;
	padding: 0 1em .4em 1em;
}

#addrule fieldset {
	clear: both;
	padding: 0.5em;
}

/* Show to and BBC across the page */
#to_item_list_container div, #bcc_item_list_container div {
	float: left;
	margin-right: .67em;
}

/* These are the input buttons like remove, label selected, other? etc */
.label_pms {
	display: flex;
	margin-left: auto;
}

.label_pms li {
	margin-left: 0.5em;
}

/* -------------------------------------------------------
 * $CALENDAR
 * -------------------------------------------------------
 */

#calendar {
	text-align: center;
}

#month_grid {
	float: left;
	width: 215px;
	padding: 0 15px 0 0;
}

#main_grid {
	overflow: auto;
}

/* Used to indicate the current day. */
#main_grid .calendar_today, #month_grid .calendar_today {
	border: 1px solid;
}

#month_grid .category_header {
	font-size: var(--font15);
}

#main_grid .category_header {
	font-size: var(--font20);
}

.previous_month, .next_month {
	font-size: var(--font9);
	display: block;
	float: left;
	margin: -0.1em 0 0 0;
}

.next_month {
	float: right;
}

.calendar_table {
	font-size: var(--font13);
	width: 100%;
	border-spacing: 1px;
	border-top: 1px solid;
}

.calendar_table th, .calendar_table td {
	padding: .13em 0;
	text-align: center;
}

#month_grid .calendar_table {
	margin-bottom: .8em;
}

#month_grid .table_head {
	font-size: var(--font14);
}

#main_grid .days {
	width: 14%;
	padding: .25em;
	vertical-align: top;
}

#main_grid td.days {
	height: 100px;
}

#main_grid .weeks {
	font-size: var(--font15);
	font-weight: normal;
}

#main_grid .weeks a:hover {
	text-decoration: none;
}

.weeklist {
	padding: .13em 0 0;
	text-align: left;
}

.weeklist > li {
	overflow: hidden;
	margin: .13em 0;
	border: 1px solid;
}

.weeklist h4 {
	font-size: var(--font17);
	float: left;
	width: 10em;
	padding: .67em;
}

.weeklist h4 a:hover {
	text-decoration: none;
}

.weekdays {
	padding: 8px 8px 0 180px;
}

/* Use the old one true layout trick here. */
.weeklist .content, .weeklist .calendar_today {
	margin: 0 0 -95px 10em;
	padding: 8px 8px 100px 8px;
}

.hidelink {
	font-style: italic;
}

#calendar_navigation {
	padding: .8em 0;
	border: 1px solid;
	border-top: none;
}

/* Cheat and match this to the submit button. */
#calendar_navigation .buttonlist {
	padding: 0 .4em;
}

/* See, I told you there was antz in here.
              ,
      _,-'\   /|   .    .    /`.
  _,-'     \_/_|_  |\   |`. /   `._,--===--.__
 ^       _/"/  " \ : \__|_ /.   ,'    :.  :. .`-._
        // ^   /7 t'""    "`-._/ ,'\   :   :  :  .`.
        Y      L/ )\         ]],'   \  :   :  :   : `.
        |        /  `.n_n_n,','\_    \ ;   ;  ;   ;  _>
        |__    ,'     |  \`-'    `-.__\_______.==---'
       //  `""\\      |   \            \
       \|     |/      /    \            \
                     /     |             `.
                    /      |               ^
                   ^       |
Stef                       ^
*/

/* -------------------------------------------------------
 * MENTIONS
 * -------------------------------------------------------
 */

.mentionavatar .avatar {
	display: block;
	max-width: 60px;
	max-height: 60px;
}

.mentionavatar {
	min-width: 60px;
	min-height: 60px;
}

/* -------------------------------------------------------
 * $STATISTICS
 * -------------------------------------------------------
 */

#yearStats {
	width: 80%;
	height: 200px;
	margin: 1em 0;
}

.chart_legend {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.chart_legend > li {
	display: flex;
	align-items: center;
	flex-direction: row;
	margin-left: 10px;
	cursor: pointer;
}

.legend_color_box {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	border-radius: 50%;
}

.legend_text {
	margin: 0;
	padding: 0;
}

.pie_stats {
	max-width: 80%;
	margin: 0 auto;
}

.statistics {
	margin: 3px 0;
}

.statistics .category_header::after {
	display: none;
}

.statistics .category_header {
	font-size: var(--font18);
	width: 50%;
	margin: 0 0.5% 0 50.5%;
	padding-top: 1px;
	border: none;
	border-bottom: 2px solid;
}

#top_row .category_header {
	width: 99%;
	margin: 0 0.5%;
}

.statistics .category_header.floatleft {
	max-width: 49%;
	margin: 0 0.5%;
}

.statistics .flow_hidden, #forum_history .flow_hidden {
	margin: .13em 0 0 0;
	border: 1px solid;
}

.stats {
	overflow: hidden;
	width: 50%;
	margin: .8em 0 .8em 50%;
	padding: 0 8px;
}

.stats.floatleft {
	clear: left;
	margin: .8em 0;
	border-right: 1px solid;
}

.stats dt {
	font-size: var(--font15);
	line-height: 1.467em;
	float: left;
	clear: both;
	width: 48%;
	margin: 0 2% .25em 0;
	padding: 0;
}

#top_row .stats dd, .statsbar {
	position: relative;
	float: right;
	width: 50%;
	min-height: 1.467em;
	margin: 0 0 .25em 0;
	padding: 0 .25em 0 0;
	border: 1px solid;
}

.statsbar .bar {
	font-size: var(--font15);
	display: block;
	float: left;
	height: 1.467em;
	margin: 0 .25em 0 0;
}

/* Absolute positioning stops these breaking the bars on narrow screens. */
.statsbar .righttext {
	font-size: var(--font13);
	line-height: 1.75em;
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	padding: 0 .25em;
}

#stats {
	margin: .4em 0 16px 0;
	border: none;
}

#stats th, #stats td {
	width: 15%;
	padding: .25em .8em;
	text-align: center;
}

#stats .history_head {
	border-top: none;
}

#stats .lefttext {
	width: 25%;
	text-align: left;
}

#stats .stats_month {
	padding: .25em 8px .25em 30px;
}

#stats .stats_day {
	padding: .25em 8px .25em 60px;
}

/* -------------------------------------------------------
 *	$HELP
 * -------------------------------------------------------
 */

#help_container {
	overflow: auto;
}

#helpmain {
	overflow: auto;
	margin: .8em 0 0 0;
	padding: .5em 1.2em .8em 1.2em;
	border: 1px solid;
	border-radius: 4px;
}

#helpmain p {
	margin: .7em 0;
}

#helpmain ul {
	line-height: 2em;
	margin: 0 0 0 1.5em;
}

#helpmain ul li {
	list-style-type: disc;
}

#helpmain ul li a {
	font-weight: bold;
}

/* Generally, those [?] icons, lots-o-tweaks */
.help {
	cursor: help;
}

.help .icon, .hdicon.help {
	margin: 0;
	cursor: help;
	opacity: 0.8;
}

.hdicon.help {
	vertical-align: top;
}

.hdicon.help::before {
	margin: .13em 0 0;
}

.help .icon:hover, .hdicon.help:hover {
	opacity: 1;
}

/* The help pop-ups, you know, a little lost ? */
.popup_container {
	position: fixed;
	z-index: 10000000;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
}

/* The actual pop-up wrapper. */
.popup_window {
	width: 600px;
	margin: 0 auto;
	border: 1px solid;
	border-radius: 5px;
}

/* The actual pop-up wrapper. */
.popup_container .popup_window {
	width: 640px;
	margin: 5% auto;
}

/* What it says. ;) */
.popup_heading {
	font-size: var(--font16);
	font-weight: bold;
	padding: 0 0 .25em 0;
}

/* The hide icon (red cross). */
.popup_heading .hide_popup {
	float: right;
}

.popup_window.in.content {
	transition-duration: .5s;
	transform: translate(0, 30px);
}

/* The text content, hopefully helpful. */
.popup_content {
	overflow: auto;
	max-height: 25%;
	padding: .7em;
	border: 1px solid;
	border-radius: 4px;
}

/* Some styles used in help entries (language strings) */
.enablePostHTML {
	margin-bottom: 0;
}

.custom_mask {
	margin: 0 2em;
}

/* -------------------------------------------------------
 *	$SEARCH
 * -------------------------------------------------------
 */

#searchform {
	border-radius: 4px 4px 0 0;
}

/* The basic search section. */
#simple_search, #advanced_search {
	margin: .12em 0 0 0;
	padding: .5em 0;
	text-align: center;
}

#search_error {
	font-style: italic;
	padding: .25em .8em;
}

/* The advanced search section. */
#search_options {
	overflow: hidden;
	width: 600px;
	margin: 0 auto;
	padding-top: .8em;
}

#advanced_search dt {
	float: left;
	clear: both;
	width: 35%;
	padding: .25em .25em 0 .25em;
	text-align: right;
}

#advanced_search dd {
	float: left;
	width: 65%;
	padding: .25em .12em;
	text-align: left;
}

#pick_boards .submitbutton {
	width: 100%;
}

/* Search results section, setup each li result as a grid */
.search_results_posts > li {
	display: grid;
	grid-template-columns: auto 60px;
	grid-template-rows: 60px auto auto;
	padding: 0.5em 0;
	border: 1px solid;
}

.search_results_posts .buttons {
	padding: 5px .8em 0 0;
}

.compact_view .topic_details {
	border-bottom: 0;
}

.search_results_posts .topic_details {
	align-self: center;
	grid-column-start: 1;
	padding: 1em;
	border-bottom: 0;
}

.search_results_posts .topic_moderation {
	align-self: center;
	justify-self: end;
	grid-column-start: 2;
	width: 80px;
}

.search_results_posts .topic_moderation input[type="checkbox"] {
	margin: 0 .5em .5em 0;
}

/* Shown when using show results as messages */
.search_results_posts nav {
	grid-column-start: span 2;
	grid-row-start: 3;
}

.search_results_posts nav .quickbuttons {
	margin: 0 1.5em;
}

.search_results_posts .topic_body {
	overflow: auto;
	grid-column-start: span 2;
	grid-row-start: 2;
	margin: 0 1em 0;
	padding: 1em 1em .5em 1em;
	border-top: 1px solid;
}

/* Use colored border to give gap between results */
.search_results_posts > li:not(:last-child) {
	border-bottom: 4px solid;
}

.compact_view .content {
	overflow: auto;
}

#topicForm .pagesection,
#topicForm .flow_auto {
	display: inline-block;
}

#topicForm::after {
	display: block;
	clear: both;
	content: "";
}

/* -------------------------------------------------------
 *	$MEMBERLIST
 * -------------------------------------------------------
 */

.mlist, .whos_online {
	display: table;
	width: 100%;
	border-spacing: 0;
}

.mlist li, .whos_online dt, .whos_online dd {
	display: table-row;
}

.mlist li div, .whos_online dt div, .whos_online dd div {
	display: table-cell;
	padding: .25em .5em;
}

.mlist .mlist_header div {
	border-top: none;
}

.mlist li div, .whos_online dt div, .whos_online dd:nth-child(odd) div {
	border-top: none;
	border-bottom: 1px solid;
}

.mlist li.alternate_row div, .whos_online dd:nth-child(even) div {
	border-top: none;
	border-bottom: 1px solid;
}

.mlist li div:first-child {
	border-left: 1px solid;
}

.mlist li div:last-child {
	border-right: 1px solid;
}

.letter_row {
	line-height: 3em;
	position: sticky;
	z-index: 1;
	top: calc(var(--sticky) - 10px);
	height: 3em;
	vertical-align: bottom;
}

.letter_row > h3 {
	font-weight: bold;
	line-height: 2em;
	position: relative;
	top: 12px;
	min-width: 4em;
	text-align: center;
	text-transform: uppercase;
	border: 1px solid;
	border-radius: 4px 4px 0 0;
}

.mlist_header {
	font-weight: bold;
	position: sticky;
	z-index: 1;
	top: calc(var(--sticky) - 1px);
}

.whos_online dt {
	font-weight: bold;
}

.no_members {
	display: none;
}

.online_member {
	min-width: 40%;
}

#memberlist {
	margin: .4em 0 0 0;
}

#memberlist > .content {
	padding: .8em 0;
}

#memberlist .status {
	width: 20px;
}

#memberlist .avatar.avatarresize {
	max-width: 2.4em;
	max-height: 3.4em;
}

.mlist li div {
	height: 36px;
	margin: 0 auto;
	padding: .2em .5em 0;
	vertical-align: middle;
}

#memberlist .selected {
	width: auto;
	white-space: nowrap;
}

#memberlist_search, #memberlist > .content > .submitbutton {
	width: 32em;
	margin: 0 auto;
}

#memberlist_search > dt, #memberlist_search > dd {
	width: 12em;
}

#memberlist_search > dd {
	width: 320px;
}

#memberlist_search input[type="checkbox"] {
	margin: .25em 0 0 0;
}

#memberlist_search .input_text {
	overflow: hidden;
	width: 100%;
	margin: 0 0 .8em 0;
}

#mlsearch {
	margin-left: auto;
}

#mlsearch_options {
	position: absolute;
	display: none;
	max-width: 12em;
	padding: 0.5em;
	border: 1px solid;
	border-radius: 5px;
}

#mlsearch_options.nojs {
	display: none;
}

#mlsearch_options.nojs li:nth-child(odd) {
	float: left;
	max-width: 25em;
}

#mlsearch_options.nojs li:nth-child(even) {
	float: right;
}

#mlsearch_options .mlsearch_option input[type="checkbox"] {
	float: right;
	margin: 0 0 0 0.5em;
}

#mlsearch_options .mlsearch_option {
	line-height: 2em;
	padding: 0.2em 0;
}

/* -------------------------------------------------------
 *	$LOGIN
 * -------------------------------------------------------
 */

/* Styles for the login areas. */
.login {
	max-width: 640px;
	margin: 0 auto;
}

.login .well {
	padding: .7em 15%;
}

.login input[type="submit"] {
	width: 100%;
}

.forgot_password {
	font-size: var(--font13);
	margin-top: -.5em;
}

#maintenance_mode img {
	padding: 0 .5em;
}

.coppa_contact {
	width: 32ex;
	margin-left: 5ex;
	padding: .25em;
	border: 1px solid;
}

#agreement_box, #privacypol_box {
	overflow-y: scroll;
	height: 180px;
	margin-bottom: 2em;
	padding: 8px;
	text-align: justify;
	border: 1px solid;
}

/* Custom profile fields like to play with us some times. */
#admin_content .custom_field {
	margin-bottom: 1em;
}

/* The admin logon form */
#admin_login {
	padding: .8em;
}

/* -------------------------------------------------------
 *	$FORMS @todo
 * -------------------------------------------------------
 */

/* experimental material design like form inputs.  Use as
  <div class="form_field">
	   <input type="text" />
	   <label>XX</label>
	   <span>icons etc</span>
   </div>
*/

/* Optional.  Use as a wrapper around the form, similar to login */
.form_container {
	overflow: hidden;
	max-width: 640px;
	margin: .12em auto 0 auto;
	padding: 1em;
}

.form_field {
	position: relative;
	margin: 1.5em auto .75em auto;
}

/* Move label text to be the placeholder text for text elements */
.form_field > input[type="text"] + label,
.form_field > input[type="password"] + label,
.form_field > input[type="email"] + label {
	position: absolute;
	top: 3px;
	left: 0;
	transition: transform .2s;
	transform: translatex(.5em);
	text-transform: uppercase;
}

/* fill up the container */
.form_field input[type="text"],
.form_field input[type="password"],
.form_field input[type="email"] {
	width: 100%;
}

/* leave space at the end for any icon */
.form_field.w_icon > input[type="text"],
.form_field.w_icon > input[type="password"],
.form_field.w_icon > input[type="email"] {
	width: calc(100% - 32px);
}

/* Hide any "real" placeholder text */
.form_field > input[type="text"]::placeholder,
.form_field > input[type="password"]::placeholder,
.form_field > input[type="email"]::placeholder {
	user-select: none;
	color: var(--transparent);
}

/* Move label text out of input field on focus.  If there is no placeholder
   move the label to be top aligned to the field w/o needing focus */
.form_field > input[type="text"]:focus + label,
.form_field > input[type="text"]:not(:placeholder-shown) + label,
.form_field > input[type="email"]:focus + label,
.form_field > input[type="email"]:not(:placeholder-shown) + label {
	font-weight: bold;
	transform: translate3d(-.5em, -100%, 0) scale(0.75);
}

/* Password field offset requires special treatment ? */
.form_field > input[type="password"]:focus + label,
.form_field > input[type="password"]:not(:placeholder-shown) + label {
	font-weight: bold;
	transform: translate3d(-.25em, -100%, 0) scale(0.75);
}

/* Use around radio, checkboxes, etc to keep them closer to a input text box */
.form_field_other {
	margin-top: -.25em;
	margin-bottom: .5em;
}

.form_field_checkbox, .form_field_radio, .form_field_select {
	margin-bottom: .5em;
}

/* -------------------------------------------------------
 *	$BOXES
 * -------------------------------------------------------
 */

/* Used for sections that need somewhat larger corners */
.well, .roundframe {
	overflow: hidden;
	margin: .12em 0 0 0;
	padding: .7em;
	border: 1px solid;
	border-radius: 7px;
}

.well p, .roundframe p {
	padding: .4em;
}

/* description & information used below headers, others used to how a result message */
.description, .information, .warningbox, .successbox, .infobox, .errorbox, .genericbox {
	margin: 0 0 1.1em 0;
	padding: .8em .8em;
	border: 1px solid;
}

.genericbox {
	font-size: var(--font15);
	display: flex;
	align-items: center;
	padding: .4em .4em;
}

.information p {
	padding: .8em;
}

/* Make room for the little icon */
.warningbox, .successbox, .infobox, .errorbox {
	padding-left: 2.75em;
	background-repeat: no-repeat;
	background-position: 4px 50%;
	background-size: 24px 24px;
}

.errorbox {
	margin-bottom: 1em;
}

.border_error {
	border: 1px solid !important;
}

.selected {
	font-weight: bold;
}

/* Styles for (fatal) errors.
   @todo find and validate these odd cases */
#fatal_error {
	width: 80%;
	margin: auto;
	padding-bottom: 1em;
}

.errorbox h3 {
	margin: 0;
	padding: 0;
	text-decoration: underline;
}

.errorbox .listlevel1,
.warningbox .listlevel1 {
	line-height: 1.75em;
	float: none;
	padding-left: 1em;
}

.errorbox .alert {
	font-size: var(--font22);
	float: left;
	width: 12px;
	margin: 0;
	padding: 0;
}

.errorbox .smalltext {
	display: block;
	padding-left: 1em;
}

.ban_cannot_post {
	margin: 2ex;
	padding: 2ex;
	border: 2px dashed;
}

/* -------------------------------------------------------
 *	$PROGRESS
 * -------------------------------------------------------
 */

/* Styles for the progress bar */
.progress_bar {
	display: flex;
	align-items: center;
	width: 80%;
	margin: 5px auto;
	padding: 3px;
	border: 1px solid;
	border-radius: 16px;
}

.progress_compact {
	margin: 0 auto 0 0;
	padding: 0;
	border-radius: 8px;
}

.green_percent, .blue_percent {
	line-height: 2em;
	height: 2em;
	text-align: center;
	border-radius: 12px;
}

.progress_compact > .green_percent, .progress_compact > .blue_percent {
	line-height: 1em;
	height: 1em;
}

.loading {
	width: 35px;
	height: 35px;
}

/* -------------------------------------------------------
 *	$LIKE STATS
 * -------------------------------------------------------
 */

.like_post_stats {
	position: relative;
	overflow: visible;
	width: 100%;
}

.like_post_stats_data .individual_data {
	display: none;
}

#like_post_stats_overlay {
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
}

#like_post_stats_overlay::before {
	display: inline-block;
	height: 100%;
	margin-right: -0.25em;
	content: '';
	vertical-align: middle;
}

#lp_preloader {
	position: relative;
	white-space: normal;
}

.like_stats_avatar {
	min-width: 100px;
}

.like_stats_details {
	min-width: 240px;
}

.like_stats_details, .like_stats_subject {
	margin-top: .1em;
	vertical-align: top;
}

.like_stats_likers, .like_stats_subject, .like_stats_details, #lp_preloader, .like_stats_avatar {
	display: inline-block;
}

.like_stats_likers img, .like_stats_small_avatar {
	max-width: 35px;
	vertical-align: middle;
	border-radius: 5px;
}

/* -------------------------------------------------------
 *	$ICONS
 * -------------------------------------------------------
 *
 * Icons. Since embedded icons need to have color data
 * included, the icons themselves go into the color files.
 * This just holds sizing code.
 *
 * -------------------------------------------------------
 */

.iconline, .icoffline {
	line-height: 1em;
	display: inline-block;
	width: 1em;
	height: 1em;
	padding-bottom: 0;
	vertical-align: middle;
	border: 1px solid;
	border-radius: 50%;
}

.icon, .helpicon, .warnicon, .infoicon, .chevricon, .main-menu-icon {
	display: inline-block;
	width: 1.25em;
	height: auto;
}

.icon, .helpicon, .warnicon, .infoicon, .chevricon {
	margin: 0 .25em;
	vertical-align: middle;
}

.helpicon, .warnicon, .infoicon {
	font-weight: bold;
	height: 1.25em;
	text-align: center;
}

.helpicon, a.helpicon {
	margin: 0 .4em 0 0;
	cursor: help;
}

.chevricon {
	float: right;
}

/* Screenreader-only shortcut.
   This is the most foolproof way to ensure a screen reader reads something. */
.icon > s, .board_icon > s, .chevricon > s, .helpicon > s, .warnicon > s, .infoicon > s {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}

.icon-small {
	line-height: 1em;
	width: 1em;
	height: 100%;
}

.icon-big {
	line-height: 1.467em;
	width: 1.467em;
	height: 1.467em;
}

.icon-lg {
	line-height: 2em;
	width: 2em;
	height: 2em;
}

.icon-xl {
	line-height: 4em;
	width: 4em;
	height: 4em;
}

.icon-spin {
	animation: icon-spin 2s infinite linear;
}

@keyframes icon-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(359deg);
	}
}

.icon-middle {
	vertical-align: middle;
}

/* -------------------------------------------------------
 *	$MEDIA
 * -------------------------------------------------------
 * NOTE:
 * When setting break points for media queries, don't set them in pixels.
 * Use em instead.
 * Why? Because the point of re-stacking/dropping content is to fit it all
 * in the available space. This is dependent not just on width in pixels,
 * but also on the user-selected text size that is set in the browser.
 *
 * If, for whatever reason (eyesight, pixel pitch, workstation arrangement, etc.)
 * a user requires text 50% larger than theme default, then their screen is
 * effectively a lot smaller than its nominal resolution would indicate.
 * If the break points are set in em, suddenly the media queries become equally
 * responsive for all users, without any extra code being required.
 *
 * Testing em break points is just as easy as testing pixels,
 * and it will make more people happier. This is cool. :)
 *
 * Of course, having comments to map em to px for each query is a good idea too.
 */

/* Styles for print media. */

@media print {
	#headerarea {
		display: none;
	}
}

/* Not sure how fussy we should get here,
   Am currently inclined to think that just having break points that correlate
   to 1024, 800, 540 and 480 at standard font size is probably adequate.
   using 100% = 1 em ~= 16px ~= 14pt for our em sizing .. 64em*16px = 1024 etc. */

/* less than 1440 width, drop the menu icons other than profile
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 89em) {
	.icon-menu {
		display: none;
	}

	.icon-menu.i-menu-profile {
		display: inline-block;
	}
}

/* This one does 1024 screens at default font size.
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 64em) {
	.category_boards .board_row {
		grid-template-columns: [bicon] 60px [info] auto [avatar] 60px [latest] 40% [end];
	}

	.category_boards .board_stats, .topic_stats {
		display: none;
	}

	.bbc_img, .elk_video {
		max-width: 100%;
	}

	.elk_previewvideo {
		max-width: 100%;
	}

	.topic_listing > li {
		grid-template-columns: [topic_icon] 50px [topic_info] auto [topic_latest] 350px [topic_moderation] minmax(25px, 75px);
	}

	#unread.topic_listing > li {
		grid-template-columns: [topic_icon] 50px [topic_info] auto [topic_latest] 350px [topic_moderation] 25px;
	}

	.topic_name h4 .new_posts, .new_posts, .require_approval {
		font-size: var(--font12);
		padding: 1px .4em .12em .3em;
	}

	/* Move the info center below the board listing */
	#board_container {
		display: block;
		margin-bottom: 3em;
	}

	#board_container > main {
		display: block;
		width: 100%;
		padding-right: 0;
	}

	#board_container > aside {
		display: flex;
		align-items: stretch;
		flex-wrap: wrap;
		width: auto;
		gap: 25px 10px;
	}

	.ic_block {
		flex: 1 1 250px;
		min-width: 250px;
		max-height: 20em;
	}

	/* Grow any short blocks to height of tallest one in a row */
	.ic_block > ul, .ic_block > div {
		height: 100%;
	}

	.editor_wrapper {
		max-width: 100%;
		margin: 0 5%;
	}
}

/* At approximately 900px we open up the wrapper so the menu can expand
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 56em) {
	.wrapper {
		min-width: 98%;
		--wrapper: 98% !important;
	}
}

/* This one does 800 screens at default font size.
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 50em) {

	#menu_nav {
		position: unset;
	}

	#logobox img {
		max-width: 95%;
	}

	#password_login select {
		display: none;
	}

	/* limit to two lines of them */
	.breadcrumb {
		max-height: 4em;
	}

	/* menu to icons */
	#main_menu .icon-menu {
		display: inline-block;
		width: 45px;
		height: 45px;
		margin: .05em;
		padding: .35em;
		border: 4px solid;
		border-radius: .25em;
	}

	.i-menu-profile::before {
		width: 36px;
		height: 36px;
		transform: translate(-3px, -5px);
	}

	#main_menu .subsections .linklevel1::after, #main_menu .subsections:hover .linklevel1::after {
		display: none;
	}

	#collapse_button, #search_form_button, #search_form_button_close, #search_form_menu {
		transform: translateY(-5px);
	}

	#search_form_menu {
		right: 45px;
	}

	#collapse_button .linklevel1, #search_form_button .linklevel1, #search_form_button_close .linklevel1 {
		width: 44px;
		height: 44px;
		padding: 8px 0 0 0 !important;
	}

	#collapse_button {
		display: none;
	}

	.button_title {
		display: none;
	}

	#main_menu .linklevel1 {
		margin-right: .1em;
		border: 1px solid;
	}

	#main_menu .linklevel1, #main_menu .linklevel1 a {
		margin: 0;
		padding: 0;
	}

	#main_menu .linklevel1 > .pm_indicator {
		display: none;
	}

	#main_menu .linklevel1.active, #main_menu .linklevel1.active:hover {
		border: 1px solid;
	}

	/* board listing */
	.category_boards .board_row {
		grid-template-columns: [bicon] 40px [info] auto [latest] 55% [end];
	}

	.board_avatar {
		display: none;
	}

	.topic_moderation_alt {
		display: none;
	}

	.board_icon {
		width: 30px;
		height: 30px;
	}

	.board_info .moderators, .childboards {
		margin: 0 0 0 4px;
	}

	/* message listing */
	.topic_listing > li {
		grid-template-columns: [topic_icon] 40px [topic_info] auto [topic_latest] 225px [topic_moderation] 40px;
	}

	/* message display */
	.post_wrapper {
		grid-template-columns: [poster] 150px [postarea] minmax(0, auto);
	}

	.poster .poster_online {
		display: none;
	}

	.poster .name {
		padding: 0;
		overflow-wrap: break-word;
	}

	.avatar, .avatar.avatarresize {
		max-width: 50px;
	}

	.poster_avatar a {
		padding: 0;
	}

	.poster .membergroup {
		overflow-wrap: break-word;
	}

	nav > .quickbuttons, menu > .quickbuttons {
		flex-wrap: wrap;
	}

	#forumposts .views_text {
		display: none;
	}

	/* basic form adjustments */
	dd input, dd select, dd textarea {
		width: 85% !important;
		max-width: 85% !important;
	}

	#post_header dd select {
		max-width: 30% !important;
	}

	dd input[type="checkbox"], dd input[type="radio"] {
		display: inline !important;
		width: 1em !important;
	}

	/* search page */
	#search_options {
		width: 90%;
	}

	.search_results_posts .topic_body {
		padding: 0;
	}

	/* our stats page */
	.stats {
		width: 100%;
		margin: 0;
	}

	.stats dt {
		font-weight: bold;
	}

	.statistics .category_header {
		width: 100%;
	}

	/* member list, turn off most columns */
	.mlist li div:nth-child(n+6), .mlist li .website {
		display: none;
	}

	.mlist li div.posts {
		display: table-cell;
		border-right: 1px solid;
	}

	/* Info center */
	#ic_recentposts, #ps_recentposts, #ps_recenttopics {
		font-size: var(--font15);
		width: 100%;
	}

	#ps_recentposts .recentposter {
		display: table-cell;
	}

	/* help popup */
	.popup_container .popup_window {
		width: 90%;
	}

	/* Post add attachment area */
	ul.post_options li {
		width: 33%;
	}

	.statusbar .insertoverlay .range {
		max-width: 90%;
		margin: .1em auto;
	}

	.statusbar .insertoverlay .visualizesize {
		display: block;
		float: none;
		margin: 0 auto;
	}

	.statusbar .insertoverlay .button {
		top: -40px;
		right: 0;
		left: auto;
		width: initial !important;
		border-radius: 4px;
	}

	.statusbar .insertoverlay .text,
	.statusbar .insertoverlay .button {
		display: block;
		margin: .5em auto;
	}

	/* Profile page */
	.profile_content {
		padding: 0;
	}

	.ui-tabs .ui-tabs-panel {
		padding: .5em .5em !important;
	}

	#basicinfo h4 {
		font-size: var(--font14);
	}

	.attachment_block, .attachment {
		margin-right: 0;
	}

	#ps_recentposts td.recenttime, #ps_recentposts th.recenttime {
		display: none;
	}

	/* Playing silly buggers with a sidebar menu option for narrow screens. */
	#main_container {
		position: relative;
		padding: 0 0 0 .8em;
	}

	#menu_sidebar {
		position: absolute;
		z-index: 90;
		left: -10px;
		width: 6px;
		min-height: 500px;
		cursor: pointer;
		border: 1px solid;
		border-radius: 4px;
	}

	#menu_sidebar::before {
		position: absolute;
		top: 50%;
		left: -7px;
		width: 16px;
		height: 16px;
		content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' fill-opacity='1' viewBox='0 0 32 32'%3E%3Cpolygon points='16 0, 16 32, 32 16'/%3E%3C/svg%3E");
		filter: invert(57%) sepia(47%) saturate(608%) hue-rotate(73deg) brightness(95%) contrast(80%);
	}

	#menu_sidebar ul, #menu_sidebar .category_header {
		display: none;
	}

	#menu_sidebar:hover {
		width: 200px;
		padding: 0.8em 1em 1em 0.6em;
	}

	#menu_sidebar:hover ul, #menu_sidebar:hover .category_header {
		display: block;
	}

	/* End playing silly buggers. */
}

/* This one does 540 and smaller screens at default font size.
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 34em) {
	/* Hide top clutter on smaller screens */
	#news, #logobox, .rightheader #logobox, #top_section_notice {
		display: none;
	}

	#forumtitle {
		font-size: var(--font20);
		margin: 0 10px;
	}

	#collapse_button {
		display: none;
	}

	/* General layout considerations */
	#wrapper {
		padding-right: 6px;
		padding-left: 6px;
	}

	#wrapper, .frame {
		width: 100%;
		min-width: 300px;
	}

	.inline {
		padding: 0 .5em;
	}

	#main_content_section {
		padding: 4px 0 0 0;
	}

	#gobottom, #gotop {
		padding: 0.2em 0.25em 0.2em 0.1em;
	}

	#gotop:hover, #gobottom:hover {
		text-decoration: none;
	}

	#message_index_jump_to {
		display: block;
		float: none;
	}

	.forum_category, .content_category {
		border: none;
	}

	select, .input_text, .input_password {
		max-width: 18em;
	}

	.grid20 {
		width: 25%;
	}

	/* Menu Adjustments */
	.linklevel1 {
		white-space: normal;
	}

	.listlevel2.subsections .linklevel2::after {
		content: '';
	}

	.listlevel2.subsections .linklevel2 {
		margin-right: 0;
		margin-left: 0;
	}

	.listlevel2:hover .menulevel3 {
		left: -4px;
	}

	.menulevel3 {
		display: none !important;
	}

	.admin_menu {
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 0;
	}

	.subsections:hover .linklevel1::after {
		content: "";
	}

	/* Button / pages / Navigation adjustments */
	nav.breadcrumb .crumb:not(:first-child):not(:last-child) a {
		width: 6em;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.buttonlist {
		justify-content: space-evenly;
	}

	.buttonlist > li {
		margin: 0;
	}

	.buttonlist > li > a {
		padding: 0 .4em;
	}

	.pagesection .buttonlist li {
		margin-bottom: .25em;
		white-space: nowrap;
	}

	.quickbuttons {
		margin: .5em .5em .4em .2em;
		white-space: nowrap;
	}

	.pagesection .pagelinks {
		margin-bottom: 4px;
	}

	/* Board View */
	.board_row {
		padding: 15px 0 7px 0;
	}

	.board_info .moderators {
		display: none;
	}

	.childboards {
		margin: 0 5px;
	}

	.childboards li:nth-child(n+2)::before {
		content: " - ";
	}

	.board_info, .board_latest {
		margin-bottom: .12em;
	}

	.board_latest {
		padding: 0 6px;
		border-left: 0;
	}

	.board_lastpost, .topic_lastpost {
		min-width: 18em;
	}

	.board_lastpost {
		padding-top: .4em;
	}

	.board_info h3 a {
		font-size: var(--font16);
		overflow-wrap: break-word;
	}

	.topic_name, .topic_starter {
		margin: 0;
	}

	.topic_starter {
		margin-top: 5px;
	}

	.topic_name h4 {
		font-size: var(--font20);
	}

	.topic_name h4 a {
		overflow-wrap: break-word;
	}

	.lastpost_link, .board_lastposter {
		font-size: var(--font15);
	}

	.lastpost_link, .board_lastposter, .board_lasttime {
		white-space: normal;
	}

	/* Topic Listing */
	#unread.topic_listing > li,
	.topic_listing > li {
		grid-template-columns: [topic_icon] 0 [topic_info] auto [topic_latest] 225px [topic_moderation] 10px [end];
		grid-template-rows: [topic_info] auto [topic_latest] auto;
		margin-bottom: .7em;
		border: 1px solid;
	}

	.topic_info {
		overflow: hidden;
		grid-column-start: topic_info;
		grid-column-end: end;
		padding: .5em 0;
	}

	.topic_latest {
		grid-column-start: topic_info;
		grid-column-end: topic_moderation;
		grid-row-start: topic_latest;
		padding: 5px 0;
		border-top: 1px solid;
	}

	.sticky_row .topic_info::before, .locked_row .topic_info::before, .locked_row.sticky_row .topic_info::before {
		margin-right: 6px;
	}

	.topic_icons, .topic_moderation, .linklevel1.button_strip_markselectread {
		display: none;
	}

	/* Topic display */
	#forumposts .nextlinks {
		width: 100%;
		text-align: right;
		white-space: normal;
	}

	#whoisviewing {
		display: none;
	}

	#forumposts .content {
		padding: 5px;
	}

	.generalinfo {
		overflow: hidden;
	}

	.post_wrapper {
		grid-template-columns: [poster] 100px [postarea] minmax(0, auto) [end];
		grid-template-rows: [poster] auto [poastarea] auto;
	}

	.forumposts > aside {
		display: flex;
		grid-column-start: poster;
		grid-column-end: end;
		grid-row-start: poster;
		border-bottom: 1px solid;
	}

	.postarea {
		grid-column-start: poster;
		grid-column-end: end;
		grid-row-start: postarea;
		margin: 0;
	}

	.small_pagelinks {
		display: none;
	}

	#message_index_jump_to.qaction_row {
		width: 100%;
	}

	#topic_icons p {
		display: block;
		float: none;
	}

	/* Separate the name and avatar to opposite sides of the full width grid row */
	ul.poster {
		display: flex;
		flex-direction: row;
	}

	.poster_avatar {
		order: 1;
	}

	.poster .name {
		font-size: var(--font15);
		white-space: nowrap;
	}

	.poster > .subsections {
		order: 2;
		margin-left: auto;
	}

	.poster li.membergroup, .poster .title, .poster .poster_online, .icons img {
		display: none;
	}

	.modified {
		display: none;
	}

	.forumposts {
		border-radius: 3px;
	}

	.forumposts .content {
		margin-bottom: .4em;
	}

	.postarea, .forumtitle {
		padding: .1em .2em;
	}

	.poster .menulevel2 {
		top: calc(100% + 1px);
		right: 0;
		left: auto;
	}

	.poster .listlevel2 {
		width: 8em;
		max-width: 8em;
	}

	.keyinfo h5 {
		padding: .2em 0;
	}

	.signature {
		display: none;
	}

	#moderationbuttons {
		display: block;
	}

	#display_jump_to {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	/* Stats page */
	#popularposts, #popularactivity {
		padding: .4em .1em 0 .1em;
	}

	.ignoreboards {
		width: 100%;
	}

	#list_mentions .listaction {
		display: none;
	}

	#search_options {
		width: 100%;
	}

	#search_form .input_text {
		width: 7em;
	}

	#posting_icons, .table_list .stats, .table_list .lastpost, .table_grid .lastpost {
		display: none;
	}

	/* Post page */
	.post {
		margin: 0 0 0 .25em;
	}

	#postDraftOptions .settings dd {
		width: 40% !important;
	}

	#postDraftOptions .settings dt {
		width: 60% !important;
	}

	.frame {
		min-width: 100%;
		border-radius: 0;
	}

	/* Drag and drop area */
	#postAttachment2 dt {
		width: 100% !important;
	}

	.drop_area .mobile .drop_area_fileselect_text {
		display: inline-block;
		width: 95%;
		padding-top: 1em;
		padding-bottom: 1em;
	}

	.drop_area .mobile {
		display: inline-block;
		width: 80%;
		border: none;
	}

	.drop_area_fileselect {
		height: 3.5em !important;
	}

	.drop_area .desktop {
		display: none;
	}

	.icon_anchor {
		min-width: 0;
	}

	.recentboard, .recentposter {
		display: none;
	}

	/* Profile */
	#basicinfo, #detailedinfo {
		float: none;
		width: 100%;
	}

	.profileblock_left, .profileblock_right {
		float: none;
		overflow: auto;
		width: 100%;
	}

	/* Dont show the quick search options */
	#search_jump_to, .search_controls {
		display: none;
	}

	/* pm listing, hide some to make more room for details */
	.pm_icon, .pm_quickmod, .label_pms {
		display: none;
	}

	.pm_from {
		max-width: 6em;
		text-align: left;
		overflow-wrap: break-word;
	}

	/* Members list */
	.mlist li .website, .mlist li .date_registered {
		display: none;
	}

	/* Who is online listing */
	.online_member {
		font-size: var(--font16);
	}

	.track_ip {
		font-size: var(--font13);
	}

	/* Calendar Don't show the extra months on the left */
	#month_grid {
		display: none;
	}

	/* Notifications list, small avatar, drop some columns */
	.mentionavatar .avatar {
		max-width: 40px;
		max-height: 40px;
	}

	#list_mentions thead, .mention_log_time {
		display: none;
	}

	.bbc_table_container {
		overflow: auto;
		max-width: 100%;
	}
}

/* This one does 480px screens at default font size.
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 30em) {
	#wrapper {
		padding: 0;
	}

	.wrapper {
		min-width: 100%;
		--wrapper: 100% !important;
	}

	/* General layout considerations */
	dt, dd, dd label, .login dt, #advanced_search dt {
		display: block;
		width: 100% !important;
		margin: 0 !important;
		text-align: left;
	}

	dd input, dd select, dd textarea {
		width: 95% !important;
		max-width: 95% !important;
	}

	dd {
		padding-left: 4% !important;
	}

	.content {
		padding: 0.1em 0.1em;
	}

	#confirm_buttons input[type="submit"] {
		height: inherit;
		max-height: none;
		white-space: normal;
	}

	/* Main menu, smaller icons to fit 7 across */
	#main_menu {
		justify-content: space-evenly;
	}

	.listlevel1#button_profile {
		margin-left: initial;
	}

	#main_menu .icon-menu, #main_menu .icon-menu.i-menu-profile {
		width: 41px;
		height: 41px;
	}

	#main_menu .i-menu-profile::before {
		width: 31px;
		height: 31px;
	}

	#main_menu .listlevel2, #main_menu .listlevel3 {
		max-width: 12em !important;
	}

	#main_menu .menulevel2 {
		max-width: 12em;
	}

	/* Other navigation controls */
	.pagesection .buttonlist {
		width: 100%;
	}

	nav > .quickbuttons, menu > .quickbuttons {
		justify-content: space-evenly;
	}

	.quickbuttons .modified {
		white-space: normal;
	}

	.quickbuttons {
		margin: .4em 0;
	}

	/* Board Listing */
	.category_boards .board_row {
		grid-template-columns: [bicon] 40px [info] auto [end];
		grid-template-rows: [primary] auto [latest] auto [children] auto;
	}

	.category_boards .board_info {
		grid-column-start: info;
		grid-column-end: end;
		grid-row-start: primary;
	}

	.category_boards .board_latest {
		grid-column-start: bicon;
		grid-column-end: end;
		grid-row-start: latest;
		margin-top: 1em;
		border-top: 1px solid;
	}

	.category_boards .board_icon {
		grid-column: bicon;
		grid-row-start: primary;
	}

	.board_description {
		display: none;
	}

	.board_info h3 a {
		font-size: var(--font18);
	}

	.lastpost_link > a, .category_boards .board_lastposter {
		display: block;
		overflow: hidden;
		max-width: 90%;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.category_boards .board_lastposter {
		max-width: 85%;
	}

	.childboards li:first-child {
		display: none;
	}

	.childboard_row {
		grid-column-start: bicon;
	}

	.childboards > li {
		margin: 0 2em;
	}

	/* info center */
	#upshrinkHeaderIC .basic_row {
		padding: .5em .2em;
	}

	#ic_recentposts, #ps_recentposts, #ps_recenttopics {
		font-size: var(--font14);
		width: 100%;
	}

	#ic_recentposts td, #ic_recentposts th,
	#ps_recentposts td, #ps_recentposts th, #ps_recenttopics td, #ps_recenttopics th {
		max-width: 1px;
		white-space: nowrap;
	}

	/* Member List */
	.mlist li .group {
		border-right: 1px solid;
	}

	.mlist li div.posts, .mlist li div.status {
		display: none;
	}

	/* Display Topic */
	.shortcuts {
		display: none;
	}

	/* Posting */
	ul.post_options li {
		width: 50%;
	}

	#postAttachment2 dd {
		margin: .13em 1px;
	}

	#postMoreOptions, #postAttachment2 {
		padding: .25em;
	}

	.progress_tracker {
		padding-left: 0;
	}

	.statusbar .info {
		width: 50%;
	}

	.statusbar .ila_container {
		display: inline-block;
	}

	.ila_container .icon.share {
		width: 2em;
	}

	.postattach_thumb img {
		width: 75px;
		height: 50px;
	}

	.statusbar .insertoverlay {
		margin-left: -9em;
	}

	.statusbar .insertoverlay .ila_container {
		position: relative;
	}

	.statusbar .insertoverlay label {
		padding-top: 0.5em;
	}

	.statusbar .insertoverlay .ila_container input {
		display: block;
		float: none;
	}

	/* Forum Stats */
	.statsbar {
		padding-left: 0 !important;
	}

	select.qaction {
		max-width: 130px;
	}

	/* Mobile Menu for moderation */
	.hide_30.hamburger_30_target #moderationbuttons_strip {
		visibility: hidden;
		flex-wrap: nowrap;
		width: 0;
		transition: 200ms all ease-in;
		transform: rotatey(-90deg);
		/* Rotated y is has zero width, but flex wraps anyway, this stops that */
		transform-origin: top left;
	}

	#moderationbuttons {
		display: flex;
		flex-wrap: wrap;
	}

	.icon.hamburger_30 {
		display: initial;
		cursor: pointer;
	}

	.icon.hamburger_30::before {
		margin: 0.2em;
	}

	/* Hide the hamburger on click */
	.icon.hamburger_30.visible {
		display: none;
	}

	/* show the moderation buttons on hamburger click */
	.hide_30.hamburger_30_target.visible #moderationbuttons_strip {
		visibility: visible;
		flex-wrap: wrap;
		width: 100%;
		transform: rotatey(0deg);
		transform-origin: top center;
	}

	/* Recent Posts */
	#topic_summary .keyinfo h5 {
		font-size: var(--font15);
		display: table-cell;
		float: none;
		width: 100%;
		vertical-align: middle;
	}

	.views_text, .nextlinks {
		display: none !important;
	}

	/* Who is online listing, drop table view */
	.whos_online dt {
		display: none;
	}

	.whos_online dd, .whos_online dd div {
		display: block;
	}

	.whos_online dd div {
		border-top: none !important;
		border-bottom: none !important;
	}

	.whos_online dd:nth-child(even), .whos_online dd:nth-child(odd) {
		margin-top: 1px;
		border-top: 1px solid;
	}

	.track_ip {
		float: right;
	}

}

/* This one does 320px screens at default font size.
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 20em) {
	.icon-menu {
		width: 1.55em;
		height: 1.55em;
	}

	.icon-menu.i-menu-profile {
		width: 1.55em;
		height: 1.55em;
	}

	.i-menu-profile::before {
		width: 2em;
		height: 2em;
	}
}