/* INTRODUCTION
 * This is the Lazy Days theme.
 * This file contains essential layout code only.
 * Colors, gradients, images, etc. are in _variantname.css.
 *
 * All theme variants depend on this layout code for stability.
 * It is better to copy code to a variant CSS file for testing.
 * -------------------------------------------------------
 * $CONTENTS - still a bit WIP. @todo
 *
 *		$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, and message 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.
 *
 *		$PROFILE.............The profile areas.
 *		$PERSONAL............The personal messages (PM) areas.
 *		$CALENDAR............Wombats (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.
 * -------------------------------------------------------
 */
/* -------------------------------------------------------
 *	$GENERAL
 * -------------------------------------------------------
 * Put this here to make it easy to find.
 * Width control for top bar, header, main content and footer content.
 */
.wrapper {
	width: 95%;
	/* Next controls forum width, when it is not set in admin. */
	max-width: 150em;
	/* 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. */
	margin: 0 auto;
	/* Next is just for some testing. */
	/*min-width: 100%;*/
}

/* -------------------------------------------------------
 *	$GENERAL
 * -------------------------------------------------------
 */
/* 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;
}

html {
	overflow-y: scroll;
}

@font-face {
	font-family: "Open Sans";
	font-weight: 400;
	font-style: normal;
	src: local("Open Sans"), local("OpenSans");
}

@font-face {
	font-family: "Open Sans";
	font-weight: 600;
	font-style: normal;
	src: local("Open Sans Semibold"), local("OpenSans-Semibold");
}

@font-face {
	font-family: "Open Sans";
	font-weight: 700;
	font-style: normal;
	src: local("Open Sans Bold"), local("OpenSans-Bold");
}

html, body {
	margin: 0;
	padding: 0;
}

body, input, button, select, textarea, .editor {
	/* Set a font-size that will look the mostly the same in all browsers.
	 * 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)
	 * this results in a base 14pt and pt to em translation approx as so
	 * 9 - .643, 10 - .714, 11 - .786, 12 - .857, 13 - .929, 14 - 1, 15 - 1.071, 16 - 1.143
	 * 17 - 1.214, 18 - 1.286, 19 - 1.357, 20 - 1.429, 21 - 1.5, 22 - 1.571, 23 - 1.643
	 * 24 - 1.714, 25 - 1.786, 26 - 1.857, 27 - 1.929, 28 - 2, 29 - 2.071
	 */
	font: 87.5%/150% "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Droid Sans", "Helvetica Neue", "Trebuchet MS", Arial, sans-serif;
}

legend {
	font-size: 1.071em;
	margin-left: 15px;
	padding: 0 0 2px 20px;
	cursor: pointer;
}

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

/* Global box sizing, for stabilising fluid layouts.
 * IMPORTANT: Do not declare div here (borks jQuery menus).
 * Default most elements to zero padding and margin.
 * 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 {
	font-size: 1em;
	font-weight: normal;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Fieldsets are used to group elements.
 * @todo - Can we do this by class? What about default styling? Needed?
 * Declaring as overflow: auto; is probably a good idea.
 */
fieldset {
	overflow: auto;
	margin: 5px 0;
	padding: 6px;
	border: 1px solid transparent;
	border-radius: 0;
}

/* Specific box-sizing declarations */
.wrapper, div.content, .category_header, .generic_list_wrapper, #description_board,
.description, .information, .successbox, .warningbox, .well,
.submitbutton, .generalinfo, .topic_stats, .jump_to_header,
#popularposts, #popularactivity,
.grid8, .grid17, .grid20, .grid25, .grid30, .grid33, .grid50 {
	box-sizing: border-box;
}

#upper_section {
	position: relative;
}

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

.quickbuttons: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;
}

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

/* 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.
 *
 * ALSO: This is still not quite pixel perfect everywhere for all browsers,
 * in particular not for Internet Explorer. They can live with it.
 *
 *	.button_submit - covers input[type=submit], input[type=button],
 *	                 button[type=submit] and button[type=button]
 *	.linkbutton    - covers links, to make them look like a submit button.
 *	.button_reset  - covers input[type=reset] and button[type=reset]
 *	.input_check   - covers input[type=checkbox]
 *	.input_radio   - covers input[type=radio]
 *	.input_text    - covers input[type=text]
 *	.input_file    - covers input[type=file]
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
	padding: 0;
	border: 0;
}

/* The following is necessary. */
textarea, .editor {
	font-size: 1em;
	border-radius: 4px;
}

.sceditor-container {
	margin: 0 0 6px 0;
}

/* Declarations for inputs, selects and buttons */
input, .input_text, button, select {
	font-size: 1em;
	height: 2em;
	min-height: 2em;
	max-height: 2em;
	padding: 0 6px;
	vertical-align: middle;
}

input, button, select, textarea, .editor {
	border: 1px solid;
	border-radius: 0;
}

select {
	overflow: hidden;
	max-width: 95%;
	padding: 0 0 0 2px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

input, .input_text, select, button {
	font-size: 1em;
}

select option {
	padding: 0 4px;
}

/* Special form elements need to be addressed */
select[size],
input[type="file"] {
	overflow-y: auto;
	height: auto;
	max-height: none;
}

.select_multiple {
	height: auto;
	min-height: 10em;
}

/* The OpenID login form */
.openid_login {
	padding-left: 20px;
}

input[type="number"] {
	padding: 0 0 0 6px;
}

/* No borders around checkboxes or radio buttons, and middle aligned. */
input[type="checkbox"], input[type="radio"] {
	font-size: 1em;
	font-weight: normal;
	box-sizing: border-box;
	margin: -2px 2px 0;
	padding: 0;
	vertical-align: middle;
	border: none;
	background: none;
}

/* Common submit button styling. */
input[type="submit"], button[type="submit"], input[type="button"],
/* Anchors styled to look like buttons. */
/* These have standard body text size. Can be chained with smalltext class. */
.linkbutton:link, .linkbutton_right:link, .linkbutton_left:link,
.linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited {
	display: inline-block;
	padding: 0 .35em;
}

input[type="submit"], .drop_area_fileselect_text, .drop_area .mobile, button[type="submit"], input[type="button"],
/* Anchors styled to look like buttons. */
/* These have standard body text size. Can be chained with smalltext class. */
.linkbutton:link, .linkbutton_right:link, .linkbutton_left:link,
.linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited {
	border: 1px solid;
	border-radius: 0;
}

.left_submit, .linkbutton_left {
	float: left;
}

.right_submit, .linkbutton_right {
	float: right;
}

/* Hover effects. */
input[type="submit"]:hover, button[type="submit"]:hover, input[type="button"]:hover,
.linkbutton:hover, .linkbutton_right:hover, .linkbutton_left: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;
}

.linkbutton:link, .linkbutton_right:link, .linkbutton_left:link,
.linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited {
	font-size: 1em;
	line-height: 1.893em;
}

/* Use new class that is defined to suit, and with a sensible name. */
.submitbutton {
	clear: both;
	overflow: auto;
	padding: 6px 0;
	text-align: right;
}

.submitbutton input[type="submit"],
.submitbutton input[type="button"] {
	margin-top: -0.05em;
	margin-right: 0.1em;
	margin-left: 0.1em;
	padding: 0 6px;
}

/* IE has its own padding needs */
#ie select, #ie9 select {
	padding: 0 0 0 6px;
}

/* the new "button"
 * @todo - Might add extra fallbacks. Possibly monospace.
 * @todo - Also, look at deprecating spans here.
 */
.new_posts, .require_approval {
	font-size: .714em;
	font-weight: bold;
	padding: 2px 6px;
	vertical-align: text-top;
	border-radius: 2px
}

require_approval {
	border-radius: 0;
}

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

/* 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;
}

.childboards .new_posts {
	font-size: 0.95em;
	padding: 1px 3px 2px;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr {
	height: 1px;
	margin: 12px 0;
	border-top: 1px solid;
	border-left: 0;
}

strong {
	font-weight: bold;
}

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

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

/* Some grid helpers for tables and divs */
.grid8 {
	width: 8%;
}

.grid17 {
	width: 17%;
}

.grid20 {
	width: 20%;
}

.grid25 {
	width: 25%;
}

.grid30 {
	width: 30%;
}

.grid33 {
	width: 33%;
}

.grid50 {
	width: 49.5% !important;
}

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

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

/* @todo - Test this everywhere. */
.standard_category {
	clear: both;
	margin: 1em 0 0 0;
	border-radius: 0;
}

/* @todo - Test this everywhere. */
.standard_category > .content {
	overflow: auto;
	margin: 4px 0 0 0;
}

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

.floatleft {
	float: left;
}

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

.flow_auto {
	overflow: auto;
}

.flow_hidden {
	overflow: hidden;
}

.clear {
	clear: both;
}

.clear_left {
	clear: left;
}

.clear_right {
	clear: right;
}

/* Default font sizes (defined in em, so IE can resize): small (12px default),
 * normal (14px default), and large (16px default).
 * Since these are purely presentational classes, they should be used sparingly.
 */
.smalldescription, .smalldescription th, .smalltext, .smalltext th {
	font-size: 0.857em;
}

.largetext {
	font-size: 1.286em;
}

.centertext {
	text-align: center;
}

.righttext {
	text-align: right;
}

.lefttext {
	text-align: left;
}

.double_height {
	line-height: 2em;
}

.centericon {
	vertical-align: middle;
}

.nowrap {
	white-space: nowrap;
}

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

/* Styles for main headers. */
.category_header, .forum_category .category_header,
.forumposts .category_header, .content_category .category_header {
	font-size: 1.143em;
	padding: 8px 10px;
	border: 1px solid;
	border-top: none;
	border-bottom: none;
	border-radius: 4px;
}

/* A bit taller on board index and a few other areas */
main > h2.category_header, main > header.category_header {
	padding: 12px 10px !important;
}

/* Styles for subsection headers. @todo */
.secondary_header {
	font-size: 1.143em;
	line-height: 1.8em;
	margin: 12px 0 0 0;
	padding: 1px 10px 1px;
	border: 1px solid;
}

/* Category Header icons as sprites, lots available to custom themes to use */
.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;
}

h2 a.collapse {
	float: right;
	margin: 2px 4px -2px 0;
}

/* Upshrink image in the general category headers */
#category_toggle, #category_toggle_more, #upshrink_header, .package_toggle {
	position: relative;
	display: block;
	float: right;
	overflow: hidden;
	padding: 0 16px;
	border-radius: 0;
}

#category_toggle span, #category_toggle_more span, #upshrink_header span, .package_toggle span {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -58px;
	padding: 47px 50px;
	background-image: url(../images/_grey/expcol.png);
	background-repeat: no-repeat;
}

/* Upshrink image in the page top for the header collapse */
#collapse_button .linklevel1 {
	position: relative;
	display: block;
	overflow: hidden;
	margin-right: 1px;
	padding: 0;
	border-radius: 0;
}

.collapse {
	background-position: 0 -25px;
}

.expand {
	background-position: -116px -25px;
}

/* General code for generic divs. Should make them behave. */
.content {
	padding: 0.2em 1em;
}

.content p {
	margin: 0 0 6px 0;
}

/* Other highlighted text, such as search results. */
.highlight {
	font-size: 1.071em;
	font-weight: bold;
}

/* above/below create list items */
.additional_row {
	padding: 6px 0;
}

.generic_list_wrapper .additional_row > a.linkbutton {
	margin: 5px 0 0;
}

.generic_menu {
	display: block;
	padding: 5px 0 0;
}

/* The generic wrapper thingy. Used by generic list template */
.generic_list_wrapper {
	overflow: auto;
	margin: 0;
	padding: 8px 8px 16px 8px;
	border: 1px solid;
	border-radius: 0;
}

.generic_list_wrapper .additional_row {
	margin: 0;
	padding: 10px 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: 6px 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;
}

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

.auto_suggest_item {
	padding: 1px 4px;
}

.auto_suggest_item_hover {
	padding: 1px 4px;
	cursor: pointer;
}

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

/* -------------------------------------------------------
 *	$BBC
 * -------------------------------------------------------
 */
/* The "Quote:" and "Code:" header parts... */
.codeheader, .quoteheader {
	font-size: 0.857em;
	font-weight: bold;
	margin: 6px 0 0 0;
	padding: 4px 6px 2px 6px;
	border: 1px solid;
	border-bottom: none;
}

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

/* Use demi bold font weight for some key areas */
.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-tabs .ui-tabs-nav .ui-state-active a, .ui-tabs .ui-tabs-nav .ui-state-active,
.ui-dialog .ui-dialog-titlebar,
#creator dt strong, .settings label,
.popup_heading {
	font-family: "Open Sans", "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;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* 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: auto;
	max-height: var(--quote_height);
}

/* 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%;
	min-height: 8em;
	margin: 0 1px 1px 1px;
	padding-top: 6em;
	cursor: pointer;
	text-align: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type=checkbox].quote-show-more:hover {
	border: none;
}

/* The read moar, with the 100% width clicking anywhere in the quote base will work
   note content: "More" is defined in themes/default/Theme.php controller for localization */
input[type=checkbox].quote-show-more:after {
	font-size: 1.1em;
	font-weight: 600;
}

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

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

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

/* Extra code block styling. */
.bbc_code {
	font-family: "DejaVu Sans Mono", Monaco, Consolas, monospace;
	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;
}

/* Stop em compounding when elements are nested. */
.bbc_quote .bbc_quote, .bbc_quote .bbc_code,
.bbc_quote .codeheader, .bbc_quote .quoteheader,
	/* And for quote inside small text areas, like the topic summary. */
#topic_summary .bbc_quote, #topic_summary .bbc_code,
#topic_summary .codeheader, #topic_summary .quoteheader {
	font-size: 1em;
}

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

/* @todo - Are all these "inherit" declarations really necessary? */
.bbc_color a {
	color: inherit;
}

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

.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_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;
	border-right: 1px solid;
	border-bottom: 1px solid;
}

.inner > .bbc_table_container > .bbc_table th,
.messageContent > .bbc_table_container > .bbc_table th {
	text-align: center;
	border-right: 1px solid;
	border-bottom: 1px solid;
}

.bbc_u {
	text-decoration: underline;
}

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

/* Everything is same except HTML5 valid */
.bbc_tt {
	font-family: "DejaVu Sans Mono", Monaco, "Lucida Console", "Courier New", monospace;
}

.bbc_pre {
	font-family: "DejaVu Sans Mono", Monaco, Consolas, monospace;
	overflow: auto;
}

.bbc_footnotes {
	font-size: small;
	overflow: auto;
	margin-top: 10px;
	padding: 4px 8px 4px 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: 1.357em;
}

/* 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;
}

.meaction:before {
	font-size: 1.714em;
	line-height: 1em;
	content: "\270c";
}

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

.spoilerheader {
	font-size: 0.857em;
	font-weight: bold;
	cursor: pointer;
}

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

#ajax_in_progress a {
	text-decoration: underline;
}

#quick_edit_body_container {
	width: 90%;
}

#quick_edit_body_container .editor {
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 10px;
	padding: 2px;
}

#quick_edit_body_container .input_text {
	width: 85%;
}

/* -------------------------------------------------------
 *	$MAIN.
 * -------------------------------------------------------
 */
/* The top bar. */
#top_section {
	margin: 0;
	padding: 10px 5px;
	border-top: 4px solid;
	border-bottom: none;
}

#top_section_notice {
	font-weight: 700;
	line-height: 1.286em;
	float: left;
	min-width: 38%;
	margin: 0;
	padding: 14px 8px 0 8px;
}

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

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

.top_button {
	line-height: 1.286em;
	max-height: 1.357em;
	margin-left: 1px;
	padding: 3px;
	vertical-align: top;
}

.top_button img {
	padding: 2px;
	vertical-align: middle;
}

#password_login {
	display: inline-block;
	vertical-align: middle;
	-webkit-appearance: caps-lock-indicator;
}

#search_form {
	position: absolute;
	top: 30px;
	right: 0;
	display: block;
	width: 200px;
	margin: 0 10px;
	padding: 5px 0 5px;
	border-radius: 0;
}

#search_form .controls {
	margin: 5px 0;
	padding: 5px;
	border-radius: 0;
}

#search_form.active {
	z-index: 100;
	padding: 5px;
}

#search_form .input_text {
	width: 100%;
	border-radius: 0;
}

#search_form .input_text.search_nd {
	font-size: 16px;
	width: 70%;
	min-height: 2em;
	border-radius: 4px;
}

#search_form button {
	font-size: 16px;
	min-height: 2em;
	border-radius: 4px;
}

#search_form select {
	width: 130px;
	border: 1px solid;
	border-right: none;
}

#search_form select:focus {
	border-right: none;
}

#controls {
	padding: 6px 6px 4px 0;
}

/* The logo and slogan. */
#header {
	height: 65px;
	padding: 15px 2px 0 2px;
}

/* The main title. */
#forumtitle {
	font-size: 2.357em;
	line-height: 1.455em;
	float: left;
	padding: 10px 0 0 10px;
}

.centerheader #forumtitle {
	display: none;
}

.rightheader #forumtitle {
	float: right;
}

/* Float these items to the right. @todo - Simplify. */
#logobox {
	max-width: 70%;
}

#siteslogan {
	font-size: 1.15em;
	display: block;
	clear: both;
}

/* Tweak the logo */
#logo {
	float: left;
	margin: 0 8px 0 0;
	padding: 0;
}

/* Main forum area. */
#wrapper {
	margin-top: 10px;
	padding: 0;
	border: 1px solid;
	border-radius: 4px;
}

/* The user info, news, etc.*/
#news {
	font-size: 0.929em;
	clear: both;
	margin: 0 1em;
	padding: 0 0 1em 0;
	vertical-align: top;
	border-radius: 4px;
}

#news > h2 {
	float: left;
	margin: 0.5em 1em 0 0;
}

#news > h2:before {
	font-family: "FontAwesome";
	font-size: 3em;
	content: "\f05a";
}

#news .bbc_link {
	display: inline;
}

#news_line, #news {
	overflow: auto;
	height: 65px;
	min-height: 65px;
	padding: 6px 12px;
	resize: vertical;
	border: 1px solid;
}

#elkFadeScroller {
	margin-left: 4em;
}

/* The login form. */
#guest_form {
	padding: 0 0 8px 0;
}

#guest_form input, #guest_form select {
	font-size: 1.071em;
	margin: 0 0 8px 0;
}

.modtask {
	margin: 1em 0 0 0;
}

.modtask a {
	font-weight: bold;
}

/* The content section */
#main_content_section {
	min-height: 180px;
	padding: .5em 1em;
}

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

#footer_section .wrapper {
	padding: 20px 5px;
}

#footer_section p, #footer_section a {
	font-size: 0.857em;
}

#footer_section li {
	display: inline;
	padding-right: 5px;
}

#footer_section .copyright {
	font-size: 0.857em;
	display: inline;
	visibility: visible;
}

#footer_section .rssfeeds {
	float: right;
	width: 21px;
	margin: auto;
	padding-top: 2px;
	text-align: center;
	border-radius: 0;
}

#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. */
#menu_wrapper {
	padding: 0 0 4px;
}

#menu_nav {
	height: 3em;
	padding: 4px;
	border-radius: 3px 3px 0 0;
}

#main_menu {
	position: relative;
	height: 3em;
}

/* Wrapper for primary admin/profile/etc menus. */
.admin_menu {
	padding: 0 3px;
}

/* Wrapper for secondary admin/profile/etc menus. */
#adm_submenus {
	overflow: auto;
	padding: 0 3px;
}

/* Level 1 button positioning. */
.listlevel1 {
	font-size: 1em;
	line-height: 2.9em;
	position: relative;
	display: inline-block;
	margin: 0 0.3em 0 0;
	text-transform: uppercase;
}

.poster .listlevel1 {
	line-height: 1.667em;
	padding: 0;
}

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

.listlevel1#collapse_button, .listlevel1#button_profile {
	float: right;
}

.listlevel1#button_profile img {
	position: relative;
	top: 4px;
	max-width: 1.5em;
	max-height: 1.5em;
	margin: 0 0.6em 0 0;
}

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

.listlevel1#button_profile .linklevel1 {
	min-width: 5em;
}

/* Levels 2 and 3: drop menu wrapper. */
.menulevel2, .menulevel3 {
	line-height: 2em;
	position: absolute;
	z-index: 90;
	top: 100%;
	left: -9999px;
	width: 20em;
	margin: 0;
	padding: 0.6em;
	border: 1px solid;
	border-radius: 0;
}

/* Level 3: drop menu positioning. */
.menulevel3 {
	margin: -2em 0 0 16em;
}

/* Reposition Level 2 drop menu as visible on hover. */
.listlevel1:hover .menulevel2, .listlevel1.sfhover .menulevel2 {
	left: 0;
}

.listlevel1#button_profile:hover .menulevel2, .listlevel1#button_profile.sfhover .menulevel2 {
	right: 0;
	left: auto;
}

/* Hiding Level 3 drop menu off hover. */
.listlevel1:hover .menulevel3, .listlevel1.sfhover .menulevel3 {
	left: -9999px;
}

/* Reposition Level 3 drop menu as visible on hover. */
.listlevel2:hover .menulevel3, .listlevel2.sfhover .menulevel3 {
	left: -14px;
}

/* Level 2 and 3 button positioning.
 * 1px vertical padding gives slight gap between buttons.
 */
.listlevel2, .listlevel3 {
	position: relative;
	float: none;
	width: 19em;
	padding: 0;
}

/* Levels 2 and 3 drop menus: link or button. */
.linklevel2, .linklevel3 {
	position: relative;
	display: block;
	padding: 1px 7px;
}

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

#menu_sidebar {
	float: left;
	width: 200px;
	padding: 0 10px 1em 0;
}

#menu_sidebar .sidebar_menu {
	padding: 4px 0 9px 0;
}

/* Same styling for Level 1 and Level 2. */
#menu_sidebar .listlevel1 {
	float: none;
	padding: 1px 0;
}

#menu_sidebar .listlevel1:hover .menulevel2,
#menu_sidebar .listlevel1.sfhover .menulevel2 {
	top: 0.35em;
	left: 170px;
}

#menu_sidebar .pm_indicator {
	font-size: 0.6em;
	font-weight: normal;
}

/* -------------------------------------------------------
 *	$LINKTREE
 * -------------------------------------------------------
 */
/* The navigation list (i.e. linktree, breadcrumbs) */
.navigate_section {
	clear: both;
	overflow: hidden;
	margin: 1em 1em 0 1em;
	padding-right: 1em;
	border: 1px solid;
	border-radius: 4px;
}

#main_content_section .navigate_section {
	margin: 1em 0 0.5em 0;
}

.linktree {
	font-size: 1em;
	line-height: 2em;
	position: relative;
	display: inline-block;
	float: left;
	padding: 0 0.5em 0 2em;
	white-space: nowrap;
	border: none;
	border-bottom: 1px solid;
}

.linktree:first-child a {
	height: 2em;
	padding: 0 6px;
}

.linktree:last-child {
	max-width: 25em;
}

.linktree a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.linktree:last-child > span > a {
	display: inline;
}

.linktree:last-child > span {
	display: block;
	overflow: hidden;
	max-width: 25em;
	text-overflow: ellipsis;
}

.linktree a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Nifty indicators. */
.linktree:after {
	position: absolute;
	z-index: 1;
	top: 0;
	right: -0.98em;
	display: inline-block;
	width: 0;
	height: 0;
	/* Scale the squares diagonal to = the line-height */
	content: "";
	border-width: 1em 0 1em 1.01em;
	border-style: solid;
}

.linktree:first-child {
	font-weight: bold;
	padding-left: 1em;
}

.linktree:hover a, .linktree > a:hover,
.linktree:last-child, .linktree:last-child > a,
.linktree:last-child > a:hover, .linktree:last-child strong {
	text-decoration: none;
}

/* -------------------------------------------------------
 *	$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 {
	font-size: 1em;
	padding: 5px 5px 0 5px;
}

.buttonlist > li {
	float: left;
	margin: 0 0 0 4px;
	text-transform: uppercase;
	border: 1px solid;
	border-radius: 0;
}

/* @todo - Save code by amalgamating common button background declarations. */
.buttonlist li a {
	display: block;
}

.icon.hamburger_30, .fa.hamburger_30 {
	display: none;
}

/* The quick buttons. */
.quickbuttons {
	margin: 8px 0 6px 0;
	padding-top: .5em;
	text-align: right;
}

nav > .quickbuttons {
	clear: both;
}

.quickbuttons li {
	white-space: nowrap;
}

/* Follow ups and topic summary need it a bit different. */
.follow_ups, #topic_summary .quickbuttons {
	float: right;
	margin: -7px 0 0 7px;
}

/* Most of them. */
.quickbuttons .listlevel1 {
	font-size: 0.857em;
	position: relative;
	float: right;
	margin: 2px 0;
	padding: 0;
}

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

.follow_ups .listlevel1, #topic_summary .quickbuttons .listlevel1, .quickbuttons .listlevel1, #sort_by li.listlevel1 {
	font-size: 0.929em;
	line-height: 2.5em;
	text-transform: none;
}

.quickbuttons .modified {
	float: left;
	padding: 0 0 0 6px;
}

.quickbuttons .inline_mod_check, .quickbuttons .quickmod_check {
	line-height: 26px;
	margin: 2px 0 0 0;
	padding: 0 6px !important;
	border: 1px solid;
}

.quickbuttons .inline_mod_check > .input_check {
	margin: 0;
}

/* @todo - Save code by amalgamating common button background declarations. */
.quickbuttons .linklevel1 {
	line-height: 2em;
	float: left;
	margin: 0;
	padding: 1px 6px 0 22px;
	cursor: pointer;
	border: 1px solid;
	border-radius: 0;
}

/* @todo - Check with js disabled after sorting most of the other crud.
 * Note: The next declarations are for keyboard access with js disabled.
 */
/*.quickbuttons .linklevel1:focus {
	margin: 0 -9910px 0 9910px;
}*/
/* Cancel for hover and/or js access. */
/*.quickbuttons .listlevel1:hover .linklevel1:focus, .quickbuttons .listlevel1.sfhover .linklevel1:focus {
	margin: 0;
}*/
.quickbuttons .linklevel1:before, .quickbuttons .linklevel2:before {
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 3px;
	display: block;
	width: 18px;
	height: 24px;
	margin-top: -12px;
	content: "";
}

.quickmod_check {
	left: 3px;
}

/* The rest of them. */
.quickbuttons .linklevel1:before, .quickbuttons .linklevel2:before {
	background-image: url(../images/theme/quickbuttons.png);
	/* A rare example of where longhand background declarations work well. */
	background-repeat: no-repeat;
}

/* 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;
}

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

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

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

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

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

/* Radius the ends of the first/last button. */
.quickbuttons li:last-child, .quickbuttons li:last-child a {
	border-radius: 0;
}

.quickbuttons li:first-child, .quickbuttons li:first-child a {
	border-radius: 0;
}

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

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

/* "More..." gets custom padding (no icon). */
.linklevel1.post_options,
/* Follow ups gets custom padding (no icon). */
.follow_ups .linklevel1 {
	padding: 1px 6px 0 6px;
}

/* Quickbutton and follow ups drop menus. */
.quickbuttons .menulevel2, .follow_ups .menulevel2 {
	width: auto;
	padding: 0.5em;
	text-align: left;
}

.quickbuttons .listlevel1:hover .menulevel2,
.quickbuttons .listlevel1.sfhover .menulevel2 {
	right: -1px;
	left: auto;
}

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

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

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

.quickbuttons .listlevel2 {
	width: 12em;
}

.follow_ups .listlevel2 {
	width: 20em;
}

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

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

.quick_quote_button {
	position: absolute;
	z-index: 10000;
}

/* -------------------------------------------------------
 *	$PAGELINKS
 * -------------------------------------------------------
 */
/* The page navigation area. */
.pagesection {
	clear: both;
	overflow: hidden;
	padding: 4px;
}

.pagesection .floatright input, .pagesection .floatright select {
	margin-top: 3px;
}

.category_header .pagesection .floatright input, .pagesection .floatright select {
	margin-top: 0;
}

/* Necessary for some browsers to keep the pages all on the same line */
.linavPages {
	float: left;
	margin: 0 4px 0 0;
}

.selectbox, .pagelinks {
	font-size: 0.857em;
	margin: 5px 5px 0;
}

/* @todo - Styling will need a bit more thought here.
 * Do not use display: inline-block;
 * Why not? Because it has a well-known quirk. It's white-space-dependent.
 * http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
 * Specifically, the section titled "The enormous drawback".
 */
/* @todo - Save code by amalgamating common button background declarations. */
.pagelinks .navPages {
	display: block;
	float: left;
	padding: 1px 5px;
	border: 1px solid;
}

.pagelinks .current_page {
	font-weight: bolder;
	display: block;
	float: left;
	padding: 1px 6px;
}

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

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

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

.expand_pages {
	font-weight: bold;
	display: block;
	float: left;
	min-width: 1.5em;
	padding: 2px 0;
	cursor: pointer;
	text-align: center;
}

.next_page, .previous_page {
	padding: 0 2px;
	text-transform: capitalize;
}

/* @todo - Fix for all templates. */
.small_pagelinks {
	margin-top: -2px;
	margin-left: 1em;
}

.small_pagelinks li {
	float: left;
}

.small_pagelinks li {
	display: inline;
}

.small_pagelinks .navPages {
	font-size: .857em;
	display: block;
	float: left;
	padding: 2px 3px 0 3px;
}

.small_pagelinks li a.navPages {
	line-height: 1.5em;
	margin: 2px 2px 0;
	padding: 0 4px;
}

#expanded_pages_container {
	position: absolute;
}

#expanded_pages_container, #expanded_pages {
	overflow: hidden;
}

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

#pages_scroll_left {
	left: 0;
}

#pages_scroll_right {
	right: 0;
}

/* Globally accessible top/bottom links. */
#gotop, #gobottom {
	font-size: 2em;
	font-weight: bold;
	position: fixed;
	z-index: 9;
	bottom: 50%;
	left: 0;
	height: 1.5em;
	padding: 1.286em 0.1em 0 0.1em;
	-ms-transform: translateZ(0);
	-webkit-transform: translateZ(0);
	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%;
	padding: 0.8em 0.1em 0.5em 0.1em;
	border-top: none;
	border-radius: 0 0 20px 0;
}

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

/* Skip navigation link. */
#top {
	font-weight: bold;
	position: absolute;
	z-index: 200;
	top: -10em;
	left: 3em;
	padding: 1em 2em;
	transition: top .5s ease-out 0s, background 1s linear 0s;
	border: 4px solid;
	border-radius: 0;
	background: none repeat scroll 0 0 #FFFFFF;
}

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

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

.table_head > th {
	font-size: 1em;
	font-weight: bold;
	padding: 5px 8px;
	text-align: left;
	border-top: 2px solid;
	border-bottom: 2px solid;
}

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

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

.table_grid textarea {
	width: 100%;
}

.table_grid .statsbar div {
	display: none;
}

.table_grid textarea {
	width: 100%;
}

.sort_by_item .sort, .sort {
	margin: 0 0 -4px 4px;
}

/* 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 10px 0;
	padding: 0;
}

.settings dt {
	float: left;
	clear: both;
	width: 40%;
	margin: 0 0 10px 4px;
	padding: 0;
}

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

/* I'm a tad leary of these setting new margins, but this line is here to compress
 * listings in fieldset, like a permissions radio listing, from taking up excess space
 */
.settings dd > fieldset dd, .settings dd > fieldset dt {
	margin: 0;
}

.settings img {
	margin: 0 10px 0 0;
	vertical-align: middle;
}

/* help icons */
.settings dt a img {
	position: relative;
	vertical-align: top;
}

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

.settings label {
	vertical-align: top;
}

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

/* -------------------------------------------------------
 *	$BOARDS
 * -------------------------------------------------------
 */
/* The small stats, under upper linktree. */
#index_common_stats {
	font-size: 0.857em;
	margin: 0 8px 6px 8px;
}

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

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

.category_boards, .board_row, .childboard_row {
	margin: 0;
}

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

.board_row {
	position: relative;
	display: table;
	width: 100%;
	padding: 14px 0 11px 0;
	table-layout: fixed;
}

.board_row.parent_board {
	border-bottom: none;
}

.board_row_contain {
	padding-right: 170px;
}

.childboard_row {
	margin: 0;
	border-top: none;
}

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

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

.board_info, .board_latest {
	font-size: 1.071em;
	display: table-cell;
	padding: 0 8px;
	vertical-align: middle;
}

.board_latest {
	width: 315px;
	padding: 0 14px;
	border-left: 1px solid;
}

.icon_anchor {
	display: block;
	float: left;
	min-width: 50px;
	padding: 2px 6px 0 0;
	text-align: center;
}

.board_name {
	font-size: 1.143em;
	padding: 0 0 1px 56px;
}

.board_info .board_description, .board_info .moderators {
	margin: 0 0 0 56px;
}

.moderators {
	font-size: 0.929em;
}

.board_stats {
	position: absolute;
	top: 50%;
	right: 355px;
	float: right;
	width: 170px;
	margin-top: -2em;
}

.board_stats > ul > li {
	font-size: 1.143em;
	float: left;
	padding: .5em 1em;
	text-align: center;
	text-transform: uppercase;
}

.multi_column {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 20px;
	-moz-column-gap: 20px;
	column-gap: 20px;
}

.board_avatar {
	float: left;
	margin-right: 1.5em;
}

.board_avatar a {
	display: table-cell;
	width: 45px;
	height: 45px;
	vertical-align: middle;
}

.board_avatar .avatar {
	display: block;
	width: 45px;
	height: 45px;
	margin: auto;
	border-radius: 50%;
	object-fit: cover;
}

.lastpost_link, .board_lastposter, .board_lasttime {
	white-space: normal;
}

.lastpost_link > a {
	font-size: 1.071em;
	line-height: 1.571em;
}

.board_lasttime {
	display: block;
}

.childboard_row {
	font-size: 0.857em;
}

.childboards {
	margin: 0 14px 0 64px;
	border-top: 1px solid;
}

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

/* The posting icons and mark read button. */
#posting_icons {
	margin: 0 0 20px 4px;
}

#posting_icons p {
	font-size: 0.857em;
	display: table-cell;
	padding: 0 6px;
}

#posting_icons .buttonlist {
	padding: 0;
}

#posting_icons img {
	margin: 0 2px;
	vertical-align: middle;
}

/* Styles for the info center on the board index. */
#upshrinkHeaderIC .board_row {
	padding: 8px 12px;
}

.ic_section_header {
	font-size: 1.071em;
	margin: 0 0 8px 0;
	padding: 0 0 4px 0;
	border-bottom: 1px solid;
}

/* Icons for info center title bars. */
.ic_section_header .icon {
	margin: -3px 4px 0 4px;
	vertical-align: middle;
}

#ic_recentposts, #ps_recentposts, #ps_recenttopics {
	font-size: 0.857em;
	width: 95%;
	margin: 0 auto;
	border-collapse: collapse;
}

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

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

#ic_recentposts td, #ic_recentposts th,
#ps_recentposts td, #ps_recentposts th, #ps_recenttopics td, #ps_recenttopics th {
	overflow: hidden;
	max-width: 40em;
	padding: 2px 4px;
	text-align: left;
	vertical-align: top;
	text-overflow: ellipsis;
}

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

.recentpost {
	width: 40%;
}

.recenttopic {
	width: 55%;
}

.recentposter {
	width: 15%;
}

.recentboard {
	width: 20%;
}

.recenttime {
	width: 25%;
}

#ic_recentposts li:first-child {
	border-top: none;
}

.ic_recent .ic_recent_avatar {
	margin: 4px 0;
}

.ic_recent_avatar, .ic_recent_avatar > img {
	float: left;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
}

.ic_recent > div {
	margin: auto 0 auto 34px;
}

.inline {
	font-size: 0.857em;
	padding: 0 29px;
}

/* Sort topics dropdown on message index */
#sort_by {
	min-height: 2.2em;
	margin-bottom: -6px;
	border: 2px solid;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
}

#sort_by input[type="checkbox"], #sort_by .input_check {
	margin-bottom: 0;
}

.topic_sorting:hover #sortby, #sortby:hover, #sortby {
	right: -2.5em;
	width: 11em;
}

#sort_by.topic_sorting_recent {
	margin: 4px 6px -1px 0;
	border: 1px solid;
	border-bottom: none;
}

.topic_sorting_recent:hover #sortby, .topic_sorting_recent #sortby {
	right: -1em;
}

.sort_by_item {
	width: 100%;
}

.sort_by_item .sort {
	vertical-align: baseline;
}

.topic_sorting > li {
	float: right;
	padding: 0 3px;
}

.topic_sorting {
	font-size: 1.143em;
	float: right;
}

.topic_sorting.topic_sorting_recent {
	margin-top: 0;
}

/* @todo - Would prefer to deprecate this. Tied up with js. */
img.new_posts {
	padding: 0 1px;
}

/* Styles for the message (topic) index. */
#messageindex, #unread {
	font-size: 1.071em;
	clear: both;
}

.action_unread .topic_sorting #sortby, .action_unread #sortby,
.action_unreadreplies .topic_sorting #sortby, .action_unreadreplies #sortby {
	width: 9em;
}

.action_viewquery {
}

.action_viewquery a {
	font-weight: bold;
	text-decoration: none;
}

.action_viewquery .explain {
	font-family: serif;
	/*border="1" cellpadding="4" cellspacing="0"*/
	margin-bottom: 1em;
	empty-cells: show;
	border-collapse: collapse;
}

.action_viewquery .explain th,
.action_viewquery .explain td {
	padding: 2px;
	border: 1px solid;
}

.action_viewquery .query {
	margin: 1em;
}

#unread_header {
	margin-top: 0.5em;
}

/* The header above the posts */
#forumposts .category_header {
	overflow: hidden;
	text-overflow: ellipsis;
}

#forumposts {
	margin: 8px 0 0 0;
	border: none;
}

/* The board description and who-is-viewing stuff. */
#description_board {
	margin: 10px 0 0 0;
	border: none;
	border-radius: 0;
}

#description_board .generalinfo, #forumposts .generalinfo {
	margin-top: 2px;
	padding: 4px 4px 4px 12px;
	border: 1px solid;
}

#description_board .generalinfo {
	border: none;
}

#description_board .generalinfo .listlevel2 {
	white-space: nowrap;
}

#description_board .generalinfo {
	display: table;
	width: 100%;
}

#description_board h2:before {
	font-family: "FontAwesome";
	font-size: 1.1em;
	padding-right: 0.5em;
	content: '\f07b';
}

.topic_class {
	width: 24px;
	vertical-align: middle;
}

.topic_listing {
	display: table;
	width: 100%;
	padding: 1px 0 0 0;
	border-collapse: collapse;
}

.topic_listing > li {
	display: table-row;
	margin: 1px 0 0 0;
	border: 1px solid;
}

.topic_sorting > .topic_sorting_row,
.topic_listing > .topic_sorting_row {
	margin: 0;
}

.topic_sorting_row > h3 {
	font-size: 1.071em;
	font-weight: bold;
	display: table-cell;
	width: 100%;
	padding: 10px 12px 8px 12px;
}

.topic_sorting_row > p {
	display: table-cell;
	width: 2%;
	padding: 8px 8px 0 8px;
	vertical-align: middle;
}

.sort_by_container {
	font-size: 0.857em;
	float: right;
	vertical-align: top;
	border: 1px solid;
	border-radius: 0;
}

.topic_info {
	display: table-cell;
	width: 70%;
	padding: 7px 8px 6px 12px;
	vertical-align: top;
}

.topic_icons {
	position: relative;
	float: left;
	min-width: 50px;
	padding: 6px 16px 0 0;
	text-align: center;
}

.fred {
	box-sizing: border-box;
	padding: 2px;
	box-shadow: 1px 1px 1px rgba(102, 153, 204, 0.45), -1px -1px 1px rgba(102, 153, 204, 0.45);
}

.topic_name, .topic_starter {
	margin: 0 0 0 50px;
}

.topic_name h4 {
	line-height: 1.429em;
	padding-right: 30px;
	word-wrap: break-word;
	word-break: break-all;
}

.topic_name h4 a {
	font-weight: 600;
}

.topic_name h4 img {
	vertical-align: text-bottom;
}

.topic_starter {
	font-size: 0.929em;
}

.topic_latest {
	font-size: 0.929em;
	display: table-cell;
	width: auto;
	min-width: 30em;
	padding: 7px 4px 6px 4px;
	vertical-align: top;
	white-space: nowrap;
}

.topic_latest.relative {
	min-width: 30em;
}

.board_lastpost, .topic_lastpost {
	min-width: 21em;
	margin-left: 1em;
}

.board_lastpost {
	float: right;
}

.topic_stats {
	line-height: 1.429em;
	display: table-cell;
	float: right;
	min-width: 14em;
	padding: 0 16px 0 16px;
	text-align: right;
}

ul.small_pagelinks + .img_last_post {
	padding: 0 0 0 5px;
}

.img_last_post {
	padding: 0;
}

.topic_moderation, .topic_moderation_alt {
	display: table-cell;
	width: 2%;
	padding: 0 8px;
	vertical-align: middle;
}

.topic_moderation_alt {
	min-width: 56px;
}

.topic_moderation_alt img {
	padding: 2px 2px 0 2px;
}

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

.qaction_row {
	display: block;
	float: right;
	width: 50%;
	padding: 6px;
	text-align: right;
}

.basic_row, .sticky_row, .locked_row {
	width: 100%;
	max-width: 100%;
}

/* Message index icons and topic status */
.topicicon:before,
.sticky_row .topic_info:before, .locked_row .topic_info:before,
.sticky_row .topic_details:before, .locked_row .topic_details:before {
	display: inline-block;
	width: 18px;
	height: 16px;
	content: '';
	vertical-align: middle;
	/*
		background-image: url(../images/topic/topicicons.png);
		background-repeat: no-repeat;

	 */
}

.topicicon:before {
	height: 18px;
	vertical-align: top;
}

/* Sprite icons for quick moderation, last post, sort etc */
.img_last_post:before {
	background-position: 0 0;
}

.img_poll:before {
	background-position: 0 -19px;
}

.img_profile:before {
	background-position: 0 -37px;
}

.img_locked:before {
	background-position: 0 -55px;
}

.img_move:before {
	background-position: 0 -73px;
}

.img_remove:before {
	background-position: 0 -91px;
}

.img_sticky:before {
	background-position: 0 -109px;
}

.img_sortdown:before {
	background-position: 0 -127px;
}

.img_sortup:before {
	background-position: 0 -145px;
}

.img_normal:before {
	background-position: 0 -163px;
}

.img_lockedsticky:before {
	background-position: 0 -181px;
}

/* Sprite Icons for the message icon, ? ! xx etc. */
.img_clip:before {
	background-position: -18px 0;
}

.img_lamp:before {
	background-position: -18px -18px;
}

.img_poll:before {
	background-position: -18px -36px;
}

.img_question:before {
	background-position: -18px -54px;
}

.img_xx:before {
	background-position: -18px -72px;
}

.img_moved:before {
	background-position: -18px -90px;
}

.img_exclamation:before {
	background-position: -18px -108px;
}

.img_thumbup:before {
	background-position: -18px -126px;
}

.img_thumbdown:before {
	background-position: -18px -144px;
}

/* sticky / locked icons for the upper right of the 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 {
	float: right;
	margin-right: -16px;
}

.sticky_row .topic_info:before, .sticky_row .topic_details:before {
	background-position: 0 -108px;
}

.locked_row .topic_info:before, .locked_row .topic_details:before {
	background-position: 0 -54px;
}

/* @todo - Extra classes for search results, etc. See if I can clean them up. */
/* Search results need some help as well */
/* @todo - Sort markup so this can call above classes. *//*
.search_results_posts .lockedbg {
	background: #efefef url(../images/icons/quick_lock.png) no-repeat 95% 15px;
}
.search_results_posts .stickybg, .search_results_posts .locked_stickybg {
	background: #fffee2 url(../images/icons/quick_sticky_lock.png) no-repeat 95% 15px;
}*/
#quick_mod_jump_to {
	font-size: 1em;
}

#topic_icons {
	float: left;
	width: 100%;
	margin-top: 10px;
	padding: 8px 12px;
	border: 1px solid;
	border-radius: 0;
}

.topic_icons .fred {
	position: relative;
	top: 0;
	left: -26px;
	padding: 4px;
}

.topic_icons .i-profile::before {
	content: '';
}

#topic_icons p {
	line-height: 2em;
	padding: 0 6px;
}

#message_index_jump_to {
	font-size: 1.143em;
}

#message_index_jump_to .right_submit {
	margin: 1px 0 0;
}

.jump_to_header {
	padding: 0 4px;
	border: none;
}

/* -------------------------------------------------------
 *	$TOPICS
 * -------------------------------------------------------
 */
/* The display template (topic view).
 * Events
 */
.linked_events {
	padding: 12px 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: 2px 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: 6px;
}

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

#poll_options .options li:after {
	display: block;
	clear: both;
	content: "";
}

#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 12px;
}

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

#pollmoderation {
	overflow: auto;
	margin: 0;
	padding: 0;
}

#pollquestion {
	padding: 0 0 6px 16px;
}

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

/* On to the posts */
#quickreplybox, #forumposts, #searchform, #recentposts,
#pmFolder, #topic_summary, #preview_section {
	border-radius: 0;
}

.forumposts {
	clear: both;
	margin: 8px 0 0 0;
	border: 1px solid;
	border-radius: 0;
	padding: 8px 0;
}

.forumposts .content {
	margin-top: 2px;
}

#preview_section {
	margin-bottom: .5em;
}

/* Topic information */
.views_text, .nextlinks {
	font-size: 0.786em;
	white-space: pre;
}

.nextlinks {
	float: right;
}

#whoisviewing, #redirectfrom {
	font-size: 0.857em;
	padding: 4px 0 3px 0;
}

#redirectfrom {
	display: inline-block;
}

/* Poster and postarea + moderation area underneath */
.forumposts .approvebg, .forumposts .approvebg2, .core_posts {
	font-size: 1.071em;
	overflow: visible;
	margin: 4px 0 0 0;
}

.core_posts {
	padding: 0.2em 1em;
	border: 1px solid;
}

/* Poster details and list of items */
.poster {
	font-size: 0.857em;
	display: table-cell;
	width: 100%;
	vertical-align: top;
	word-wrap: break-word;
	word-break: break-all;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.poster.poster2 {
	font-size: 1em;
	display: block;
	float: left;
	min-width: 0;
	margin: 0;
}

.poster .listlevel1, .poster.poster2 .listlevel1 {
	font-size: 1em;
	display: block;
	text-align: center;
}

.poster .listlevel1 {
	line-height: 1.667em;
	padding: 0;
}

.poster .name {
	font-size: 1.143em;
	font-weight: 600;
	overflow: hidden;
	margin: 0;
	padding: 6px;
	text-align: center;
	text-overflow: ellipsis;
	white-space: normal;
	word-break: normal;
	border-bottom: 1px solid;
}

.poster.poster2 .name {
	font-size: 1.143em;
	margin-top: 0;
	padding: 0 8px 0 0;
	text-align: left;
}

.poster_container {
	float: left;
	width: 11em;
	margin: 0 0.5em;
	padding: 0.25em;
	border: 1px solid;
}

/* Drop menu for the poster info. */
.poster .listlevel1.sfhover .menulevel2, .poster .listlevel1:hover .menulevel2 {
	top: 95%;
	left: 0;
	width: 100%;
	padding: 6px 1em 4px 1em;
	text-align: left;
}

.poster .listlevel2 {
	width: 100%;
}

.poster.billboard {
	margin-top: 5px;
}

.poster .title {
	max-width: 100%;
	white-space: normal;
	word-wrap: break-word;
}

.poster .linklevel1 {
	line-height: 1em;
	height: auto;
}

.poster .linklevel2, .poster .linklevel2:focus,
.poster .listlevel2:hover .linklevel2 {
	padding: 0;
	border: 1px solid transparent;
	background: none;
}

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

.karma_allow > .linklevel2 {
	display: inline-block;
}

.listlevel2 > ol > li {
	display: table-cell;
}

.report_seperator {
	max-width: 14em;
	height: 1px;
	margin: 6px 0 0 0;
	border-bottom: 1px solid;
}

/* Icon tweaks for several areas. */
.poster .icons > img, .poster .linklevel1 > img, .poster .linklevel2 > img {
	vertical-align: middle;
}

.listlevel2 > ol > li img, .listlevel2.warning img, .listlevel2.poster_ip img {
	padding: 0 4px;
}

.listlevel2.poster_ip .help {
	overflow: hidden;
	max-width: 50%;
	vertical-align: middle;
	text-overflow: ellipsis;
	word-wrap: normal;
}

.listlevel2.poster_ip .linklevel2 {
	display: inline;
}

.avatar {
	width: auto;
	max-width: 13em;
	height: auto;
	max-height: 20em;
}

/* The visible stuff below the avatar. */
.poster .membergroup {
	font-weight: 600;
	text-transform: none;
	margin: 0;
	padding: 3px 0;
	font-size: 1em;
}

/* @todo - Save code by amalgamating common button background declarations. */
.poster_online .linklevel1 {
	line-height: 2em;
	position: relative;
	display: block;
	margin: 3px 1.5em;
	border: 1px solid;
	border-radius: 0;
}

.poster_online .linklevel1:hover {
	text-decoration: none;
	border: 1px solid;
}

/* End nifty new flyout. */
.poster {
	float: left;
}

.post_wrapper {
	font-size: 1.071em;
	display: block;
	clear: both;
	overflow: visible;
	margin: 4px 0 0 0;
	border: 1px solid;
	padding-top: 4px;
}

.postarea {
	display: block;
	max-width: 100%;
	margin: 0 0 0 13em;
	padding: 0 1em 0 1.5em;
}

.postarea2 {
	display: block;
	padding: 0 1em;
}

#topic_summary {
	margin-top: .25em;
}

#topic_summary .postarea2 {
	font-size: 0.857em;
}

.post_subject {
	display: block;
	float: right;
	overflow: hidden;
	max-width: 15em;
	white-space: pre;
	text-overflow: ellipsis;
}

.messageicon {
	float: left;
	margin: -2px 6px -6px 0;
}

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

.groupicon {
	float: left;
	margin: 2px 0 0 2px;
}

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

.keyinfo {
	font-size: 0.857em;
}

#topic_summary .keyinfo {
	font-size: 1em;
	padding: 0 10px 20px 10px;
}

.keyinfo h5 {
	padding: 1px 0 5px 0;
}

#topic_summary .keyinfo h5 {
	font-size: 1.143em;
}

/* @todo - Move strong tag outside anchor. Will save css. */
.keyinfo h5 a, .keyinfo h5 a strong {
	font-weight: 600;
}

.keyinfo {
	border-bottom: 1px solid;
}

.inner, .messageContent {
	min-height: 70px;
	margin: 0;
	padding: 7px 8px 2px 2px;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

#topic_summary .inner,
#topic_summary .messageContent {
	clear: both;
}

.smiley {
	vertical-align: text-bottom;
}

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

.attachment_block, .attachment {
	display: inline-block;
	overflow: hidden;
	min-width: 19em;
	max-width: 99%;
	margin: 0 .5em 1em 0;
	padding-top: 0.25em;
	text-align: center;
	vertical-align: bottom;
}

.attachment_image {
	margin: 2em 0 0 0;
}

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

.attachment_name {
	margin: .5em 0 0 0;
}

.attachment_name_exp, .attachment_details_exp {
	width: auto;
}

.attachment_name_exp {
	margin: -.5em 0 0;
}

/* Important stuff. */
.attachment_name:before {
	display: block;
	clear: both;
	content: "";
}

/* Important stuff. */
/* Auto scaling of images in posts, sigs, attachments, etc. */
/* @todo - Cross check where this is defined earlier */
.inner .bbc_img, .messageContent .bbc_img, .signature .bbc_img, .attachment_image {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 800px;
}

/* 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%;
	margin-right: -0.25em;
	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_content.expand {
	position: absolute;
	overflow: auto;
	padding: 0;
	border: 1px solid;
}

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

#elk_lb_expand:before {
	font-size: 2em;
	content: "\21D7";
}

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

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

#elk_lb_prev {
	line-height: 2em;
	position: absolute;
	top: 50%;
	left: -3%;
	display: inline-block;
	width: 2em;
	height: 2em;
	border: 2px solid;
	border-radius: 4px;
}

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

.elk_lb_no_scrolling {
	overflow: hidden;
}

.attachment_thumb, .attachment_name {
	display: block;
	margin: 0 auto;
	text-align: center;
	word-wrap: break-word;
	word-break: break-all;
}

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

/* 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: none;
	height: 0;
	margin-top: .5em;
}

.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: 0;
}

/* Used by video embed JS when autolinking video links */
.elk_video {
	display: block;
	width: 640px;
	height: auto;
	max-height: 480px;
	border: 1px solid;
	border-top: 0;
}

.elk_video a img, .elk_video embed {
	display: block;
	width: 100%;
	max-height: 360px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.elk_videoheader {
	width: 640px;
	max-width: 100%;
	border: 1px solid;
}

.elk_videoheader > a {
	padding: 0 4px;
}

.elk_previewvideo {
	max-width: 640px;
	height: auto;
}

/* These deal with 9/16 videos (like tiktok) */
.elk_video.portrait {
	width: 100%;
	max-width: 480px;
	min-height: 480px;
	max-height: initial;
}

.elk_videoheader.portrait {
	width: 480px;
	margin: 0px 0 -18px 0;
}

/* Basic stuff for the bottom of Display.template.php. */
#moderationbuttons {
	float: left;
}

#moderationbuttons_strip {
	float: left;
	margin: 4px 0 4px -4px;
}

#moderationbuttons_strip li > a {
	margin: 0;
	padding: 2px 6px 2px 6px;
}

/* The jump to box */
#display_jump_to {
	float: right;
	padding: 6px 5px 5px 0;
	white-space: nowrap;
}

#display_jump_to input {
	vertical-align: bottom;
}

/* The quick reply area. */
#quickreplybox {
	clear: both;
	margin: 6px 0 0 0;
}

.editor_wrapper {
	width: 60em;
	max-width: 97%;
	margin: 0 auto;
}

#quickReplyOptions form .quickreply {
	width: 635px;
	min-width: 100%;
	max-width: 100%;
	height: 100px;
}

/* The send topic section. */
fieldset.send_topic {
	margin: 0;
	padding: 6px;
	border: none;
	box-shadow: none;
}

dl.send_topic {
	margin-bottom: 0;
}

dl.send_mail dt {
	width: 35%;
}

dl.send_mail dd {
	width: 64%;
}

.requiredfield:before {
	position: absolute;
	bottom: 90%;
	left: 5%;
	width: 0;
	height: 0;
	content: ' ';
	border: 10px solid;
}

.requiredfield {
	font-size: 90%;
	line-height: 1.1em;
	position: absolute;
	top: 20px;
	left: 5%;
	display: none;
	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;
}

/* -------------------------------------------------------
 *	$EDITOR
 * -------------------------------------------------------
 */
/* The main post editor section. */
#preview_body {
	font-size: 1.143em;
	overflow: auto;
	margin: 2px 0 0;
	padding: 0.5em 1em;
	border: 1px solid;
}

#postmodify #message {
	box-sizing: border-box;
	width: 100%;
	padding: 2px;
}

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

#post_header, .postbox {
	overflow: hidden;
	padding: 6px;
}

#post_header dt, .postbox dt {
	font-weight: bold;
	float: left;
	width: 15%;
	margin: 6px 0 0 0;
	padding: 0;
}

#post_header dd, .postbox dd {
	float: left;
	width: 83%;
	margin: 4px 0;
	padding: 0;
}

#post_header img {
	padding: 0 0 2px 5px;
	vertical-align: middle;
}

ul.post_options {
	overflow: auto;
	margin: 0 0 0 12px;
	padding: 4px;
}

ul.post_options li {
	float: left;
	width: 25%;
	margin: 2px 0;
}

#postAdditionalOptionsHeader, #postDraftOptionsHeader {
	margin: 1em 0 0 0;
	border-radius: 5px 5px 0 0;
}

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

#postAdditionalOptionsNC {
	overflow: auto;
	margin: 0 0 1em 0;
	border: 1px solid;
	border-radius: 0;
}

.shortcuts {
	font-size: 0.857em;
	float: left;
}

.shortcuts .lastedit {
	text-align: left;
}

#mobile .shortcuts {
	display: none;
}

.draftautosave {
	font-size: 0.857em;
	overflow: hidden;
	height: 1.5em;
	text-align: right;
}

#postDraftOptions .settings dd,
#postDraftOptions .settings dt {
	font-size: 0.857em;
	width: 60%;
	margin: 0;
	padding: 5px 10px;
	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: 1.143em;
}

.post_verification {
	margin-top: 6px;
}

.post_verification #verification_control {
	margin: 4px 0 4px 12px;
}

.verification_control_valid {
	display: none;
}

.verification_control .smalltext {
	margin: 4px 0 8px 0;
}

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

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

#event_main fieldset {
	clear: both;
}

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

#event_main #evtitle {
	margin-top: 0.5em;
}

#event_main .event_options {
	overflow: hidden;
	padding: 0;
}

#event_main .event_options {
	margin: 0;
	padding: 1em 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 12px 0 0;
}

#datepicker {
	white-space: nowrap;
}

/* -------------------------------------------------------
 *	$DRAG-N-DROP
 * -------------------------------------------------------
 */
.drop_area {
	font-size: 1.643em;
	font-weight: normal;
	position: relative;
	display: none;
	padding: 1em 0;
	text-align: center;
	opacity: 0.6;
	border: dashed 1px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.drop_area_fileselect {
	font-size: 0.8em;
	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 4px;
	white-space: nowrap;
}

.drop_area_fileselect_text input {
	overflow-y: hidden;
}

.drop_area .mobile {
	display: none;
}

.progress_tracker {
	width: 97%;
}

.statusbar {
	position: relative;
	padding: 5px;
	border-top: 1px solid;
	border-bottom: 1px solid;
}

.statusbar .container {
	position: relative;
	display: inline-block;
}

.statusbar .insertoverlay {
	position: absolute;
	z-index: 1000;
	min-width: 10em;
	padding: 0.2em;
	border: 1px solid;
	border-radius: 4px;
}

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

.insertoverlay .tabs li {
	display: inline-block;
	flex-grow: 1;
	padding: 0 0.5em;
	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;
	margin-right: 1%;
	margin-bottom: 0.5em;
	margin-left: 1%;
}

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

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

.statusbar .insertoverlay .button {
	font-weight: bold;
	position: absolute;
	top: -35px;
	left: 2px;
	width: 55px;
	min-height: 34px;
	margin: 0;
	border-radius: 4px;
}

.info {
	line-height: 1.375em;
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 60%;
	vertical-align: middle;
}

.progressBar {
	display: inline-block;
	width: 20%;
	text-align: center;
	vertical-align: middle;
	border: 1px solid;
	border-radius: 0;
}

.postattach_thumb img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}

.postattach_thumb {
	display: inline-block;
	width: 50px;
	height: 100%;
	max-height: 100px;
	vertical-align: middle;
}

.abort, .remove, .share, .ila {
	float: right;
	max-width: 2em;
	padding: 4px 5px 2px 5px;
	cursor: pointer;
	border-radius: 0;
}

.abort {
	border: 2px solid;
}

.share, .ila {
	float: none;
}

.ila {
	min-width: 3em;
	padding-top: 5px;
	border: 1px solid;
}

.drop_attachmnts_error {
	overflow: hidden;
	width: 97%;
	padding: 10px 0;
}

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

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

#postAttachment2 {
	/* 	overflow: hidden; */
}

#postAttachment2 dd {
	margin: 4px 12px;
}

#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 {
	margin: auto;
	text-align: left;
}

.move_topic fieldset {
	padding: 6px;
}

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

#report_topic dl.settings dt {
	width: 20%;
}

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

#report_comment {
	width: 75%;
	height: 10em;
	padding: 5px;
}

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

.split_messages .content {
	margin: 1px;
}

.split_messages .split_icon {
	padding: 0 6px;
}

.split_messages .post {
	padding: 12px 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: 6px 0;
}

/* -------------------------------------------------------
 *	$PROFILE
 * -------------------------------------------------------
 */
.ui-tabs .ui-tabs-panel {
	clear: both;
	padding-top: 8px;
	border: 1px solid;
}

#profilecenter, #unwatched_topics, #profile_attachments {
	overflow: auto;
	margin: 12px 0 0 0;
	padding: 8px 8px 16px 8px;
	border: 1px solid;
	border-radius: 0;
}

#profilecenter .content, #profile_attachments .content {
	overflow: visible;
	padding: 0 0 4px;
	border: none;
}

.attachment .contact a {
	line-height: 1.25em;
	display: inline-block;
	margin: 0.5em 0.25em;
	vertical-align: middle;
}

.content_noframe {
	border: none;
}

.profileblock {
	margin-top: 4px;
	padding: 4px 8px;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.profileblock .icon {
	vertical-align: bottom;
}

.profile_content {
	overflow: auto;
	padding: 0 8px;
}

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

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

.profileblock_left {
	float: left;
	width: 49%;
	margin: 0 0 4px 4px;
}

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

.profileblock_right {
	float: right;
	width: 49%;
	margin: 0 4px 4px 0;
}

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

.profileblock ul li:not(:first-child):before {
	content: "\20\7C\20";
}

.generic_border {
	border: 1px solid;
	border-radius: 0;
}

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

.attachment_title {
	display: block;
	overflow: hidden;
	max-width: 100%;
	margin-bottom: 4px;
	white-space: pre;
	text-overflow: ellipsis;
	border-bottom: 1px solid;
}

/* The basic user info on the left */
#basicinfo {
	float: left;
	width: 30%;
}

#basicinfo .content {
	padding-left: 30px;
}

.cf_icon > a > img {
	padding: 0 4px 2px 4px;
	vertical-align: middle;
}

#detailedinfo {
	float: right;
	width: 70%;
	margin-top: 0;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

#basicinfo h4 {
	font-size: 1.429em;
	font-weight: 100;
	overflow: hidden;
	padding-right: 2px;
	white-space: pre-wrap;
}

#basicinfo h4 .position {
	font-size: 0.786em;
	font-weight: 100;
	display: block;
}

#basicinfo > .avatar.avatarresize {
	display: block;
	width: 120px;
	max-width: 120px;
	height: 120px;
	max-height: 120px;
	margin: 10px 0 0 0;
	border-radius: 50%;
	object-fit: cover;
}

#basicinfo #userstatus {
	display: block;
	clear: both;
	margin-top: 6px;
}

#basicinfo #userstatus img {
	vertical-align: middle;
}

#detailedinfo dl, #tracking dl, .profileblock dl {
	clear: right;
	overflow: auto;
	margin: 0 0 18px 0;
	padding: 0 0 15px 0;
}

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

#detailedinfo dd, #tracking dd, .profileblock dd {
	float: left;
	width: 65%;
	margin: 0 0 3px 0;
	padding: 0;
}

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

#personal_picture {
	display: block;
	margin-bottom: 4px;
}

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

#avatar_upload {
	overflow: auto;
}

#main_admsection #basicinfo, #main_admsection #detailedinfo {
	width: 100%;
}

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

#main_admsection #basicinfo .avatar {
	float: right;
	vertical-align: top;
}

#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 3px 0;
	padding: 0;
}

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

#show_attachments th {
	text-align: left;
}

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

.activity_stats li {
	float: left;
	width: 4.166%;
	margin: 0;
	padding: 0;
}

.activity_stats li span {
	font-size: 0.786em;
	display: block;
	padding-right: 0.5em;
	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: 15px;
	margin: 0 auto;
	border: 1px solid;
	border-bottom: none;
}

.activity_stats li .bar span {
	position: absolute;
	top: -1555em;
	left: -1555em;
}

/* Most popular boards by posts and activity */
#popularposts {
	float: left;
	width: 50%;
	padding: 6px 3px 0 0;
}

#popularactivity {
	float: right;
	width: 50%;
	padding: 6px 0 0 3px;
}

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

#popularposts div.content dd, #popularactivity div.content dd {
	float: left;
	width: 35%;
	margin: 0 0 3px 0;
	padding: 0;
}

.profile_pie {
	float: left;
	width: 20px;
	height: 20px;
	margin: 0 12px 0 0;
	padding: 0;
	text-indent: -1555em;
}

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

/* View posts */
.topic .time {
	float: right;
}

.counter {
	font-size: 2em;
	font-weight: bold;
	float: right;
	padding: 6px;
}

.topic_details {
	padding: 0 4px 4px 4px;
	border-bottom: 1px solid;
}

.topic h4 {
	margin: 3px 0;
}

.topic .post {
	height: 80px;
	min-height: 80px;
	margin: 0 12px;
}

.topic .mod_icons {
	margin-right: 12px;
	text-align: right;
}

#tracking div.content dl {
	margin: 0;
	padding: 0;
	border-bottom: 0;
}

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

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

#creator dt {
	float: left;
	clear: both;
	width: 40%;
	margin: 0 0 10px 0;
}

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

#creator dd {
	float: right;
	overflow: auto;
	width: 55%;
	min-height: 2.1em;
	margin: 0 0 10px 2px;
	padding-bottom: 1px;
}

.ignoreboards {
	width: 45%;
	margin: 0 2%;
	padding: 0;
}

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

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

.ignoreboards ul {
	margin: 0;
	padding: 0;
}

.ignoreboards li {
	float: left;
	clear: both;
}

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

.ignoreboards li ul {
	margin: 2px 0 0 0;
}

.ignoreboards li.category ul .board {
	width: 93%;
}

#theme_settings {
	overflow: auto;
	margin: 0;
	padding: 0;
}

#theme_settings li {
	margin: 10px 0;
	padding: 0;
}

/* Paid Subscriptions */
#paid_subscription {
	width: 100%;
}

#paid_subscription dl.settings {
	margin-bottom: 0;
}

#paid_subscription dl.settings dd, #paid_subscription dl.settings dt {
	margin-bottom: 4px;
}

/* Pick theme */
#pick_theme {
	float: left;
	width: 100%;
}

/*Issue a warning*/
#warn_body, .warn_input {
	font-size: 0.857em;
	width: 80%;
}

#new_template_link a {
	margin-bottom: 2px;
}

#warndiv, #warning_bar {
	margin: 0 0 1em 5%;
}

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

#qrcode {
	margin-top: 10px;
}

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

/* -------------------------------------------------------
 * $PERSONAL
 * -------------------------------------------------------
 */
#personal_messages .labels {
	padding: 11px 0 0;
}

#personal_messages .signature {
	overflow: visible;
}

#personal_messages .capacity_bar {
	display: block;
	width: 10em;
	height: 12px;
	margin: 6px 0 0 12px;
	border: 1px solid;
}

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

#personal_messages .reportlinks {
	padding: 6px 1.286em;
}

.pm_icon, .pm_quickmod {
	width: 4%;
}

.pm_date {
	width: 22%;
	text-align: left;
}

.pm_subject {
	width: 46%;
	text-align: left;
}

.pm_from {
	text-align: left;
}

#searchLabelsExpand li {
	padding: 4px 6px;
}

#manrules div.righttext {
	padding: 4px 1px;
}

.addrules dt.floatleft {
	width: 15em;
	padding: 0 15px 6px 15px;
}

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

#to_item_list_container div, #bcc_item_list_container div {
	float: left;
	margin-right: 10px;
}

div.labels {
	display: block;
	text-align: right;
	margin-bottom: 4px;
}

.label_pms {
	float: right;
	margin-top: 5px;
}

.label_pms li {
	display: inline-block;
	margin-left: 0.5em;
	vertical-align: top;
}

/* -------------------------------------------------------
 * $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: 1em;
}

#main_grid .category_header {
	font-size: 1.357em;
}

.previous_month, .next_month {
	font-size: 0.6em;
	display: block;
	float: left;
	margin: -0.1em 0 0 0;
}

.next_month {
	float: right;
}

.calendar_table {
	font-size: 0.857em;
	width: 100%;
	border-spacing: 1px;
	border-top: 1px solid;
}

.calendar_table th, .calendar_table td {
	padding: 2px 0;
	text-align: center;
}

#month_grid .calendar_table {
	margin-bottom: 12px;
}

#month_grid .table_head {
	font-size: 0.929em;
}

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

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

#main_grid .weeks {
	font-size: 1em;
	font-weight: normal;
}

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

.weeklist {
	padding: 2px 0 0;
	text-align: left;
}

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

.weeklist h4 {
	font-size: 1.143em;
	float: left;
	width: 10em;
	padding: 10px;
}

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

.weekdays {
	padding: 8px 8px 0 180px;
	border-left: 2px solid;
}

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

.hidelink {
	font-style: italic;
}

#calendar_navigation {
	padding: 12px 0;
	border: 1px solid;
	border-top: none;
}

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

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

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

/* -------------------------------------------------------
 * $STATISTICS
 * -------------------------------------------------------
 */
.statistics {
	margin: 3px 0;
}

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

.statistics .category_header {
	font-size: 1.214em;
	width: 49%;
	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 {
	margin: 0 0.5%;
}

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

.stats {
	overflow: hidden;
	width: 50%;
	margin: 12px 0 12px 50%;
	padding: 0 16px;
}

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

.stats dt {
	font-size: 1em;
	line-height: 1.5em;
	float: left;
	clear: both;
	width: 48%;
	margin: 0 2% 4px 0;
	padding: 0;
}

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

.statsbar .bar {
	font-size: 1em;
	display: block;
	float: left;
	height: 1.5em;
	margin: 0 4px 0 0;
}

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

/* Test code - an attempt to make recent posts less overwhelming. */
#recentposts .inner,
#recentposts .messageContent {
	position: relative;
	overflow: auto;
	max-height: 20em;
}

#recentposts .inner blockquote {
	overflow: hidden;
	height: 5em;
}

#stats {
	margin: 6px 0 16px 0;
	border: none;
}

#stats th, #stats td {
	width: 15%;
	padding: 4px 12px;
	text-align: center;
}

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

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

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

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

/* -------------------------------------------------------
 *	$HELP
 * -------------------------------------------------------
 */
#help_container {
	overflow: auto;
	margin: 0 0 0 0;
	padding: 0 0 8px 0;
}

#helpmain {
	overflow: auto;
	margin: 12px 0 0 0;
	padding: 8px 20px 12px 20px;
	border: 1px solid;
	border-radius: 0;
}

#helpmain p {
	margin: 10px 0;
}

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

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

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

/* Generally, those [?] icons. This makes your cursor a help icon. */
.help {
	cursor: help;
}

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

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

.hdicon.help:before {
	margin: 2px 0 0;
}

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

a.help .icon {
	padding: 4px 0 0;
}

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

/* The help pop-ups. */
.popup_container {
	position: fixed;
	z-index: 100;
	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: 0;
}

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

/* What it says. ;) */
.popup_heading {
	font-size: 1.071em;
	font-weight: bold;
	line-height: 2em;
	padding: 0 0 0.25em 0;
}

/* The hide icon (red cross). */
.popup_heading .hide_popup {
	float: right;
	width: 16px;
	height: 2em;
	background: url(../images/buttons/delete.png) 0 50% no-repeat;
}

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

/* The text content, hopefully helpful. */
.popup_content {
	overflow: auto;
	max-height: 22em;
	padding: 10px;
	border: 1px solid;
	border-radius: 0;
}

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

.custom_mask {
	margin: 0 2em;
}

/* -------------------------------------------------------
 *	$SEARCH
 * -------------------------------------------------------
 */
/* The basic search section. */
#simple_search, #advanced_search {
	margin: 4px 0 0 0;
	padding: 8px 0;
	text-align: center;
}

#search_error {
	font-style: italic;
	padding: 4px 12px;
}

#search_term_input {
	font-size: 1.071em;
	margin: 0 0 10px;
}

#search_term_input .button_submit {
	margin: 0 0 2px;
}

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

#advanced_search dt {
	float: left;
	clear: both;
	width: 35%;
	padding: 5px 4px 0 4px;
	text-align: right;
}

#advanced_search dd {
	float: left;
	width: 65%;
	padding: 3px 2px;
	text-align: left;
}

#pick_boards .submitbutton {
	width: 100%;
}

/* The search results page. @todo - Duplicated in the .table_grid code? */
.search_results_posts {
	overflow: hidden;
	padding: 0.2em 1em;
	table-layout: fixed;
}

.search_results_posts .buttons {
	padding: 5px 12px 0 0;
}

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

.search_results_posts .topic_details {
	position: relative;
	margin: 0.2em 1em 0;
	border-bottom: 0;
}

.search_results_posts .topic_moderation {
	width: 2em;
	padding: 1.3em 1em 0 0;
	vertical-align: top;
}

.search_results_posts .quickbuttons {
	margin-right: 1em;
	margin-left: 1em;
}

.search_results_posts .topic_body {
	width: 99%;
	margin: 0 1em 0;
	padding-top: 12px;
	padding-bottom: 12px;
	border-top: 1px solid;
}

.search_results_posts .quick_mod {
	position: absolute;
	top: 10%;
	right: 0;
}

.search_results_posts .counter {
	padding: 6px 0 6px 1.5em;
}

.search_results_posts .topic_details,
.search_results_posts .topic_body {
	padding: 10px 0 10px 10px;
}

.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-collapse: collapse;
}

.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: 5px 8px;
}

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

/* this is the avatar */
.mlist li div:first-child > a {
	display: inline-block;
	width: 3.4em;
	height: 3.4em;
}

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

.mlist li.alternate_row div, .whos_online dd:nth-child(even) div {
	border-top: 1px solid;
	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;
	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: 0;
}

.mlist_header {
	font-weight: bold;
}

.whos_online dt {
	font-weight: bold;
}

.no_members {
	display: none;
}

.online_member {
	min-width: 40%;
}

.track_ip:before {
	content: "(";
}

.track_ip:after {
	content: ")";
}

#memberlist {
	margin: 6px 0 0 0;
}

#memberlist > .content {
	padding: 12px 0;
}

#memberlist .status {
	width: 20px;
}

#memberlist .avatar.avatarresize {
	width: 3.4em;
	height: 3.4em;
	border-radius: 50%;
	object-fit: cover;
}

.mlist li div {
	height: 2.4em;
	margin: 0 auto;
	padding: 3px 8px 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: 20em;
}

#memberlist_search input[type="checkbox"] {
	margin: 4px 0 0 0;
}

#memberlist_search .input_text {
	overflow: hidden;
	width: 100%;
	margin: 0 0 12px 0;
}

#mlsearch {
	padding-top: 2px;
}

#mlsearch_options {
	position: absolute;
	display: none;
	max-width: 12em;
	padding: 0.5em;
	border: 1px solid;
	border-radius: 0;
}

#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: 40em;
	margin: 0 auto;
}

.login .well {
	padding: 5px 35px
}

.login dl {
	clear: right;
	overflow: auto;
}

.login dt, .login dd {
	width: 44%;
	margin: 0 0 5px 0;
	padding: 1px;
}

.login dt {
	font-weight: bold;
	float: left;
	clear: both;
	text-align: right;
}

.login dd {
	float: right;
	width: 54%;
	text-align: left;
}

.login dl:nth-of-type(2) dt {
	padding-top: 3px;
}

.login dl:nth-of-type(2) dd img {
	vertical-align: top;
}

.login p:not(.errorbox) {
	text-align: center;
}

.coppa_contact {
	width: 32ex;
	margin-left: 5ex;
	padding: 4px;
	border: 1px solid;
}

#agreement_box, #privacypol_box {
	overflow-y: scroll;
	height: 180px;
	margin-bottom: 2em;
	padding: 8px;
	text-align: justify;
	border: 1px solid;
}

/* Common for all admin sections.
 * The admin logon form
 */
#admin_content {
	clear: both;
	padding-top: 8px;
}

/* Custom profile fields like to play with us some times. */
#admin_content .custom_field {
	margin-bottom: 15px;
}

#admin_login {
	padding: 12px;
}

#admin_login img {
	padding: 2px 2px 4px;
	vertical-align: middle;
}

/* -------------------------------------------------------
 *	$BOXES
 * -------------------------------------------------------
 */
/* Used for sections that need somewhat larger corners */
.well, .roundframe {
	overflow: hidden;
	margin: 2px 0 0 0;
	padding: 9px;
	border: 1px solid;
	border-radius: 7px;
}

.well p:not(.errorbox), .roundframe p {
	padding: 6px;
}

/* Lotsa boxes. */
.description, .information, .warningbox, .successbox, .infobox, .errorbox {
	font-size: 0.929em;
	margin: 0 0 4px;
	padding: 6px 12px;
	border: 1px solid;
}

.information p {
	padding: 12px;
}

/* More little boxes on a hillside. */
.warningbox, .successbox, .infobox, .errorbox {
	padding-left: 35px;
}

.errorbox {
	margin-bottom: 12px;
	text-align: left;
	border-top: 2px solid;
	border-bottom: 2px solid;
}

.border_error {
	border: 1px solid !important;
}

.selected {
	font-weight: bold;
}

/* Styles for (fatal) errors. */
#fatal_error {
	width: 80%;
	margin: auto;
	padding-bottom: 1em;
}

.errorbox h3 {
	font-size: 1.071em;
	margin: 0;
	padding: 0;
	text-decoration: underline;
}

.errorbox .listlevel1,
.warningbox .listlevel1 {
	line-height: 1.75em;
	float: none;
	padding-left: 1em;
}

.errorbox .alert {
	font-size: 1.5em;
	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 {
	position: relative;
	width: 80%;
	height: 2em;
	margin: 20px auto 0 auto;
	padding: 3px;
	border: 1px solid;
	border-radius: 0;
}

.full_bar {
	font-weight: bold;
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 2em;
	padding-top: 2px;
	text-align: center;
	border-radius: 0;
}

.green_percent, .blue_percent {
	z-index: 1;
	height: 2em;
}

.green_percent_compact, .blue_percent_compact, .full_bar_compact, .progress_bar_compact {
	height: 1em;
}

.progress_bar_compact {
	margin: 0 auto 0 0;
}

.full_bar_compact {
	line-height: 1em;
	padding: 0;
}

.loading {
	width: 35px;
	height: 35px;
}

/* floating error box, currently used by like functionality */
.floating_error {
	font-size: 15px;
	position: fixed;
	z-index: 102;
	width: 50%;
	margin: 0;
	padding: 10px 0 0;
	text-align: center;
	border: solid 1px;
	border-radius: 0;
}

.floating_error .error_heading {
	font-weight: bold;
	margin: 0;
	padding: 5px 10px 0;
}

.floating_error .error_msg {
	width: 100%;
	margin: 10px auto 15px;
}

.floating_error .error_btn {
	font-size: 16px;
	font-weight: bold;
	position: relative;
	margin: 0;
	padding: 10px;
	text-align: center;
	border-top: solid 1px;
}

.floating_error .error_btn:hover {
	cursor: pointer;
}

/* Panel Tab/button */
.paneltab {
	position: absolute;
	z-index: 1;
	right: 120px;
	padding: 0 14px 0 10px;
	text-align: center;
	white-space: nowrap;
	border: 2px solid;
	border-top: none;
	border-radius: 0;
}

.paneltab a.open, .paneltab a.close {
	display: block;
	width: 100px;
	cursor: pointer;
}

/* sliding panel */
#toppanel {
	position: absolute;
	z-index: 999;
	top: 0;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

#panel {
	position: relative;
	z-index: 3;
	display: none;
	overflow: hidden;
	width: 100%;
	height: 130px;
	border: 2px solid;
}

/* -------------------------------------------------------
 *	$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: 6em;
}

.like_stats_details {
	min-width: 15em;
}

.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;
	height: auto;
	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 {
	line-height: 1.25em;
	display: inline-block;
	width: 1.25em;
	height: auto;
	margin: 0 .25em;
	vertical-align: middle;
}

.helpicon, .warnicon, .infoicon {
	font-size: 1em;
	font-weight: bold;
	height: 1.25em;
	text-align: center;
	vertical-align: text-bottom;
}

.helpicon, a.helpicon {
	cursor: help;
}

/* -------------------------------------------------------
 *	$BOARDICONS
 * -------------------------------------------------------
 */
.board_icon {
	font-family: "FontAwesome";
	line-height: 3em;
	display: block;
	float: left;
	width: 48px;
	height: 48px;
}

.board_icon:before {
	font-size: 2.7em;
	position: relative;
	top: 5px;
}

.on_board:before {
	content: '\f086';
}

.off_board:before {
	content: '\f0e6';
}

.redirect_board:before {
	content: '\f0c1';
}

.on2_board:before {
	content: '\f27b';
}

.board_key:before {
	font-family: 'FontAwesome';
	display: block;
	float: left;
	width: 24px;
	height: 24px;
	content: '';
}

.new_some_board:before {
	content: '\f086';
}

.new_none_board:before {
	content: '\f0e6';
}

.new_redirect_board:before {
	content: '\f0c1';
}

.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;
}

a > i {
	padding-bottom: 1px;
}

.icon-small {
	line-height: 1em;
	width: 1em;
	height: 1em;
}

.icon-big {
	line-height: 1.5em;
	width: 1.5em;
	height: 1.5em;
}

.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% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

/* 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-account:before {
	display: block;
	width: 1.75em;
	height: 1.75em;
	margin: -3px 0 0 -4px;
	background: no-repeat center;
	background-size: contain;
}

/* This is for fixing vertical positioning with a few odd icons. Sometimes because of icons, sometimes because of
 * css elsewhere that hasn't been fixed yet.
 *
 * Either way, it means there's a problem somewhere, and that this should eventually get removed.
 */
.icon-top {
	vertical-align: top;
}

.icon-margin {
	margin: .25em;
}

/* Helper class */
.icon-menu {
	width: 1.5em;
	height: 1.5em;
	padding: 0 0 3px 0;
}

/* -------------------------------------------------------
 *	$MEDIA
 * -------------------------------------------------------
 * Experimental media queries.
 * 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.
 */
@media screen and (max-width: 90em) {
	.icon-menu {
		display: none;
	}

	.icon-menu.i-account {
		display: inline-block;
		width: 1.25em;
		height: 1.25em;
		padding-bottom: 5px;
	}
}

/* This one does 1024 screens at default font size. */
@media screen and (max-width: 64em) {
	.topic_info {
		width: 60%;
	}

	.topic_latest {
		min-width: 20em;
	}

	.topic_latest.relative {
		position: relative;
		min-width: 15em;
	}

	.board_latest {
		width: 40%;
		min-width: 23em;
	}

	.board_stats {
		display: none;
	}

	.board_row_contain {
		padding-right: 5px;
	}

	.bbc_img, .elk_video {
		max-width: 100%;
	}

	.elk_previewvideo {
		max-width: 100%;
	}

	.attachments > .attachment {
		min-width: 15em;
		max-width: 30%;
	}

	.attachment_name {
		width: 15em;
	}
}

/* This one does 800 screens at default font size. */
@media screen and (max-width: 50em) {
	#gotop, #gobottom {
		display: none;
	}

	/* items that will not fit "well" next to the avatar */
	.elk_video_container, .codeheader, footer.attachments {
		clear: both;
	}

	.icon-menu {
		display: inline-block;
		width: 2em;
		height: 2em;
		margin: 0 0 0.25em 0;
		padding: 0.35em;
		vertical-align: middle;
		border: .25em solid;
		border-radius: 0;
	}

	.icon-menu.i-account {
		width: 2em;
		height: 2em;
		margin-top: 0;
	}

	.i-account:before {
		width: 2.5em;
		height: 2.5em;
	}

	#main_menu .listlevel1.subsections .linklevel1:after {
		display: none;
	}

	#boardindex_wrap {
		float: none;
		width: 100%;
		margin: 0 auto;
	}

	#board_main_content_section {
		margin: 0;
		padding: 0;
	}

	.topic_stats {
		display: none;
	}

	.img_last_post {
		display: none;
	}

	dd input, dd select, dd textarea {
		width: 100% !important;
		max-width: 100% !important;
	}

	#post_header dd select {
		max-width: 30% !important;
	}

	dd input[type="checkbox"], dd input[type="radio"] {
		display: inline !important;
		width: 1.5em !important;
	}

	#logobox img {
		max-width: 95%;
	}

	#siteslogan {
		display: none;
	}

	#forumtitle {
		font-size: 2em;
	}

	.topic_latest {
		display: block;
		min-width: 15em;
	}

	.board_avatar {
		display: none;
	}

	.fred {
		display: none;
	}

	#main_menu .linklevel1 {
		margin-right: 5px;
		border: 1px solid transparent;
		box-shadow: none;
	}

	#main_menu .linklevel1, #main_menu .linklevel1 a {
		margin: 0;
		padding: 0;
	}

	#main_menu .linklevel1 > .pm_indicator {
		display: none;
	}

	.button_title, .topic_moderation_alt {
		display: none;
	}

	.topic_moderation {
		display: inline-block;
		float: right;
		width: auto;
	}

	#collapse_button {
		display: none;
	}

	.wrapper {
		min-width: 98%;
	}

	.linktree {
		max-width: 95%;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.topic_lastpost {
		min-width: 18em;
	}

	.topic_latest.relative .topic_lastpost {
		min-width: 16em;
	}

	.board_row {
		min-width: 20em;
	}

	.board_name {
		margin: 12px 0 0;
	}

	.board_lastposter {
		display: block;
	}

	.board_lastpost, .board_latest {
		min-width: 13em;
	}

	.board_latest {
		width: 32%;
	}

	.board_name:after {
		display: block;
		clear: both;
		content: "";
	}

	.board_info .board_description, .board_info .moderators, .childboards {
		margin: 0 0 0 8px;
	}

	#topic_icons {
		display: none;
	}

	/* Playing silly buggers with a sidebar menu option for narrow screens. */
	#main_container {
		position: relative;
		padding: 0 0 0 12px;
	}

	#menu_sidebar {
		position: absolute;
		z-index: 90;
		left: -0.8em;
		width: 6px;
		min-height: 500px;
		border: 1px solid;
		border-radius: 4px;
	}

	#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. */
	#top_section_notice {
		min-width: 250px;
	}

	#password_login select {
		display: none;
	}

	.poster, .poster_container {
		width: 11em !important;
		background-color: inherit;
	}

	.poster_avatar a {
		padding: 0;
	}

	.poster .name {
		white-space: nowrap;
	}

	.poster .listlevel1 {
		margin: 0;
	}

	.postarea {
		margin: 0 0 0 1em;
		padding-left: 0;
	}

	.avatar, .avatar.avatarresize, #basicinfo .avatar {
		width: 80px;
		height: 80px;
	}

	#basicinfo .avatar.avatarresize {
		width: 50px;
		height: 50px;
	}

	#basicinfo .username {
		font-size: .8em;
	}

	#detailedinfo dt {
		width: 40%;
	}

	#detailedinfo dd {
		width: 60%;
	}

	.ic_recent_avatar, .ic_recent_avatar > img.avatar {
		width: 30px;
		height: 30px;
	}

	.quickbuttons .modified {
		display: none;
		width: 100%;
		text-align: left;
	}

	#forumposts .views_text {
		display: none;
	}

	#forumposts .nextlinks {
		width: 100%;
		text-align: right;
		white-space: normal;
	}

	.ui-tabs .ui-tabs-panel {
		padding: 1em 0 !important;
	}

	.profile_content {
		padding: 0;
	}

	#search_options {
		width: 100%;
	}

	.ignoreboards {
		width: 100%;
	}

	.ignoreboards.floatright {
		float: none;
	}

	/* our stats page */
	.statistics .category_header {
		box-sizing: border-box;
		width: 100%;
		margin: 0;
	}

	.stats {
		float: none;
		box-sizing: border-box;
		width: 100%;
		margin: 0;
	}

	.stats dt {
		font-weight: bold;
	}

	#list_mentions .listaction {
		display: none;
	}

	.mlist li div:nth-child(n+6), .mlist li .email {
		display: none;
	}

	.mlist li div.posts {
		display: table-cell;
		border-right: 1px solid;
	}

	.sticky_row .topic_info:before, .locked_row .topic_info:before, .locked_row.sticky_row .topic_info:before {
		margin-right: -18px;
	}

	.topic_name, .topic_starter {
		margin-left: 1px;
	}

	#ic_recentposts, #ps_recentposts, #ps_recenttopics {
		font-size: 1em;
	}

	#ps_recentposts td, #ps_recenttopics td {
		font-size: 1em;
		max-width: 20em;
	}

	#ps_recentposts .recentposter {
		display: table-cell;
	}

	.popup_container .popup_window {
		width: 95%;
	}

	.statusbar .insertoverlay .range {
		max-width: 90%;
	}

	.statusbar .insertoverlay .range,
	.statusbar .insertoverlay .text,
	.statusbar .insertoverlay .button {
		display: block;
		margin: 1em auto;
	}

	.statusbar .insertoverlay .button {
		top: -3em;
		left: 0;
		float: none;
		margin: 0;
	}

	.buttonlist {
		font-size: 0.95em;
		padding: 5px 0 0;
	}

	.buttonlist > li {
		font-size: 0.95em;
	}
}

/* This one does 540 and smaller screens at default font size. */
@media screen and (max-width: 33.750em) {
	#info_center .bbc_list {
		padding: 0 0 0 20px;
	}

	select, .input_text, .input_password {
		max-width: 12em;
	}

	dt, dd, dd label, .login dt, #advanced_search dt {
		display: block;
		width: 90% !important;
		text-align: left;
	}

	dd {
		padding-left: 8% !important;
	}

	dd input, dd select, dd textarea {
		width: 90% !important;
		max-width: 90% !important;
	}

	#postAttachment2 dt {
		width: 100% !important;
	}

	#search_options {
		width: 100%;
	}

	#posting_icons, .table_list .stats, .table_list .lastpost, .table_grid .lastpost {
		display: none;
	}

	#wrapper, .frame {
		width: 100%;
		min-width: 100%;
	}

	#main_content_section {
		padding: 1px 1px 16px 0;
	}

	#search_form .input_text {
		width: 7em;
	}

	#top_section {
		display: none;
	}

	.post {
		margin: 0 0 0 5px;
	}

	.frame {
		min-width: 100%;
	}

	.topic_info {
		display: block;
		width: 95%;
		padding: 8px;
	}

	.locked_row, .sticky_row, .basic_row, .topic_listing, .topic_listing > li {
		display: block;
	}

	.sticky_row .topic_info:before, .locked_row .topic_info:before, .locked_row.sticky_row .topic_info:before {
		margin-right: 0;
	}

	.topic_icons, .topic_moderation {
		display: none;
	}

	.topic_latest {
		display: block;
		width: 97%;
		padding: 5px;
	}

	ul.buttonlist:before {
		display: block;
		clear: both;
		content: "";
	}

	.quickbuttons {
		white-space: nowrap;
	}

	#whoisviewing {
		display: none;
	}

	.pagesection .buttonlist li {
		margin-bottom: 4px;
		white-space: nowrap;
	}

	#forumposts .nextlinks {
		width: 100%;
		text-align: right;
		white-space: normal;
	}

	.topic_name, .topic_starter {
		margin: 0;
	}

	.topic_starter {
		margin-top: 5px;
	}

	.topic_name h4 {
		font-size: 1.357em;
		max-height: 3em;
		line-clamp: 2 "...";
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.topic_name h4 a {
		text-overflow: ellipsis;
	}

	.basic_row .topic_name h4 {
		padding-right: 0;
	}

	#wrapper {
		padding-right: 2px;
		padding-left: 2px;
	}

	#gobottom, #gotop {
		display: none;
		padding-right: 0.25em;
		border: 1px solid;
	}

	#gobottom {
		border-radius: 0;
	}

	#gotop {
		border-radius: 0 0.5em 0 0;
	}

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

	#message_index_jump_to {
		display: block;
		float: none;
	}

	#news, #logobox, .rightheader #logobox, #top_section_notice {
		display: none;
	}

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

	.postarea {
		display: block;
		margin: 0;
	}

	.poster_avatar {
		width: initial !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;
	}

	#forumposts .content {
		padding: 5px;
	}

	#forumposts h2 img {
		display: none;
	}

	.keyinfo h5 {
		padding: 3px;
	}

	.keyinfo h5:after {
	}

	h2 .views_text, h2 .nextlinks {
		line-height: 1.4em;
		display: block;
		float: none;
	}

	.modified {
		display: none;
	}

	.board_row {
		margin-top: 3px;
		padding: 15px 0;
	}

	.board_info .board_description, .board_info .moderators {
		display: none;
	}

	.childboard_row {
		padding: 0 0 0 35px;
	}

	.childboards {
		margin: 0 5px;
	}

	.childboards li {
		font-size: 1.2em;
		display: block;
	}

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

	.board_info, .board_latest {
		font-size: 1em;
		display: block;
		box-sizing: border-box;
		width: 100%;
		margin-bottom: 2px;
	}

	.board_latest {
		width: 100%;
		margin: 0;
		padding: 0 8px;
	}

	.board_lastpost, .topic_lastpost {
		min-width: 18em;
	}

	.board_lastpost {
		float: none;
		margin: 3px 8px;
		padding-top: 6px;
	}

	.board_info h3 a {
		font-size: 1.357em;
		word-wrap: break-word;
	}

	.board_name {
		margin: 0;
		padding: 0 0 1px 55px;
	}

	.board_info:after {
		display: block;
		clear: both;
		content: "";
	}

	.topic_listing > li {
		margin-bottom: 5px;
		border: 1px solid;
	}

	.icon_anchor {
		min-width: 0;
	}

	.lastpost_link, .board_lastposter {
		font-size: 1.071em;
		display: inline;
	}

	.recentboard, .recentposter {
		display: none;
	}

	.lastpost_link, .board_lastposter, .board_lasttime {
		white-space: normal;
	}

	#basicinfo, #detailedinfo {
		float: none;
		width: 100%;
	}

	.views_text, .nextlinks {
		display: none !important;
	}

	#gotop, #gobottom {
		top: auto;
		bottom: 0;
		width: 1.2em;
		height: 1em;
		padding: 0.2em 0.1em;
		text-align: center;
	}

	#gotop {
		margin-left: 1.45em;
	}

	.admin_menu li {
		font-size: 0.8em;
		display: block;
		float: left;
		width: 32%;
	}

	#main_menu {
		clear: left;
	}

	.listlevel2:hover .menulevel3, .listlevel2.sfhover .menulevel3 {
		left: -4px;
	}

	.listlevel2, .listlevel3 {
		max-width: 10em !important;
	}

	.menulevel2 {
		max-width: 11em;
	}

	.menulevel3 {
		display: none !important;
	}

	#main_menu li ul li, .admin_menu li ul li {
		display: block;
		float: left;
		width: 100%;
	}

	.generalinfo {
		overflow: auto;
	}

	ul.poster {
		display: block;
		clear: both;
		text-align: center;
	}

	.poster {
		float: none;
		width: auto;
	}

	.poster .name {
		white-space: nowrap;
		text-overflow: clip;
	}

	.poster .listlevel1 {
		padding: 5px 0 0 0;
	}

	.poster_container {
		width: 7em;
		margin-top: 2em;
		padding: 0.1em;
	}

	.poster li.avatar {
	}

	.poster .subsections {
		max-width: 200px;
		max-height: 1.5em;
	}

	.poster:after, .posterarea:before {
		display: block;
		clear: both;
		padding-bottom: 3px;
		content: "";
	}

	.postarea, .forumtitle {
		margin-left: 1em;
		padding: 0;
	}

	.linktree .board_moderators {
		display: none;
	}

	.linktree:last-child {
		max-width: 10em;
	}

	.qaction_row {
		display: none;
	}

	.signature {
		display: none;
	}

	.forumposts .content {
		margin-bottom: 6px;
	}

	.attachment_block, .attachment {
		max-width: 47%;
		min-width: 47%;
		text-align: initial;
	}
	.attachment_name, .attachment_details {
		text-align: initial;
		width: 90%;
	}

	a.linklevel1.button_strip_notify,
	a.linklevel1.button_strip_print, a.linklevel1.button_strip_send, .inline_mod_check,
	a.linklevel1.quotetonew_button, a.linklevel1.button_strip_post_poll,
	.keyinfo .post_subject, li.listlevel1.quickmod_select_all,
	#collapse_button, p.inline.membergroups {
		display: none !important;
	}

	#display_jump_to {
		float: right;
	}

	#button_profile .avatar {
		display: none;
	}

	.quickbuttons {
		font-size: 0.9em;
		clear: both;
		margin: 8px 0 6px 0;
	}

	#search_form {
		top: 5px;
		display: none;
		float: none;
		text-align: center;
	}

	#search_jump_to, .search_controls {
		display: none;
	}

	.small_pagelinks, .sort_by_container {
		display: none;
	}

	.profileblock_left, .profileblock_right {
		float: none;
		overflow: auto;
		width: 100%;
	}

	.profile_attachments .profile_attachment {
		width: 100px;
	}

	.profile_attachment a img {
		max-width: 100px;
		max-height: 100px;
	}

	.pagesection div.floatright {
		display: block;
		float: none;
	}

	.pm_icon, .pm_quickmod, .label_pms {
		display: none;
	}

	.popup_container .popup_window {
		width: 95%;
	}

	.poster .menulevel2 {
		float: right;
	}

	.poster .listlevel1:hover .menulevel2, .poster .listlevel1.sfhover .menulevel2 {
		right: 0;
		left: auto;
	}

	.poster .listlevel2 {
		width: 8em;
		max-width: 8em;
	}

	.bbc_table_container {
		overflow: auto;
		max-width: 100%;
	}

	.pm_from {
		max-width: 6em;
		text-align: left;
		word-wrap: break-word;
	}

	#month_grid {
		display: none;
	}

	#warning_level {
		max-width: 5em !important;
	}

	/* mentions */
	.mentionavatar .avatar {
		max-width: 40px;
		max-height: 40px;
	}

	#list_mentions thead, .mention_log_time {
		display: none;
	}

	ul.navigate_section li:not(:first-child):not(:last-child) a {
		display: block;
		overflow: hidden;
		width: 8em;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.linktree:first-child {
		padding-left: 0;
	}

	.mlist li .website, .mlist li .date_registered {
		display: none;
	}

	.whos_online dt {
		display: none;
	}

	.whos_online dd, .whos_online dd div {
		display: block;
	}

	#post_confirm_buttons {
		font-size: 0.8em;
	}

	.pm_date {
		width: 30%;
	}

	dd label {
		display: inline;
	}
}

/* This one does 480px screens at default font size. */
@media screen and (max-width: 30em) {
	.content {
		padding: 0.1em 0.1em;
	}

	.listlevel2, .listlevel3 {
		max-width: 13em !important;
	}

	.menulevel2 {
		max-width: 14em;
	}

	#main_menu .listlevel1 {
		font-size: 0.9em;
		margin: 0;
	}

	#menu_nav {
		height: 3.1em !important;
	}

	.navigate_section {
		margin: 1em 5px 0 5px;
		padding-right: 0;
	}

	.pagelinks {
		/* Necessary for some browsers to keep the pages all on the same line */
		min-width: 100%;
		height: 30px;
	}

	.pagesection .buttonlist {
		float: none;
		width: 100%;
	}

	#button_admin {
		display: none;
	}

	.quickbuttons .modified {
		display: none;
	}

	.mlist li div.posts {
		display: none;
	}

	.shortcuts {
		display: none;
	}

	dt, dd, dd label, .login dt, #advanced_search dt {
		width: 100% !important;
	}

	dd {
		padding-left: 0% !important;
	}

	/* Override the previous for charts in the stats page */
	.statsbar {
		padding-left: 0 !important;
	}

	dd input, dd select, dd textarea {
		max-width: 85% !important;
	}

	.settings > dt {
		width: 60% !important;
	}

	.settings > dd {
		width: 40% !important;
	}

	ul.post_options li {
		width: 50%;
	}

	#postAttachment dd, #postAttachment2 dd {
		margin: 2px 1px;
	}

	#postMoreOptions, #postAttachment, #postAttachment2 {
		padding: 4px;
	}

	#confirm_buttons .button_submit {
		height: inherit;
		max-height: none;
	}

	.icon.hamburger_30, .fa.hamburger_30 {
		display: inline-block;
		padding-top: 0.1em;
		cursor: pointer;
		vertical-align: middle;
	}

	.icon.hamburger_30:before, .fa.hamburger_30:before {
		margin: 0.2em;
	}

	#display_jump_to {
		display: inline-block;
	}

	.hide_30.hamburger_30_target {
		position: absolute;
		left: -9999px;
	}

	.icon.hamburger_30.visible, .fa.hamburger_30.visible {
		display: none;
	}

	.hide_30.hamburger_30_target.visible {
		position: relative;
		left: auto;
	}

	.buttonlist {
		font-size: 0.9em;
		padding: 5px 0 0;
	}

	.buttonlist > li {
		font-size: 0.9em;
		border: none !important;
	}
}

/* This one does 368px screens at default font size. */
@media screen and (max-width: 23em) {
	#search_form {
		display: none;
	}

	.poster li.membergroup {
		display: none;
	}

	.poster .title, .icons img {
		display: none;
	}
}