/* INTRODUCTION
/* This is the standard Elkarte default 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.
/*
/* $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.
/*
/* $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 {
margin: 0 auto;
/* Next controls forum width, when it is not set in admin. */
width: 90%;
/* Next limits maximum width on wide screens. */
/* Sized in em, since some people require larger text. */
/* For ease of reading, content really should not be too wide. */
max-width: 90em;
/* Next is just for some testing. */
/*min-width: 100%;*/
}
/* Cursor declared here.Should not be required anywhere else. */
a:hover, a.new_win:hover {
cursor: pointer;
}
body {
margin: 0;
padding: 0 0 0 0;
/* Set a font-size that will look the same in all browsers. */
/* Start with the best Vista/W7 font, then Mac, Linux, then old fallbacks. */
/* 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% "Segoe UI", "Helvetica Neue", "Liberation Sans", "Nimbus Sans L", "Trebuchet MS", Arial, sans-serif;
}
/* 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, .input_text, textarea, .editor {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
font-weight: normal;
font-size: 1em;
}
/* Declarations for specific elements. @todo - Maybe simplify - test. */
.wrapper, div.windowbg, div.windowbg2,
.roundframe, .description, .information, .successbox, .warningbox,
.category_header, .generic_list_wrapper, .submitbutton,
.grid8, .grid17, .grid20, .grid25, .grid30, .grid33, .grid50, #description_board .generalinfo {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* 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: "";
}
/* @todo */
.statistics>.flow_hidden>.category_header:after {
display: none;
}
/* Set list-style to none by default. Best in most places.*/
ul, ol {
list-style: none;
}
/* No image should have a border when linked. */
/* @todo - I'm sure this would be better done with specific classes
/* rather than global tag name. */
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. */
/* Paddings 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]
*/
input, button, select, textarea, .editor {
font: 87.5%/150% "Segoe UI", "Helvetica Neue", "Liberation Sans", "Nimbus Sans L", "Trebuchet MS", Arial, sans-serif;
}
/* The following is necessary. */
textarea, .editor {
border-radius: 4px;
font-size: 1em;
}
.sceditor-container {
margin: 0 0 6px 0;
}
/* Gecko-specific reset - makes buttons consistent with other browsers. */
/* Yes, rotten browser-specific code. It will save some dramas though. */
button::-moz-focus-inner, input[type='button']::-moz-focus-inner,
input[type='reset']::-moz-focus-inner, input[type='submit']::-moz-focus-inner,
select::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Declarations for inputs, selects and buttons */
input, .input_text, button, select {
padding: 0 6px;
min-height: 2em;
max-height: 2em;
height: 2em;
vertical-align: middle;
}
select {
padding: 0 0 0 2px;
}
.input_text {
font-size: .876em;
}
select option {
padding: 0 4px;
}
/* Special form elements need to be addressed */
select#cat, select#suggestions, select#file , input[type="file"] {
height: auto;
max-height: none;
}
.select_multiple {
min-height: 10em;
height: auto;
}
input[type="number"] {
padding: 0 0 0 6px;
}
/* No borders around checkboxes or radio buttons, and middle aligned. */
.input_check, .input_radio {
border: none;
background: none;
vertical-align: middle;
margin: 0 2px 2px;
}
/* Common button styling. */
/* It is being replaced with three classes: */
/* .button_submit is not floated */
/* .right_submit is right floated */
/* .left_submit is left floated */
/* The button_reset class may need attention too. */
.button_submit, .right_submit, .left_submit, .button_reset,
/* 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 {
padding: 0 6px;
display: inline-block;
}
.left_submit, .linkbutton_left {
float: left;
}
.right_submit, .linkbutton_right {
float: right;
}
/* Hover effects. */
.button_submit:hover, .right_submit:hover, .left_submit:hover,
.button_reset:hover,
.linkbutton:hover, .linkbutton_right:hover, .linkbutton_left:hover {
cursor: pointer;
}
/* Dont show disabled buttons as active on hover */
input[type=submit][disabled]:hover, button[disabled], button[disabled]:hover {
border: 1px solid #afafaf;
border-top: 1px solid #cfcfcf;
border-left: 1px solid #bfbfbf;
box-shadow: 1px 1px 2px #e5e5e5;
}
.linkbutton:link, .linkbutton_right:link, .linkbutton_left:link,
.linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited {
font-size: 0.857em;
line-height: 1.929em;
}
/* @todo - A common, tag-agnostic class to hold submit buttons, etc. */
/* Old markup had crud like
*/
/* Use new class that is defined to suit, and with a sensible name. */
.submitbutton {
text-align: right;
padding: 6px 0;
overflow: auto;
}
#post_confirm_buttons {
padding: 0 1px 1px 0;
}
/* @todo - Test this out some more. */
.submitbutton .button_submit, .submitbutton .linkbutton, .submitbutton .right_submit {
padding: 0 6px;
margin-right: 0.2em;
margin-left: 0.2em;
}
/* @todo mostly for those go buttons that don't have a form id */
.button_submit.submitgo {
margin-bottom: 4px;
}
/* IE has its own padding needs */
#ie select, #ie8 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-weight: bold;
line-height: 1.12px;
}
.new_posts, .require_approval {
display: inline;
padding: 1px 4px 2px 4px;
font-size: .643em;
font-family: verdana, sans-serif;
}
.new_posts:hover {
text-decoration: underline;
}
del .bbc_link:link, del .bbc_link:visited {
text-decoration: line-through;
}
.childboards .new_posts {
font-size: 0.857em;
padding: 1px 3px 2px;
}
/* Standard horizontal rule.. ([hr], etc.) */
hr {
margin: 12px 0;
height: 1px;
}
/* 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. Test for teh bugz. */
fieldset {
overflow: auto;
border: none;
}
strong {
color: #666;
font-weight: bold;
}
/*...and em as italics */
em {
font-style: italic;
}
.table_grid_perms {
table-layout: fixed;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}
.grid8 {
width: 8%;
}
.grid17 {
width: 17%;
}
.grid20 {
width: 20%;
}
.grid25 {
width: 25%;
}
.grid30 {
width: 30%;
}
.grid33 {
width: 33%;
}
.grid50 {
width: 49.5%;
}
/* $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;
}
/* @todo - Test this everywhere. */
.standard_category>.content {
margin: 4px 0 0 0;
overflow: auto;
}
/* Floats, overflows, clears. @todo */
.floatright {
float: right;
}
.floatleft {
float: left;
}
.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. */
/* @todo - th shouldn't be required. */
.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;
}
.nowrap {
white-space: nowrap;
}
.wordbreak {
word-break: break-all;
}
/* Styles for main headers. */
.category_header, .forum_category .category_header {
padding: 4px 10px 2px 10px;
font-size: 1.214em;
line-height: 1.8em;
}
/* Styles for subsection headers. @todo */
.secondary_header {
margin: 12px 0 0 0;
font-size: 1.143em;
line-height: 1.8em;
padding: 1px 10px 1px;
}
.category_header .icon {
margin: 0 5px 0 0;
vertical-align: text-top;
}
/* Category Header icons as sprites
------------------------------------------------- */
.hdicon:before {
background-image: url(../images/icons/header.png);
background-repeat: no-repeat;
content: "";
display: inline-block;
height: 24px;
width: 30px;
vertical-align: text-bottom;
}
/* broke formatting for compactness */
.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 {
margin: 2px 4px -2px 0;
float: right;
}
/* Upshrink image in the general category headers */
#category_toggle, #category_toggle_more, #upshrink_header, .package_toggle {
display: block;
float: right;
padding: 0 16px;
overflow: hidden;
position: relative;
}
#category_toggle span, #category_toggle_more span, #upshrink_header span, .package_toggle span {
background-repeat: no-repeat;
background-image: url(../images/_light/expcol.png);
position: absolute;
top: 50%;
margin-top: -30px;
left: 50%;
margin-left: -58px;
padding: 47px 50px;
}
/* Upshrink image in the page top for the header collapse */
#collapse_button .linklevel1 {
display: block;
overflow: hidden;
position: relative;
padding: 0;
margin-right: 1px;
}
.collapse {background-position: 0 -25px;}
.expand {background-position: -116px -25px;}
/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body, .windowbg2 {}
/* General code for generic divs. Should make them behave. */
/* @todo - Not keen on this. Do no-tag-names solution instead? */
/* @todo - When sorted out take care of div.core_posts too */
div.windowbg, div.windowbg2 {
overflow: auto;
padding: 10px 0;
}
/* Other highlighted text, such as search results. */
.highlight {
font-weight: bold;
font-size: 1.071em;
}
/* Legacy highlight color, for selected membergroups etc. */
/* Used by JS to show a selected item. @todo - deprecate? */
.highlight2 {
font-size: 1.071em;
}
/* Sometimes there will be an error when you post */
.error {
color: red;
}
.border_error {
border: 1px solid red !important;
}
/* Messages that somehow need to attract the attention. */
.alert {
color: red;
}
/* Colors for warnings. */
.warn_mute {
color: red;
}
.warn_moderate, .softalert {
color: #ffa500;
}
.warn_watch, .success {
color: green;
}
.moderation_link, .moderation_link:visited {
color: red;
font-weight: bold;
}
/* Used for sections that need somewhat larger corners */
/* @todo - Daft name. Other stuffz. :P */
.roundframe {
overflow: hidden;
margin: 2px 0 0 0;
padding: 9px;
}
.roundframe p {
padding: 6px;
}
/* The generic wrapper thingy. Used by generic list template */
.generic_list_wrapper {
overflow: auto;
margin: 0;
padding: 8px 8px 16px 8px;
}
.generic_list_wrapper .additional_row {
margin: 0;
padding: 10px 0 0;
}
/* The .information box is used by the after_title additional row */
.generic_list_wrapper .information .additional_row {
border: none;
padding: 6px 0;
}
.generic_list_wrapper .information {
margin: 0;
padding: 0;
border: none;
}
/* @todo - Ha. Just another silly bunch of divs. */
.content {
padding: 0.2em 1em;
}
.content p {
margin: 0 0 6px 0;
}
/* Styles used by the auto suggest control. */
.auto_suggest_div {
position: absolute;
z-index: 100;
visibility: hidden;
}
.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 {
margin: 6px 0 0 0;
padding: 4px 6px 2px 6px;
font-weight: bold;
font-size: 0.857em;
}
/* [Select] link to copy code. */
.codeoperation {
font-weight: normal;
}
/* A quote, perhaps from another post. */
.bbc_standard_quote, .bbc_alternate_quote,
/* A code block - maybe PHP ;) - shared styles. */
.bbc_code {
overflow: auto;
margin: 0 0 1em 0;
padding: 6px 10px;
font-size: 0.857em;
}
/* Extra code block styling. */
.bbc_code {
overflow: auto;
height: 20em;
white-space: nowrap;
font-family: "DejaVu Sans Mono", Monaco, Consolas, monospace;
resize: vertical;
}
.bbc_code .tab {
width: 4ex;
white-space:pre;
display: inline-block;
}
/* Stop em compounding when elements are nested. */
/* @todo - Scrap old extra divs in Subs.php. */
.bbc_standard_quote .bbc_alternate_quote, .bbc_alternate_quote .bbc_standard_quote,
.bbc_standard_quote .bbc_code, .bbc_alternate_quote .bbc_code, .bbc_standard_quote .codeheader,
.bbc_alternate_quote .codeheader, .bbc_standard_quote .quoteheader, .bbc_alternate_quote .quoteheader,
/* And for quote inside small text areas, like the topic summary. */
#topic_summary .bbc_standard_quote, #topic_summary .bbc_alternate_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;
}
.bbc_strong {
color: inherit;
}
.bbc_img {
border: 0;
max-width: 100%;
}
.bbc_table {
color: inherit;
font: inherit;
}
.bbc_table td {
color: inherit;
font: inherit;
vertical-align: top;
padding: 0 1em 0 0;
}
.bbc_table th {
color: inherit;
font: inherit;
font-weight: bold;
padding: 0 1em 0 0;
}
.bbc_u {
text-decoration: underline;
}
.bbc_list {
padding: 0 0 0 35px;
text-align: left;
list-style-type: square;
}
/* 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 {
margin-top: 10px;
padding: 4px 8px 4px 0;
font-size: small;
overflow: auto;
}
.footnote_return {
font-size: 1.357em;
}
/* Shorten url's inside posts. */
a.bbc_link {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
vertical-align: bottom;
word-wrap: normal;
}
/* $AJAX */
/* ------------------------------------------------------- */
/* The "Loading" bar for quick edit, etc. */
#ajax_in_progress {
position: fixed;
top: 0;
left: 0;
padding: 15px;
width: 100%;
text-align: center;
font-size: 1.571em;
z-index: 100;
}
#ajax_in_progress a {
color: orange;
text-decoration: underline;
}
/* $MAIN. */
/* ------------------------------------------------------- */
/* The top bar. */
#top_section {
margin: 0;
padding: 0;
}
#top_section_notice {
float: left;
margin: 0;
padding: 14px 8px 0 8px;
line-height: 1.286em;
min-width: 38%;
}
#top_section_notice .toggle_login {
display: inline;
cursor: pointer;
}
#top_section_notice form {
white-space: nowrap;
width: 100%;
}
.top_button {
line-height: 1.286em;
max-height: 1.357em;
padding: 2px;
margin-left: 1px;
vertical-align: top;
}
.top_button img {
vertical-align: middle;
padding: 2px;
}
#password_login {
display: inline-block;
vertical-align: middle;
-webkit-appearance: caps-lock-indicator;
}
#search_form {
padding: 12px 3px 4px 8px;
float: right;
}
#search_form * {
margin: 0;
border-radius: 0;
/* Webkit (bleh) fix. */
float: left;
}
/* The logo and slogan. */
#header {
padding: 2px 2px 0 2px;
}
/* The main title. */
#forumtitle, .rightheader #forumtitle {
padding: 10px 10px 6px 13px;
font-size: 2.357em;
line-height: 1.455em;
}
.centerheader .forumlink {
display: none;
}
.rightheader #forumtitle .forumlink {
float: right;
}
/* Float these items to the right. @todo - Simplify. */
#logobox, .rightheader #logobox {
float: right;
padding: 0 12px 0 12px;
max-width: 40%;
}
.centerheader #logobox {
width: 100%;
}
.rightheader #logobox, .rightheader #logo {
float: left;
padding-bottom: 7px;
}
.centerheader #logobox, .centerheader #logo, .centerheader #siteslogan {
float: none;
display: block;
margin: 0 auto;
text-align: center;
}
#siteslogan {
clear: both;
}
/* Tweak the logo */
#logo {
margin: 0 8px 0 0;
padding: 0;
float: right;
}
.rightheader #logo {
margin: 0 0 0 8px;
}
/* Main forum area. */
/* Box-shadow only on this one. */
#wrapper {
margin-top: 20px;
padding: 1.2em 1em;
}
/* The user info, news, etc.*/
#news {
vertical-align: top;
padding: 0 0 1em 0;
margin-left: -1px;
}
#news .bbc_link {
display: inline;
}
/* 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 {
padding: 1em 0 0 0;
min-height: 180px;
}
/* The footer with copyright links etc. */
#footer_section {
margin: 35px 0 0 0;
}
#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 {
display: inline;
visibility: visible;
font-family: Verdana, Arial, sans-serif;
font-size: 0.857em;
}
#footer_section .rssfeeds {
float: right;
padding-top: 2px;
width: 21px;
margin: auto;
text-align: center;
}
/* $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
elements have the class or id mentioned above.
/* - 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_nav {
padding: 6px;
}
#main_menu {
position: relative;
}
/* 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. */
/* 1px padding gives slight gap between buttons, and drop menus. */
.listlevel1 {
position: relative;
float: left;
margin: 0 2px;
padding: 2px 0;
font-size: 0.929em;
line-height: 2.077em;
}
.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 {
max-width: 1.5em;
max-height: 1.5em;
margin: 0;
margin-right: 0.6em;
position: relative;
top: 4px;
}
/* Level 1 Menu bar: link or button. */
.linklevel1 {
display: block;
padding: 0 0.6em;
white-space: nowrap;
}
.listlevel1#button_profile .linklevel1 {
min-width: 5em;
}
/* Levels 2 and 3: drop menu wrapper. */
.menulevel2, .menulevel3 {
position: absolute;
top: 100%;
left: -9999px;
z-index: 90;
margin: 0;
padding: 0.6em;
width: 18.4em;
}
/* Level 3: drop menu positioning. */
.menulevel3 {
margin: -2em 0 0 15.3em;
}
/* 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 {
left: auto;
right: 0;
}
/* 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;
padding: 0;
width: 17em;
}
/* Levels 2 and 3 drop menus: link or button. */
.linklevel2, .linklevel3 {
position: relative;
display: block;
padding: 1px 7px;
}
/* @todo - Note: The next declarations are for keyboard access with js disabled. */
/* Hmm. These are tricky with the new Superfish/Superclick combo. */
/* May need a noScript class added somewhere. Pondering required. */
/*
.linklevel2:focus, .linklevel3:focus {
margin-left: 9990px;
width: 17em;
}
.linklevel3:focus {
margin-left: 19950px;
}
*/
/* @todo - Cancel those for hover and/or js access. */
/*
.listlevel2:hover .linklevel2:focus, .listlevel2.sfhover .linklevel2:focus,
.listlevel3:hover .linklevel3:focus, .listlevel3.sfhover .linklevel3:focus {
z-index: 999;
margin-left: 0;
width: auto;
}
*/
/* Styles for sidebar menus.
------------------------------------------------------- */
#main_admsection {
overflow: auto;
}
#menu_sidebar {
float: left;
padding: 0 10px 1em 0;
width: 200px;
}
/* @todo */
#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;
}
/* @todo - Note: The next declarations are for keyboard access with js disabled. */
/* Hmm. These are tricky with the new Superfish/Superclick combo. */
/* May need a noScript class added somewhere. Pondering required. */
/*
#menu_sidebar .linklevel2:focus {
margin-left: 10150px;
width: 17em;
}
*/
/* Cancel those for hover and/or js access. */
/*
#menu_sidebar .listlevel2:hover .linklevel2:focus, #menu_sidebar .listlevel2.sfhover .linklevel2:focus {
margin-left: 0;
width: auto;
}
*/
/* $LINKTREE */
/* ------------------------------------------------------- */
/* The navigation list (i.e. linktree) */
.navigate_section {
overflow: hidden;
margin: 3px 0 0 0;
padding-right: 1em;
}
#main_content_section .navigate_section {
margin: 12px 0 6px 0;
}
.linktree {
position: relative;
float: left;
font-size: 0.929em;
line-height: 2em;
display: inline-block;
padding: 0 1.1em 0 2em;
border: none;
white-space: nowrap;
}
.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 {
content: "";
position: absolute;
display: inline-block;
right: -1em;
top: 0;
width: 2em;
height: 2em;
/* Scale the squares diagonal to = the line-height */
transform: scale(0.7071) rotate(45deg);
-webkit-transform: scale(0.7071) rotate(45deg);
-ms-transform: scale(0.7071) rotate(45deg);
z-index: 1;
}
#ie8 .linktree:after {
border-right: 1px solid #ccc;
width: 0;
right: 0;
}
.linktree:first-child {
padding-left: 1em;
}
/* $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 {
padding: 5px 5px 0 5px;
}
.buttonlist li {
float: left;
margin: 0 0 0 4px;
line-height: 2.231em;
}
/* @todo - Save code by amalgamating common button background declarations. */
.buttonlist li a {
display: block;
padding: 0 6px;
font-size: 0.786em;
line-height: 2em;
}
.fa.hamburger_30 {
display: none;
}
/* The quick buttons. */
/* ------------------------------------------------------- */
.quickbuttons {
margin: 8px 0 6px 0;
text-align: right;
}
.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 {
position: relative;
float: right;
margin: 2px 0;
padding: 2px 0;
font-size: 0.857em;
}
/* Odd cases. */
.follow_ups .listlevel1, #topic_summary .quickbuttons .listlevel1 {
font-size: 1em;
}
.quickbuttons .modified {
float: left;
padding: 0 0 0 6px;
}
.quickbuttons .inline_mod_check {
margin: 4px 0 0;
padding: 0 4px;
}
.inline_mod_check .input_check {
height: auto;
margin: 0 0 2px;
}
/* @todo - Save code by amalgamating common button background declarations. */
.quickbuttons .linklevel1 {
float: left;
padding: 1px 6px 0 22px;
line-height: 2em;
cursor: pointer;
}
/* @todo remove this when we drop ie8 */
#ie8 .quickbuttons .linklevel1 {
float: none;
}
/* @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;
display: block;
height: 24px;
width: 18px;
left: 3px;
top: 50%;
margin-top: -12px;
content: "";
}
.quickmod_check {
left: 3px;
}
/* The rest of them. */
.quickbuttons .linklevel1:before, .quickbuttons .linklevel2:before {
background-repeat: no-repeat;
/* A rare example of where longhand background declarations work well. */
background-image: url(../images/theme/quickbuttons.png);
}
/* 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 {background-position: 0 -384px;}
.unlike_button:before {background-position: 0 -408px;}
.star_button:before {background-position: 0 -432px;}
.quick_edit:before {background-position: 0 -456px;}
.likes_button:before {background-position: 0 -480px;}
/* No icon here. */
.linklevel1.post_options:before,
.follow_ups .linklevel1:before {
display: none;
}
/* "More..." gets custom padding (no icon). */
.linklevel1.post_options {
padding: 1px 6px 0 6px;
}
/* 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 {
padding: 0.5em;
width: auto;
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 {
background-position: 0 -480px;
}
.unlike_button:hover:before {
background-position: 0 -408px;
}
.like_button:hover:before {
background-position: 0 -384px;
}
.quickbuttons .listlevel2 {
width: 12em;
}
.follow_ups .listlevel2 {
width: 20em;
}
.follow_ups .linklevel2 {
overflow: hidden;
text-overflow: ellipsis;
}
.quickbuttons .linklevel2 {
padding: 0 6px 0 26px;
line-height: 2.1em;
}
/* $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: 0px 4px 0px 0px;
}
.selectbox, .pagelinks {
margin: 5px 5px 0px;
font-size: 0.857em;
}
/* @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;
}
.pagelinks .current_page {
display: block;
float: left;
padding: 1px 8px 1px 8px;
font-weight: bolder;
}
.expand_pages {
display: block;
float: left;
min-width: 1.5em;
text-align: center;
cursor: pointer;
font-weight: bold;
padding: 2px 0;
}
.next_page, .previous_page {
padding: 0 2px;
text-transform: capitalize;
}
/* @todo - Fix for all templates. */
.small_pagelinks {
float: right;
margin-top: -2px;
}
.small_pagelinks li {
float: left;
}
.small_pagelinks li {
display: inline;
}
.small_pagelinks .navPages {
padding: 2px 3px 0 3px;
font-size: 0.857em;
display: block;
float: left;
}
#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 {
position: fixed;
bottom: 50%;
left: 0;
z-index: 9;
padding: 1.286em 0.1em 0 0.1em;
height: 1.5em;
font-size: 2em;
font-weight: bold;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
}
#gobottom {
top: 50%;
padding: 0.8em 0.1em 0.5em 0.1em;
}
#gotop:hover, #gobottom:hover {
text-decoration: none;
}
/* Skip navigation link. */
#top {
position: absolute;
top: -10em;
left: 3em;
padding: 1em 2em;
font-weight: bold;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
transition: top .5s ease-out 0s, background 1s linear 0s;
}
#top:focus {
top: -4px;
}
/* $TABLES */
/* ------------------------------------------------------- */
/* A general table class. */
.table_grid {
margin: 0;
width: 100%;
border-spacing: 0;
border-collapse: collapse;
border-top: none;
}
.table_head>th {
padding: 5px 8px;
font-size: 1em;
font-weight: bold;
text-align: left;
}
.table_head>th.centertext {
text-align: center;
}
/* Trial extra classes, for table_heads that have equal width columns. */
/* @todo - Not sure how much these will be used. Try them out. */
.two_column>th {
width: 50%;
}
.three_column>th {
width: 33.333%;
}
.four_column>th {
width: 25%;
}
.five_column>th {
width: 20%;
}
/* Basic cells. */
.table_grid td, .letterspacing{
padding: 5px 8px;
border-bottom: 1px solid #ccc;
}
.table_grid textarea {
width: 100%;
}
.table_grid .statsbar div {
display: none;
}
.table_grid textarea {
width: 100%;
}
/* GenericList */
.additional_row {
padding: 6px 0;
}
.sort_by_item .sort, .sort {
margin: 0 0 -4px 4px;
}
/* For Errors.template.php. */
/* ------------------------------------------------------- */
#errorfile_table .current {
font-weight: bold;
}
/* $SETTINGS */
/* ------------------------------------------------------- */
/* Lists - settings use these a lot.
/* @todo - Inefficient selector. Should not need dl tag. */
dl.settings {
clear: right;
overflow: auto;
margin: 0 0 10px 0;
padding: 0;
}
dl.settings dt {
float: left;
clear: both;
margin: 0 0 10px 0;
padding: 0;
width: 40%;
}
dl.settings .settings_title {
float: none;
clear: both;
margin: 0 0 10px 0;
padding: 5px 0 0 0;
width: 100%;
font-weight: bold;
}
/* @todo -Inefficient selector. Should not need dl or dt tags. */
dl.settings dt.windowbg {
float: left;
clear: both;
margin: 0 0 3px 0;
padding: 0 0 5px 0;
width: 98%;
}
dl.settings dd {
float: right;
overflow: auto;
margin: 0 0 3px 0;
padding: 0;
width: 55%;
min-height: 2em;
}
/* 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;
}
dl.settings img {
margin: 0 10px 0 0;
vertical-align: middle;
}
/* help icons */
dl.settings dt a img {
position: relative;
vertical-align: top;
}
dl.settings textarea {
width: 85%;
padding: 0 0.5em;
}
dl.settings label {
vertical-align: top;
}
.settings .smalldescription {
padding-left: 1em;
display: inline-block;
}
/* $BOARDS */
/* ------------------------------------------------------- */
/* The small stats, under upper linktree. */
#index_common_stats {
margin: 0 8px 6px 8px;
font-size: 0.857em;
}
/* The board categories and newsfader - some shared styling. */
.forum_category {
clear: both;
margin: 0 0 1em 0;
}
.category_boards, .board_row, .childboard_row {
margin: 1px 0 0 0;
}
.board_row {
padding: 14px 0 11px 0;
}
.childboard_row {
margin: 0;
}
.childboards li:nth-child(n+3):before {
content: " - ";
}
.board_info, .board_latest {
display: table-cell;
vertical-align: top;
width: 70%;
padding: 0 8px;
font-size: 0.929em;
}
.board_latest {
width: 40%;
min-width: 36em;
padding: 0 14px;
}
.icon_anchor {
display: block;
text-align: center;
min-width: 50px;
padding: 2px 6px 0 0;
float: left;
}
.board_name {
padding: 0 0 1px 0;
font-size: 1.143em;
}
.board_info .board_description, .board_info .moderators {
margin: 0 0 0 56px;
}
.moderators {
font-size: 0.929em;
}
.board_stats {
text-align: right;
padding: 1px 0 1px 6px;
float: right;
min-width: 8.4em;
}
.board_avatar {
float: left;
margin-right: 5px;
}
.board_avatar a {
width: 40px;
height: 40px;
display: table-cell;
vertical-align: middle;
}
.board_avatar .avatar {
max-width: 40px;
max-height: 40px;
display: block;
margin: auto;
}
.lastpost_link, .board_lastposter, .board_lasttime {
white-space: pre;
}
.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;
}
.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 {
display: table-cell;
padding: 0 6px;
font-size: 0.857em;
}
#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 {
margin: 0 0 8px 0;
padding: 0 0 4px 0;
font-size: 1.071em;
}
/* Icons for info centre title bars. */
.ic_section_header .icon{
margin: -3px 4px 0 4px;
vertical-align: middle;
}
#ic_recentposts, #ps_recentposts, #ps_recenttopics {
margin: 0 auto;
width: 95%;
font-size: 0.857em;
border-collapse: collapse;
}
#ps_recentposts .norecent, #ps_recenttopics .norecent {
padding: 1em;
text-align: center;
}
#ic_recentposts td, #ic_recentposts th, #ps_recentposts td, #ps_recentposts th, #ps_recenttopics td, #ps_recenttopics th {
padding: 2px 4px;
vertical-align: top;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
max-width: 40em;
}
.recentpost {
width: 40%;
}
.recenttopic {
width: 55%;
}
.recentposter {
width: 15%;
}
.recentboard {
width: 20%;
}
.recenttime {
width: 25%;
}
.inline {
padding: 0 29px;
font-size: 0.857em;
}
#sort_by {
margin-bottom: -6px;
min-height: 2.2em;
}
#sort_by .input_check {
margin-bottom: 0;
}
.topic_sorting:hover #sortby, #sortby:hover, #sortby {
width: 11em;
right: -2.5em;
}
#sort_by.topic_sorting_recent {
margin: 4px 6px -1px 0;
}
.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;
}
.topic_sorting {
float: right;
font-size: 1.143em;
}
.topic_sorting>li {
padding: 0 3px;
}
.topic_sorting.topic_sorting_recent {
margin-top: 0;
}
/* For the who is template. */
/* Sort of a stray - ?action=who;sa=credits */
#credits p {
margin: 0;
padding: 0;
font-style: italic;
}
/* @todo - Would prefer to deprecate this. Tied up with js. */
img.new_posts {
padding: 0 1px;
}
/* @todo - Not required, or not in this file. */
.fix_rtl_names {
display: inline-block;
}
/* Styles for the message (topic) index. */
#messageindex, #unread {
clear: both;
}
.action_unread .topic_sorting #sortby, .action_unread #sortby,
.action_unreadreplies .topic_sorting #sortby, .action_unreadreplies #sortby {
width: 9em;
}
#unread_header {
margin-top: 0.5em;
}
/* The header abover the posts */
#forumposts .category_header {
overflow: hidden;
text-overflow: ellipsis;
}
/* The board description and who-is-viewing stuff. */
#description_board {
margin: 10px 0 0 0;
}
#description_board .generalinfo, #forumposts .generalinfo {
margin-top: 2px;
padding: 4px 4px 4px 12px;
}
#description_board .generalinfo .listlevel2 {
white-space: nowrap;
}
#description_board .generalinfo {
display: table;
width: 100%;
}
.topic_listing {
padding: 1px 0 0 0;
display: table;
width: 100%;
border-collapse: collapse;
}
.topic_listing>li {
margin: 1px 0 0 0;
display: table-row;
}
.topic_sorting>.topic_sorting_row, .topic_listing>.topic_sorting_row {
margin: 0;
}
.topic_sorting_row>h3 {
display: table-cell;
padding: 10px 12px 8px 12px;
width: 100%;
font-weight: bold;
font-size: 1.071em;
}
.topic_sorting_row>p {
display: table-cell;
vertical-align: middle;
width: 2%;
padding: 8px 8px 0 8px;
}
.sort_by_container {
font-size: 0.857em;
float: right;
vertical-align: top;
}
.topic_info {
display: table-cell;
vertical-align: top;
width: 70%;
padding: 7px 8px 6px 12px;
}
.topic_icons {
float: left;
text-align: center;
min-width: 50px;
padding: 6px 16px 0 0;
position: relative;
}
.fred {
position: absolute;
left: 42%;
top: 16px;
}
.topic_name, .topic_starter {
margin: 0 0 0 50px;
}
.topic_name h4 {
line-height: 1.429em;
padding-right: 30px;
word-break: break-all;
word-wrap: break-word;
}
.topic_name h4 a {
font-weight: bold;
}
.topic_starter {
font-size: 0.929em;
}
.topic_latest {
display: table-cell;
vertical-align: top;
padding: 7px 4px 6px 4px;
width: auto;
min-width: 36em;
white-space: nowrap;
font-size: 0.929em;
}
.topic_latest.relative {
min-width: 30em;
}
#ie8 .topic_latest.relative {
min-width: 36em;
}
.board_lastpost, .topic_lastpost {
min-width: 21em;
margin-left: 1em;
}
.topic_stats {
text-align: right;
display: table-cell;
float: right;
min-width: 14em;
box-sizing: border-box;
padding: 0 16px 0 16px;
line-height: 1.429em;
}
.topic_lastpost .img_last_post {
float: right;
padding: 4px;
}
.topic_moderation, .topic_moderation_alt {
display: table-cell;
vertical-align: middle;
width: 2%;
padding: 0 8px;
}
.topic_moderation_alt {
min-width: 56px;
}
.topic_moderation_alt img {
padding: 2px 2px 0 2px;
}
.topic_listing .warningbox {
margin-bottom: 0;
}
.qaction_row {
text-align: right;
padding: 6px;
display: block;
}
.basic_row, .sticky_row, .locked_row {
max-width: 100%;
width: 100%;
}
/* Message index icons as sprites
------------------------------------------------- */
.topicicon:before,
.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 {
background-image: url(../images/topic/topicicons.png);
background-repeat: no-repeat;
content: "";
display: inline-block;
height: 16px;
vertical-align: middle;
width: 18px;
}
.topicicon:before {
height: 18px;
}
/* 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 {
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;}
.locked_row.sticky_row .topic_info:before{background-position: 0 -180px; width: 30px;}
/* @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;
margin-top: 10px;
padding: 8px 12px;
width: 100%;
}
#topic_icons p {
padding: 0 6px;
line-height: 2em;
}
#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;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* $TOPICS */
/* ------------------------------------------------------- */
/* The display template (topic view).
/* Events */
.linked_events {
padding: 12px 0;
}
.edit_event {
margin: 0 5px 0 0;
vertical-align: middle;
}
/* Poll question */
#poll {
overflow: hidden;
}
#poll_main ul {
margin-top: 8px;
}
#poll .content {
padding: 0 12px;
}
#pollquestion {
padding: 0 0 6px 25px;
}
/* Poll vote options */
#poll_options .statsbar {
padding: 0;
}
#poll_options .options {
margin: 0 0 12px 0;
padding: 12px 30px 0 25px;
overflow: auto;
}
#poll_options .options li:after {
display: block;
clear: both;
content: "";
}
/* Poll results */
#poll_options .results {
position: relative;
}
/* Absolute positioning stops these breaking the bars on narrow screens. */
#poll_options .options .percentage {
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
float: right;
padding: 0 2px;
white-space: pre;
margin: 3px;
line-height: 1.2em;
}
/* Poll notices */
#poll_options p {
margin: 0 18px 2px 18px;
padding: 0 6px 6px 6px;
}
#pollmoderation {
overflow: auto;
margin: 0;
padding: 0;
}
/* On to the posts */
.forumposts {
clear: both;
margin: 8px 0 0 0;
}
/* Topic information */
.views_text, .nextlinks {
white-space: pre;
font-size: 0.786em;
}
.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 .windowbg, .forumposts .windowbg2,
.forumposts .approvebg, .forumposts .approvebg2, .core_posts {
overflow: visible;
margin: 4px 0 0 0;
}
/* @todo remove the div when div.windowbg and div.windowbg2 are sorted out */
div.core_posts {
padding: 0.2em 1em;
}
/* Poster details and list of items */
.poster {
display: table-cell;
vertical-align: top;
width: 15em;
word-wrap: break-word;
word-break: normal;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
font-size: 0.857em;
}
.poster.poster2 {
display: block;
float: left;
margin: 0;
min-width: 0;
font-size: 1em;
}
.poster .listlevel1, .poster.poster2 .listlevel1 {
float: none;
text-align: center;
font-size: 1em;
}
/* @todo - Add an h3 for a11y? Breaks Stoopidfish. Bleh. :P */
.poster .name {
overflow: hidden;
margin-top: -0.4em;
padding: 6px;
text-align: center;
font-weight: bold;
font-size: 1.357em;
text-overflow: ellipsis;
}
.poster.poster2 .name {
margin-top: 0;
padding: 0 8px 0 0;
text-align: left;
font-size: 1.143em;
}
.poster .name {
white-space: normal;
word-break: normal;
}
/* Drop menu for the poster info. */
.poster .listlevel1.sfhover .menulevel2, .poster .listlevel1:hover .menulevel2 {
top: 95%;
left: 0;
padding: 6px 1em 4px 1em;
width: 16em;
text-align: left;
}
.poster .listlevel2 {
width: 15em;
}
.poster .title {
white-space: normal;
word-wrap: break-word;
max-width: 100%;
}
.poster .linklevel2, .poster .linklevel2:focus,
.poster .listlevel2:hover .linklevel2 {
border: 1px solid transparent;
background: none;
padding: 0;
}
.poster .listlevel2:hover .linklevel2:hover {
text-decoration: underline;
}
.karma_allow>.linklevel2 {
display: inline-block;
}
.listlevel2>ol>li {
display: table-cell;
}
.report_seperator {
margin: 6px 0 0 0;
height: 1px;
}
/* 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 .linklevel2 {
display: inline;
}
.avatar {
width: auto;
height: auto;
max-width: 13em;
max-height: 20em;
}
/* The visible stuff below the avatar. */
.poster .membergroup {
font-weight: bold;
}
/* @todo - Save code by amalgamating common button background declarations. */
.poster_online .linklevel1 {
position: relative;
display: block;
margin: 3px 1.5em;
line-height: 2em;
}
/* End nifty new flyout. */
.poster {
float: left;
}
.post_wrapper {
display: block;
width: 100%;
clear: both;
}
.postarea {
display: block;
margin: 0 0 0 13em;
padding: 0 1em 0 1.5em;
max-width: 100%;
}
.postarea2 {
display: block;
padding: 0 1em;
}
#topic_summary .postarea2 {
font-size: 0.857em;
}
.post_subject {
display: block;
float: right;
overflow: hidden;
max-width: 15em;
text-overflow: ellipsis;
white-space: pre;
}
.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;
}
.keyinfo h5 {
padding: 1px 0 5px 0;
}
#topic_summary .keyinfo h5 {
padding: 0;
font-size: 1.143em;
}
/* @todo - Move strong tag outside anchor. Will save css. */
.keyinfo h5 a, .keyinfo h5 a strong {
font-weight: bold;
}
.inner {
margin: 0;
padding: 7px 8px 2px 2px;
min-height: 70px;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}
#topic_summary .inner {
clear: both;
}
.smiley {
vertical-align: bottom;
}
/* All the signatures used in the forum. */
.signature, .attachments, .custom_fields_above_signature {
overflow: auto;
padding: 8px 0;
font-size: 0.857em;
}
.attachments {
margin: 20px 0 0 0;
clear: both;
}
.attachments .attachment {
padding: 6px 8px;
display: inline-block;
min-width: 22%;
}
.attachment_thumb {
margin: 0 auto;
text-align: center;
}
/* @todo - Look at deprecating this hr. */
.attachments hr {
clear: both;
}
/* Separator of posts. More useful in the print stylesheet. */
.forumposts .post_separator {
display: none;
}
/* Used by video embed JS when autolinking video links */
.elk_video {
display: block;
width: 640px;
height: auto;
max-height: 480px;
}
.elk_video a img, .elk_video embed {
margin: 0 auto;
display: block;
}
.elk_videoheader {
padding: 0 4px 0 6px;
width: 630px;
max-width: 98%;
}
.elk_previewvideo {
max-width: 640px;
height: auto;
}
/* Basic stuff for the bottom of Display.template.php. */
#moderationbuttons {
float: left;
}
#moderationbuttons_strip {
float: left;
margin: 4px 0 4px -4px;
}
#moderationbuttons ul li {
margin: 0;
padding: 0 6px 4px 0;
}
/* 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. */
/* @todo - Markup and CSS could be tweaked here. */
#quickreplybox {
clear: both;
}
.editor_wrapper {
margin: 0 auto;
width: 60em;
max-width: 97%;
}
#quickReplyOptions form .quickreply {
min-width: 100%;
max-width: 100%;
width: 635px;
height: 100px;
}
/* The send topic section. */
fieldset.send_topic {
padding: 6px;
border: none;
margin: 0;
box-shadow: none;
}
dl.send_topic {
margin-bottom: 0;
}
dl.send_mail dt {
width: 35%;
}
dl.send_mail dd {
width: 64%;
}
.requiredfield:before {
height: 0;
position: absolute;
width: 0;
bottom: 90%;
left: 5%;
}
.requiredfield {
position: absolute;
top: 20px;
left: 5%;
font-size: 90%;
line-height: 1.1em;
display: none;
}
.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 {
padding: 0.5em 1em;
overflow: auto;
margin: 2px 0 0;
}
#postmodify #message{
width: 100%;
}
#postmodify .lastedit{
font-weight: bold;
}
#post_header, .postbox {
overflow: hidden;
padding: 6px;
}
#post_header dt, .postbox dt {
float: left;
margin: 6px 0 0 0;
padding: 0;
width: 15%;
font-weight: bold;
}
#post_header dd, .postbox dd {
float: left;
margin: 4px 0;
padding: 0;
width: 83%;
}
#post_header img {
vertical-align: middle;
padding: 0 0 2px 5px;
}
ul.post_options {
overflow: auto;
margin: 0 0 0 12px;
}
ul.post_options li {
float: left;
margin: 2px 0;
width: 33%;
}
#postAdditionalOptionsHeader, #postDraftOptionsHeader {
margin: 1em 0 0 0;
}
#postAdditionalOptions, #postDraftOptions {
margin: 0 0 1em 0;
overflow: auto;
}
#postAdditionalOptionsNC {
margin: 0 0 1em 0;
overflow: auto;
}
.shortcuts {
font-size: 0.857em;
float: left;
}
.shortcuts .lastedit {
text-align: left;
}
#mobile .shortcuts {
display: none;
}
/* $DRAG-N-DROP */
/* ------------------------------------------------------- */
.drop_area {
font-size: 1.643em;
font-weight: normal;
text-align: center;
opacity: 0.6;
display: none;
padding: 1em 0;
}
.drop_area_fileselect {
cursor: pointer;
margin-left: -160px;
opacity: 0.0001;
position: absolute;
width: 160px;
}
#chrome .drop_area_fileselect, #safari .drop_area_fileselect {
padding-left: 160px;
}
.drop_area_fileselect_text {
white-space: nowrap;
padding: 0 4px;
}
#postAttachment >dd.progress_tracker {
margin:0;
}
.progress_tracker {
overflow: hidden;
width: 97%;
}
.statusbar {
padding: 5px;
overflow: hidden;
}
.info {
float: left;
position: relative;
overflow: hidden;
width: 60%;
line-height: 1.375em;
}
.progressBar {
width: 20%;
border-radius: 5px;
float: left;
text-align: center;
}
.abort, .remove {
float: right;
overflow: hidden;
font-size: 1em;
padding: 4px 6px;
}
.drop_attachmnts_error {
padding: 10px 0;
overflow: hidden;
width: 97%;
}
#postMoreOptions, #postAttachment, #postAttachment2 {
margin: -1px 0 0 0;
padding: 10px;
}
#postAttachment, #postAttachment2 {
overflow: hidden;
}
#postAttachment dd, #postAttachment2 dd {
margin: 4px 12px;
}
#postAttachment dd {
float: left;
width: 45%;
}
#postAttachment dt, #postAttachment2 dt {
font-weight: bold;
}
.attachmenterrors {
padding: 0 1em;
}
.draftautosave {
font-size: 0.857em;
text-align: right;
height: 1.5em;
overflow: hidden;
}
#postDraftOptions .settings dd, #postDraftOptions .settings dt{
margin: 0;
padding: 5px 10px;
width: 60%;
font-size: 0.857em;
}
#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 .roundframe {
overflow: auto;
padding: 12px 12%;
}
#event_main fieldset {
clear: both;
}
#event_main #datepicker, #event_main #caption_evtitle {
display: inline-block;
padding-left: 1em;
padding-top: 0.4em;
}
#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_check {
margin: 0 12px 0 0;
}
#datepicker {
white-space: nowrap;
}
/* The poll editor section. */
#edit_poll {
overflow: hidden;
}
#poll_main, #poll_options, #poll_reset {
clear: both;
overflow: hidden;
padding: 6px;
}
#poll_main #question {
margin-left: 2em;
}
#poll_main .poll_main li {
padding-left: 12px;
}
#poll_main .poll_main input {
margin-left: 12px;
}
#poll_main .poll_main, dl.poll_options {
overflow: hidden;
padding: 0 0 8px 8px;
}
#poll_main .poll_main li {
margin: 2px 0;
}
#poll_options .poll_options dt {
padding: 0 0 0 12px;
width: 33%;
}
#poll_options .poll_options dd {
width: 65%;
}
#poll_options .poll_options dd input {
margin-left: 0;
}
/* $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 .windowbg, .split_messages .windowbg2 {
margin: 1px;
}
.split_messages .split_icon {
padding: 0 6px;
}
.split_messages .post {
padding: 12px 0 0 0;
}
/* 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;
}
/* Styles for the $TABS */
/* We can't control what jQueryui pollutes the DOM with, so deal with it */
/* Styles for the profile summary tabs, or any jQuery ui tabs */
/* ---------------------------------------------------------- */
.ui-tabs .ui-tabs-nav {
list-style: none;
position: relative;
padding: 0;
margin: 0;
}
.ui-tabs .ui-tabs-nav li {
position: relative;
float: left;
margin: 0 3px -1px 0;
font-size: 0.929em;
line-height: 2.077em;
}
.ui-tabs .ui-tabs-nav li a {
display: block;
padding: 0 7px;
outline: none;
text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav .ui-state-disabled a, .ui-tabs .ui-tabs-nav .ui-state-processing a {
cursor: default;
}
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
cursor: pointer;
}
.ui-tabs .ui-tabs-hide {
display: none;
}
.ui-tabs .ui-tabs-nav .ui-state-active a, .ui-tabs .ui-tabs-nav .ui-state-active {
font-weight: bold;
}
/* $PROFILE */
/* ------------------------------------------------------- */
.ui-tabs .ui-tabs-panel {
clear: both;
padding-top: 8px;
}
#profilecenter, #unwatched_topics, #profile_attachments {
margin: 12px 0 0 0;
padding: 8px 8px 16px 8px;
overflow: auto;
}
/* @todo remove the div when div.windowbg and div.windowbg2 are sorted out */
#profilecenter div.core_posts {
padding: 0.2em 1em;
}
#profilecenter .windowbg, #profilecenter .windowbg2,
#profile_attachments .windowbg, #profile_attachments .windowbg2,
#unwatched_topics .windowbg, #unwatched_topics .windowbg2 {
overflow: visible;
padding: 0 0 4px;
}
.profileblock {
padding: 4px 8px;
margin-top: 4px;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}
.profileblock .icon {
vertical-align: bottom;
}
.profile_content {
overflow: auto;
padding: 0 8px;
}
.profileblock_left {
width: 49%;
float: left;
margin: 0 0 4px 4px;
}
.profileblock_left h3, .profileblock_right h3 {
margin-bottom: .8em;
}
.profileblock_right {
width: 49%;
float: right;
margin: 0 4px 4px 0;
}
.profileblock ul li {
display: block;
float: left;
margin-right: 5px;
}
.profile_attachments {
border: 0;
border-spacing: 1em;
width: 95%;
table-layout: fixed;
font-size: 0.857em;
margin: 0 auto;
}
.profile_attachments td, .profile_attachments th {
padding: 5px 4px;
vertical-align: top;
text-align: center;
}
.profile_attachment a img {
max-width: 120px;
max-height: 120px;
}
.vcard .avatar {
max-width: 40px;
max-height: 40px;
}
.attach_title {
display: block;
margin-bottom: 4px;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
white-space: pre;
}
/* The basic user info on the left */
#basicinfo {
float: left;
width: 30%;
}
#basicinfo .windowbg .content {
padding-left: 30px;
}
.profileblock .cf_icon {
display: block;
float: left;
margin: 4px 5px 0 0;
}
#detailedinfo {
float: right;
width: 70%;
margin-top: 0;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
}
#basicinfo h4 {
overflow: hidden;
white-space: pre-wrap;
font-weight: 100;
font-size: 1.429em;
padding-right: 2px;
}
#basicinfo h4 .position {
display: block;
font-weight: 100;
font-size: 0.786em;
}
#basicinfo .avatar {
display: block;
margin: 10px 0 0 0;
}
#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 {
float: left;
clear: both;
margin: 0 0 3px 0;
padding: 0;
width: 35%;
font-weight: bold;
}
#detailedinfo dd, #tracking dd, .profileblock dd {
float: left;
margin: 0 0 3px 0;
padding: 0;
width: 65%;
}
.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 {
float: left;
clear: both;
margin: 0 0 3px 0;
padding: 0;
width: 50%;
font-weight: bold;
}
#generalstats .content dd {
float: left;
margin: 0 0 3px 0;
padding: 0;
width: 50%;
}
#show_attachments th {
text-align: left;
}
.activity_stats {
margin: 0;
padding: 0;
}
.activity_stats li {
float: left;
margin: 0;
padding: 0;
width: 4.166%;
}
.activity_stats li span {
display: block;
text-align: center;
font-size: 0.786em;
padding-right: 0.5em;
}
.activity_stats .last span {
border-right: none;
}
.activity_stats li .bar {
margin: 0 auto;
max-width: 15px;
width: 50%;
}
.activity_stats li .bar span {
position: absolute;
top: -1555em;
left: -1555em;
}
/* Most popular boards by posts and activity */
/* @todo - Use box-sizing and 50% width for better stability. */
#popularposts {
float: left;
width: 49.5%;
}
#popularactivity {
float: right;
width: 49.5%;
}
#popularposts div.content dt, #popularactivity div.content dt {
float: left;
clear: both;
margin: 0 0 3px 0;
padding: 0;
width: 65%;
font-weight: bold;
}
#popularposts div.content dd, #popularactivity div.content dd {
float: left;
margin: 0 0 3px 0;
padding: 0;
width: 35%;
}
.profile_pie {
float: left;
margin: 0 12px 0 0;
padding: 0;
width: 20px;
height: 20px;
text-indent: -1555em;
/* Image will need changing to match new theme.*/
background: url(../images/stats_pie.png);
}
/* @todo - Buddy section stuff. */
.add_buddy .roundframe, .add_buddy .title_bar {
margin-top: 5px;
border: none;
background: none;
}
/* View posts */
.topic .time {
float: right;
}
.counter {
float: right;
padding: 6px;
font-weight: bold;
font-size: 2em;
}
.topic_details {
padding: 0 4px 4px 4px;
}
.topic h4 {
margin: 3px 0;
}
.topic .post {
margin: 0 12px;
min-height: 80px;
height: auto;
height: 80px;
}
.topic .mod_icons {
margin-right: 12px;
text-align: right;
}
#tracking div.content dl {
margin: 0;
padding: 0;
border-bottom: 0;
}
#creator dl {
margin: 0;
}
#creator dt {
float: left;
clear: both;
margin: 0 0 10px 0;
width: 40%;
}
#creator dd {
float: right;
overflow: auto;
margin: 0 0 10px 2px;
width: 55%;
min-height: 2em;
padding-bottom: 1px;
}
.centericon {
vertical-align: middle;
}
.ignoreboards {
margin: 0 2%;
padding: 0;
width: 45%;
}
.ignoreboards a {
padding: 1px 0;
font-weight: bold;
}
.ignoreboards ul {
margin: 0;
padding: 0;
}
.ignoreboards li {
float: left;
clear: both;
}
.ignoreboards li.category {
margin: 8px 0 0 0;
width: 100%;
}
.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 {
width: 80%;
font-size: 0.857em;
}
#warning_text {
position: absolute;
z-index: 2;
padding-top: 1pt;
width: 100%;
font-weight: bold;
}
#new_template_link a {
margin-bottom: 2px;
}
#warndiv {
margin: 0 0 1em 5%;
}
#slider-range-min {
width: 90%;
margin-top: 1em;
}
/* $PERSONAL */
/* ------------------------------------------------------- */
#personal_messages .labels {
padding: 11px 0 0;
}
#personal_messages .signature {
overflow: visible;
}
#personal_messages .capacity_bar {
display: block;
margin: 6px 0 0 12px;
width: 10em;
height: 12px;
}
#personal_messages .capacity_bar span {
display: block;
height: 12px;
}
#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 {
padding: 0 15px 6px 15px;
width: 15em;
}
#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;
}
.label_pms {
float: right;
margin-top: 5px;
}
.label_pms li {
display: inline-block;
vertical-align: top;
margin-left: 0.5em;
}
/* $CALENDAR */
/* ------------------------------------------------------- */
#calendar {
text-align: center;
}
#month_grid {
float: left;
padding: 0 15px 0 0;
width: 215px;
}
#main_grid {
overflow: auto;
}
#month_grid .category_header {
font-size: 1em;
}
#main_grid .category_header {
font-size: 1.357em;
}
.previous_month, .next_month {
float: left;
display: block;
margin: -0.1em 0 0 0;
font-size: 0.6em;
}
.next_month {
float: right;
}
.calendar_table {
width: 100%;
border-spacing: 1px;
font-size: 0.857em;
}
.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 {
padding: 4px;
width: 14%;
}
#main_grid .windowbg.days {
height: 100px;
}
#main_grid .weeks {
font-weight: bold;
font-size: 1.786em;
}
#main_grid .weeks a:hover {
text-decoration: none;
}
#main_grid .days {
vertical-align: top;
}
.weeklist {
text-align: left;
padding: 2px 0;
}
.weeklist>li {
margin: 2px 0;
overflow: hidden;
}
.weeklist h4 {
float: left;
padding: 10px;
width: 10em;
font-size: 1.143em;
}
/* Use the old one true layout trick here. */
.weeklist .windowbg2, .weeklist .calendar_today {
margin: 0 0 -95px 11.5em;
padding: 8px 8px 100px 8px;
}
#calendar_navigation {
padding: 12px 0;
}
/* Cheat and match this to the submit button. */
#calendar_navigation .buttonlist {
padding: 0 6px;
}
/* See, I told you there was wombatz here. */
/*
,.--""""--.._
." .' `-.
; ; ;
' ; )
/ ' . ;
/ ; `. `;
,.' : . : )
;|\' : `./|) \ ;/
;| \" -,- "-./ |; ).;
/\/ \/ );
: _ \ ;
: \0\_ _ ; )
`. /o/ ; /
! : : ,/ ;
(`. : _ : ,/"" ;
\\\`"^" ` : ;
( )
akg ////
*/
/* 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 {
width: 49%;
margin: 0 0.5% 0 50.5%;
padding-top: 1px;
font-size: 1.214em;
}
#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;
}
.stats {
overflow: hidden;
padding: 0 16px;
width: 50%;
margin: 12px 0 12px 50%;
}
.stats.floatleft {
clear: left;
margin: 12px 0;
}
.stats dt {
float: left;
clear: both;
margin: 0 2% 4px 0;
padding: 0;
width: 48%;
font-size: 1em;
line-height: 1.5em;
}
#top_row .stats dd, .statsbar {
position: relative;
float: right;
margin: 0 0 4px 0;
padding: 0 4px 0 0;
min-height: 1.5em;
width: 50%;
}
.statsbar .bar {
display: block;
float: left;
margin: 0 4px 0 0;
font-size: 1em;
height: 1.5em;
}
/* Absolute positioning stops these breaking the bars on narrow screens. */
.statsbar .righttext {
position: absolute;
top: 0;
right: 0;
z-index: 2;
padding: 0 4px;
line-height: 1.75em;
font-size: 0.857em;
}
#stats {
margin: 6px 0 16px 0;
}
#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 */
/* ------------------------------------------------------- */
/* Styles for the help section. */
#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;
}
#helpmain p {
margin: 10px 0;
}
#helpmain ul {
margin: 0 0 0 25px;
line-height: 2em;
}
#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;
opacity: 0.8;
cursor: help;
}
.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;
left: -9999px;
z-index: 999;
padding: 6px 9px;
max-width: 350px;
word-wrap: break-word;
}
/* What's this? @todo - Deprecated? */
#help_popup {
padding: 12px;
}
/* The help pop-ups. */
.popup_container {
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: none;
width: 100%;
height: 100%;
}
/* The actual pop-up wrapper. */
.popup_container .popup_window {
margin: 12% auto;
width: 480px;
font-size: 1em;
}
/* What it says. ;) */
.popup_heading {
padding: 0 0 6px 0;
font-weight: bold;
font-size: 1.071em;
line-height: 2em;
}
/* 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;
}
/* The text content, hopefully helpful. */
.popup_content {
overflow: auto;
padding: 10px;
max-height: 22em;
}
/* 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 {
padding: 4px 12px;
font-style: italic;
}
#search_term_input {
margin: 0 0 10px;
font-size: 1.071em;
}
#search_term_input .button_submit {
margin: 0 0 2px;
}
/* The advanced search section. */
#search_options {
overflow: hidden;
margin: 0 auto;
padding-top: 12px;
width: 600px;
}
#advanced_search dt {
float: left;
clear: both;
padding: 5px 4px 0 4px;
width: 35%;
text-align: right;
}
#advanced_search dd {
float: left;
padding: 3px 2px;
width: 65%;
text-align: left;
}
#pick_boards .submitbutton {
width: 100%;
}
/* The search results page.
/* The search results page. @todo - Duplicated in the .table_grid code? */
/* @todo - Search results in a table? I'm sure that's deprecated years ago. */
.topic_table td blockquote, .topic_table td .quoteheader {
margin: 6px;
}
.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 {
vertical-align: top;
width: 2em;
padding: 1.3em 1em 0 0;
}
.search_results_posts .quickbuttons {
margin-left: 1em;
}
.search_results_posts .topic_body {
margin: 0 1em 0;
padding-bottom: 12px;
padding-top: 12px;
width: 99%
}
.search_results_posts .quick_mod {
position: absolute;
right: 0;
top: 10%;
}
.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
}
.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;
}
.letter_row {
height: 3em;
line-height: 3em;
vertical-align: bottom;
}
.letter_row>h3 {
line-height: 2em;
text-transform: uppercase;
font-weight: bold;
position: relative;
top: 12px;
text-align: center;
}
.mlist_header {
font-weight: bold;
}
.whos_online dt {
font-weight: bold;
}
dl.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 {
max-width: 2.4em;
max-height: 3.4em;
}
.mlist li div {
margin: 0 auto;
height: 2.4em;
padding: 3px 8px 0;
vertical-align: middle;
}
#memberlist .selected {
width: auto;
white-space: nowrap
}
#memberlist_search, #memberlist>.content>.submitbutton {
margin: 0 auto;
width: 32em;
}
#memberlist_search>dt, #memberlist_search>dd {
width: 12em;
}
#memberlist_search>dd {
width: 20em;
}
#memberlist_search .input_check {
margin: 4px 0 0 0;
}
#memberlist_search .input_text {
margin: 0 0 12px 0;
overflow: hidden;
width: 100%;
}
#mlsearch {
padding-top: 2px;
}
#mlsearch_options {
position: absolute;
display: none;
padding: 0.5em;
}
#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_check {
margin: 0 0 0 0.5em;
float: right;
}
#mlsearch_options .mlsearch_option {
padding: 0.2em 0;
}
/* $LOGIN */
/* ------------------------------------------------------- */
/* Styles for the login areas. */
/* @todo - Width would be better in em. */
.login {
margin: 0 auto;
max-width: 540px;
}
.login dl {
clear: right;
overflow: auto;
}
.login dt, .login dd {
margin: 0 0 5px 0;
padding: 1px;
width: 44%;
}
.login dt {
float: left;
clear: both;
text-align: right;
font-weight: bold;
}
.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 {
text-align: center;
}
/* Additional register fields. */
.register_form {
clear: right;
margin: 0;
}
.register_form dt {
float: left;
clear: both;
margin: 6px 0 0 0;
width: 50%;
font-weight: normal;
}
.register_form dt span {
display: block;
}
.register_form dd {
float: left;
margin: 6px 0 0 0;
width: 49%;
}
.register_form img {
vertical-align: middle;
}
#confirm_buttons {
padding: 12px 0;
text-align: center;
}
#confirm_buttons .button_submit {
white-space: normal;
}
.coppa_contact {
margin-left: 5ex;
padding: 4px;
width: 32ex;
}
#agreement_box {
overflow-y: scroll;
height: 180px;
padding: 8px;
text-align: justify;
border: 1px solid;
margin-bottom: 2em;
}
/* Styles for maintenance mode. */
#maintenance_mode {
min-width: 520px;
width: 75%;
text-align: left;
}
#maintenance_mode .floatleft {
margin-right: 12px;
}
/* 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 {
vertical-align: middle;
padding: 2px 2px 4px;
}
/* $BOXES */
/* ------------------------------------------------------- */
/* Lotsa boxes. */
.description, .information, .warningbox, .successbox, .infobox, .errorbox {
margin: 0 0 12px 0;
padding: 6px 12px;
font-size: 0.929em;
}
.information p {
padding: 12px;
}
/* More little boxes on a hillside. */
.warningbox, .successbox, .infobox, .errorbox {
padding-left: 35px;
}
.errorbox {
margin-bottom: 12px;
text-align: left;
}
/* Styles for (fatal) errors. */
#fatal_error {
margin: auto;
padding-bottom: 1em;
width: 80%;
}
.errorbox h3 {
margin: 0;
padding: 0;
text-decoration: underline;
font-size: 1.071em;
}
.errorbox .listlevel1,
.warningbox .listlevel1 {
float: none;
padding-left: 1em;
line-height: 1.75em;
}
.errorbox .alert {
float: left;
margin: 0;
padding: 0;
width: 12px;
font-size: 1.5em;
}
.errorbox .smalltext {
display: block;
padding-left: 1em;
}
.ban_cannot_post {
margin: 2ex;
padding: 2ex;
border: 2px dashed;
}
/* $PROGRESS */
/* ------------------------------------------------------- */
/* Styles for the progress bar */
/* @todo - Height in pt? WTF? */
.progress_bar {
position: relative;
margin: 20px auto 0 auto;
padding: 3px;
width: 80%;
height: 15pt;
}
.progress_bar .full_bar {
position: absolute;
z-index: 2;
padding-top: 1pt;
width: 100%;
text-align: center;
font-weight: bold;
}
.progress_bar .green_percent {
z-index: 1;
height: 15pt;
}
.progress_bar .blue_percent {
z-index: 1;
height: 15pt;
}
.loading {
width: 35px;
height: 35px;
}
/* floating error box */
/* currently used by like functionality */
.floating_error {
position: fixed;
width: 50%;
margin: 0;
padding: 10px 0 0;
text-align: center;
z-index: 102;
}
.floating_error .error_heading {
margin: 0;
padding: 5px 10px 0;
}
.floating_error .error_msg {
margin: 10px auto 15px;
width: 100%;
}
.floating_error .error_btn {
padding: 10px;
position: relative;
margin: 0;
text-align: center;
}
/* $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;
}
}
/* @todo - WIP - Still needs more elements and stuff. */
/* Not sure how fussy we should get here,
/* given that there is supposed to be a separate phone theme.
/* Am currently inclined to think that just having break points that correlate
/* to 1024, 800 and 480 at standard font size is probably adequate. */
/* using 100% = 1 em ~= 16px ~= 14pt for our em sizing .. 64em*16px = 1024 etc. */
/* This one does 1024 screens at default font size. */
@media screen and (max-width: 64em) {
.topic_latest {
min-width: 20em;
}
.topic_latest.relative {
min-width: 15em;
}
.board_latest {
min-width: 22em;
width: 40%;
}
.lastpost_link {
display: block;
}
.board_stats, .topic_stats {
display: none;
}
.bbc_img, .elk_video {
max-width: 100%;
}
.elk_previewvideo {
max-width: 100%;
}
.profile_attachments {
margin: 0 0.5em;
width: auto;
text-align: center;
}
.profile_attachments tr {
display: inline;
}
.profile_attachments .profile_attachment {
display: inline-block;
width: 129px;
height: 149px;
margin: 5px;
}
}
/* This one does 800 screens at default font size. */
@media screen and (max-width: 50em) {
dd input, dd select, dd textarea {
width: 100% !important;
max-width: 100% !important;
}
#post_header dd select {
max-width: 30% !important;
}
dd .input_check, dd .input_radio {
display: inline !important;
width: 1.5em !important;
}
#logobox img {
max-width: 95%;
}
.topic_latest {
min-width: 15em;
display: block;
}
.board_avatar {
display: none;
}
#main_menu .linklevel1 {
margin-right: 5px;
box-shadow: none;
border: 1px solid transparent;
}
#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 56px;
}
.board_lastposter {
display: block;
}
.board_lastpost, .board_latest {
min-width: 14em;
}
.board_name:after {
display: block;
clear: both;
content: "";
}
.board_info .board_description, .board_info .moderators, .childboards {
margin: 0 0 0 8px;
}
/* Playing silly buggers with a sidebar menu option for narrow screens. */
#main_container {
position: relative;
padding: 0 0 0 12px;
}
#menu_sidebar {
position: absolute;
left: -0.8em;
width: 6px;
min-height: 500px;
z-index: 90;
}
#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 {
width: 7em;
}
.poster .poster_online {
display: none;
}
.postarea {
margin: 0 0 0 6em;
}
.poster .name {
padding: 0;
}
.avatar, .avatar.avatarresize {
max-width: 80px;
}
.poster_avatar a {
padding: 0;
}
.poster .membergroup {
word-break: normal;
word-wrap: break-word;
}
.quickbuttons .modified {
display: block;
width: 100%;
text-align: left;
}
#forumposts .views_text {
display: none;
}
#forumposts .nextlinks {
width: 100%;
text-align: right;
white-space: normal;
}
#search_options {
width: 100%;
}
.ignoreboards {
width: 100%;
}
.ignoreboards.floatright {
float: none;
}
/* our stats page */
.statistics .category_header {
width: 100%;
box-sizing: border-box;
margin: 0;
}
.stats {
width: 100%;
box-sizing: border-box;
float: none;
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;
}
.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-right: 18px;
}
#ic_recentposts, #ps_recentposts, #ps_recenttopics {
font-size: 1em;
}
#ps_recentposts .recentposter {
display: table-cell;
}
}
/* This one does 540 and smaller screens at default font size. */
@media screen and (max-width: 33.750em) {
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: 300px;
}
#main_content_section {
padding: 1px 1px 16px 0;
}
#search_form .input_text {
width: 7em;
}
.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;
padding: 5px;
width: 97%;
}
ul.buttonlist:before {
display: block;
clear: both;
content: "";
}
.pagelinks {
height: 30px;
/* Necessary for some browsers to keep the pages all on the same line */
min-width: 100%;
}
.quickbuttons {
white-space: nowrap;
}
.pagesection .buttonlist {
float: none;
width: 100%;
}
#whoisviewing {
display: none;
}
.pagesection .buttonlist li {
white-space: nowrap;
margin-bottom: 4px;
}
.topic_name, .topic_starter {
margin: 0;
}
.topic_starter {
margin-top: 5px;
}
.topic_name h4 {
display: block;
font-size: 1.357em;
}
.topic_name h4 a {
word-wrap: break-word;
}
#wrapper {
padding-left: 2px;
padding-right: 2px;
}
#gobottom, #gotop {
padding-right: 0.25em;
display: 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;
}
#forumposts .windowbg {
padding: 5px;
}
#forumposts h2 img {
display: none;
}
.keyinfo h5 {
padding: 3px;
}
h2 .views_text, h2 .nextlinks {
display: block;
float: none;
line-height: 1.4em;
}
.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 {
display: block;
font-size: 1.2em;
}
.childboards li:nth-child(n+2):before {
content: " - ";
}
.board_info, .board_latest {
width: 100%;
display: block;
box-sizing: border-box;
margin-bottom: 2px;
}
.board_latest {
margin: 0 0 0 35px;
padding: 0 8px;
width: 90%;
max-width: 90%;
min-width: 90%;
}
.board_lastpost, .topic_lastpost {
min-width: 18em;
}
.board_lastpost {
padding-top: 6px;
margin: 3px;
}
.board_info h3 a {
font-size: 1.357em;
word-wrap: break-word;
}
.board_name {
margin: 0 0 0 35px;
}
.board_info:after {
display: block;
clear: both;
content: "";
}
.topic_listing>li {
margin-bottom: 5px;
}
.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 {
bottom: 0;
padding: 0.2em 0.1em;
height: 1em;
width: 1.2em;
top: auto;
text-align: center;
}
#gotop {
margin-left: 1.45em;
}
.admin_menu li {
float: left;
display: block;
width: 48%;
}
#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 {
float: left;
display: block;
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 {
float: left;
display: inline-block;
}
.poster li.membergroup {
display: none;
}
.poster li.avatar {
float: left;
}
.poster .subsections {
max-width: 200px;
max-height: 1.5em;
float: right;
text-align: right;
}
.poster .membergroup {
float: right;
}
.poster .title, .poster .poster_online, .icons img {
display: none;
}
.poster:after, .posterarea:before {
display: block;
clear: both;
content: "";
padding-bottom: 3px;
}
.postarea, .forumtitle {
padding: 2px;
}
.linktree .board_moderators {
display: none;
}
.signature {
display: none;
}
.forumposts .windowbg, .forumposts .windowbg2 {
margin-bottom: 6px;
}
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: none;
}
#button_profile .avatar {
display: none;
}
.quickbuttons {
margin: 8px 8px 6px 3px;
}
#search_form {
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;
width: 100%;
overflow: auto;
}
.profile_attachments .profile_attachment {
width: 100px;
}
.profile_attachment a img {
max-width: 100px;
max-height: 100px;
}
.pagesection div.floatright {
float: none;
display: block;
}
.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 {
left: auto;
right: 0;
}
.poster .listlevel2 {
max-width: 8em;
width: 8em;
}
.bbc_table_container {
max-width: 100%;
overflow: auto;
}
.pm_from {
text-align: left;
max-width: 6em;
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 {
width: 3em;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mlist li .website, .mlist li .date_registered {
display: none;
}
.whos_online dt {
display: none;
}
.whos online dd, .whos_online dd div {
display: block;
}
}
/* 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: 12em !important;
}
.menulevel2 {
max-width: 12em;
}
#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: 4% !important;
}
dd input, dd select, dd textarea {
max-width: 95% !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;
}
.fa.hamburger_30 {
padding-top: 0.1em;
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.fa.hamburger_30:before {
margin: 0.2em;
}
#display_jump_to {
display: inline-block;
}
.hide_30.hamburger_30_target {
left: -9999px;
position: absolute;
}
.fa.hamburger_30.visible {
display: none;
}
.hide_30.hamburger_30_target.visible {
left: auto;
position: relative;
}
}