C:\Users\Spuds\Downloads\Elkarte-1.0.0-RC.2\Elkarte-1.0.0-RC.2\themes\default\css\index.css C:\wamp\www\Elkarte\themes\default\css\index.css
/* INTRODUCTION /* INTRODUCTION
/* This is the standard Elkarte default theme. /* This is the standard Elkarte default theme.
/* This file contains essential layout code only. /* This file contains essential layout code only.
/* Colors, gradients, images, etc. are in _variantname.css. /* Colors, gradients, images, etc. are in _variantname.css.
/* /*
/* All theme variants depend on this layout code for stability. /* All theme variants depend on this layout code for stability.
/* It is better to copy code to a variant CSS file for testing. /* It is better to copy code to a variant CSS file for testing.
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
/* $CONTENTS - still a bit WIP. @todo /* $CONTENTS - still a bit WIP. @todo
/* /*
/*      $GENERAL.............Global resets, clearfixes, etc. /*      $GENERAL.............Global resets, clearfixes, etc.
/*      $COMMON..............Common classes to drive you bonkers. /*      $COMMON..............Common classes to drive you bonkers.
/*      $BBC.................Quotes, code blocks, BBC styles. /*      $BBC.................Quotes, code blocks, BBC styles.
/*      $AJAX................The "loading" bar (quick edit, etc). /*      $AJAX................The "loading" bar (quick edit, etc).
/* /*
/*      $MAIN................Forum header, wrapper, and footer. /*      $MAIN................Forum header, wrapper, and footer.
/*      $MENUS...............Main and secondary menus. /*      $MENUS...............Main and secondary menus.
/*      $LINKTREE............The breadcrumbs. /*      $LINKTREE............The breadcrumbs.
/*      $BUTTONS.............Most button strips. /*      $BUTTONS.............Most button strips.
/*      $PAGELINKS...........Page navigation links. /*      $PAGELINKS...........Page navigation links.
/* /*
/*      $TABLES..............Generic tables (error log, etc.). /*      $TABLES..............Generic tables (error log, etc.).
/*      $SETTINGS............Generic lists for settings pages. /*      $SETTINGS............Generic lists for settings pages.
/*      $BOARDS..............Board index, sub-boards, and message index. /*      $BOARDS..............Board index, sub-boards, and message index.
/* /*
/*      $TOPICS..............The display template (topic view), including send. /*      $TOPICS..............The display template (topic view), including send.
/*      $EDITOR..............Main editor (posts, events, polls) and topic summary. /*      $EDITOR..............Main editor (posts, events, polls) and topic summary.
/*      $MODERATE............Move topic, split topic, merge topic. /*      $MODERATE............Move topic, split topic, merge topic.
/* /*
/*      $PROFILE.............The profile areas. /*      $PROFILE.............The profile areas.
/*      $PERSONAL............The personal messages (PM) areas. /*      $PERSONAL............The personal messages (PM) areas.
/*      $CALENDAR............Wombats (and the calendar). /*      $CALENDAR............Wombats (and the calendar).
/*      $STATISTICS..........The statistics centre. /*      $STATISTICS..........The statistics centre.
/* /*
/*      $HELP................Help pages, help icons and pop-ups, tooltips. /*      $HELP................Help pages, help icons and pop-ups, tooltips.
/*      $SEARCH..............Search pages, including memberlist search. /*      $SEARCH..............Search pages, including memberlist search.
/*      $MEMBERLIST..........The memberlist table. /*      $MEMBERLIST..........The memberlist table.
/*      $LOGIN...............Login and registration, maintenance mode. /*      $LOGIN...............Login and registration, maintenance mode.
/* /*
/*      $BOXES...............Message boxes (error, warning, info, etc). /*      $BOXES...............Message boxes (error, warning, info, etc).
/*      $PROGRESS............Nifty progress bars. /*      $PROGRESS............Nifty progress bars.
/*      $MEDIA...............Experimental media queries. /*      $MEDIA...............Experimental media queries.
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
   
/*   $GENERAL    */  /*   $GENERAL    */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
/* Put this here to make it easy to find. */  /* Put this here to make it easy to find. */ 
/* Width control for top bar, header, main content and footer content. */  /* Width control for top bar, header, main content and footer content. */ 
.wrapper { .wrapper {
   margin: 0 auto;    margin: 0 auto;
   /* Next controls forum width, when it is not set in admin. */     /* Next controls forum width, when it is not set in admin. */ 
   width: 90%;    width: 90%;
   /* Next limits maximum width on wide screens. */     /* Next limits maximum width on wide screens. */ 
   /* Sized in em, since some people require larger text. */     /* Sized in em, since some people require larger text. */ 
   /* For ease of reading, content really should not be too wide. */     /* For ease of reading, content really should not be too wide. */ 
   max-width: 90em;    max-width: 90em;
   /* Next is just for some testing. */     /* Next is just for some testing. */ 
   /*min-width: 100%;*/     /*min-width: 100%;*/ 
} }
   
/* Cursor declared here.Should not be required anywhere else. */  /* Cursor declared here.Should not be required anywhere else. */ 
a:hover, a.new_win:hover { a:hover, a.new_win:hover {
   cursor: pointer;    cursor: pointer;
} }
   
body { body {
   margin: 0;    margin: 0;
   padding: 0 0 0 0;    padding: 0 0 0 0;
   /* Set a font-size that will look the same in all browsers. */     /* 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. */     /* 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    /* 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    /* 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    /* 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 */     /* 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;    font: 87.5%/150% "Segoe UI", "Helvetica Neue", "Liberation Sans", "Nimbus Sans L", "Trebuchet MS", Arial, sans-serif;
   text-rendering: optimizeLegibility;    text-rendering: optimizeLegibility;
} }
   
/* Tables should show empty cells. */  /* Tables should show empty cells. */ 
table { table {
   empty-cells: show;    empty-cells: show;
} }
   
/* Global box sizing, for stabilising fluid layouts. */  /* Global box sizing, for stabilising fluid layouts. */ 
/* IMPORTANT: Do not declare div here (borks jQuery menus). */  /* IMPORTANT: Do not declare div here (borks jQuery menus). */ 
/* Default most elements to zero padding and margin. */  /* Default most elements to zero padding and margin. */ 
/* Declare these separately to divs to avoid padding and margin problems. */  /* Declare these separately to divs to avoid padding and margin problems. */ 
h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd ,dt, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd ,dt,
p, fieldset, form, input, button, select, .input_text, textarea, .editor { p, fieldset, form, input, button, select, .input_text, textarea, .editor {
   -moz-box-sizing: border-box;    -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;    -webkit-box-sizing: border-box;
   box-sizing: border-box;    box-sizing: border-box;
   padding: 0;    padding: 0;
   margin: 0;    margin: 0;
   font-weight: normal;    font-weight: normal;
   font-size: 1em;    font-size: 1em;
} }
/* Declarations for specific elements. @todo - Maybe simplify - test. */  /* Declarations for specific elements. @todo - Maybe simplify - test. */ 
.wrapper, div.windowbg, div.windowbg2, .wrapper, div.windowbg, div.windowbg2,
.roundframe, .description, .information, .successbox, .warningbox, .roundframe, .description, .information, .successbox, .warningbox,
.category_header, .generic_list_wrapper, .submitbutton, .category_header, .generic_list_wrapper, .submitbutton,
.grid8, .grid17, .grid20, .grid25, .grid30, .grid33, .grid50, #description_board .generalinfo { .grid8, .grid17, .grid20, .grid25, .grid30, .grid33, .grid50, #description_board .generalinfo {
   -moz-box-sizing: border-box;    -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;    -webkit-box-sizing: border-box;
   box-sizing: border-box;    box-sizing: border-box;
} }
   
/* Collection of pseudo element clearfixes. */  /* Collection of pseudo element clearfixes. */ 
.category_header:after, .wrapper:after, .category_header:after, .wrapper:after,
#main_content_section:after, #main_container:after, #main_content_section:after, #main_container:after,
.attachment_name:after, .editor_wrapper:after { .attachment_name:after, .editor_wrapper:after {
   display: block;    display: block;
   clear: both;    clear: both;
   content: "";    content: "";
} }
.quickbuttons:after { .quickbuttons:after {
   display: block;    display: block;
   clear: both;    clear: both;
   content: "";    content: "";
} }
/* @todo */  /* @todo */ 
.statistics>.flow_hidden>.category_header:after { .statistics>.flow_hidden>.category_header:after {
   display: none;    display: none;
} }
/* Set list-style to none by default. Best in most places.*/  /* Set list-style to none by default. Best in most places.*/ 
ul, ol { ul, ol {
   list-style: none;    list-style: none;
} }
   
/* No image should have a border when linked. */  /* No image should have a border when linked. */ 
/* @todo - I'm sure this would be better done with specific classes /* @todo - I'm sure this would be better done with specific classes
/* rather than global tag name. */  /* rather than global tag name. */ 
a img { a img {
   border: 0;    border: 0;
} }
   
/* Style the different types of inputs to be uniform for all browsers. */  /* Style the different types of inputs to be uniform for all browsers. */ 
   
/* NOTE: This does require some browser-specific code to get good results. */  /* NOTE: This does require some browser-specific code to get good results. */ 
/* Paddings on all types of inputs are set here. */  /* Paddings on all types of inputs are set here. */ 
/* If specific styling is wanted for some inputs, be aware of browser /* If specific styling is wanted for some inputs, be aware of browser
/* differences when adding custom padding, or it will drive you mental. */  /* differences when adding custom padding, or it will drive you mental. */ 
   
/* ALSO: This is still not quite pixel perfect everywhere for all browsers, /* ALSO: This is still not quite pixel perfect everywhere for all browsers,
/* in particular not for Internet Explorer. They can live with it. */  /* in particular not for Internet Explorer. They can live with it. */ 
/* /*
   .button_submit - covers input[type=submit], input[type=button],    .button_submit - covers input[type=submit], input[type=button],
                    button[type=submit] and button[type=button]                     button[type=submit] and button[type=button]
   .linkbutton    - covers links, to make them look like a submit button.    .linkbutton    - covers links, to make them look like a submit button.
   .button_reset  - covers input[type=reset] and button[type=reset]    .button_reset  - covers input[type=reset] and button[type=reset]
   .input_check   - covers input[type=checkbox]    .input_check   - covers input[type=checkbox]
   .input_radio   - covers input[type=radio]    .input_radio   - covers input[type=radio]
   .input_text    - covers input[type=text]    .input_text    - covers input[type=text]
   .input_file    - covers input[type=file]    .input_file    - covers input[type=file]
*/  */ 
input, button, select, textarea, .editor { input, button, select, textarea, .editor {
   font: 87.5%/150% "Segoe UI", "Helvetica Neue", "Liberation Sans", "Nimbus Sans L", "Trebuchet MS", Arial, sans-serif;    font: 87.5%/150% "Segoe UI", "Helvetica Neue", "Liberation Sans", "Nimbus Sans L", "Trebuchet MS", Arial, sans-serif;
} }
/* The following is necessary. */  /* The following is necessary. */ 
textarea, .editor { textarea, .editor {
   border-radius: 4px;    border-radius: 4px;
   font-size: 1em;    font-size: 1em;
} }
.sceditor-container { .sceditor-container {
   margin: 0 0 6px 0;    margin: 0 0 6px 0;
} }
/* Gecko-specific reset - makes buttons consistent with other browsers. */  /* Gecko-specific reset - makes buttons consistent with other browsers. */ 
/* Yes, rotten browser-specific code. It will save some dramas though. */  /* Yes, rotten browser-specific code. It will save some dramas though. */ 
button::-moz-focus-inner, input[type='button']::-moz-focus-inner, button::-moz-focus-inner, input[type='button']::-moz-focus-inner,
input[type='reset']::-moz-focus-inner, input[type='submit']::-moz-focus-inner, input[type='reset']::-moz-focus-inner, input[type='submit']::-moz-focus-inner,
select::-moz-focus-inner { select::-moz-focus-inner {
   border: 0;    border: 0;
   padding: 0;    padding: 0;
} }
   
/* Declarations for inputs, selects and buttons */  /* Declarations for inputs, selects and buttons */ 
input, .input_text, button, select { input, .input_text, button, select {
   padding: 0 6px;    padding: 0 6px;
   min-height: 2em;    min-height: 2em;
   max-height: 2em;    max-height: 2em;
   height: 2em;    height: 2em;
   vertical-align: middle;    vertical-align: middle;
} }
  select {
     padding: 0 6px 0 2px;
  }
.input_text { .input_text {
   font-size: .876em;    font-size: .876em;
} }
select option { select option {
   padding: 0 4px;    padding: 0 4px;
} }
/* Special form elements need to be addressed */  /* Special form elements need to be addressed */ 
select#cat, select#suggestions, select#file , input[type="file"] { select#cat, select#suggestions, select#file , input[type="file"] {
   height: auto;    height: auto;
   max-height: none;    max-height: none;
} }
input[type="number"] { input[type="number"] {
   padding: 0 0 0 6px;    padding: 0 0 0 6px;
} }
/* No borders around checkboxes or radio buttons, and middle aligned. */  /* No borders around checkboxes or radio buttons, and middle aligned. */ 
.input_check, .input_radio { .input_check, .input_radio {
   border: none;    border: none;
   background: none;    background: none;
   vertical-align: middle;    vertical-align: middle;
   margin: 0 2px 2px;    margin: 0 2px 2px;
} }
   
/* Common button styling. */  /* Common button styling. */ 
/* It is being replaced with three classes: */  /* It is being replaced with three classes: */ 
/*    .button_submit is not floated */  /*    .button_submit is not floated */ 
/*    .right_submit is right floated */  /*    .right_submit is right floated */ 
/*    .left_submit is left floated */  /*    .left_submit is left floated */ 
/* The button_reset class may need attention too. */  /* The button_reset class may need attention too. */ 
.button_submit, .right_submit, .left_submit, .button_reset, .button_submit, .right_submit, .left_submit, .button_reset,
/* Anchors styled to look like buttons. */  /* Anchors styled to look like buttons. */ 
/* These have standard body text size. Can be chained with smalltext class. */  /* These have standard body text size. Can be chained with smalltext class. */ 
.linkbutton:link, .linkbutton_right:link, .linkbutton_left:link, .linkbutton:link, .linkbutton_right:link, .linkbutton_left:link,
.linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited { .linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited {
   padding: 0 6px;    padding: 0 6px;
   display: inline-block;    display: inline-block;
} }
.left_submit, .linkbutton_left { .left_submit, .linkbutton_left {
   float: left;    float: left;
} }
.right_submit, .linkbutton_right { .right_submit, .linkbutton_right {
   float: right;    float: right;
} }
/* Hover effects. */  /* Hover effects. */ 
.button_submit:hover, .right_submit:hover, .left_submit:hover, .button_submit:hover, .right_submit:hover, .left_submit:hover,
.button_reset:hover, .button_reset:hover,
.linkbutton:hover, .linkbutton_right:hover, .linkbutton_left:hover { .linkbutton:hover, .linkbutton_right:hover, .linkbutton_left:hover {
   cursor: pointer;    cursor: pointer;
} }
/* Dont show disabled buttons as active on hover */  /* Dont show disabled buttons as active on hover */ 
input[type=submit][disabled]:hover, button[disabled], button[disabled]:hover { input[type=submit][disabled]:hover, button[disabled], button[disabled]:hover {
   border: 1px solid #afafaf;    border: 1px solid #afafaf;
   border-top: 1px solid #cfcfcf;    border-top: 1px solid #cfcfcf;
   border-left: 1px solid #bfbfbf;    border-left: 1px solid #bfbfbf;
   box-shadow: 1px 1px 2px #e5e5e5;    box-shadow: 1px 1px 2px #e5e5e5;
} }
.linkbutton:link, .linkbutton_right:link, .linkbutton_left:link, .linkbutton:link, .linkbutton_right:link, .linkbutton_left:link,
.linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited { .linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited {
   font-size: 0.857em;    font-size: 0.857em;
   line-height: 1.929em;    line-height: 1.929em;
} }
   
/* @todo - A common, tag-agnostic class to hold submit buttons, etc. */  /* @todo - A common, tag-agnostic class to hold submit buttons, etc. */ 
/* Old markup had crud like <div class="smalltext righttext padding ffs zomg"> */  /* Old markup had crud like <div class="smalltext righttext padding ffs zomg"> */ 
/* Use new class that is defined to suit, and with a sensible name. */  /* Use new class that is defined to suit, and with a sensible name. */ 
.submitbutton { .submitbutton {
   text-align: right;    text-align: right;
   padding: 6px 0;    padding: 6px 0;
   overflow: auto;    overflow: auto;
} }
#post_confirm_buttons { #post_confirm_buttons {
   padding: 0 0 1px 0;    padding: 0 0 1px 0;
} }
   
/* @todo - Test this out some more. */  /* @todo - Test this out some more. */ 
.submitbutton .button_submit, .submitbutton .linkbutton, .submitbutton .right_submit { .submitbutton .button_submit, .submitbutton .linkbutton, .submitbutton .right_submit {
   padding: 0 6px;    padding: 0 6px;
   margin-right: 0.4em;     margin-right: 0.2em; 
   margin-left: 0.4em;     margin-left: 0.2em; 
} }
/* @todo mostly for those go buttons that don't have a form id */  /* @todo mostly for those go buttons that don't have a form id */ 
.button_submit.submitgo { .button_submit.submitgo {
   margin-bottom: 4px;    margin-bottom: 4px;
} }
/* IE has its own padding needs */  /* IE has its own padding needs */ 
#ie select, #ie8 select, #ie9 select { #ie select, #ie8 select, #ie9 select {
   padding: 0 0 0 6px;    padding: 0 0 0 6px;
} }
   
/* the new "button" */  /* the new "button" */ 
/* @todo - Might add extra fallbacks. Possibly monospace. */  /* @todo - Might add extra fallbacks. Possibly monospace. */ 
/* @todo - Also, look at deprecating spans here. */  /* @todo - Also, look at deprecating spans here. */ 
.new_posts, .require_approval { .new_posts, .require_approval {
   font-weight: bold;    font-weight: bold;
   line-height: 1.12px;    line-height: 1.12px;
} }
.new_posts, .require_approval { .new_posts, .require_approval {
   display: inline;    display: inline;
   padding: 1px 4px 2px 4px;    padding: 1px 4px 2px 4px;
   font-size: .643em;    font-size: .643em;
   font-family: verdana, sans-serif;    font-family: verdana, sans-serif;
} }
.new_posts:hover { .new_posts:hover {
   text-decoration: underline;    text-decoration: underline;
} }
del .bbc_link:link, del .bbc_link:visited { del .bbc_link:link, del .bbc_link:visited {
   text-decoration: line-through;    text-decoration: line-through;
} }
.childboards .new_posts { .childboards .new_posts {
   font-size: 0.857em;    font-size: 0.857em;
   padding: 1px 3px 2px;    padding: 1px 3px 2px;
} }
   
/* Standard horizontal rule.. ([hr], etc.) */  /* Standard horizontal rule.. ([hr], etc.) */ 
hr { hr {
   margin: 12px 0;    margin: 12px 0;
   height: 1px;    height: 1px;
} }
   
/* Fieldsets are used to group elements. */  /* Fieldsets are used to group elements. */ 
/* @todo - Can we do this by class? What about default styling? Needed? */  /* @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. */  /* Declaring as overflow: auto; is probably a good idea. Test for teh bugz. */ 
fieldset { fieldset {
   overflow: auto;    overflow: auto;
   border: none;    border: none;
} }
   
strong { strong {
   color: #666;    color: #666;
   font-weight: bold;    font-weight: bold;
} }
/*...and em as italics */  /*...and em as italics */ 
em { em {
   font-style: italic;    font-style: italic;
} }
.table_grid_perms { .table_grid_perms {
   table-layout: fixed;    table-layout: fixed;
   word-wrap: break-word;    word-wrap: break-word;
   -webkit-hyphens: auto;    -webkit-hyphens: auto;
   -moz-hyphens: auto;    -moz-hyphens: auto;
   -ms-hyphens: auto;    -ms-hyphens: auto;
} }
.grid8 { .grid8 {
   width: 8%;    width: 8%;
} }
.grid17 { .grid17 {
   width: 17%;    width: 17%;
} }
.grid20 { .grid20 {
   width: 20%;    width: 20%;
} }
.grid25 { .grid25 {
   width: 25%;    width: 25%;
} }
.grid30 { .grid30 {
   width: 30%;    width: 30%;
} }
.grid33 { .grid33 {
   width: 33%;    width: 33%;
} }
.grid50 { .grid50 {
   width: 49.5%;    width: 49.5%;
} }
   
/*   $COMMON     */  /*   $COMMON     */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
/* HTML5 additions for deprecated tags. */  /* HTML5 additions for deprecated tags. */ 
.tt { .tt {
   font-family: monospace;    font-family: monospace;
} }
/* Alternative for u tag. */  /* Alternative for u tag. */ 
.underline { .underline {
   text-decoration: underline;    text-decoration: underline;
} }
   
/* @todo - Test this everywhere. */  /* @todo - Test this everywhere. */ 
.standard_category { .standard_category {
   clear: both;    clear: both;
   margin: 1em 0 0 0;    margin: 1em 0 0 0;
} }
/* @todo - Test this everywhere. */  /* @todo - Test this everywhere. */ 
.standard_category>.content { .standard_category>.content {
   margin: 4px 0 0 0;    margin: 4px 0 0 0;
   overflow: auto;    overflow: auto;
} }
   
/* Floats, overflows, clears. @todo */  /* Floats, overflows, clears. @todo */ 
.floatright { .floatright {
   float: right;    float: right;
} }
.floatleft { .floatleft {
   float: left;    float: left;
} }
.flow_auto { .flow_auto {
   overflow: auto;    overflow: auto;
} }
.flow_hidden { .flow_hidden {
   overflow: hidden;    overflow: hidden;
} }
.clear { .clear {
   clear: both;    clear: both;
} }
.clear_left { .clear_left {
   clear: left;    clear: left;
} }
.clear_right { .clear_right {
   clear: right;    clear: right;
} }
   
/* Default font sizes (defined in em, so IE can resize): small (12px default), /* Default font sizes (defined in em, so IE can resize): small (12px default),
/* normal (14px default), and large (16px default). /* normal (14px default), and large (16px default).
/* Since these are purely presentational classes, they should be used sparingly. */  /* Since these are purely presentational classes, they should be used sparingly. */ 
/* @todo - th shouldn't be required. */  /* @todo - th shouldn't be required. */ 
.smalldescription, .smalldescription th, .smalltext, .smalltext th { .smalldescription, .smalldescription th, .smalltext, .smalltext th {
   font-size: 0.857em;    font-size: 0.857em;
} }
.largetext { .largetext {
   font-size: 1.286em;    font-size: 1.286em;
} }
.centertext { .centertext {
   text-align: center;    text-align: center;
} }
.righttext { .righttext {
   text-align: right;    text-align: right;
} }
.lefttext { .lefttext {
   text-align: left;    text-align: left;
} }
.double_height { .double_height {
   line-height: 2em;    line-height: 2em;
} }
.nowrap { .nowrap {
   white-space: nowrap;    white-space: nowrap;
} }
.wordbreak { .wordbreak {
   word-break: break-all;    word-break: break-all;
} }
/* Styles for main headers. */  /* Styles for main headers. */ 
.category_header, .forum_category .category_header { .category_header, .forum_category .category_header {
   padding: 4px 10px 2px 10px;    padding: 4px 10px 2px 10px;
   font-size: 1.214em;    font-size: 1.214em;
   line-height: 1.8em;    line-height: 1.8em;
} }
   
/* Styles for subsection headers. @todo */  /* Styles for subsection headers. @todo */ 
.secondary_header { .secondary_header {
   margin: 12px 0 0 0;    margin: 12px 0 0 0;
   font-size: 1.143em;    font-size: 1.143em;
   line-height: 1.8em;    line-height: 1.8em;
   padding: 1px 10px 1px;    padding: 1px 10px 1px;
} }
   
.category_header .icon { .category_header .icon {
   margin: 0 5px 0 0;    margin: 0 5px 0 0;
   vertical-align: text-top;    vertical-align: text-top;
} }
/* Category Header icons as sprites /* Category Header icons as sprites
------------------------------------------------- */  ------------------------------------------------- */ 
.hdicon:before { .hdicon:before {
   background-image: url(../images/icons/header.png);    background-image: url(../images/icons/header.png);
   background-repeat: no-repeat;    background-repeat: no-repeat;
   content: "";    content: "";
   display: inline-block;    display: inline-block;
   height: 24px;    height: 24px;
   width: 30px;    width: 30px;
   vertical-align: text-bottom;    vertical-align: text-bottom;
} }
/* broke formatting for compactness */  /* broke formatting for compactness */ 
.cat_img_attachments:before {background-position: 0 0;} .cat_img_attachments:before {background-position: 0 0;}
.cat_img_buddies:before {background-position: 0 -24px;} .cat_img_buddies:before {background-position: 0 -24px;}
.cat_img_config:before {background-position: 0 -48px} .cat_img_config:before {background-position: 0 -48px}
.cat_img_contacts:before {background-position: 0 -72px;} .cat_img_contacts:before {background-position: 0 -72px;}
.cat_img_helptopics:before {background-position: 0 -96px;} .cat_img_helptopics:before {background-position: 0 -96px;}
.cat_img_inbox:before {background-position: 0 -120px;} .cat_img_inbox:before {background-position: 0 -120px;}
.cat_img_login:before {background-position: 0 -144px;} .cat_img_login:before {background-position: 0 -144px;}
.cat_img_mail:before {background-position: 0 -168px;} .cat_img_mail:before {background-position: 0 -168px;}
.cat_img_moderation:before {background-position: 0 -192px;} .cat_img_moderation:before {background-position: 0 -192px;}
.cat_img_plus:before {background-position: 0 -216px;} .cat_img_plus:before {background-position: 0 -216px;}
.cat_img_posts:before {background-position: 0 -240px;} .cat_img_posts:before {background-position: 0 -240px;}
.cat_img_profile:before {background-position: 0 -264px;} .cat_img_profile:before {background-position: 0 -264px;}
.cat_img_search:before {background-position: 0 -288px;} .cat_img_search:before {background-position: 0 -288px;}
.cat_img_stats_info:before {background-position: 0 -312px;} .cat_img_stats_info:before {background-position: 0 -312px;}
.cat_img_topics:before {background-position: 0 -336px;} .cat_img_topics:before {background-position: 0 -336px;}
.cat_img_write:before {background-position: 0 -360px;} .cat_img_write:before {background-position: 0 -360px;}
.cat_img_database:before {background-position: 0 -384px;} .cat_img_database:before {background-position: 0 -384px;}
.cat_img_address:before {background-position: 0 -408px;} .cat_img_address:before {background-position: 0 -408px;}
.cat_img_calendar:before {background-position: 0 -432px;} .cat_img_calendar:before {background-position: 0 -432px;}
.cat_img_minus:before {background-position: 0 -456px;} .cat_img_minus:before {background-position: 0 -456px;}
.cat_img_star:before {background-position: 0 -480px;} .cat_img_star:before {background-position: 0 -480px;}
.cat_img_clock:before {background-position: 0 -504px;} .cat_img_clock:before {background-position: 0 -504px;}
.cat_img_eye:before {background-position: 0 -528px;} .cat_img_eye:before {background-position: 0 -528px;}
.cat_img_piechart:before {background-position: 0 -552px;} .cat_img_piechart:before {background-position: 0 -552px;}
.cat_img_talk:before {background-position: 0 -576px;} .cat_img_talk:before {background-position: 0 -576px;}
   
h2 a.collapse { h2 a.collapse {
   margin: 2px 4px -2px 0;    margin: 2px 4px -2px 0;
   float: right;    float: right;
} }
   
/* Upshrink image in the general category headers */  /* Upshrink image in the general category headers */ 
#category_toggle, #category_toggle_more, #upshrink_header { #category_toggle, #category_toggle_more, #upshrink_header {
   display: block;    display: block;
   float: right;    float: right;
   padding: 0 16px;    padding: 0 16px;
   overflow: hidden;    overflow: hidden;
   position: relative;    position: relative;
} }
#category_toggle span, #category_toggle_more span, #upshrink_header span { #category_toggle span, #category_toggle_more span, #upshrink_header span {
   background-repeat: no-repeat;    background-repeat: no-repeat;
   background-image: url(../images/_light/expcol.png);    background-image: url(../images/_light/expcol.png);
   position: absolute;    position: absolute;
   top: 50%;    top: 50%;
   margin-top: -30px;    margin-top: -30px;
   left: 50%;    left: 50%;
   margin-left: -58px;    margin-left: -58px;
   padding: 47px 50px;    padding: 47px 50px;
} }
/* Upshrink image in the page top for the header collapse */  /* Upshrink image in the page top for the header collapse */ 
#collapse_button .linklevel1 { #collapse_button .linklevel1 {
   display: block;    display: block;
   overflow: hidden;    overflow: hidden;
   position: relative;    position: relative;
   padding: 0;    padding: 0;
   margin-right: 1px;    margin-right: 1px;
} }
.collapse {background-position: 0 -25px;} .collapse {background-position: 0 -25px;}
.expand {background-position: -116px -25px;} .expand {background-position: -116px -25px;}
   
/* Alternating backgrounds for posts, and several other sections of the forum. */  /* Alternating backgrounds for posts, and several other sections of the forum. */ 
.windowbg, #preview_body, .windowbg2 {} .windowbg, #preview_body, .windowbg2 {}
   
/* General code for generic divs. Should make them behave. */  /* General code for generic divs. Should make them behave. */ 
/* @todo - Not keen on this. Do no-tag-names solution instead? */  /* @todo - Not keen on this. Do no-tag-names solution instead? */ 
/* @todo - When sorted out take care of div.core_posts too */  /* @todo - When sorted out take care of div.core_posts too */ 
div.windowbg, div.windowbg2 { div.windowbg, div.windowbg2 {
   overflow: auto;    overflow: auto;
   padding: 10px 0;    padding: 10px 0;
} }
   
/* Other highlighted text, such as search results. */  /* Other highlighted text, such as search results. */ 
.highlight { .highlight {
   font-weight: bold;    font-weight: bold;
   font-size: 1.071em;    font-size: 1.071em;
} }
/* Legacy highlight color, for selected membergroups etc. */  /* Legacy highlight color, for selected membergroups etc. */ 
/* Used by JS to show a selected item. @todo - deprecate? */  /* Used by JS to show a selected item. @todo - deprecate? */ 
.highlight2 { .highlight2 {
   font-size: 1.071em;    font-size: 1.071em;
} }
   
/* Sometimes there will be an error when you post */  /* Sometimes there will be an error when you post */ 
.error { .error {
   color: red;    color: red;
} }
.border_error { .border_error {
   border: 1px solid red !important;    border: 1px solid red !important;
} }
   
/* Messages that somehow need to attract the attention. */  /* Messages that somehow need to attract the attention. */ 
.alert { .alert {
   color: red;    color: red;
} }
   
/* Colors for warnings. */  /* Colors for warnings. */ 
.warn_mute { .warn_mute {
   color: red;    color: red;
} }
.warn_moderate, .softalert { .warn_moderate, .softalert {
   color: #ffa500;    color: #ffa500;
} }
.warn_watch, .success { .warn_watch, .success {
   color: green;    color: green;
} }
.moderation_link, .moderation_link:visited { .moderation_link, .moderation_link:visited {
   color: red;    color: red;
   font-weight: bold;    font-weight: bold;
} }
   
/* Used for sections that need somewhat larger corners */  /* Used for sections that need somewhat larger corners */ 
/* @todo - Daft name. Other stuffz. :P */  /* @todo - Daft name. Other stuffz. :P */ 
.roundframe { .roundframe {
   overflow: hidden;    overflow: hidden;
   margin: 2px 0 0 0;    margin: 2px 0 0 0;
   padding: 9px;    padding: 9px;
} }
.roundframe p { .roundframe p {
   padding: 6px;    padding: 6px;
} }
   
/* The generic wrapper thingy. Used by generic list template */  /* The generic wrapper thingy. Used by generic list template */ 
.generic_list_wrapper { .generic_list_wrapper {
   overflow: auto;    overflow: auto;
   margin: 0;    margin: 0;
   padding: 8px 8px 16px 8px;    padding: 8px 8px 16px 8px;
} }
.generic_list_wrapper .additional_row { .generic_list_wrapper .additional_row {
   margin: 0;    margin: 0;
   padding: 10px 0 0;    padding: 10px 0 0;
} }
/* The .information box is used by the after_title additional row */  /* The .information box is used by the after_title additional row */ 
.generic_list_wrapper .information .additional_row { .generic_list_wrapper .information .additional_row {
   border: none;    border: none;
   padding: 6px 0;    padding: 6px 0;
} }
.generic_list_wrapper .information { .generic_list_wrapper .information {
   margin: 0;    margin: 0;
   padding: 0;    padding: 0;
   border: none;    border: none;
} }
   
/* @todo - Ha. Just another silly bunch of divs. */  /* @todo - Ha. Just another silly bunch of divs. */ 
.content { .content {
   padding: 0.2em 1em;    padding: 0.2em 1em;
} }
.content p { .content p {
   margin: 0 0 6px 0;    margin: 0 0 6px 0;
} }
   
/* Styles used by the auto suggest control. */  /* Styles used by the auto suggest control. */ 
.auto_suggest_div { .auto_suggest_div {
   position: absolute;    position: absolute;
   z-index: 100;    z-index: 100;
   visibility: hidden;    visibility: hidden;
} }
.auto_suggest_div:focus { .auto_suggest_div:focus {
   outline: none !important;    outline: none !important;
} }
.auto_suggest_item { .auto_suggest_item {
   padding: 1px 4px;    padding: 1px 4px;
} }
.auto_suggest_item_hover { .auto_suggest_item_hover {
   padding: 1px 4px;    padding: 1px 4px;
   cursor: pointer;    cursor: pointer;
} }
/* To ensure the question and the input are on two different lines */  /* To ensure the question and the input are on two different lines */ 
.verificationquestion label { .verificationquestion label {
   display: block;    display: block;
   width: 100%;    width: 100%;
} }
   
/*   $BBC        */  /*   $BBC        */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
/* The "Quote:" and "Code:" header parts... */  /* The "Quote:" and "Code:" header parts... */ 
.codeheader, .quoteheader { .codeheader, .quoteheader {
   margin: 6px 0 0 0;    margin: 6px 0 0 0;
   padding: 4px 6px 2px 6px;    padding: 4px 6px 2px 6px;
   font-weight: bold;    font-weight: bold;
   font-size: 0.857em;    font-size: 0.857em;
} }
/* [Select] link to copy code. */  /* [Select] link to copy code. */ 
.codeoperation { .codeoperation {
   font-weight: normal;    font-weight: normal;
} }
/* A quote, perhaps from another post. */  /* A quote, perhaps from another post. */ 
.bbc_standard_quote, .bbc_alternate_quote, .bbc_standard_quote, .bbc_alternate_quote,
/* A code block - maybe PHP ;) - shared styles. */  /* A code block - maybe PHP ;) - shared styles. */ 
.bbc_code { .bbc_code {
   overflow: auto;    overflow: auto;
   margin: 0 0 1em 0;    margin: 0 0 1em 0;
   padding: 6px 10px;    padding: 6px 10px;
   font-size: 0.857em;    font-size: 0.857em;
} }
/* Extra code block styling. */  /* Extra code block styling. */ 
.bbc_code { .bbc_code {
   overflow: auto;    overflow: auto;
   height: 20em;    height: 20em;
   white-space: nowrap;    white-space: nowrap;
   font-family: "DejaVu Sans Mono", Monaco, Consolas, monospace;    font-family: "DejaVu Sans Mono", Monaco, Consolas, monospace;
   resize: vertical;    resize: vertical;
} }
/* Stop em compounding when elements are nested. */  /* Stop em compounding when elements are nested. */ 
/* @todo - Scrap old extra divs in Subs.php. */  /* @todo - Scrap old extra divs in Subs.php. */ 
.bbc_standard_quote .bbc_alternate_quote, .bbc_alternate_quote .bbc_standard_quote, .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_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, .bbc_alternate_quote .codeheader, .bbc_standard_quote .quoteheader, .bbc_alternate_quote .quoteheader,
/* And for quote inside small text areas, like the topic summary. */  /* And for quote inside small text areas, like the topic summary. */ 
#topic_summary .bbc_standard_quote, #topic_summary .bbc_alternate_quote , #topic_summary .bbc_standard_quote, #topic_summary .bbc_alternate_quote ,
#topic_summary .bbc_code, #topic_summary .codeheader, #topic_summary .quoteheader { #topic_summary .bbc_code, #topic_summary .codeheader, #topic_summary .quoteheader {
   font-size: 1em;    font-size: 1em;
} }
/* Styling for BBC tags */  /* Styling for BBC tags */ 
.bbc_size { .bbc_size {
   line-height: 1.4em;    line-height: 1.4em;
} }
/* @todo - Are all these "inherit" declarations really necessary? */  /* @todo - Are all these "inherit" declarations really necessary? */ 
.bbc_color a { .bbc_color a {
   color: inherit;    color: inherit;
} }
.bbc_strong { .bbc_strong {
   color: inherit;    color: inherit;
} }
.bbc_img { .bbc_img {
   border: 0;    border: 0;
   max-width: 100%;    max-width: 100%;
} }
.bbc_table { .bbc_table {
   color: inherit;    color: inherit;
   font: inherit;    font: inherit;
} }
.bbc_table td { .bbc_table td {
   color: inherit;    color: inherit;
   font: inherit;    font: inherit;
   vertical-align: top;    vertical-align: top;
   padding: 0 1em 0 0;    padding: 0 1em 0 0;
} }
.bbc_table th { .bbc_table th {
   color: inherit;    color: inherit;
   font: inherit;    font: inherit;
   font-weight: bold;    font-weight: bold;
   padding: 0 1em 0 0;    padding: 0 1em 0 0;
} }
.bbc_u { .bbc_u {
   text-decoration: underline;    text-decoration: underline;
} }
.bbc_list { .bbc_list {
   padding: 0 0 0 35px;    padding: 0 0 0 35px;
   text-align: left;    text-align: left;
   list-style-type: square;    list-style-type: square;
} }
/* Everything is same except HTML5 valid */  /* Everything is same except HTML5 valid */ 
.bbc_tt { .bbc_tt {
   font-family: "DejaVu Sans Mono", Monaco, "Lucida Console", "Courier New", monospace;    font-family: "DejaVu Sans Mono", Monaco, "Lucida Console", "Courier New", monospace;
} }
.bbc_pre { .bbc_pre {
   font-family: "DejaVu Sans Mono", Monaco, Consolas, monospace;    font-family: "DejaVu Sans Mono", Monaco, Consolas, monospace;
   overflow: auto;    overflow: auto;
} }
.bbc_footnotes { .bbc_footnotes {
   margin-top: 10px;    margin-top: 10px;
   padding: 4px 8px 4px 0;    padding: 4px 8px 4px 0;
   font-size: small;    font-size: small;
   overflow: auto;    overflow: auto;
} }
.footnote_return { .footnote_return {
   font-size: 1.357em;    font-size: 1.357em;
} }
/* Shorten url's inside posts. */  /* Shorten url's inside posts. */ 
a.bbc_link { a.bbc_link {
   display: inline-block;    display: inline-block;
   white-space: nowrap;    white-space: nowrap;
   overflow: hidden;    overflow: hidden;
   text-overflow: ellipsis;    text-overflow: ellipsis;
   max-width: 100%;    max-width: 100%;
   vertical-align: bottom;    vertical-align: bottom;
} }
   
/*   $AJAX       */  /*   $AJAX       */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
/* The "Loading" bar for quick edit, etc. */  /* The "Loading" bar for quick edit, etc. */ 
#ajax_in_progress { #ajax_in_progress {
   position: fixed;    position: fixed;
   top: 0;    top: 0;
   left: 0;    left: 0;
   padding: 15px;    padding: 15px;
   width: 100%;    width: 100%;
   text-align: center;    text-align: center;
   font-size: 1.571em;    font-size: 1.571em;
   z-index: 100;    z-index: 100;
} }
#ajax_in_progress a { #ajax_in_progress a {
   color: orange;    color: orange;
   text-decoration: underline;    text-decoration: underline;
} }
   
/*   $MAIN.      */  /*   $MAIN.      */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
/* The top bar. */  /* The top bar. */ 
#top_section { #top_section {
   margin: 0;    margin: 0;
   padding: 0;    padding: 0;
} }
#top_section_notice { #top_section_notice {
   float: left;    float: left;
   margin: 0;    margin: 0;
   padding: 14px 8px 0 8px;    padding: 14px 8px 0 8px;
   line-height: 1.286em;    line-height: 1.286em;
   min-width: 38%;    min-width: 38%;
} }
#top_section_notice .toggle_login { #top_section_notice .toggle_login {
   display: inline;    display: inline;
   cursor: pointer;    cursor: pointer;
} }
#top_section_notice form { #top_section_notice form {
   white-space: nowrap;    white-space: nowrap;
   width: 100%;    width: 100%;
} }
.top_button { .top_button {
   line-height: 1.286em;    line-height: 1.286em;
   padding: 2px;    padding: 2px;
   margin-left: 1px;    margin-left: 1px;
   vertical-align: top;    vertical-align: top;
} }
.top_button img { .top_button img {
   vertical-align: middle;    vertical-align: middle;
   padding: 2px;    padding: 2px;
} }
#password_login { #password_login {
   display: inline-block;    display: inline-block;
   vertical-align: middle;    vertical-align: middle;
   -webkit-appearance: caps-lock-indicator;    -webkit-appearance: caps-lock-indicator;
} }
#search_form { #search_form {
   padding: 12px 3px 4px 8px;    padding: 12px 3px 4px 8px;
   float: right;    float: right;
} }
#search_form * { #search_form * {
   margin: 0;    margin: 0;
   border-radius: 0;    border-radius: 0;
   /* Webkit (bleh) fix. */     /* Webkit (bleh) fix. */ 
   float: left;    float: left;
} }
/* The logo and slogan. */  /* The logo and slogan. */ 
#header { #header {
   padding: 2px 2px 0 2px;    padding: 2px 2px 0 2px;
} }
/* The main title. */  /* The main title. */ 
#forumtitle, .rightheader #forumtitle { #forumtitle, .rightheader #forumtitle {
   float: left;    float: left;
   padding: 10px 10px 6px 13px;    padding: 10px 10px 6px 13px;
   font-size: 2.357em;    font-size: 2.357em;
   line-height: 1.455em;    line-height: 1.455em;
} }
.centerheader #forumtitle { .centerheader #forumtitle {
   display: none;    display: none;
} }
.rightheader #forumtitle { .rightheader #forumtitle {
   float: right;    float: right;
} }
/* Float these items to the right. @todo - Simplify. */  /* Float these items to the right. @todo - Simplify. */ 
#logobox, .rightheader #logobox { #logobox, .rightheader #logobox {
   float: right;    float: right;
   padding: 0.95em 12px 0 12px;    padding: 0.95em 12px 0 12px;
   max-width: 40%;    max-width: 40%;
} }
.centerheader #logobox { .centerheader #logobox {
   width: 100%;    width: 100%;
} }
.rightheader #logobox, .rightheader #logo { .rightheader #logobox, .rightheader #logo {
   float: left;    float: left;
   padding-bottom: 7px;    padding-bottom: 7px;
} }
.centerheader #logobox, .centerheader #logo, .centerheader #siteslogan { .centerheader #logobox, .centerheader #logo, .centerheader #siteslogan {
   float: none;    float: none;
   display: block;    display: block;
   margin: 0 auto;    margin: 0 auto;
   text-align: center;    text-align: center;
} }
#siteslogan { #siteslogan {
   clear: both;    clear: both;
} }
/* Tweak the logo */  /* Tweak the logo */ 
#logo { #logo {
   margin: 0 8px 0 0;    margin: 0 8px 0 0;
   padding: 0;    padding: 0;
   float: right;    float: right;
} }
.rightheader #logo { .rightheader #logo {
   margin: 0 0 0 8px;    margin: 0 0 0 8px;
} }
/* Main forum area. */  /* Main forum area. */ 
/* Box-shadow only on this one. */  /* Box-shadow only on this one. */ 
#wrapper { #wrapper {
   margin-top: 20px;    margin-top: 20px;
   padding: 1.2em 1em;    padding: 1.2em 1em;
} }
/* The user info, news, etc.*/  /* The user info, news, etc.*/ 
#news { #news {
   vertical-align: top;    vertical-align: top;
   padding: 0 0 1em 0;    padding: 0 0 1em 0;
   margin-left: -1px;    margin-left: -1px;
} }
#news .bbc_link { #news .bbc_link {
   display: inline;    display: inline;
} }
   
/* The login form. */  /* The login form. */ 
#guest_form { #guest_form {
   padding: 0 0 8px 0;    padding: 0 0 8px 0;
} }
#guest_form input, #guest_form select { #guest_form input, #guest_form select {
   font-size: 1.071em;    font-size: 1.071em;
   margin: 0 0 8px 0;    margin: 0 0 8px 0;
} }
.modtask { .modtask {
   margin: 1em 0 0 0;    margin: 1em 0 0 0;
} }
.modtask a { .modtask a {
   font-weight: bold;    font-weight: bold;
} }
/* The content section */  /* The content section */ 
#main_content_section { #main_content_section {
   padding: 1em 0 0 0;    padding: 1em 0 0 0;
   min-height: 180px;    min-height: 180px;
} }
/* The footer with copyright links etc. */  /* The footer with copyright links etc. */ 
#footer_section { #footer_section {
   margin: 35px 0 0 0;    margin: 35px 0 0 0;
} }
#footer_section .wrapper { #footer_section .wrapper {
   padding: 20px 5px;    padding: 20px 5px;
} }
#footer_section p, #footer_section a { #footer_section p, #footer_section a {
   font-size: 0.857em;    font-size: 0.857em;
} }
#footer_section li { #footer_section li {
   display: inline;    display: inline;
   padding-right: 5px;    padding-right: 5px;
} }
#footer_section .copyright { #footer_section .copyright {
   display: inline;    display: inline;
   visibility: visible;    visibility: visible;
   font-family: Verdana, Arial, sans-serif;    font-family: Verdana, Arial, sans-serif;
   font-size: 0.857em;    font-size: 0.857em;
} }
#footer_section .rssfeeds { #footer_section .rssfeeds {
   float: right;    float: right;
   padding-top: 2px;    padding-top: 2px;
   width: 21px;    width: 21px;
   margin: auto;    margin: auto;
   text-align: center;    text-align: center;
} }
   
   
/*   $MENUS  */  /*   $MENUS  */ 
/* This section contains code for the main forum menu (#main_menu), /* 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 secondary menus in admin/profile/pm (.admin_menu),
/* and for the tertiary menu strip in admin/etc (#adm_submenus). /* and for the tertiary menu strip in admin/etc (#adm_submenus).
/* /*
/* Top level <ul> elements have the class or id mentioned above. /* Top level <ul> elements have the class or id mentioned above.
/* <li> elements are for positioning only (classes are listlevel1, etc). /* <li> elements are for positioning only (classes are listlevel1, etc).
/* Top level links (like main menu buttons) have the class linklevel1. /* Top level links (like main menu buttons) have the class linklevel1.
/* Drop menu wrappers are either menulevel2 or menulevel3. /* Drop menu wrappers are either menulevel2 or menulevel3.
/* Drop menu links are either linklevel2 or linklevel3. /* Drop menu links are either linklevel2 or linklevel3.
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
/* Main menu bar: wrapper/background. */  /* Main menu bar: wrapper/background. */ 
#menu_nav { #menu_nav {
   padding: 6px;    padding: 6px;
} }
#main_menu { #main_menu {
   position: relative;    position: relative;
} }
/* Wrapper for primary admin/profile/etc menus. */  /* Wrapper for primary admin/profile/etc menus. */ 
.admin_menu { .admin_menu {
   padding: 0 3px;    padding: 0 3px;
} }
/* Wrapper for secondary admin/profile/etc menus. */  /* Wrapper for secondary admin/profile/etc menus. */ 
#adm_submenus { #adm_submenus {
   overflow: auto;    overflow: auto;
   padding: 0 3px;    padding: 0 3px;
} }
/* Level 1 button positioning. */  /* Level 1 button positioning. */ 
/* 1px padding gives slight gap between buttons, and drop menus. */  /* 1px padding gives slight gap between buttons, and drop menus. */ 
.listlevel1 { .listlevel1 {
   position: relative;    position: relative;
   float: left;    float: left;
   margin: 0 2px;    margin: 0 2px;
   padding: 2px 0;    padding: 2px 0;
   font-size: 0.929em;    font-size: 0.929em;
   line-height: 2.077em;    line-height: 2.077em;
} }
.poster .listlevel1 { .poster .listlevel1 {
   line-height: 1.667em;    line-height: 1.667em;
   padding: 0;    padding: 0;
} }
.listlevel1:hover { .listlevel1:hover {
   z-index: 6;    z-index: 6;
} }
.listlevel1#collapse_button, .listlevel1#button_profile { .listlevel1#collapse_button, .listlevel1#button_profile {
   float: right;    float: right;
} }
.listlevel1#button_profile img { .listlevel1#button_profile img {
   max-width: 1.5em;    max-width: 1.5em;
   max-height: 1.5em;    max-height: 1.5em;
   margin: 0;    margin: 0;
   margin-right: 0.6em;    margin-right: 0.6em;
   position: relative;    position: relative;
   top: 4px;    top: 4px;
} }
/* Level 1 Menu bar: link or button. */  /* Level 1 Menu bar: link or button. */ 
.linklevel1 { .linklevel1 {
   display: block;    display: block;
   padding: 0 0.6em;    padding: 0 0.6em;
   white-space: nowrap;    white-space: nowrap;
} }
.listlevel1#button_profile .linklevel1 { .listlevel1#button_profile .linklevel1 {
   min-width: 5em;    min-width: 5em;
} }
   
/* Levels 2 and 3: drop menu wrapper. */  /* Levels 2 and 3: drop menu wrapper. */ 
.menulevel2, .menulevel3 { .menulevel2, .menulevel3 {
   position: absolute;    position: absolute;
   top: 100%;    top: 100%;
   left: -9999px;    left: -9999px;
   z-index: 90;    z-index: 90;
   margin: 0;    margin: 0;
   padding: 0.6em;    padding: 0.6em;
   width: 18.4em;    width: 18.4em;
} }
/* Level 3: drop menu positioning. */  /* Level 3: drop menu positioning. */ 
.menulevel3 { .menulevel3 {
   margin: -2em 0 0 15.3em;    margin: -2em 0 0 15.3em;
} }
/* Reposition Level 2 drop menu as visible on hover. */  /* Reposition Level 2 drop menu as visible on hover. */ 
.listlevel1:hover .menulevel2, .listlevel1.sfhover .menulevel2 { .listlevel1:hover .menulevel2, .listlevel1.sfhover .menulevel2 {
   left: 0;    left: 0;
} }
.listlevel1#button_profile:hover .menulevel2, .listlevel1#button_profile.sfhover .menulevel2 { .listlevel1#button_profile:hover .menulevel2, .listlevel1#button_profile.sfhover .menulevel2 {
   left: auto;    left: auto;
   right: 0;    right: 0;
} }
/* Hiding Level 3 drop menu off hover. */  /* Hiding Level 3 drop menu off hover. */ 
.listlevel1:hover .menulevel3, .listlevel1.sfhover .menulevel3 { .listlevel1:hover .menulevel3, .listlevel1.sfhover .menulevel3 {
   left: -9999px;    left: -9999px;
} }
/* Reposition Level 3 drop menu as visible on hover. */  /* Reposition Level 3 drop menu as visible on hover. */ 
.listlevel2:hover .menulevel3, .listlevel2.sfhover .menulevel3 { .listlevel2:hover .menulevel3, .listlevel2.sfhover .menulevel3 {
   left: -14px;    left: -14px;
} }
/* Level 2 and 3 button positioning. */  /* Level 2 and 3 button positioning. */ 
/* 1px vertical padding gives slight gap between buttons. */  /* 1px vertical padding gives slight gap between buttons. */ 
.listlevel2, .listlevel3 { .listlevel2, .listlevel3 {
   position: relative;    position: relative;
   float: none;    float: none;
   padding: 1px 0;    padding: 1px 0;
   width: 17em;    width: 17em;
} }
/* Levels 2 and 3 drop menus: link or button. */  /* Levels 2 and 3 drop menus: link or button. */ 
.linklevel2, .linklevel3 { .linklevel2, .linklevel3 {
   position: relative;    position: relative;
   display: block;    display: block;
   padding: 0 7px;    padding: 0 7px;
} }
/* @todo - Note: The next declarations are for keyboard access with js disabled. */  /* @todo - Note: The next declarations are for keyboard access with js disabled. */ 
/* Hmm. These are tricky with the new Superfish/Superclick combo. */  /* Hmm. These are tricky with the new Superfish/Superclick combo. */ 
/* May need a noScript class added somewhere. Pondering required. */  /* May need a noScript class added somewhere. Pondering required. */ 
/* /*
.linklevel2:focus, .linklevel3:focus { .linklevel2:focus, .linklevel3:focus {
   margin-left: 9990px;    margin-left: 9990px;
   width: 17em;    width: 17em;
} }
.linklevel3:focus { .linklevel3:focus {
   margin-left: 19950px;    margin-left: 19950px;
} }
*/  */ 
/* @todo - Cancel those for hover and/or js access. */  /* @todo - Cancel those for hover and/or js access. */ 
/* /*
.listlevel2:hover .linklevel2:focus, .listlevel2.sfhover .linklevel2:focus, .listlevel2:hover .linklevel2:focus, .listlevel2.sfhover .linklevel2:focus,
.listlevel3:hover .linklevel3:focus, .listlevel3.sfhover .linklevel3:focus { .listlevel3:hover .linklevel3:focus, .listlevel3.sfhover .linklevel3:focus {
   z-index: 999;    z-index: 999;
   margin-left: 0;    margin-left: 0;
   width: auto;    width: auto;
} }
*/  */ 
/* Styles for sidebar menus. /* Styles for sidebar menus.
------------------------------------------------------- */  ------------------------------------------------------- */ 
#main_admsection { #main_admsection {
   overflow: auto;    overflow: auto;
} }
#menu_sidebar { #menu_sidebar {
   float: left;    float: left;
   padding: 0 10px 1em 0;    padding: 0 10px 1em 0;
   width: 200px;    width: 200px;
} }
/* @todo */  /* @todo */ 
#menu_sidebar .sidebar_menu { #menu_sidebar .sidebar_menu {
   padding: 4px 0 9px 0;    padding: 4px 0 9px 0;
} }
/* Same styling for Level 1 and Level 2. */  /* Same styling for Level 1 and Level 2. */ 
#menu_sidebar .listlevel1 { #menu_sidebar .listlevel1 {
   float: none;    float: none;
   padding: 1px 0;    padding: 1px 0;
} }
#menu_sidebar .listlevel1:hover .menulevel2, #menu_sidebar .listlevel1:hover .menulevel2,
#menu_sidebar .listlevel1.sfhover .menulevel2 { #menu_sidebar .listlevel1.sfhover .menulevel2 {
   top: 0.35em;    top: 0.35em;
   left: 170px;    left: 170px;
} }
#menu_sidebar .pm_indicator { #menu_sidebar .pm_indicator {
   font-size: 0.6em;    font-size: 0.6em;
   font-weight: normal;    font-weight: normal;
} }
/* @todo - Note: The next declarations are for keyboard access with js disabled. */  /* @todo - Note: The next declarations are for keyboard access with js disabled. */ 
/* Hmm. These are tricky with the new Superfish/Superclick combo. */  /* Hmm. These are tricky with the new Superfish/Superclick combo. */ 
/* May need a noScript class added somewhere. Pondering required. */  /* May need a noScript class added somewhere. Pondering required. */ 
/* /*
#menu_sidebar .linklevel2:focus { #menu_sidebar .linklevel2:focus {
   margin-left: 10150px;    margin-left: 10150px;
   width: 17em;    width: 17em;
} }
*/  */ 
/* Cancel those for hover and/or js access. */  /* Cancel those for hover and/or js access. */ 
/* /*
#menu_sidebar .listlevel2:hover .linklevel2:focus, #menu_sidebar .listlevel2.sfhover .linklevel2:focus { #menu_sidebar .listlevel2:hover .linklevel2:focus, #menu_sidebar .listlevel2.sfhover .linklevel2:focus {
   margin-left: 0;    margin-left: 0;
   width: auto;    width: auto;
} }
*/  */ 
   
   
/*   $LINKTREE   */  /*   $LINKTREE   */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
/* The navigation list (i.e. linktree) */  /* The navigation list (i.e. linktree) */ 
.navigate_section { .navigate_section {
   overflow: hidden;    overflow: hidden;
   margin: 3px 0 0 0;    margin: 3px 0 0 0;
   padding-right: 1em;    padding-right: 1em;
} }
#main_content_section .navigate_section { #main_content_section .navigate_section {
   margin: 12px 0 6px 0;    margin: 12px 0 6px 0;
} }
.linktree { .linktree {
   position: relative;    position: relative;
   float: left;    float: left;
   font-size: 0.929em;    font-size: 0.929em;
   line-height: 2em;    line-height: 2em;
   display: inline-block;    display: inline-block;
   padding: 0 1.1em 0 2em;    padding: 0 1.1em 0 2em;
   border: none;    border: none;
     white-space: nowrap;
} }
   
/* Nifty indicators. */  /* Nifty indicators. */ 
.linktree:after { .linktree:after {
   content: "";    content: "";
   position: absolute;    position: absolute;
   display: inline-block;    display: inline-block;
   right: -1em;    right: -1em;
   top: 0;    top: 0;
   width: 2em;    width: 2em;
   height: 2em;    height: 2em;
   /* Scale the squares diagonal to = the line-height */     /* Scale the squares diagonal to = the line-height */ 
   transform: scale(0.7071) rotate(45deg);    transform: scale(0.7071) rotate(45deg);
   -webkit-transform: scale(0.7071) rotate(45deg);    -webkit-transform: scale(0.7071) rotate(45deg);
   -ms-transform: scale(0.7071) rotate(45deg);    -ms-transform: scale(0.7071) rotate(45deg);
   z-index: 1;    z-index: 1;
} }
#ie8 .linktree:after { #ie8 .linktree:after {
   border-right: 1px solid #ccc;    border-right: 1px solid #ccc;
   width: 0;    width: 0;
   right: 0;    right: 0;
} }
.linktree:first-child { .linktree:first-child {
   padding-left: 1em;    padding-left: 1em;
} }
   
/*   $BUTTONS    */  /*   $BUTTONS    */ 
/* This section contains code for the quickbuttons (quote, quick edit, etc) /* This section contains code for the quickbuttons (quote, quick edit, etc)
/* and for the buttonlist class (reply, add poll, notify, etc). /* and for the buttonlist class (reply, add poll, notify, etc).
/* These classes share some styling. /* These classes share some styling.
/* Declarations are amalgamated where styling is shared. /* Declarations are amalgamated where styling is shared.
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
/* Styles for the standard button lists. /* Styles for the standard button lists.
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
.buttonlist { .buttonlist {
   padding: 5px 5px 0 5px;    padding: 5px 5px 0 5px;
} }
.buttonlist li { .buttonlist li {
   float: left;    float: left;
   margin: 0 0 0 4px;    margin: 0 0 0 4px;
   line-height: 2.231em;    line-height: 2.231em;
} }
/* @todo - Save code by amalgamating common button background declarations. */  /* @todo - Save code by amalgamating common button background declarations. */ 
.buttonlist li a { .buttonlist li a {
   display: block;    display: block;
   padding: 0 6px;    padding: 0 6px;
   font-size: 0.786em;    font-size: 0.786em;
   line-height: 2em;    line-height: 2em;
} }
   
/* The quick buttons. */  /* The quick buttons. */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
.quickbuttons { .quickbuttons {
   margin: 8px 0 6px 0;    margin: 8px 0 6px 0;
   text-align: right;    text-align: right;
} }
.quickbuttons li { .quickbuttons li {
   white-space: nowrap;    white-space: nowrap;
} }
/* Follow ups and topic summary need it a bit different. */  /* Follow ups and topic summary need it a bit different. */ 
.follow_ups, #topic_summary .quickbuttons { .follow_ups, #topic_summary .quickbuttons {
   float: right;    float: right;
   margin: -7px 0 0 7px;    margin: -7px 0 0 7px;
} }
/* Most of them. */  /* Most of them. */ 
.quickbuttons .listlevel1 { .quickbuttons .listlevel1 {
   position: relative;    position: relative;
   float: right;    float: right;
   margin: 2px 0;    margin: 2px 0;
   padding: 2px 0;    padding: 2px 0;
   font-size: 0.857em;    font-size: 0.857em;
} }
/* Odd cases. */  /* Odd cases. */ 
.follow_ups .listlevel1, #topic_summary .quickbuttons .listlevel1 { .follow_ups .listlevel1, #topic_summary .quickbuttons .listlevel1 {
   font-size: 1em;    font-size: 1em;
} }
.quickbuttons .modified { .quickbuttons .modified {
   float: left;    float: left;
   padding: 0 0 0 6px;    padding: 0 0 0 6px;
} }
.quickbuttons .inline_mod_check { .quickbuttons .inline_mod_check {
   margin: 4px 0 0;    margin: 4px 0 0;
   padding: 0 4px;    padding: 0 4px;
} }
.inline_mod_check .input_check { .inline_mod_check .input_check {
   height: auto;    height: auto;
   margin: 0 0 2px;    margin: 0 0 2px;
} }
   
/* @todo - Save code by amalgamating common button background declarations. */  /* @todo - Save code by amalgamating common button background declarations. */ 
.quickbuttons .linklevel1 { .quickbuttons .linklevel1 {
   float: left;    float: left;
   padding: 1px 6px 0 22px;    padding: 1px 6px 0 22px;
   line-height: 2em;    line-height: 2em;
   cursor: pointer;    cursor: pointer;
} }
/* @todo remove this when we drop ie8 */  /* @todo remove this when we drop ie8 */ 
#ie8 .quickbuttons .linklevel1 { #ie8 .quickbuttons .linklevel1 {
   float: none;    float: none;
} }
/* @todo - Check with js disabled after sorting most of the other crud. */  /* @todo - Check with js disabled after sorting most of the other crud. */ 
/* Note: The next declarations are for keyboard access with js disabled. */  /* Note: The next declarations are for keyboard access with js disabled. */ 
/*.quickbuttons .linklevel1:focus { /*.quickbuttons .linklevel1:focus {
   margin: 0 -9910px 0 9910px;    margin: 0 -9910px 0 9910px;
}*/  }*/ 
/* Cancel for hover and/or js access. */  /* Cancel for hover and/or js access. */ 
/*.quickbuttons .listlevel1:hover .linklevel1:focus, .quickbuttons .listlevel1.sfhover .linklevel1:focus { /*.quickbuttons .listlevel1:hover .linklevel1:focus, .quickbuttons .listlevel1.sfhover .linklevel1:focus {
   margin: 0;    margin: 0;
}*/  }*/ 
.quickbuttons .linklevel1:before, .quickbuttons .linklevel2:before { .quickbuttons .linklevel1:before, .quickbuttons .linklevel2:before {
   position: absolute;    position: absolute;
   z-index: 5;    z-index: 5;
   display: block;    display: block;
   height: 24px;    height: 24px;
   width: 18px;    width: 18px;
   left: 3px;    left: 3px;
   top: 50%;    top: 50%;
   margin-top: -12px;    margin-top: -12px;
   content: "";    content: "";
} }
.quickmod_check { .quickmod_check {
   left: 3px;    left: 3px;
} }
/* The rest of them. */  /* The rest of them. */ 
.quickbuttons .linklevel1:before, .quickbuttons .linklevel2:before { .quickbuttons .linklevel1:before, .quickbuttons .linklevel2:before {
   background-repeat: no-repeat;    background-repeat: no-repeat;
   /* A rare example of where longhand background declarations work well. */     /* A rare example of where longhand background declarations work well. */ 
   background-image: url(../images/theme/quickbuttons.png);    background-image: url(../images/theme/quickbuttons.png);
} }
/* The long list of sprite coordinates is much less verbose this way. */  /* The long list of sprite coordinates is much less verbose this way. */ 
.quote_button:before {background-position: 0 0;} .quote_button:before {background-position: 0 0;}
.remove_button:before {background-position: 0 -24px;} .remove_button:before {background-position: 0 -24px;}
.modify_button:before {background-position: 0 -48px;} .modify_button:before {background-position: 0 -48px;}
.approve_button:before {background-position: 0 -72px;} .approve_button:before {background-position: 0 -72px;}
.restore_button:before {background-position: 0 -96px;} .restore_button:before {background-position: 0 -96px;}
.split_button:before {background-position: 0 -120px;} .split_button:before {background-position: 0 -120px;}
.reply_button:before {background-position: 0 -144px;} .reply_button:before {background-position: 0 -144px;}
.reply_all_button:before {background-position: 0 -144px;} .reply_all_button:before {background-position: 0 -144px;}
.notify_button:before {background-position: 0 -168px;} .notify_button:before {background-position: 0 -168px;}
.unapprove_button:before {background-position: 0 -192px;} .unapprove_button:before {background-position: 0 -192px;}
.close_button:before {background-position: 0 -216px;} .close_button:before {background-position: 0 -216px;}
.im_reply_button:before {background-position: 0 -240px;} .im_reply_button:before {background-position: 0 -240px;}
.details_button:before {background-position: 0 -264px;} .details_button:before {background-position: 0 -264px;}
.ignore_button:before {background-position: 0 -288px;} .ignore_button:before {background-position: 0 -288px;}
.report_button:before {background-position: 0 -312px;} .report_button:before {background-position: 0 -312px;}
.warn_button:before {background-position: 0 -336px;} .warn_button:before {background-position: 0 -336px;}
.quotetonew_button:before {background-position: 0 -360px;} .quotetonew_button:before {background-position: 0 -360px;}
.like_button:before {background-position: 0 -384px;} .like_button:before {background-position: 0 -384px;}
.unlike_button:before {background-position: 0 -408px;} .unlike_button:before {background-position: 0 -408px;}
.star_button:before {background-position: 0 -432px;} .star_button:before {background-position: 0 -432px;}
.quick_edit:before {background-position: 0 -456px;} .quick_edit:before {background-position: 0 -456px;}
.likes_button:before {background-position: 0 -480px;} .likes_button:before {background-position: 0 -480px;}
/* No icon here. */  /* No icon here. */ 
.linklevel1.post_options:before, .linklevel1.post_options:before,
.follow_ups .linklevel1:before { .follow_ups .linklevel1:before {
   display: none;    display: none;
} }
/* "More..." gets custom padding (no icon). */  /* "More..." gets custom padding (no icon). */ 
.linklevel1.post_options { .linklevel1.post_options {
   padding: 1px 6px 0 6px;    padding: 1px 6px 0 6px;
} }
/* Follow ups gets custom padding (no icon). */  /* Follow ups gets custom padding (no icon). */ 
.follow_ups .linklevel1 { .follow_ups .linklevel1 {
   padding: 1px 6px 0 6px;    padding: 1px 6px 0 6px;
} }
/* Quickbutton and follow ups drop menus. */  /* Quickbutton and follow ups drop menus. */ 
.quickbuttons .menulevel2, .follow_ups .menulevel2 { .quickbuttons .menulevel2, .follow_ups .menulevel2 {
   padding: 0.5em;    padding: 0.5em;
   width: auto;    width: auto;
   text-align: left;    text-align: left;
} }
.quickbuttons .listlevel1:hover .menulevel2, .quickbuttons .listlevel1:hover .menulevel2,
.quickbuttons .listlevel1.sfhover .menulevel2 { .quickbuttons .listlevel1.sfhover .menulevel2 {
   right: -1px;    right: -1px;
   left: auto;    left: auto;
} }
/* Show appropriate like/unlike action */  /* Show appropriate like/unlike action */ 
.like_button:before, .likes_button:before, .unlike_button:before { .like_button:before, .likes_button:before, .unlike_button:before {
   background-position: 0 -480px;    background-position: 0 -480px;
} }
.unlike_button:hover:before { .unlike_button:hover:before {
   background-position: 0 -408px;    background-position: 0 -408px;
} }
.like_button:hover:before { .like_button:hover:before {
   background-position: 0 -384px;    background-position: 0 -384px;
} }
.quickbuttons .listlevel2 { .quickbuttons .listlevel2 {
   width: 12em;    width: 12em;
} }
.follow_ups .listlevel2 { .follow_ups .listlevel2 {
   width: 20em;    width: 20em;
} }
  .follow_ups .linklevel2 {
     overflow: hidden;
     text-overflow: ellipsis;
  }
.quickbuttons .linklevel2 { .quickbuttons .linklevel2 {
   padding: 0 6px 0 26px;    padding: 0 6px 0 26px;
   line-height: 2.1em;    line-height: 2.1em;
} }
   
/*   $PAGELINKS  */  /*   $PAGELINKS  */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
/* The page navigation area. */  /* The page navigation area. */ 
.pagesection { .pagesection {
   clear: both;    clear: both;
   overflow: hidden;    overflow: hidden;
   padding: 4px;    padding: 4px;
} }
.pagesection .floatright input, .pagesection .floatright select { .pagesection .floatright input, .pagesection .floatright select {
   margin-top: 3px;    margin-top: 3px;
} }
.category_header .pagesection .floatright input, .pagesection .floatright select { .category_header .pagesection .floatright input, .pagesection .floatright select {
   margin-top: 0;    margin-top: 0;
} }
/* Necessary for some browsers to keep the pages all on the same line */  /* Necessary for some browsers to keep the pages all on the same line */ 
.linavPages { .linavPages {
   float: left;    float: left;
} }
.selectbox, .pagelinks { .selectbox, .pagelinks {
   margin: 5px 0 0 0;    margin: 5px 0 0 0;
   font-size: 0.857em;    font-size: 0.857em;
} }
/* @todo - Styling will need a bit more thought here. */  /* @todo - Styling will need a bit more thought here. */ 
/* Do not use display: inline-block;*/  /* Do not use display: inline-block;*/ 
/* Why not? Because it has a well-known quirk. It's white-space-dependent. */  /* 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/ */  /* http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ */ 
/* Specifically, the section titled "The enormous drawback". */  /* Specifically, the section titled "The enormous drawback". */ 
/* @todo - Save code by amalgamating common button background declarations. */  /* @todo - Save code by amalgamating common button background declarations. */ 
.pagelinks .navPages { .pagelinks .navPages {
   display: block;    display: block;
   float: left;    float: left;
   padding: 1px 5px;    padding: 1px 5px;
} }
   
.pagelinks .current_page { .pagelinks .current_page {
   display: block;    display: block;
   float: left;    float: left;
   padding: 1px 8px 1px 8px;    padding: 1px 8px 1px 8px;
   font-weight: bolder;    font-weight: bolder;
} }
.expand_pages { .expand_pages {
   display: block;    display: block;
   float: left;    float: left;
   min-width: 1.5em;    min-width: 1.5em;
   text-align: center;    text-align: center;
   cursor: pointer;    cursor: pointer;
   font-weight: bold;    font-weight: bold;
   padding: 2px 0;    padding: 2px 0;
} }
.next_page, .previous_page { .next_page, .previous_page {
   padding: 0 2px;    padding: 0 2px;
   text-transform: capitalize;    text-transform: capitalize;
} }
   
/* @todo - Fix for all templates. */  /* @todo - Fix for all templates. */ 
.small_pagelinks { .small_pagelinks {
   float: right;    float: right;
   margin-top: -2px;    margin-top: -2px;
} }
.small_pagelinks li { .small_pagelinks li {
   float: left;    float: left;
} }
.small_pagelinks li { .small_pagelinks li {
   display: inline;    display: inline;
} }
.small_pagelinks .navPages { .small_pagelinks .navPages {
   padding: 2px 3px 0 3px;    padding: 2px 3px 0 3px;
   font-size: 0.857em;    font-size: 0.857em;
   display: block;    display: block;
   float: left;    float: left;
} }
   
#expanded_pages_container { #expanded_pages_container {
   position: absolute;    position: absolute;
} }
#expanded_pages_container, #expanded_pages { #expanded_pages_container, #expanded_pages {
   overflow: hidden;    overflow: hidden;
} }
#pages_scroll_left, #pages_scroll_right { #pages_scroll_left, #pages_scroll_right {
   position: absolute;    position: absolute;
   top: 0;    top: 0;
   margin: 0;    margin: 0;
} }
#pages_scroll_left { #pages_scroll_left {
   left: 0;    left: 0;
} }
#pages_scroll_right { #pages_scroll_right {
   right: 0;    right: 0;
} }
/* Globally accessible top/bottom links. */  /* Globally accessible top/bottom links. */ 
#gotop, #gobottom { #gotop, #gobottom {
   position: fixed;    position: fixed;
   bottom: 50%;    bottom: 50%;
   left: 0;    left: 0;
   z-index: 9;    z-index: 9;
   padding: 1.286em 0.1em 0 0.1em;    padding: 1.286em 0.1em 0 0.1em;
   height: 1.5em;    height: 1.5em;
   font-size: 2em;    font-size: 2em;
   font-weight: bold;    font-weight: bold;
   -webkit-backface-visibility: hidden;    -webkit-backface-visibility: hidden;
   -webkit-transform: translateZ(0);    -webkit-transform: translateZ(0);
} }
#gobottom { #gobottom {
   top: 50%;    top: 50%;
   padding: 0.8em 0.1em 0.5em 0.1em;    padding: 0.8em 0.1em 0.5em 0.1em;
} }
#gotop:hover, #gobottom:hover { #gotop:hover, #gobottom:hover {
   text-decoration: none;    text-decoration: none;
} }
/* Skip navigation link. */  /* Skip navigation link. */ 
#top { #top {
   position: absolute;    position: absolute;
   top: -10em;    top: -10em;
   left: 3em;    left: 3em;
   padding: 1em 2em;    padding: 1em 2em;
   font-weight: bold;    font-weight: bold;
   background: none repeat scroll 0 0 rgba(0, 0, 0, 0);    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
   transition: top .5s ease-out 0s, background 1s linear 0s;    transition: top .5s ease-out 0s, background 1s linear 0s;
} }
#top:focus { #top:focus {
   top: -4px;    top: -4px;
} }
   
   
/*   $TABLES     */  /*   $TABLES     */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
/* A general table class. */  /* A general table class. */ 
.table_grid { .table_grid {
   margin: 0;    margin: 0;
   width: 100%;    width: 100%;
   border-spacing: 0;    border-spacing: 0;
   border-collapse: collapse;    border-collapse: collapse;
   border-top: none;    border-top: none;
} }
.table_head>th { .table_head>th {
   padding: 5px 8px;    padding: 5px 8px;
   font-size: 1em;    font-size: 1em;
   font-weight: bold;    font-weight: bold;
   text-align: left;    text-align: left;
} }
.table_head>th.centertext { .table_head>th.centertext {
   text-align: center;    text-align: center;
} }
/* Trial extra classes, for table_heads that have equal width columns. */  /* Trial extra classes, for table_heads that have equal width columns. */ 
/* @todo - Not sure how much these will be used. Try them out. */  /* @todo - Not sure how much these will be used. Try them out. */ 
.two_column>th { .two_column>th {
   width: 50%;    width: 50%;
} }
.three_column>th { .three_column>th {
   width: 33.333%;    width: 33.333%;
} }
.four_column>th { .four_column>th {
   width: 25%;    width: 25%;
} }
.five_column>th { .five_column>th {
   width: 20%;    width: 20%;
} }
/* Basic cells. */  /* Basic cells. */ 
.table_grid td, .letterspacing{ .table_grid td, .letterspacing{
   padding: 5px 8px;    padding: 5px 8px;
   border-bottom: 1px solid #ccc;    border-bottom: 1px solid #ccc;
} }
/* Subtle zebra striping for rows. */   
.table_grid .standard_row {  
   background: #fff;  
}  
   
.table_grid textarea { .table_grid textarea {
   width: 100%;    width: 100%;
} }
.table_grid .statsbar div { .table_grid .statsbar div {
   display: none;    display: none;
} }
.table_grid textarea { .table_grid textarea {
   width: 100%;    width: 100%;
} }
/* GenericList */  /* GenericList */ 
.additional_row { .additional_row {
   padding: 6px 0;    padding: 6px 0;
} }
   
.sort_by_item .sort, .sort { .sort_by_item .sort, .sort {
   margin: 0 0 -4px 4px;    margin: 0 0 -4px 4px;
} }
   
/* For Errors.template.php. */  /* For Errors.template.php. */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
#errorfile_table .current { #errorfile_table .current {
   font-weight: bold;    font-weight: bold;
} }
   
   
/* $SETTINGS */  /* $SETTINGS */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
/* Lists - settings use these a lot. /* Lists - settings use these a lot.
/* @todo - Inefficient selector. Should not need dl tag. */  /* @todo - Inefficient selector. Should not need dl tag. */ 
dl.settings { dl.settings {
   clear: right;    clear: right;
   overflow: auto;    overflow: auto;
   margin: 0 0 10px 0;    margin: 0 0 10px 0;
   padding: 0;    padding: 0;
} }
dl.settings dt { dl.settings dt {
   float: left;    float: left;
   clear: both;    clear: both;
   margin: 0 0 10px 0;    margin: 0 0 10px 0;
   padding: 0;    padding: 0;
   width: 40%;    width: 40%;
} }
dl.settings .settings_title { dl.settings .settings_title {
   float: none;    float: none;
   clear: both;    clear: both;
   margin: 0 0 10px 0;    margin: 0 0 10px 0;
   padding: 5px 0 0 0;    padding: 5px 0 0 0;
   width: 100%;    width: 100%;
   font-weight: bold;    font-weight: bold;
} }
/* @todo -Inefficient selector. Should not need dl or dt tags. */  /* @todo -Inefficient selector. Should not need dl or dt tags. */ 
dl.settings dt.windowbg { dl.settings dt.windowbg {
   float: left;    float: left;
   clear: both;    clear: both;
   margin: 0 0 3px 0;    margin: 0 0 3px 0;
   padding: 0 0 5px 0;    padding: 0 0 5px 0;
   width: 98%;    width: 98%;
} }
dl.settings dd { dl.settings dd {
   float: right;    float: right;
   overflow: auto;    overflow: auto;
   margin: 0 0 3px 0;    margin: 0 0 3px 0;
   padding: 0;    padding: 0;
   width: 55%;    width: 55%;
   min-height: 2em;    min-height: 2em;
} }
/* I'm a tad leary of these setting new margins, but this line is here to compress     */  /* 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 */  /* listings in fieldset, like a permissions radio listing, from taking up excess space */ 
.settings dd>fieldset dd, .settings dd>fieldset dt { .settings dd>fieldset dd, .settings dd>fieldset dt {
   margin: 0;    margin: 0;
} }
dl.settings img { dl.settings img {
   margin: 0 10px 0 0;    margin: 0 10px 0 0;
   vertical-align: middle;    vertical-align: middle;
} }
/* help icons */  /* help icons */ 
dl.settings dt a img { dl.settings dt a img {
   position: relative;    position: relative;
   vertical-align: top;    vertical-align: top;
} }
dl.settings textarea { dl.settings textarea {
   width: 85%;    width: 85%;
   padding: 0 0.5em;    padding: 0 0.5em;
} }
dl.settings label { dl.settings label {
   vertical-align: top;    vertical-align: top;
} }
.settings .smalldescription { .settings .smalldescription {
   padding-left: 1em;    padding-left: 1em;
   display: inline-block;    display: inline-block;
} }
   
   
/*   $BOARDS     */  /*   $BOARDS     */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
/* The small stats, under upper linktree. */  /* The small stats, under upper linktree. */ 
#index_common_stats { #index_common_stats {
   margin: 0 8px 6px 8px;    margin: 0 8px 6px 8px;
   font-size: 0.857em;    font-size: 0.857em;
} }
/* The board categories and newsfader - some shared styling. */  /* The board categories and newsfader - some shared styling. */ 
.forum_category { .forum_category {
   clear: both;    clear: both;
   margin: 0 0 1em 0;    margin: 0 0 1em 0;
} }
.category_boards, .board_row, .childboard_row { .category_boards, .board_row, .childboard_row {
   margin: 1px 0 0 0;    margin: 1px 0 0 0;
} }
.board_row { .board_row {
   padding: 14px 0 11px 0;    padding: 14px 0 11px 0;
} }
.childboard_row { .childboard_row {
   margin: 0;    margin: 0;
} }
.childboards li:nth-child(n+3):before { .childboards li:nth-child(n+3):before {
   content: " - ";    content: " - ";
} }
.board_info, .board_latest { .board_info, .board_latest {
   display: table-cell;    display: table-cell;
   vertical-align: top;    vertical-align: top;
   width: 70%;    width: 70%;
   padding: 0 8px;    padding: 0 8px;
   font-size: 0.929em;    font-size: 0.929em;
} }
.board_latest { .board_latest {
   width: 40%;    width: 40%;
   min-width: 36em;    min-width: 36em;
   padding: 0 14px;    padding: 0 14px;
} }
.icon_anchor { .icon_anchor {
   display: block;    display: block;
   text-align: center;    text-align: center;
   min-width: 50px;    min-width: 50px;
   padding: 2px 6px 0 0;    padding: 2px 6px 0 0;
   float: left;    float: left;
} }
.board_name { .board_name {
   padding: 0 0 1px 0;    padding: 0 0 1px 0;
   font-size: 1.143em;    font-size: 1.143em;
} }
.board_info .board_description, .board_info .moderators { .board_info .board_description, .board_info .moderators {
   margin: 0 0 0 56px;    margin: 0 0 0 56px;
} }
.moderators { .moderators {
   font-size: 0.929em;    font-size: 0.929em;
} }
.board_stats { .board_stats {
   text-align: right;    text-align: right;
   padding: 1px 0 1px 6px;    padding: 1px 0 1px 6px;
   float: right;    float: right;
   min-width: 8.4em;    min-width: 8.4em;
} }
.board_avatar { .board_avatar {
   float: left;    float: left;
   margin-right: 5px;    margin-right: 5px;
} }
.board_avatar a { .board_avatar a {
   width: 40px;    width: 40px;
   height: 40px;    height: 40px;
   display: table-cell;    display: table-cell;
   vertical-align: middle;    vertical-align: middle;
} }
.board_avatar .avatar { .board_avatar .avatar {
   max-width: 40px;    max-width: 40px;
   max-height: 40px;    max-height: 40px;
   display: block;    display: block;
   margin: auto;    margin: auto;
} }
.lastpost_link, .board_lastposter, .board_lasttime { .lastpost_link, .board_lastposter, .board_lasttime {
   white-space: pre;    white-space: pre;
} }
.lastpost_link>a { .lastpost_link>a {
   font-size: 1.071em;    font-size: 1.071em;
   line-height: 1.571em;    line-height: 1.571em;
} }
.board_lasttime { .board_lasttime {
   display: block;    display: block;
} }
.childboard_row { .childboard_row {
   font-size: 0.857em;    font-size: 0.857em;
} }
.childboards { .childboards {
   margin: 0 14px 0 64px;    margin: 0 14px 0 64px;
} }
.childboards>li { .childboards>li {
   display: inline-block;    display: inline-block;
   padding: 6px 0.3em 4px 0;    padding: 6px 0.3em 4px 0;
} }
/* The posting icons and mark read button. */  /* The posting icons and mark read button. */ 
#posting_icons { #posting_icons {
   margin: 0 0 20px 4px;    margin: 0 0 20px 4px;
} }
#posting_icons p { #posting_icons p {
   display: table-cell;    display: table-cell;
   padding: 0 6px;    padding: 0 6px;
   font-size: 0.857em;    font-size: 0.857em;
} }
#posting_icons .buttonlist { #posting_icons .buttonlist {
   padding: 0;    padding: 0;
} }
#posting_icons img { #posting_icons img {
   margin: 0 2px;    margin: 0 2px;
   vertical-align: middle;    vertical-align: middle;
} }
/* Styles for the info center on the board index. */  /* Styles for the info center on the board index. */ 
#upshrinkHeaderIC .board_row { #upshrinkHeaderIC .board_row {
   padding: 8px 12px;    padding: 8px 12px;
} }
.ic_section_header { .ic_section_header {
   margin: 0 0 8px 0;    margin: 0 0 8px 0;
   padding: 0 0 4px 0;    padding: 0 0 4px 0;
   font-size: 1.071em;    font-size: 1.071em;
} }
/* Icons for info centre title bars. */  /* Icons for info centre title bars. */ 
.ic_section_header .icon{ .ic_section_header .icon{
   margin: -3px 4px 0 4px;    margin: -3px 4px 0 4px;
   vertical-align: middle;    vertical-align: middle;
} }
#ic_recentposts, #ps_recentposts, #ps_recenttopics { #ic_recentposts, #ps_recentposts, #ps_recenttopics {
   margin: 0 auto;    margin: 0 auto;
   width: 95%;    width: 95%;
   font-size: 0.857em;    font-size: 0.857em;
   border-collapse: collapse;    border-collapse: collapse;
} }
#ps_recentposts .norecent, #ps_recenttopics .norecent { #ps_recentposts .norecent, #ps_recenttopics .norecent {
   padding: 1em;    padding: 1em;
   text-align: center;    text-align: center;
} }
#ic_recentposts td, #ic_recentposts th, #ps_recentposts td, #ps_recentposts th, #ps_recenttopics td, #ps_recenttopics th { #ic_recentposts td, #ic_recentposts th, #ps_recentposts td, #ps_recentposts th, #ps_recenttopics td, #ps_recenttopics th {
   padding: 2px 4px;    padding: 2px 4px;
   vertical-align: top;    vertical-align: top;
   text-align: left;    text-align: left;
} }
.recentpost { .recentpost {
   width: 40%;    width: 40%;
} }
.recenttopic { .recenttopic {
   width: 55%;    width: 55%;
} }
.recentposter { .recentposter {
   width: 15%;    width: 15%;
} }
.recentboard { .recentboard {
   width: 20%;    width: 20%;
} }
.recenttime { .recenttime {
   width: 25%;    width: 25%;
} }
.inline { .inline {
   padding: 0 32px;     padding: 0 29px; 
   font-size: 0.857em;    font-size: 0.857em;
} }
   
#sort_by { #sort_by {
   margin-bottom: -6px;    margin-bottom: -6px;
     min-height: 2.2em;
} }
#sort_by .input_check { #sort_by .input_check {
   margin-bottom: 0;    margin-bottom: 0;
} }
.topic_sorting:hover #sortby, #sortby:hover, #sortby { .topic_sorting:hover #sortby, #sortby:hover, #sortby {
   width: 11em;    width: 11em;
   right: -2.5em;    right: -2.5em;
} }
#sort_by.topic_sorting_recent { #sort_by.topic_sorting_recent {
   margin: 4px 6px -1px 0;    margin: 4px 6px -1px 0;
} }
.topic_sorting_recent:hover #sortby, .topic_sorting_recent #sortby { .topic_sorting_recent:hover #sortby, .topic_sorting_recent #sortby {
   right: -1em;    right: -1em;
} }
.sort_by_item { .sort_by_item {
   width: 100%;    width: 100%;
} }
.sort_by_item .sort { .sort_by_item .sort {
   vertical-align: baseline;    vertical-align: baseline;
} }
.topic_sorting>li { .topic_sorting>li {
   float: right;    float: right;
} }
.topic_sorting { .topic_sorting {
   float: right;    float: right;
   font-size: 1.143em;    font-size: 1.143em;
} }
.topic_sorting>li { .topic_sorting>li {
   padding: 0 3px;    padding: 0 3px;
} }
.topic_sorting.topic_sorting_recent { .topic_sorting.topic_sorting_recent {
   margin-top: 0;    margin-top: 0;
} }
   
/* For the who is template. */  /* For the who is template. */ 
/* Sort of a stray - ?action=who;sa=credits */  /* Sort of a stray - ?action=who;sa=credits */ 
#credits p { #credits p {
   margin: 0;    margin: 0;
   padding: 0;    padding: 0;
   font-style: italic;    font-style: italic;
} }
   
/* @todo - Would prefer to deprecate this. Tied up with js. */  /* @todo - Would prefer to deprecate this. Tied up with js. */ 
img.new_posts { img.new_posts {
   padding: 0 1px;    padding: 0 1px;
} }
/* @todo - Not required, or not in this file. */  /* @todo - Not required, or not in this file. */ 
.fix_rtl_names { .fix_rtl_names {
   display: inline-block;    display: inline-block;
} }
   
   
/* Styles for the message (topic) index. */  /* Styles for the message (topic) index. */ 
#messageindex, #unread { #messageindex, #unread {
   clear: both;    clear: both;
} }
.action_unread .topic_sorting #sortby, .action_unread #sortby, .action_unread .topic_sorting #sortby, .action_unread #sortby,
.action_unreadreplies .topic_sorting #sortby, .action_unreadreplies #sortby { .action_unreadreplies .topic_sorting #sortby, .action_unreadreplies #sortby {
   width: 9em;    width: 9em;
} }
#unread_header { #unread_header {
   margin-top: 0.5em;    margin-top: 0.5em;
} }
/* The board description and who-is-viewing stuff. */  /* The board description and who-is-viewing stuff. */ 
#description_board { #description_board {
   margin: 10px 0 0 0;    margin: 10px 0 0 0;
} }
#description_board .generalinfo, #forumposts .generalinfo { #description_board .generalinfo, #forumposts .generalinfo {
   margin-top: 2px;    margin-top: 2px;
   padding: 4px 4px 4px 12px;    padding: 4px 4px 4px 12px;
} }
#description_board .generalinfo .listlevel2 { #description_board .generalinfo .listlevel2 {
   white-space: nowrap;    white-space: nowrap;
} }
#description_board .generalinfo { #description_board .generalinfo {
   display: table;    display: table;
   width: 100%;    width: 100%;
} }
.topic_listing { .topic_listing {
   padding: 1px 0 0 0;    padding: 1px 0 0 0;
   display: table;    display: table;
   width: 100%;    width: 100%;
   border-collapse: collapse;    border-collapse: collapse;
} }
.topic_listing>li { .topic_listing>li {
   margin: 1px 0 0 0;    margin: 1px 0 0 0;
   display: table-row;    display: table-row;
} }
.topic_sorting>.topic_sorting_row, .topic_listing>.topic_sorting_row { .topic_sorting>.topic_sorting_row, .topic_listing>.topic_sorting_row {
   margin: 0;    margin: 0;
} }
   
.topic_sorting_row>h3 { .topic_sorting_row>h3 {
   display: table-cell;    display: table-cell;
   padding: 10px 12px 8px 12px;    padding: 10px 12px 8px 12px;
   width: 100%;    width: 100%;
   font-weight: bold;    font-weight: bold;
   font-size: 1.071em;    font-size: 1.071em;
} }
.topic_sorting_row>p { .topic_sorting_row>p {
   display: table-cell;    display: table-cell;
   vertical-align: middle;    vertical-align: middle;
   width: 2%;    width: 2%;
   padding: 8px 8px 0 8px;    padding: 8px 8px 0 8px;
} }
.sort_by_container { .sort_by_container {
   font-size: 0.857em;    font-size: 0.857em;
   float: right;    float: right;
   vertical-align: top;    vertical-align: top;
} }
.topic_info { .topic_info {
   display: table-cell;    display: table-cell;
   vertical-align: top;    vertical-align: top;
   width: 70%;    width: 70%;
   padding: 7px 8px 6px 12px;    padding: 7px 8px 6px 12px;
} }
.topic_icons { .topic_icons {
   float: left;    float: left;
   text-align: center;    text-align: center;
   min-width: 50px;    min-width: 50px;
   padding: 6px 16px 0 0;    padding: 6px 16px 0 0;
   position: relative;    position: relative;
} }
.fred { .fred {
   position: absolute;    position: absolute;
   left: 42%;    left: 42%;
   top: 16px;    top: 16px;
} }
.topic_name, .topic_starter { .topic_name, .topic_starter {
   margin: 0 0 0 50px;    margin: 0 0 0 50px;
} }
.topic_name h4 { .topic_name h4 {
   line-height: 1.429em;    line-height: 1.429em;
   display: inline-block;    display: inline-block;
   padding-right: 30px;    padding-right: 30px;
} }
.topic_name h4 a { .topic_name h4 a {
   font-weight: bold;    font-weight: bold;
} }
.topic_starter { .topic_starter {
   font-size: 0.929em;    font-size: 0.929em;
} }
.topic_latest { .topic_latest {
   display: table-cell;    display: table-cell;
   vertical-align: top;    vertical-align: top;
   padding: 7px 4px 6px 4px;    padding: 7px 4px 6px 4px;
   width: auto;    width: auto;
   min-width: 36em;    min-width: 36em;
   white-space: nowrap;    white-space: nowrap;
   font-size: 0.929em;    font-size: 0.929em;
} }
.topic_latest.relative { .topic_latest.relative {
   min-width: 30em;    min-width: 30em;
} }
#ie8 .topic_latest.relative { #ie8 .topic_latest.relative {
   min-width: 36em;    min-width: 36em;
} }
.board_lastpost, .topic_lastpost { .board_lastpost, .topic_lastpost {
   min-width: 21em;    min-width: 21em;
   margin-left: 1em;    margin-left: 1em;
} }
.topic_stats { .topic_stats {
   text-align: right;    text-align: right;
   display: table-cell;    display: table-cell;
   float: right;    float: right;
   min-width: 14em;    min-width: 14em;
   box-sizing: border-box;    box-sizing: border-box;
   padding: 0 16px 0 16px;    padding: 0 16px 0 16px;
     line-height: 1.429em;
} }
.topic_lastpost .img_last_post { .topic_lastpost .img_last_post {
   float: right;    float: right;
   padding: 4px;    padding: 4px;
} }
.topic_moderation, .topic_moderation_alt { .topic_moderation, .topic_moderation_alt {
   display: table-cell;    display: table-cell;
   vertical-align: middle;    vertical-align: middle;
   width: 2%;    width: 2%;
   padding: 0 8px;    padding: 0 8px;
} }
.topic_moderation_alt { .topic_moderation_alt {
   min-width: 56px;    min-width: 56px;
} }
.topic_moderation_alt img { .topic_moderation_alt img {
   padding: 2px 2px 0 2px;    padding: 2px 2px 0 2px;
} }
.topic_listing .warningbox { .topic_listing .warningbox {
   margin-bottom: 0;    margin-bottom: 0;
} }
.qaction_row { .qaction_row {
   text-align: right;    text-align: right;
   padding: 6px;    padding: 6px;
   display: block;    display: block;
} }
.basic_row, .sticky_row, .locked_row { .basic_row, .sticky_row, .locked_row {
   max-width: 100%;    max-width: 100%;
   width: 100%;    width: 100%;
} }
   
/* Message index icons as sprites /* Message index icons as sprites
------------------------------------------------- */  ------------------------------------------------- */ 
.topicicon:before, .topicicon:before,
.sticky_row .topic_info:before, .locked_row .topic_info:before, .sticky_row .topic_info:before, .locked_row .topic_info:before,
.sticky_row .topic_details:before, .locked_row .topic_details:before, .sticky_row .topic_details:before, .locked_row .topic_details:before,
.locked_row.sticky_row .topic_info:before { .locked_row.sticky_row .topic_info:before {
   background-image: url(../images/topic/topicicons.png);    background-image: url(../images/topic/topicicons.png);
   background-repeat: no-repeat;    background-repeat: no-repeat;
   content: "";    content: "";
   display: inline-block;    display: inline-block;
   height: 16px;    height: 16px;
   vertical-align: middle;    vertical-align: middle;
   width: 18px;    width: 18px;
} }
.topicicon:before { .topicicon:before {
   height: 18px;    height: 18px;
} }
/* Sprite icons for quick moderation, last post, sort etc */  /* Sprite icons for quick moderation, last post, sort etc */ 
.img_last_post:before {background-position: 0 0;} .img_last_post:before {background-position: 0 0;}
.img_poll:before {background-position: 0 -19px;} .img_poll:before {background-position: 0 -19px;}
.img_profile:before {background-position: 0 -37px} .img_profile:before {background-position: 0 -37px}
.img_locked:before {background-position: 0 -55px;} .img_locked:before {background-position: 0 -55px;}
.img_move:before {background-position: 0 -73px;} .img_move:before {background-position: 0 -73px;}
.img_remove:before {background-position: 0 -91px;} .img_remove:before {background-position: 0 -91px;}
.img_sticky:before {background-position: 0 -109px;} .img_sticky:before {background-position: 0 -109px;}
.img_sortdown:before {background-position: 0 -127px;} .img_sortdown:before {background-position: 0 -127px;}
.img_sortup:before {background-position: 0 -145px;} .img_sortup:before {background-position: 0 -145px;}
.img_normal:before {background-position: 0 -163px;} .img_normal:before {background-position: 0 -163px;}
.img_lockedsticky:before {background-position: 0 -181px;} .img_lockedsticky:before {background-position: 0 -181px;}
/* Sprite Icons for the message icon, ? ! xx etc. */  /* Sprite Icons for the message icon, ? ! xx etc. */ 
.img_clip:before {background-position: -18px 0;} .img_clip:before {background-position: -18px 0;}
.img_lamp:before {background-position: -18px -18px;} .img_lamp:before {background-position: -18px -18px;}
.img_poll:before {background-position: -18px -36px} .img_poll:before {background-position: -18px -36px}
.img_question:before {background-position: -18px -54px;} .img_question:before {background-position: -18px -54px;}
.img_xx:before {background-position: -18px -72px;} .img_xx:before {background-position: -18px -72px;}
.img_moved:before {background-position: -18px -90px;} .img_moved:before {background-position: -18px -90px;}
.img_exclamation:before {background-position: -18px -108px;} .img_exclamation:before {background-position: -18px -108px;}
.img_thumbup:before {background-position: -18px -126px;} .img_thumbup:before {background-position: -18px -126px;}
.img_thumbdown:before {background-position: -18px -144px;} .img_thumbdown:before {background-position: -18px -144px;}
/* sticky / locked icons for the upper right of the div */  /* sticky / locked icons for the upper right of the div */ 
.sticky_row .topic_info:before, .locked_row .topic_info:before, .sticky_row .topic_info:before, .locked_row .topic_info:before,
.sticky_row .topic_details:before, .locked_row .topic_details:before, .sticky_row .topic_details:before, .locked_row .topic_details:before,
.locked_row.sticky_row .topic_info:before { .locked_row.sticky_row .topic_info:before {
   float: right;    float: right;
   margin-right: -16px;    margin-right: -16px;
} }
.sticky_row .topic_info:before, .sticky_row .topic_details:before {background-position: 0 -108px;} .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 .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;} .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. */  /* @todo - Extra classes for search results, etc. See if I can clean them up. */ 
   
   
/* Search results need some help as well */  /* Search results need some help as well */ 
/* @todo - Sort markup so this can call above classes. *//* /* @todo - Sort markup so this can call above classes. *//*
.search_results_posts .lockedbg { .search_results_posts .lockedbg {
   background: #efefef url(../images/icons/quick_lock.png) no-repeat 95% 15px;    background: #efefef url(../images/icons/quick_lock.png) no-repeat 95% 15px;
} }
.search_results_posts .stickybg, .search_results_posts .locked_stickybg { .search_results_posts .stickybg, .search_results_posts .locked_stickybg {
   background: #fffee2 url(../images/icons/quick_sticky_lock.png) no-repeat 95% 15px;    background: #fffee2 url(../images/icons/quick_sticky_lock.png) no-repeat 95% 15px;
}*/  }*/ 
   
#quick_mod_jump_to { #quick_mod_jump_to {
   font-size: 1em;    font-size: 1em;
} }
#topic_icons { #topic_icons {
   float: left;    float: left;
   margin-top: 10px;    margin-top: 10px;
   padding: 8px 12px;    padding: 8px 12px;
   width: 100%;    width: 100%;
} }
#topic_icons p { #topic_icons p {
   padding: 0 6px;    padding: 0 6px;
   line-height: 2em;    line-height: 2em;
} }
#message_index_jump_to { #message_index_jump_to {
   font-size: 1.143em;    font-size: 1.143em;
} }
#message_index_jump_to .right_submit { #message_index_jump_to .right_submit {
   margin: 1px 0 0;    margin: 1px 0 0;
} }
.jump_to_header { .jump_to_header {
   padding: 0 4px;    padding: 0 4px;
   border: none;    border: none;
   -moz-box-sizing: border-box;    -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;    -webkit-box-sizing: border-box;
   box-sizing: border-box;    box-sizing: border-box;
} }
   
   
/*   $TOPICS     */  /*   $TOPICS     */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
/* The display template (topic view). /* The display template (topic view).
/* Events */  /* Events */ 
.linked_events { .linked_events {
   padding: 12px 0;    padding: 12px 0;
} }
.edit_event { .edit_event {
   margin: 0 5px 0 0;    margin: 0 5px 0 0;
   vertical-align: middle;    vertical-align: middle;
} }
/* Poll question */  /* Poll question */ 
#poll { #poll {
   overflow: hidden;    overflow: hidden;
} }
#poll_main ul { #poll_main ul {
   margin-top: 8px;    margin-top: 8px;
} }
#poll .content { #poll .content {
   padding: 0 12px;    padding: 0 12px;
} }
#pollquestion { #pollquestion {
   padding: 0 0 6px 25px;    padding: 0 0 6px 25px;
} }
   
/* Poll vote options */  /* Poll vote options */ 
#poll_options .statsbar { #poll_options .statsbar {
   padding: 0;    padding: 0;
} }
#poll_options .options { #poll_options .options {
   margin: 0 0 12px 0;    margin: 0 0 12px 0;
   padding: 12px 30px 0 25px;    padding: 12px 30px 0 25px;
   overflow: auto;    overflow: auto;
} }
#poll_options .options li:after { #poll_options .options li:after {
   display: block;    display: block;
   clear: both;    clear: both;
   content: "";    content: "";
} }
/* Poll results */  /* Poll results */ 
#poll_options .results { #poll_options .results {
   display: inline;    display: inline;
} }
#poll_options li { #poll_options li {
   position: relative;    position: relative;
} }
/* Absolute positioning stops these breaking the bars on narrow screens. */  /* Absolute positioning stops these breaking the bars on narrow screens. */ 
#poll_options .options .percentage { #poll_options .options .percentage {
   position: absolute;    position: absolute;
   top: 0;    top: 0;
   right: 0;    right: 0;
   z-index: 2;    z-index: 2;
   display: block;    display: block;
   float: right;    float: right;
   padding: 0 2px;    padding: 0 2px;
   white-space: pre;    white-space: pre;
   margin: 3px;    margin: 3px;
   line-height: 1.2em;    line-height: 1.2em;
} }
/* Poll notices */  /* Poll notices */ 
#poll_options p { #poll_options p {
   margin: 0 18px 2px 18px;    margin: 0 18px 2px 18px;
   padding: 0 6px 6px 6px;    padding: 0 6px 6px 6px;
} }
#pollmoderation { #pollmoderation {
   overflow: auto;    overflow: auto;
   margin: 0;    margin: 0;
   padding: 0;    padding: 0;
} }
   
/* On to the posts */  /* On to the posts */ 
.forumposts { .forumposts {
   clear: both;    clear: both;
   margin: 8px 0 0 0;    margin: 8px 0 0 0;
} }
/* Topic information */  /* Topic information */ 
.views_text, .nextlinks { .views_text, .nextlinks {
   white-space: pre;    white-space: pre;
   font-size: 0.786em;    font-size: 0.786em;
} }
.nextlinks { .nextlinks {
   float: right;    float: right;
} }
#whoisviewing, #redirectfrom { #whoisviewing, #redirectfrom {
   font-size: 0.857em;    font-size: 0.857em;
   padding: 4px 0 3px 0;    padding: 4px 0 3px 0;
} }
#redirectfrom { #redirectfrom {
   display: inline-block;    display: inline-block;
} }
/* Poster and postarea + moderation area underneath */  /* Poster and postarea + moderation area underneath */ 
.forumposts .windowbg, .forumposts .windowbg2, .forumposts .windowbg, .forumposts .windowbg2,
.forumposts .approvebg, .forumposts .approvebg2, .core_posts { .forumposts .approvebg, .forumposts .approvebg2, .core_posts {
   overflow: visible;    overflow: visible;
   margin: 4px 0 0 0;    margin: 4px 0 0 0;
} }
/* @todo remove the div when div.windowbg and div.windowbg2 are sorted out */  /* @todo remove the div when div.windowbg and div.windowbg2 are sorted out */ 
div.core_posts { div.core_posts {
   padding: 0.2em 1em;    padding: 0.2em 1em;
} }
   
/* Poster details and list of items */  /* Poster details and list of items */ 
.poster { .poster {
   display: table-cell;    display: table-cell;
   vertical-align: top;    vertical-align: top;
   width: 15em;    width: 15em;
   word-wrap: break-word;    word-wrap: break-word;
   word-break: break-all;    word-break: break-all;
   -webkit-hyphens: auto;    -webkit-hyphens: auto;
   -moz-hyphens: auto;    -moz-hyphens: auto;
   -ms-hyphens: auto;    -ms-hyphens: auto;
   font-size: 0.857em;    font-size: 0.857em;
} }
.poster.poster2 { .poster.poster2 {
   display: block;    display: block;
   float: left;    float: left;
   margin: 0;    margin: 0;
   min-width: 0;    min-width: 0;
   font-size: 1em;    font-size: 1em;
} }
.poster .listlevel1, .poster.poster2 .listlevel1 { .poster .listlevel1, .poster.poster2 .listlevel1 {
   float: none;    float: none;
   text-align: center;    text-align: center;
   font-size: 1em;    font-size: 1em;
} }
/* @todo - Add an h3 for a11y? Breaks Stoopidfish. Bleh. :P */  /* @todo - Add an h3 for a11y? Breaks Stoopidfish. Bleh. :P */ 
.poster .name { .poster .name {
   overflow: hidden;    overflow: hidden;
   margin-top: -0.4em;    margin-top: -0.4em;
   padding: 6px;    padding: 6px;
   text-align: center;    text-align: center;
   font-weight: bold;    font-weight: bold;
   font-size: 1.357em;    font-size: 1.357em;
   text-overflow: ellipsis;    text-overflow: ellipsis;
} }
.poster.poster2 .name { .poster.poster2 .name {
   margin-top: 0;    margin-top: 0;
   padding: 0 8px 0 0;    padding: 0 8px 0 0;
   text-align: left;    text-align: left;
   font-size: 1.143em;    font-size: 1.143em;
} }
.poster .name { .poster .name {
   white-space: normal;    white-space: normal;
   word-break: normal;    word-break: normal;
} }
/* Drop menu for the poster info. */  /* Drop menu for the poster info. */ 
.poster .listlevel1.sfhover .menulevel2, .poster .listlevel1:hover .menulevel2 { .poster .listlevel1.sfhover .menulevel2, .poster .listlevel1:hover .menulevel2 {
   top: 95%;    top: 95%;
   left: 0;    left: 0;
   padding: 6px 1em 4px 1em;    padding: 6px 1em 4px 1em;
   width: 16em;    width: 16em;
   text-align: left;    text-align: left;
} }
.poster .listlevel2 { .poster .listlevel2 {
   width: 14em;     width: 15em; 
} }
.poster .title { .poster .title {
   white-space: normal;    white-space: normal;
   word-wrap: break-word;    word-wrap: break-word;
   max-width: 14em;     max-width: 100%; 
} }
.poster .linklevel2, .poster .linklevel2:focus, .poster .linklevel2, .poster .linklevel2:focus,
.poster .listlevel2:hover .linklevel2 { .poster .listlevel2:hover .linklevel2 {
   border: 1px solid transparent;    border: 1px solid transparent;
   background: none;    background: none;
   padding: 0;    padding: 0;
} }
.poster .listlevel2:hover .linklevel2:hover { .poster .listlevel2:hover .linklevel2:hover {
   text-decoration: underline;    text-decoration: underline;
} }
.karma_allow>.linklevel2 { .karma_allow>.linklevel2 {
   display: inline-block;    display: inline-block;
} }
.listlevel2>ol>li { .listlevel2>ol>li {
   display: table-cell;    display: table-cell;
} }
.report_seperator { .report_seperator {
   margin: 6px 0 0 0;    margin: 6px 0 0 0;
   height: 1px;    height: 1px;
} }
/* Icon tweaks for several areas. */  /* Icon tweaks for several areas. */ 
.poster .icons>img, .poster .linklevel1>img, .poster .linklevel2>img { .poster .icons>img, .poster .linklevel1>img, .poster .linklevel2>img {
   vertical-align: middle;    vertical-align: middle;
} }
.listlevel2>ol>li img, .listlevel2.warning img, .listlevel2.poster_ip img { .listlevel2>ol>li img, .listlevel2.warning img, .listlevel2.poster_ip img {
   padding: 0 4px;    padding: 0 4px;
} }
.listlevel2.poster_ip .linklevel2 { .listlevel2.poster_ip .linklevel2 {
   display: inline;    display: inline;
} }
.avatar { .avatar {
   width: auto;    width: auto;
   height: auto;    height: auto;
   max-width: 13em;    max-width: 13em;
   max-height: 20em;    max-height: 20em;
} }
/* The visible stuff below the avatar. */  /* The visible stuff below the avatar. */ 
.poster .membergroup { .poster .membergroup {
   font-weight: bold;    font-weight: bold;
} }
/* @todo - Save code by amalgamating common button background declarations. */  /* @todo - Save code by amalgamating common button background declarations. */ 
.poster_online .linklevel1 { .poster_online .linklevel1 {
   position: relative;    position: relative;
   display: block;    display: block;
   margin: 3px 1.5em;    margin: 3px 1.5em;
   line-height: 2em;    line-height: 2em;
} }
/* End nifty new flyout. */  /* End nifty new flyout. */ 
   
.poster { .poster {
   float: left;    float: left;
} }
.post_wrapper { .post_wrapper {
   display: block;    display: block;
   width: 100%;    width: 100%;
   clear: both;    clear: both;
} }
.postarea { .postarea {
   display: block;    display: block;
   margin: 0 0 0 13em;    margin: 0 0 0 13em;
   padding: 0 1em 0 1.5em;    padding: 0 1em 0 1.5em;
   max-width: 100%;    max-width: 100%;
} }
.postarea2 { .postarea2 {
   display: block;    display: block;
   padding: 0 1em;    padding: 0 1em;
} }
   
#topic_summary .postarea2 { #topic_summary .postarea2 {
   font-size: 0.857em;    font-size: 0.857em;
} }
.post_subject { .post_subject {
   display: block;    display: block;
   float: right;    float: right;
   overflow: hidden;    overflow: hidden;
   max-width: 15em;    max-width: 15em;
   text-overflow: ellipsis;    text-overflow: ellipsis;
   white-space: pre;    white-space: pre;
} }
.messageicon { .messageicon {
   float: left;    float: left;
   margin: -2px 6px -6px 0;    margin: -2px 6px -6px 0;
} }
.messageicon img { .messageicon img {
   padding: 0 3px 0 3px;    padding: 0 3px 0 3px;
} }
.groupicon { .groupicon {
   float: left;    float: left;
   margin: 2px 0 0 2px;    margin: 2px 0 0 2px;
} }
.groupicon img { .groupicon img {
   padding: 0 3px 0 3px;    padding: 0 3px 0 3px;
} }
.keyinfo { .keyinfo {
   font-size: 0.857em;    font-size: 0.857em;
} }
#topic_summary .keyinfo { #topic_summary .keyinfo {
   font-size: 1em;    font-size: 1em;
} }
.keyinfo h5 { .keyinfo h5 {
   padding: 1px 0 5px 0;    padding: 1px 0 5px 0;
} }
#topic_summary .keyinfo h5 { #topic_summary .keyinfo h5 {
   padding: 0;    padding: 0;
   font-size: 1.143em;    font-size: 1.143em;
} }
/* @todo - Move strong tag outside anchor. Will save css. */  /* @todo - Move strong tag outside anchor. Will save css. */ 
.keyinfo h5 a, .keyinfo h5 a strong { .keyinfo h5 a, .keyinfo h5 a strong {
   font-weight: bold;    font-weight: bold;
} }
.inner { .inner {
   margin: 0;    margin: 0;
   padding: 7px 8px 2px 2px;    padding: 7px 8px 2px 2px;
   min-height: 70px;    min-height: 70px;
   word-wrap: break-word;    word-wrap: break-word;
   -webkit-hyphens: auto;    -webkit-hyphens: auto;
   -moz-hyphens: auto;    -moz-hyphens: auto;
   -ms-hyphens: auto;    -ms-hyphens: auto;
} }
#topic_summary .inner { #topic_summary .inner {
   clear: both;    clear: both;
} }
.smiley { .smiley {
   vertical-align: bottom;    vertical-align: bottom;
} }
/* All the signatures used in the forum. */  /* All the signatures used in the forum. */ 
.signature, .attachments, .custom_fields_above_signature { .signature, .attachments, .custom_fields_above_signature {
   overflow: auto;    overflow: auto;
   padding: 8px 0;    padding: 8px 0;
   font-size: 0.857em;    font-size: 0.857em;
} }
.attachments { .attachments {
   margin: 20px 0 0 0;    margin: 20px 0 0 0;
     clear: both;
} }
.attachments .attachment { .attachments .attachment {
   padding: 6px 8px;    padding: 6px 8px;
   display: inline-block;    display: inline-block;
   min-width: 22%;    min-width: 22%;
} }
.attachment_thumb { .attachment_thumb {
   margin: 0 auto;    margin: 0 auto;
   text-align: center;    text-align: center;
} }
/* @todo - Look at deprecating this hr. */  /* @todo - Look at deprecating this hr. */ 
.attachments hr { .attachments hr {
   clear: both;    clear: both;
} }
/* Separator of posts. More useful in the print stylesheet. */  /* Separator of posts. More useful in the print stylesheet. */ 
.forumposts .post_separator { .forumposts .post_separator {
   display: none;    display: none;
} }
/* Used by video embed JS when autolinking video links */  /* Used by video embed JS when autolinking video links */ 
.elk_video { .elk_video {
   display: block;    display: block;
   width: 640px;    width: 640px;
   height: auto;    height: auto;
   max-height: 480px;    max-height: 480px;
} }
.elk_video a img, .elk_video embed { .elk_video a img, .elk_video embed {
   margin: 0 auto;    margin: 0 auto;
   display: block;    display: block;
} }
.elk_videoheader { .elk_videoheader {
   padding: 0 4px 0 6px;    padding: 0 4px 0 6px;
   width: 630px;    width: 630px;
   max-width: 98%;    max-width: 98%;
} }
.elk_previewvideo { .elk_previewvideo {
   max-width: 640px;    max-width: 640px;
   height: auto;    height: auto;
} }
/* Basic stuff for the bottom of Display.template.php. */  /* Basic stuff for the bottom of Display.template.php. */ 
#moderationbuttons { #moderationbuttons {
   float: left;    float: left;
} }
#moderationbuttons_strip { #moderationbuttons_strip {
   float: left;    float: left;
   margin: 4px 0 4px -4px;    margin: 4px 0 4px -4px;
} }
#moderationbuttons ul li { #moderationbuttons ul li {
   margin: 0;    margin: 0;
   padding: 0 6px 4px 0;    padding: 0 6px 4px 0;
} }
   
/* The jump to box */  /* The jump to box */ 
#display_jump_to { #display_jump_to {
   float: right;    float: right;
   padding: 6px 5px 5px 0;    padding: 6px 5px 5px 0;
   white-space: nowrap;    white-space: nowrap;
} }
#display_jump_to input { #display_jump_to input {
   vertical-align: baseline;     vertical-align: bottom; 
} }
   
/* The quick reply area. */  /* The quick reply area. */ 
/* @todo - Markup and CSS could be tweaked here. */  /* @todo - Markup and CSS could be tweaked here. */ 
#quickreplybox { #quickreplybox {
   clear: both;    clear: both;
} }
.editor_wrapper { .editor_wrapper {
   margin: 0 auto;    margin: 0 auto;
   width: 60em;    width: 60em;
   max-width: 97%;    max-width: 97%;
} }
#quickReplyOptions form .quickreply { #quickReplyOptions form .quickreply {
   min-width: 100%;    min-width: 100%;
   max-width: 100%;    max-width: 100%;
   width: 635px;    width: 635px;
   height: 100px;    height: 100px;
} }
/* The send topic section. */  /* The send topic section. */ 
fieldset.send_topic { fieldset.send_topic {
   padding: 6px;    padding: 6px;
   border: none;    border: none;
   margin: 0;    margin: 0;
   box-shadow: none;    box-shadow: none;
} }
dl.send_topic { dl.send_topic {
   margin-bottom: 0;    margin-bottom: 0;
} }
dl.send_mail dt { dl.send_mail dt {
   width: 35%;    width: 35%;
} }
dl.send_mail dd { dl.send_mail dd {
   width: 64%;    width: 64%;
} }
.requiredfield:before { .requiredfield:before {
   height: 0;    height: 0;
   position: absolute;    position: absolute;
   width: 0;    width: 0;
   bottom: 90%;    bottom: 90%;
   left: 5%;    left: 5%;
} }
.requiredfield { .requiredfield {
   position: absolute;    position: absolute;
   top: 20px;    top: 20px;
   left: 5%;    left: 5%;
   font-size: 90%;    font-size: 90%;
   line-height: 1.1em;    line-height: 1.1em;
   display: none;    display: none;
} }
.popup_content .r_name, .popup_content .r_email, .popup_content .r_name, .popup_content .r_email,
.popup_content .y_name, .popup_content .y_email { .popup_content .y_name, .popup_content .y_email {
   position: relative;    position: relative;
   overflow: visible !important;    overflow: visible !important;
} }
.popup_content dl.settings dt { .popup_content dl.settings dt {
   margin-bottom: 15px;    margin-bottom: 15px;
} }
   
   
/*   $EDITOR     */  /*   $EDITOR     */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
/* The main post editor section. */  /* The main post editor section. */ 
#preview_body { #preview_body {
   padding: 0.5em 1em;    padding: 0.5em 1em;
   overflow: auto;    overflow: auto;
   margin: 2px 0 0;    margin: 2px 0 0;
} }
#postmodify #message{ #postmodify #message{
   width: 100%;    width: 100%;
} }
#postmodify .lastedit{ #postmodify .lastedit{
   font-weight: bold;    font-weight: bold;
} }
#post_header, .postbox { #post_header, .postbox {
   overflow: hidden;    overflow: hidden;
   padding: 6px;    padding: 6px;
} }
#post_header dt, .postbox dt { #post_header dt, .postbox dt {
   float: left;    float: left;
   margin: 6px 0 0 0;    margin: 6px 0 0 0;
   padding: 0;    padding: 0;
   width: 15%;    width: 15%;
   font-weight: bold;    font-weight: bold;
} }
#post_header dd, .postbox dd { #post_header dd, .postbox dd {
   float: left;    float: left;
   margin: 4px 0;    margin: 4px 0;
   padding: 0;    padding: 0;
   width: 83%;    width: 83%;
} }
#post_header img { #post_header img {
   vertical-align: middle;    vertical-align: middle;
   padding: 0 0 2px 5px;    padding: 0 0 2px 5px;
} }
ul.post_options { ul.post_options {
   overflow: auto;    overflow: auto;
   margin: 0 0 0 12px;    margin: 0 0 0 12px;
} }
ul.post_options li { ul.post_options li {
   float: left;    float: left;
   margin: 2px 0;    margin: 2px 0;
   width: 33%;    width: 33%;
} }
#postAdditionalOptionsHeader, #postDraftOptionsHeader { #postAdditionalOptionsHeader, #postDraftOptionsHeader {
   margin: 1em 0 0 0;    margin: 1em 0 0 0;
} }
#postAdditionalOptions, #postDraftOptions { #postAdditionalOptions, #postDraftOptions {
   margin: 0 0 1em 0;    margin: 0 0 1em 0;
   overflow: auto;    overflow: auto;
} }
#postAdditionalOptionsNC { #postAdditionalOptionsNC {
   margin: 0 0 1em 0;    margin: 0 0 1em 0;
   overflow: auto;    overflow: auto;
} }
.shortcuts { .shortcuts {
   font-size: 0.857em;    font-size: 0.857em;
   float: left;    float: left;
} }
.shortcuts .lastedit { .shortcuts .lastedit {
   text-align: left;    text-align: left;
} }
#mobile .shortcuts { #mobile .shortcuts {
   display: none;    display: none;
} }
   
/*   $DRAG-N-DROP        */  /*   $DRAG-N-DROP        */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
.drop_area { .drop_area {
   font-size: 1.643em;    font-size: 1.643em;
   font-weight: normal;    font-weight: normal;
   text-align: center;    text-align: center;
   opacity: 0.6;    opacity: 0.6;
   display: none;    display: none;
   padding: 1em 0;    padding: 1em 0;
} }
.drop_area_fileselect { .drop_area_fileselect {
   cursor: pointer;    cursor: pointer;
   margin-left: -190px;    margin-left: -190px;
   opacity: 0.0001;    opacity: 0.0001;
   position: absolute;    position: absolute;
   width: 220px;    width: 220px;
   padding-left: 220px;    padding-left: 220px;
} }
   
#postAttachment >dd.progress_tracker { #postAttachment >dd.progress_tracker {
   margin:0;    margin:0;
} }
.progress_tracker { .progress_tracker {
   overflow: hidden;    overflow: hidden;
   width: 97%;    width: 97%;
} }
.statusbar { .statusbar {
   padding: 5px;    padding: 5px;
   overflow: hidden;    overflow: hidden;
} }
.info { .info {
   float: left;    float: left;
   position: relative;    position: relative;
   overflow: hidden;    overflow: hidden;
   width: 60%;    width: 60%;
   line-height: 1.375em;    line-height: 1.375em;
} }
.progressBar { .progressBar {
   width: 20%;    width: 20%;
   border-radius: 5px;    border-radius: 5px;
   float: left;    float: left;
   text-align: center;    text-align: center;
} }
.abort, .remove { .abort, .remove {
   float: right;    float: right;
   overflow: hidden;    overflow: hidden;
   font-size: 1em;    font-size: 1em;
   padding: 4px 6px;    padding: 4px 6px;
} }
.drop_attachmnts_error { .drop_attachmnts_error {
   padding: 10px 0;    padding: 10px 0;
   overflow: hidden;    overflow: hidden;
   width: 97%;    width: 97%;
} }
   
#postMoreOptions, #postAttachment, #postAttachment2 { #postMoreOptions, #postAttachment, #postAttachment2 {
   margin: -1px 0 0 0;    margin: -1px 0 0 0;
   padding: 10px;    padding: 10px;
} }
#postAttachment, #postAttachment2 { #postAttachment, #postAttachment2 {
   overflow: hidden;    overflow: hidden;
} }
#postAttachment dd, #postAttachment2 dd { #postAttachment dd, #postAttachment2 dd {
   margin: 4px 12px;    margin: 4px 12px;
} }
#postAttachment dd { #postAttachment dd {
   float: left;    float: left;
   width: 45%;    width: 45%;
} }
#postAttachment dt, #postAttachment2 dt { #postAttachment dt, #postAttachment2 dt {
   font-weight: bold;    font-weight: bold;
} }
.attachmenterrors { .attachmenterrors {
   padding: 0 1em;    padding: 0 1em;
} }
.draftautosave { .draftautosave {
   font-size: 0.857em;    font-size: 0.857em;
   text-align: right;    text-align: right;
   height: 1.5em;    height: 1.5em;
   overflow: hidden;    overflow: hidden;
} }
#postDraftOptions .settings dd, #postDraftOptions .settings dt{ #postDraftOptions .settings dd, #postDraftOptions .settings dt{
   margin: 0;    margin: 0;
   padding: 5px 10px;    padding: 5px 10px;
   width: 60%;    width: 60%;
   font-size: 0.857em;    font-size: 0.857em;
} }
#postDraftOptions .settings dd{ #postDraftOptions .settings dd{
   width: 40%;    width: 40%;
} }
#postDraftOptions .settings dd:nth-child(2), #postDraftOptions .settings dt:first-child{ #postDraftOptions .settings dd:nth-child(2), #postDraftOptions .settings dt:first-child{
   border-top: none;    border-top: none;
} }
#postDraftOptions .settings strong{ #postDraftOptions .settings strong{
   font-size: 1.143em;    font-size: 1.143em;
} }
.post_verification { .post_verification {
   margin-top: 6px;    margin-top: 6px;
} }
.post_verification #verification_control { .post_verification #verification_control {
   margin: 4px 0 4px 12px;    margin: 4px 0 4px 12px;
} }
.verification_control_valid { .verification_control_valid {
   display: none;    display: none;
} }
.verification_control .smalltext { .verification_control .smalltext {
   margin: 4px 0 8px 0;    margin: 4px 0 8px 0;
} }
   
/* The event editor section. */  /* The event editor section. */ 
#event_main, #poll_options, #poll_main { #event_main, #poll_options, #poll_main {
   margin-bottom: 0.5em;    margin-bottom: 0.5em;
} }
#event_main .roundframe { #event_main .roundframe {
   overflow: auto;    overflow: auto;
   padding: 12px 12%;    padding: 12px 12%;
} }
#event_main fieldset { #event_main fieldset {
   clear: both;    clear: both;
} }
#event_main #datepicker, #event_main #caption_evtitle { #event_main #datepicker, #event_main #caption_evtitle {
   display: inline-block;    display: inline-block;
   padding-left: 1em;    padding-left: 1em;
   padding-top: 0.4em;    padding-top: 0.4em;
} }
#event_main #evtitle { #event_main #evtitle {
   margin-top: 0.5em;    margin-top: 0.5em;
} }
#event_main .event_options { #event_main .event_options {
   overflow: hidden;    overflow: hidden;
   padding: 0;    padding: 0;
} }
#event_main .event_options { #event_main .event_options {
   margin: 0;    margin: 0;
   padding: 1em 0.5em 0.5em 1em;    padding: 1em 0.5em 0.5em 1em;
} }
#event_main .event_options li { #event_main .event_options li {
   padding-top: 0.5em;    padding-top: 0.5em;
   padding-bottom: 0.5em;    padding-bottom: 0.5em;
} }
#event_main select, .event_options li select, #event_main select, .event_options li select,
#event_main ul.event_options li .input_check { #event_main ul.event_options li .input_check {
   margin: 0 12px 0 0;    margin: 0 12px 0 0;
} }
#datepicker { #datepicker {
   white-space: nowrap;    white-space: nowrap;
} }
   
/* The poll editor section. */  /* The poll editor section. */ 
#edit_poll { #edit_poll {
   overflow: hidden;    overflow: hidden;
} }
#poll_main, #poll_options, #poll_reset { #poll_main, #poll_options, #poll_reset {
   clear: both;    clear: both;
   overflow: hidden;    overflow: hidden;
   padding: 6px;    padding: 6px;
} }
#poll_main #question { #poll_main #question {
   margin-left: 2em;    margin-left: 2em;
} }
#poll_main .poll_main li { #poll_main .poll_main li {
   padding-left: 12px;    padding-left: 12px;
} }
#poll_main .poll_main input { #poll_main .poll_main input {
   margin-left: 12px;    margin-left: 12px;
} }
#poll_main .poll_main, dl.poll_options { #poll_main .poll_main, dl.poll_options {
   overflow: hidden;    overflow: hidden;
   padding: 0 0 8px 8px;    padding: 0 0 8px 8px;
} }
#poll_main .poll_main li { #poll_main .poll_main li {
   margin: 2px 0;    margin: 2px 0;
} }
#poll_options .poll_options dt { #poll_options .poll_options dt {
   padding: 0 0 0 12px;    padding: 0 0 0 12px;
   width: 33%;    width: 33%;
} }
#poll_options .poll_options dd { #poll_options .poll_options dd {
   width: 65%;    width: 65%;
} }
#poll_options .poll_options dd input { #poll_options .poll_options dd input {
   margin-left: 0;    margin-left: 0;
} }
   
   
/*   $MODERATE   */  /*   $MODERATE   */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
/* The move topic section. */  /* The move topic section. */ 
#move_topic dl { #move_topic dl {
   margin-bottom: 0;    margin-bottom: 0;
} }
#move_topic dl.settings dt { #move_topic dl.settings dt {
   width: 40%;    width: 40%;
} }
#move_topic dl.settings dd { #move_topic dl.settings dd {
   width: 59%;    width: 59%;
} }
.split_topics, .move_topic { .move_topic {
   margin: auto;    margin: auto;
   text-align: left;    text-align: left;
} }
.split_topics fieldset, .move_topic fieldset { .move_topic fieldset {
   padding: 6px;    padding: 6px;
} }
   
/* The report topic section. */  /* The report topic section. */ 
#report_topic dl { #report_topic dl {
   margin-bottom: 0;    margin-bottom: 0;
} }
#report_topic dl.settings dt { #report_topic dl.settings dt {
   width: 20%;    width: 20%;
} }
#report_topic dl.settings dd { #report_topic dl.settings dd {
   width: 79%;    width: 79%;
} }
#report_comment { #report_comment {
   width: 75%;    width: 75%;
   height: 10em;    height: 10em;
   padding: 5px;    padding: 5px;
} }
   
/* The split topic section. */  /* The split topic section. */ 
#selected, #not_selected { #selected, #not_selected {
   width: 49%;    width: 49%;
} }
.split_messages .windowbg, .split_messages .windowbg2 { .split_messages .windowbg, .split_messages .windowbg2 {
   margin: 1px;    margin: 1px;
} }
.split_messages .split_icon { .split_messages .split_icon {
   padding: 0 6px;    padding: 0 6px;
} }
.split_messages .post { .split_messages .post {
   padding: 12px 0 0 0;    padding: 12px 0 0 0;
} }
   
/* The merge topic section. */  /* The merge topic section. */ 
dl.merge_topic dt { dl.merge_topic dt {
   width: 25%;    width: 25%;
} }
dl.merge_topic dd { dl.merge_topic dd {
   width: 74%;    width: 74%;
} }
.merge_options { .merge_options {
   clear: both;    clear: both;
   padding: 0.5em;    padding: 0.5em;
} }
.custom_subject { .custom_subject {
   margin: 6px 0;    margin: 6px 0;
} }
   
   
/* Styles for the $TABS  */  /* Styles for the $TABS  */ 
/* We can't control what jQueryui pollutes the DOM with, so deal with it */  /* 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 */  /* Styles for the profile summary tabs, or any jQuery ui tabs */ 
/* ---------------------------------------------------------- */  /* ---------------------------------------------------------- */ 
.ui-tabs .ui-tabs-nav { .ui-tabs .ui-tabs-nav {
   list-style: none;    list-style: none;
   position: relative;    position: relative;
   padding: 0;    padding: 0;
   margin: 0;    margin: 0;
} }
.ui-tabs .ui-tabs-nav li { .ui-tabs .ui-tabs-nav li {
   position: relative;    position: relative;
   float: left;    float: left;
   margin: 0 3px -1px 0;    margin: 0 3px -1px 0;
   font-size: 0.929em;    font-size: 0.929em;
   line-height: 2.077em;    line-height: 2.077em;
} }
.ui-tabs .ui-tabs-nav li a { .ui-tabs .ui-tabs-nav li a {
   display: block;    display: block;
   padding: 0 7px;    padding: 0 7px;
   outline: none;    outline: none;
   text-decoration: 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 { .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;    cursor: default;
} }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
   cursor: pointer;    cursor: pointer;
} }
.ui-tabs .ui-tabs-hide { .ui-tabs .ui-tabs-hide {
   display: none;    display: none;
} }
.ui-tabs .ui-tabs-nav .ui-state-active a, .ui-tabs .ui-tabs-nav .ui-state-active { .ui-tabs .ui-tabs-nav .ui-state-active a, .ui-tabs .ui-tabs-nav .ui-state-active {
   font-weight: bold;    font-weight: bold;
} }
/*   $PROFILE    */  /*   $PROFILE    */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
.ui-tabs .ui-tabs-panel { .ui-tabs .ui-tabs-panel {
   clear: both;    clear: both;
   padding-top: 8px;    padding-top: 8px;
} }
#profilecenter, #unwatched_topics, #profile_attachments { #profilecenter, #unwatched_topics, #profile_attachments {
   margin: 12px 0 0 0;    margin: 12px 0 0 0;
   padding: 8px 8px 16px 8px;    padding: 8px 8px 16px 8px;
   overflow: auto;    overflow: auto;
} }
/* @todo remove the div when div.windowbg and div.windowbg2 are sorted out */  /* @todo remove the div when div.windowbg and div.windowbg2 are sorted out */ 
#profilecenter div.core_posts { #profilecenter div.core_posts {
   padding: 0.2em 1em;    padding: 0.2em 1em;
} }
#profilecenter .windowbg, #profilecenter .windowbg2, #profilecenter .windowbg, #profilecenter .windowbg2,
#profile_attachments .windowbg, #profile_attachments .windowbg2, #profile_attachments .windowbg, #profile_attachments .windowbg2,
#unwatched_topics .windowbg, #unwatched_topics .windowbg2 { #unwatched_topics .windowbg, #unwatched_topics .windowbg2 {
   overflow: visible;    overflow: visible;
   padding: 0 0 4px;    padding: 0 0 4px;
} }
.profileblock { .profileblock {
   padding: 4px 8px;    padding: 4px 8px;
   margin-top: 4px;    margin-top: 4px;
   word-wrap: break-word;    word-wrap: break-word;
   -webkit-hyphens: auto;    -webkit-hyphens: auto;
   -moz-hyphens: auto;    -moz-hyphens: auto;
   -ms-hyphens: auto;    -ms-hyphens: auto;
} }
.profileblock .icon { .profileblock .icon {
   vertical-align: bottom;    vertical-align: bottom;
} }
.profile_content { .profile_content {
   overflow: auto;    overflow: auto;
   padding: 0 8px;    padding: 0 8px;
} }
.profileblock_left { .profileblock_left {
   width: 49%;    width: 49%;
   float: left;    float: left;
   margin: 0 0 4px 4px;    margin: 0 0 4px 4px;
} }
.profileblock_left h3, .profileblock_right h3 { .profileblock_left h3, .profileblock_right h3 {
   margin-bottom: .8em;    margin-bottom: .8em;
} }
.profileblock_right { .profileblock_right {
   width: 49%;    width: 49%;
   float: right;    float: right;
   margin: 0 4px 4px 0;    margin: 0 4px 4px 0;
} }
.profileblock ul li { .profileblock ul li {
   display: block;    display: block;
   float: left;    float: left;
   margin-right: 5px;    margin-right: 5px;
} }
   
.profile_attachments { .profile_attachments {
   border: 0;    border: 0;
   border-spacing: 1em;    border-spacing: 1em;
   width: 95%;    width: 95%;
   table-layout: fixed;    table-layout: fixed;
   font-size: 0.857em;    font-size: 0.857em;
   margin: 0 auto;    margin: 0 auto;
} }
.profile_attachments td, .profile_attachments th { .profile_attachments td, .profile_attachments th {
   padding: 5px 4px;    padding: 5px 4px;
   vertical-align: top;    vertical-align: top;
   text-align: center;    text-align: center;
} }
   
.profile_attachment a img { .profile_attachment a img {
   max-width: 120px;    max-width: 120px;
   max-height: 120px;    max-height: 120px;
} }
.vcard .avatar { .vcard .avatar {
   max-width: 40px;    max-width: 40px;
   max-height: 40px;    max-height: 40px;
} }
.attach_title { .attach_title {
   display: block;    display: block;
   margin-bottom: 4px;    margin-bottom: 4px;
   overflow: hidden;    overflow: hidden;
   max-width: 100%;    max-width: 100%;
   text-overflow: ellipsis;    text-overflow: ellipsis;
   white-space: pre;    white-space: pre;
} }
/* The basic user info on the left */  /* The basic user info on the left */ 
#basicinfo { #basicinfo {
   float: left;    float: left;
   width: 30%;    width: 30%;
} }
#basicinfo .windowbg .content { #basicinfo .windowbg .content {
   padding-left: 30px;    padding-left: 30px;
} }
.profileblock .cf_icon { .profileblock .cf_icon {
   display: block;    display: block;
   float: left;    float: left;
   margin: 4px 5px 0 0;    margin: 4px 5px 0 0;
} }
#detailedinfo { #detailedinfo {
   float: right;    float: right;
   width: 70%;    width: 70%;
   margin-top: 0;    margin-top: 0;
   word-wrap: break-word;    word-wrap: break-word;
   -webkit-hyphens: auto;    -webkit-hyphens: auto;
   -moz-hyphens: auto;    -moz-hyphens: auto;
   -ms-hyphens: auto;    -ms-hyphens: auto;
} }
#basicinfo h4 { #basicinfo h4 {
   overflow: hidden;    overflow: hidden;
   white-space: pre-wrap;    white-space: pre-wrap;
   font-weight: 100;    font-weight: 100;
   font-size: 1.429em;    font-size: 1.429em;
   padding-right: 2px;    padding-right: 2px;
} }
#basicinfo h4 .position { #basicinfo h4 .position {
   display: block;    display: block;
   font-weight: 100;    font-weight: 100;
   font-size: 0.786em;    font-size: 0.786em;
} }
#basicinfo .avatar { #basicinfo .avatar {
   display: block;    display: block;
   margin: 10px 0 0 0;    margin: 10px 0 0 0;
} }
#basicinfo #userstatus { #basicinfo #userstatus {
   display: block;    display: block;
   clear: both;    clear: both;
   margin-top: 6px;    margin-top: 6px;
} }
#basicinfo #userstatus img { #basicinfo #userstatus img {
   vertical-align: middle;    vertical-align: middle;
} }
#detailedinfo dl, #tracking dl, .profileblock dl { #detailedinfo dl, #tracking dl, .profileblock dl {
   clear: right;    clear: right;
   overflow: auto;    overflow: auto;
   margin: 0 0 18px 0;    margin: 0 0 18px 0;
   padding: 0 0 15px 0;    padding: 0 0 15px 0;
} }
#detailedinfo dt, #tracking dt, .profileblock dt { #detailedinfo dt, #tracking dt, .profileblock dt {
   float: left;    float: left;
   clear: both;    clear: both;
   margin: 0 0 3px 0;    margin: 0 0 3px 0;
   padding: 0;    padding: 0;
   width: 35%;    width: 35%;
   font-weight: bold;    font-weight: bold;
} }
#detailedinfo dd, #tracking dd, .profileblock dd { #detailedinfo dd, #tracking dd, .profileblock dd {
   float: left;    float: left;
   margin: 0 0 3px 0;    margin: 0 0 3px 0;
   padding: 0;    padding: 0;
   width: 65%;    width: 65%;
} }
  .profileblock_signature dd {
     width: auto;
     word-wrap: break-word;
  }
   
#personal_picture { #personal_picture {
   display: block;    display: block;
   margin-bottom: 4px;    margin-bottom: 4px;
} }
#avatar_server_stored div { #avatar_server_stored div {
   float: left;    float: left;
   padding-right: 5px;    padding-right: 5px;
} }
#avatar_upload { #avatar_upload {
   overflow: auto;    overflow: auto;
} }
#main_admsection #basicinfo, #main_admsection #detailedinfo { #main_admsection #basicinfo, #main_admsection #detailedinfo {
   width: 100%;    width: 100%;
} }
#main_admsection #basicinfo h4 { #main_admsection #basicinfo h4 {
   float: left;    float: left;
   width: 35%;    width: 35%;
} }
#main_admsection #basicinfo .avatar { #main_admsection #basicinfo .avatar {
   float: right;    float: right;
   vertical-align: top;    vertical-align: top;
} }
#main_admsection #basicinfo ul { #main_admsection #basicinfo ul {
   clear: left;    clear: left;
} }
#main_admsection #basicinfo #userstatus { #main_admsection #basicinfo #userstatus {
   clear: left;    clear: left;
} }
#main_admsection #basicinfo #infolinks { #main_admsection #basicinfo #infolinks {
   display: none;    display: none;
   clear: both;    clear: both;
} }
   
/* Profile statistics */  /* Profile statistics */ 
#generalstats .content dt { #generalstats .content dt {
   float: left;    float: left;
   clear: both;    clear: both;
   margin: 0 0 3px 0;    margin: 0 0 3px 0;
   padding: 0;    padding: 0;
   width: 50%;    width: 50%;
   font-weight: bold;    font-weight: bold;
} }
#generalstats .content dd { #generalstats .content dd {
   float: left;    float: left;
   margin: 0 0 3px 0;    margin: 0 0 3px 0;
   padding: 0;    padding: 0;
   width: 50%;    width: 50%;
} }
   
#show_attachments th { #show_attachments th {
   text-align: left;    text-align: left;
} }
.activity_stats { .activity_stats {
   margin: 0;    margin: 0;
   padding: 0;    padding: 0;
} }
.activity_stats li { .activity_stats li {
   float: left;    float: left;
   margin: 0;    margin: 0;
   padding: 0;    padding: 0;
   width: 4.166%;    width: 4.166%;
} }
.activity_stats li span { .activity_stats li span {
   display: block;    display: block;
   text-align: center;    text-align: center;
   font-size: 0.786em;    font-size: 0.786em;
   padding-right: 0.5em;    padding-right: 0.5em;
} }
.activity_stats .last span { .activity_stats .last span {
   border-right: none;    border-right: none;
} }
.activity_stats li .bar { .activity_stats li .bar {
   margin: 0 auto;    margin: 0 auto;
   max-width: 15px;    max-width: 15px;
   width: 50%;    width: 50%;
} }
.activity_stats li .bar span { .activity_stats li .bar span {
   position: absolute;    position: absolute;
   top: -1555em;    top: -1555em;
   left: -1555em;    left: -1555em;
} }
   
/* Most popular boards by posts and activity */  /* Most popular boards by posts and activity */ 
/* @todo - Use box-sizing and 50% width for better stability. */  /* @todo - Use box-sizing and 50% width for better stability. */ 
#popularposts { #popularposts {
   float: left;    float: left;
   width: 49.5%;    width: 49.5%;
} }
#popularactivity { #popularactivity {
   float: right;    float: right;
   width: 49.5%;    width: 49.5%;
} }
   
#popularposts div.content dt, #popularactivity div.content dt { #popularposts div.content dt, #popularactivity div.content dt {
   float: left;    float: left;
   clear: both;    clear: both;
   margin: 0 0 3px 0;    margin: 0 0 3px 0;
   padding: 0;    padding: 0;
   width: 65%;    width: 65%;
   font-weight: bold;    font-weight: bold;
} }
#popularposts div.content dd, #popularactivity div.content dd { #popularposts div.content dd, #popularactivity div.content dd {
   float: left;    float: left;
   margin: 0 0 3px 0;    margin: 0 0 3px 0;
   padding: 0;    padding: 0;
   width: 35%;    width: 35%;
} }
   
.profile_pie { .profile_pie {
   float: left;    float: left;
   margin: 0 12px 0 0;    margin: 0 12px 0 0;
   padding: 0;    padding: 0;
   width: 20px;    width: 20px;
   height: 20px;    height: 20px;
   text-indent: -1555em;    text-indent: -1555em;
   /* Image will need changing to match new theme.*/     /* Image will need changing to match new theme.*/ 
   background: url(../images/stats_pie.png);    background: url(../images/stats_pie.png);
} }
   
/* @todo - Buddy section stuff. */  /* @todo - Buddy section stuff. */ 
.add_buddy .roundframe, .add_buddy .title_bar { .add_buddy .roundframe, .add_buddy .title_bar {
   margin-top: 5px;    margin-top: 5px;
   border: none;    border: none;
   background: none;    background: none;
} }
   
/* View posts */  /* View posts */ 
.topic .time { .topic .time {
   float: right;    float: right;
} }
.counter { .counter {
   float: right;    float: right;
   padding: 6px;    padding: 6px;
   font-weight: bold;    font-weight: bold;
   font-size: 2em;    font-size: 2em;
} }
.topic_details { .topic_details {
   padding: 0 4px 4px 4px;    padding: 0 4px 4px 4px;
} }
.topic h4 { .topic h4 {
   margin: 3px 0;    margin: 3px 0;
} }
.topic .post { .topic .post {
   margin: 0 12px;    margin: 0 12px;
   min-height: 80px;    min-height: 80px;
   height: auto;    height: auto;
   height: 80px;    height: 80px;
} }
.topic .mod_icons { .topic .mod_icons {
   margin-right: 12px;    margin-right: 12px;
   text-align: right;    text-align: right;
} }
   
#tracking div.content dl { #tracking div.content dl {
   margin: 0;    margin: 0;
   padding: 0;    padding: 0;
   border-bottom: 0;    border-bottom: 0;
} }
   
#creator dl { #creator dl {
   margin: 0;    margin: 0;
} }
#creator dt { #creator dt {
   float: left;    float: left;
   clear: both;    clear: both;
   margin: 0 0 10px 0;    margin: 0 0 10px 0;
   width: 40%;    width: 40%;
} }
#creator dd { #creator dd {
   float: right;    float: right;
   overflow: auto;    overflow: auto;
   margin: 0 0 10px 2px;    margin: 0 0 10px 2px;
   width: 55%;    width: 55%;
   min-height: 2em;    min-height: 2em;
   padding-bottom: 1px;    padding-bottom: 1px;
} }
.centericon { .centericon {
   vertical-align: middle;    vertical-align: middle;
} }
.ignoreboards { .ignoreboards {
   margin: 0 2%;    margin: 0 2%;
   padding: 0;    padding: 0;
   width: 45%;    width: 45%;
} }
.ignoreboards a { .ignoreboards a {
   padding: 1px 0;    padding: 1px 0;
   font-weight: bold;    font-weight: bold;
} }
.ignoreboards ul { .ignoreboards ul {
   margin: 0;    margin: 0;
   padding: 0;    padding: 0;
} }
.ignoreboards li { .ignoreboards li {
   float: left;    float: left;
   clear: both;    clear: both;
} }
.ignoreboards li.category { .ignoreboards li.category {
   margin: 8px 0 0 0;    margin: 8px 0 0 0;
   width: 100%;    width: 100%;
} }
.ignoreboards li ul { .ignoreboards li ul {
   margin: 2px 0 0 0;    margin: 2px 0 0 0;
} }
.ignoreboards li.category ul .board { .ignoreboards li.category ul .board {
   width: 93%;    width: 93%;
} }
   
#theme_settings { #theme_settings {
   overflow: auto;    overflow: auto;
   margin: 0;    margin: 0;
   padding: 0;    padding: 0;
} }
#theme_settings li { #theme_settings li {
   margin: 10px 0;    margin: 10px 0;
   padding: 0;    padding: 0;
} }
   
/* Paid Subscriptions */  /* Paid Subscriptions */ 
#paid_subscription { #paid_subscription {
   width: 100%;    width: 100%;
} }
#paid_subscription dl.settings { #paid_subscription dl.settings {
   margin-bottom: 0;    margin-bottom: 0;
} }
#paid_subscription dl.settings dd, #paid_subscription dl.settings dt { #paid_subscription dl.settings dd, #paid_subscription dl.settings dt {
   margin-bottom: 4px;    margin-bottom: 4px;
} }
   
   
/* Pick theme */  /* Pick theme */ 
#pick_theme { #pick_theme {
   float: left;    float: left;
   width: 100%;    width: 100%;
} }
   
/*Issue a warning*/  /*Issue a warning*/ 
#warn_body { #warn_body {
   width: 80%;    width: 80%;
   font-size: 0.857em;    font-size: 0.857em;
} }
#warning_text { #warning_text {
   position: absolute;    position: absolute;
   z-index: 2;    z-index: 2;
   padding-top: 1pt;    padding-top: 1pt;
   width: 100%;    width: 100%;
   font-weight: bold;    font-weight: bold;
} }
#new_template_link a { #new_template_link a {
   margin-bottom: 2px;    margin-bottom: 2px;
} }
#warndiv { #warndiv {
   margin: 0 0 1em 5%;    margin: 0 0 1em 5%;
} }
#slider-range-min { #slider-range-min {
   width: 90%;    width: 90%;
   margin-top: 1em;    margin-top: 1em;
} }
   
/* $PERSONAL */  /* $PERSONAL */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
#personal_messages .labels { #personal_messages .labels {
   padding: 11px 0 0;    padding: 11px 0 0;
} }
#personal_messages .signature { #personal_messages .signature {
   overflow: visible;    overflow: visible;
} }
#personal_messages .capacity_bar { #personal_messages .capacity_bar {
   display: block;    display: block;
   margin: 6px 0 0 12px;    margin: 6px 0 0 12px;
   width: 10em;    width: 10em;
   height: 12px;    height: 12px;
} }
#personal_messages .capacity_bar span { #personal_messages .capacity_bar span {
   display: block;    display: block;
   height: 12px;    height: 12px;
} }
#personal_messages .reportlinks { #personal_messages .reportlinks {
   padding: 6px 1.286em;    padding: 6px 1.286em;
} }
.pm_icon, .pm_quickmod { .pm_icon, .pm_quickmod {
   width: 4%;    width: 4%;
} }
.pm_date { .pm_date {
   width: 22%;    width: 22%;
   text-align: left;    text-align: left;
} }
.pm_subject { .pm_subject {
   width: 46%;    width: 46%;
   text-align: left;    text-align: left;
} }
.pm_from { .pm_from {
   text-align: left;    text-align: left;
} }
#searchLabelsExpand li { #searchLabelsExpand li {
   padding: 4px 6px;    padding: 4px 6px;
} }
#manrules div.righttext { #manrules div.righttext {
   padding: 4px 1px;    padding: 4px 1px;
} }
.addrules dt.floatleft { .addrules dt.floatleft {
   padding: 0 15px 6px 15px;    padding: 0 15px 6px 15px;
   width: 15em;    width: 15em;
} }
#addrule fieldset { #addrule fieldset {
   clear: both;    clear: both;
   padding: 0.5em;    padding: 0.5em;
} }
#to_item_list_container div, #bcc_item_list_container div { #to_item_list_container div, #bcc_item_list_container div {
   float: left;    float: left;
   margin-right: 10px;    margin-right: 10px;
} }
div.labels { div.labels {
   display: block;    display: block;
   text-align: right;    text-align: right;
} }
.label_pms { .label_pms {
   float: right;    float: right;
   margin-top: 5px;    margin-top: 5px;
} }
.label_pms li { .label_pms li {
   display: inline-block;    display: inline-block;
   vertical-align: top;    vertical-align: top;
   margin-left: 0.5em;    margin-left: 0.5em;
} }
   
   
/* $CALENDAR */  /* $CALENDAR */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
#calendar { #calendar {
   text-align: center;    text-align: center;
} }
#month_grid { #month_grid {
   float: left;    float: left;
   padding: 0 15px 0 0;    padding: 0 15px 0 0;
   width: 215px;    width: 215px;
} }
#main_grid { #main_grid {
   overflow: auto;    overflow: auto;
} }
#month_grid .category_header { #month_grid .category_header {
   font-size: 1em;    font-size: 1em;
} }
#main_grid .category_header { #main_grid .category_header {
   font-size: 1.357em;    font-size: 1.357em;
} }
.previous_month, .next_month { .previous_month, .next_month {
   float: left;    float: left;
   display: block;    display: block;
   margin: -0.1em 0 0 0;    margin: -0.1em 0 0 0;
   font-size: 0.6em;    font-size: 0.6em;
} }
.next_month { .next_month {
   float: right;    float: right;
} }
.calendar_table { .calendar_table {
   width: 100%;    width: 100%;
   border-spacing: 1px;    border-spacing: 1px;
   font-size: 0.857em;    font-size: 0.857em;
} }
.calendar_table th, .calendar_table td { .calendar_table th, .calendar_table td {
   padding: 2px 0;    padding: 2px 0;
   text-align: center;    text-align: center;
} }
#month_grid .calendar_table { #month_grid .calendar_table {
   margin-bottom: 12px;    margin-bottom: 12px;
} }
#month_grid .table_head { #month_grid .table_head {
   font-size: 0.929em;    font-size: 0.929em;
} }
#main_grid .days { #main_grid .days {
   padding: 4px;    padding: 4px;
   width: 14%;    width: 14%;
} }
#main_grid .windowbg.days { #main_grid .windowbg.days {
   height: 100px;    height: 100px;
} }
#main_grid .weeks { #main_grid .weeks {
   font-weight: bold;    font-weight: bold;
   font-size: 1.786em;    font-size: 1.786em;
} }
#main_grid .weeks a:hover { #main_grid .weeks a:hover {
   text-decoration: none;    text-decoration: none;
} }
#main_grid .days { #main_grid .days {
   vertical-align: top;    vertical-align: top;
} }
.weeklist { .weeklist {
   text-align: left;    text-align: left;
   padding: 2px 0;    padding: 2px 0;
} }
.weeklist>li { .weeklist>li {
   margin: 2px 0;    margin: 2px 0;
   overflow: hidden;    overflow: hidden;
} }
.weeklist h4 { .weeklist h4 {
   float: left;    float: left;
   padding: 10px;    padding: 10px;
   width: 10em;    width: 10em;
   font-size: 1.143em;    font-size: 1.143em;
} }
/* Use the old one true layout trick here. */  /* Use the old one true layout trick here. */ 
.weeklist .windowbg2, .weeklist .calendar_today { .weeklist .windowbg2, .weeklist .calendar_today {
   margin: 0 0 -95px 11.5em;    margin: 0 0 -95px 11.5em;
   padding: 8px 8px 100px 8px;    padding: 8px 8px 100px 8px;
} }
/* Add a background that fits with the calendar. */   
#calendar_navigation { #calendar_navigation {
   padding: 12px 0;    padding: 12px 0;
} }
/* Cheat and match this to the submit button. */  /* Cheat and match this to the submit button. */ 
#calendar_navigation .buttonlist { #calendar_navigation .buttonlist {
   padding: 0 6px;    padding: 0 6px;
} }
/* See, I told you there was wombatz here. */  /* See, I told you there was wombatz here. */ 
/* /*
              ,.--""""--.._               ,.--""""--.._
            ."     .'      `-.             ."     .'      `-.
           ;      ;           ;            ;      ;           ;
          '      ;             )           '      ;             )
         /     '             . ;          /     '             . ;
        /     ;     `.        `;         /     ;     `.        `;
      ,.'     :         .     : )       ,.'     :         .     : )
      ;|\'    :      `./|) \  ;/       ;|\'    :      `./|) \  ;/
      ;| \"  -,-   "-./ |;  ).;       ;| \"  -,-   "-./ |;  ).;
      /\/              \/   );       /\/              \/   );
     :     _            \    ;      :     _            \    ;
     :    \0\_    _     ;   )      :    \0\_    _     ;   )
     `.          /o/    ;  /      `.          /o/    ;  /
       !    :   :     ,/  ;        !    :   :     ,/  ;
        (`. : _ : ,/""   ;         (`. : _ : ,/""   ;
         \\\`"^" ` :    ;          \\\`"^" ` :    ;
                  (    )                   (    )
    akg           ////     akg           ////
*/  */ 
   
   
/* MENTIONS  */  /* MENTIONS  */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
.mentionavatar .avatar { .mentionavatar .avatar {
   display: block;    display: block;
   max-width: 60px;    max-width: 60px;
   max-height: 60px;    max-height: 60px;
} }
.mentionavatar { .mentionavatar {
   min-width: 60px;    min-width: 60px;
   min-height: 60px;    min-height: 60px;
} }
   
/* $STATISTICS   */  /* $STATISTICS   */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
.statistics { .statistics {
   margin: 3px 0;    margin: 3px 0;
} }
.statistics .category_header { .statistics .category_header {
   width: 49%;    width: 49%;
   margin: 0 0.5% 0 50.5%;    margin: 0 0.5% 0 50.5%;
   padding-top: 1px;    padding-top: 1px;
   font-size: 1.214em;    font-size: 1.214em;
} }
#top_row .category_header { #top_row .category_header {
   width: 99%;    width: 99%;
   margin: 0 0.5%;    margin: 0 0.5%;
} }
.statistics .category_header.floatleft { .statistics .category_header.floatleft {
   margin: 0 0.5%;    margin: 0 0.5%;
} }
.statistics .flow_hidden, #forum_history .flow_hidden { .statistics .flow_hidden, #forum_history .flow_hidden {
   margin: 2px 0 0 0;    margin: 2px 0 0 0;
} }
.stats { .stats {
   overflow: hidden;    overflow: hidden;
   padding: 0 16px;    padding: 0 16px;
   width: 50%;    width: 50%;
   margin: 12px 0 12px 50%;    margin: 12px 0 12px 50%;
} }
.stats.floatleft { .stats.floatleft {
   clear: left;    clear: left;
   margin: 12px 0;    margin: 12px 0;
} }
.stats dt { .stats dt {
   float: left;    float: left;
   clear: both;    clear: both;
   margin: 0 2% 4px 0;    margin: 0 2% 4px 0;
   padding: 0;    padding: 0;
   width: 48%;    width: 48%;
   font-size: 1em;    font-size: 1em;
   line-height: 1.5em;    line-height: 1.5em;
} }
#top_row .stats dd, .statsbar { #top_row .stats dd, .statsbar {
   position: relative;    position: relative;
   float: right;    float: right;
   margin: 0 0 4px 0;    margin: 0 0 4px 0;
   padding: 0 4px 0 0;    padding: 0 4px 0 0;
   min-height: 1.5em;    min-height: 1.5em;
   width: 50%;    width: 50%;
} }
.statsbar .bar { .statsbar .bar {
   display: block;    display: block;
   float: left;    float: left;
   margin: 0 4px 0 0;    margin: 0 4px 0 0;
   font-size: 1em;    font-size: 1em;
   height: 1.5em;    height: 1.5em;
} }
/* Absolute positioning stops these breaking the bars on narrow screens. */  /* Absolute positioning stops these breaking the bars on narrow screens. */ 
.statsbar .righttext { .statsbar .righttext {
   position: absolute;    position: absolute;
   top: 0;    top: 0;
   right: 0;    right: 0;
   z-index: 2;    z-index: 2;
   padding: 0 4px;    padding: 0 4px;
   line-height: 1.75em;    line-height: 1.75em;
   font-size: 0.857em;    font-size: 0.857em;
} }
#stats { #stats {
   margin: 6px 0 16px 0;    margin: 6px 0 16px 0;
} }
#stats th, #stats td { #stats th, #stats td {
   width: 15%;    width: 15%;
   padding: 4px 12px;    padding: 4px 12px;
   text-align: center;    text-align: center;
} }
#stats .history_head { #stats .history_head {
   border-top: none;    border-top: none;
} }
#stats .lefttext { #stats .lefttext {
   width: 25%;    width: 25%;
   text-align: left;    text-align: left;
} }
#stats .stats_month { #stats .stats_month {
   padding: 4px 8px 4px 30px;    padding: 4px 8px 4px 30px;
} }
#stats .stats_day { #stats .stats_day {
   padding: 4px 8px 4px 60px;    padding: 4px 8px 4px 60px;
} }
   
   
/*   $HELP       */  /*   $HELP       */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
/* Styles for the help section. */  /* Styles for the help section. */ 
#help_container { #help_container {
   overflow: auto;    overflow: auto;
   margin: 0 0 0 0;    margin: 0 0 0 0;
   padding: 0 0 8px 0;    padding: 0 0 8px 0;
} }
#helpmain { #helpmain {
   overflow: auto;    overflow: auto;
   margin: 12px 0 0 0;    margin: 12px 0 0 0;
   padding: 8px 20px 12px 20px;    padding: 8px 20px 12px 20px;
} }
#helpmain p { #helpmain p {
   margin: 10px 0;    margin: 10px 0;
} }
#helpmain ul { #helpmain ul {
   margin: 0 0 0 25px;    margin: 0 0 0 25px;
   line-height: 2em;    line-height: 2em;
} }
#helpmain ul li{ #helpmain ul li{
   list-style-type: disc;    list-style-type: disc;
} }
#helpmain ul li a { #helpmain ul li a {
   font-weight: bold;    font-weight: bold;
} }
   
/* Generally, those [?] icons. This makes your cursor a help icon. */  /* Generally, those [?] icons. This makes your cursor a help icon. */ 
.help { .help {
   cursor: help;    cursor: help;
} }
.help .icon, .hdicon.help { .help .icon, .hdicon.help {
   margin: 0;    margin: 0;
   opacity: 0.8;    opacity: 0.8;
   cursor: help;    cursor: help;
} }
.hdicon.help { .hdicon.help {
   vertical-align: top;    vertical-align: top;
} }
.hdicon.help:before { .hdicon.help:before {
   margin: 2px 0 0;    margin: 2px 0 0;
} }
.help .icon:hover, .hdicon.help:hover { .help .icon:hover, .hdicon.help:hover {
   opacity: 1;    opacity: 1;
} }
a.help .icon { a.help .icon {
   padding: 4px 0 0;    padding: 4px 0 0;
} }
   
/* Styles for the tooltips. */  /* Styles for the tooltips. */ 
.tooltip { .tooltip {
   position: absolute;    position: absolute;
   left: -9999px;    left: -9999px;
   z-index: 999;    z-index: 999;
   padding: 6px 9px;    padding: 6px 9px;
   max-width: 350px;    max-width: 350px;
   word-wrap: break-word;    word-wrap: break-word;
} }
   
/* What's this? @todo - Deprecated? */  /* What's this? @todo - Deprecated? */ 
#help_popup { #help_popup {
   padding: 12px;    padding: 12px;
} }
   
/* The darkened background for help pop-ups. */  /* The help pop-ups. */ 
.popup_container { .popup_container {
   position: fixed;    position: fixed;
   top: 0;    top: 0;
   left: 0;    left: 0;
   z-index: 100;    z-index: 100;
   display: none;    display: none;
   width: 100%;    width: 100%;
   height: 100%;    height: 100%;
} }
   
/* The actual pop-up wrapper. */  /* The actual pop-up wrapper. */ 
.popup_container .popup_window { .popup_container .popup_window {
   margin: 12% auto;    margin: 12% auto;
   width: 480px;    width: 480px;
   font-size: 1em;    font-size: 1em;
} }
   
/* What it says. ;) */  /* What it says. ;) */ 
.popup_heading { .popup_heading {
   padding: 0 0 6px 0;    padding: 0 0 6px 0;
   font-weight: bold;    font-weight: bold;
   font-size: 1.071em;    font-size: 1.071em;
   line-height: 2em;    line-height: 2em;
} }
   
/* The hide icon (red cross). */  /* The hide icon (red cross). */ 
.popup_heading .hide_popup { .popup_heading .hide_popup {
   float: right;    float: right;
   width: 16px;    width: 16px;
   height: 2em;    height: 2em;
   background: url(../images/buttons/delete.png) 0 50% no-repeat;    background: url(../images/buttons/delete.png) 0 50% no-repeat;
} }
   
/* The text content, hopefully helpful. */  /* The text content, hopefully helpful. */ 
.popup_content { .popup_content {
   overflow: auto;    overflow: auto;
   padding: 10px;    padding: 10px;
   max-height: 22em;    max-height: 22em;
} }
   
/* Some styles used in help entries (language strings) */  /* Some styles used in help entries (language strings) */ 
.enablePostHTML { .enablePostHTML {
   margin-bottom: 0;    margin-bottom: 0;
} }
.custom_mask { .custom_mask {
    margin: 0 2em;    margin: 0 2em;
} }
   
/*   $SEARCH     */  /*   $SEARCH     */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
/* The basic search section. */  /* The basic search section. */ 
#simple_search, #advanced_search { #simple_search, #advanced_search {
   margin: 4px 0 0 0;    margin: 4px 0 0 0;
   padding: 8px 0;    padding: 8px 0;
   text-align: center;    text-align: center;
} }
#search_error { #search_error {
   padding: 4px 12px;    padding: 4px 12px;
   font-style: italic;    font-style: italic;
} }
#search_term_input { #search_term_input {
   margin: 0 0 10px;    margin: 0 0 10px;
   font-size: 1.071em;    font-size: 1.071em;
} }
#search_term_input .button_submit { #search_term_input .button_submit {
   margin: 0 0 2px;    margin: 0 0 2px;
} }
   
/* The advanced search section. */  /* The advanced search section. */ 
#search_options { #search_options {
   overflow: hidden;    overflow: hidden;
   margin: 0 auto;    margin: 0 auto;
   padding-top: 12px;    padding-top: 12px;
   width: 600px;    width: 600px;
} }
   
#advanced_search dt { #advanced_search dt {
   float: left;    float: left;
   clear: both;    clear: both;
   padding: 5px 4px 0 4px;    padding: 5px 4px 0 4px;
   width: 35%;    width: 35%;
   text-align: right;    text-align: right;
} }
#advanced_search dd { #advanced_search dd {
   float: left;    float: left;
   padding: 3px 2px;    padding: 3px 2px;
   width: 65%;    width: 65%;
   text-align: left;    text-align: left;
} }
   
#pick_boards .submitbutton { #pick_boards .submitbutton {
   width: 100%;    width: 100%;
} }
   
   
/* The search results page. /* The search results page.
/* The search results page. @todo - Duplicated in the .table_grid code? */  /* 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. */  /* @todo - Search results in a table? I'm sure that's deprecated years ago. */ 
.topic_table td blockquote, .topic_table td .quoteheader { .topic_table td blockquote, .topic_table td .quoteheader {
   margin: 6px;    margin: 6px;
} }
.search_results_posts { .search_results_posts {
   overflow: hidden;    overflow: hidden;
     padding: 0.2em 1em;
} }
.search_results_posts .buttons { .search_results_posts .buttons {
   padding: 5px 12px 0 0;    padding: 5px 12px 0 0;
} }
.compact_view .topic_details { .compact_view .topic_details {
   border-bottom: 0px;     border-bottom: 0; 
} }
.search_results_posts .topic_details { .search_results_posts .topic_details {
   position: relative;    position: relative;
   margin: 0.2em 1em 0px;     margin: 0.2em 1em 0; 
     border-bottom: 0;
} }
.search_results_posts .quickbuttons { .search_results_posts .quickbuttons {
   margin-left: 1em;    margin-left: 1em;
   margin-right: 1em;    margin-right: 1em;
} }
.search_results_posts .topic_body { .search_results_posts .topic_body {
   margin: 0px 1em 0px;     margin: 0 1em 0; 
   padding-bottom: 12px;    padding-bottom: 12px;
   padding-top: 12px;    padding-top: 12px;
} }
.search_results_posts .quick_mod { .search_results_posts .quick_mod {
   position: absolute;    position: absolute;
   right: 0px;     right: 0; 
   top: 10%;    top: 10%;
} }
.search_results_posts .counter { .search_results_posts .counter {
   padding: 6px 1.5em;    padding: 6px 0 6px 1.5em;
} }
.compact_view .content { .compact_view .content {
   overflow: auto;    overflow: auto;
} }
#topicForm .pagesection,  #topicForm .pagesection, #topicForm .flow_auto { 
#topicForm .flow_auto {  
   display: inline-block;    display: inline-block;
} }
#topicForm:after { #topicForm:after {
   display: block;    display: block;
   clear: both;    clear: both;
   content: "";    content: "";
} }
   
/*   $MEMBERLIST     */  /*   $MEMBERLIST     */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
.mlist, .whos_online { .mlist, .whos_online {
   display: table;    display: table;
   width: 100%;    width: 100%;
   border-collapse: collapse;    border-collapse: collapse;
} }
.mlist li, .whos_online dt, .whos_online dd { .mlist li, .whos_online dt, .whos_online dd {
   display: table-row;    display: table-row;
} }
.mlist li div, .whos_online dt div, .whos_online dd div { .mlist li div, .whos_online dt div, .whos_online dd div {
   display: table-cell;    display: table-cell;
   padding: 5px 8px;    padding: 5px 8px;
} }
.letter_row { .letter_row {
   height: 3em;    height: 3em;
   line-height: 3em;    line-height: 3em;
   vertical-align: bottom;    vertical-align: bottom;
} }
.letter_row>h3 { .letter_row>h3 {
   line-height: 2em;    line-height: 2em;
   text-transform: uppercase;    text-transform: uppercase;
   font-weight: bold;    font-weight: bold;
   position: relative;    position: relative;
   top: 12px;    top: 12px;
   text-align: center;    text-align: center;
} }
.mlist_header { .mlist_header {
   font-weight: bold;    font-weight: bold;
} }
.whos_online dt { .whos_online dt {
   font-weight: bold;    font-weight: bold;
} }
dl.no_members { dl.no_members {
   display: none;    display: none;
} }
.online_member { .online_member {
   min-width: 40%;    min-width: 40%;
} }
.track_ip:before { .track_ip:before {
   content: "(";    content: "(";
} }
.track_ip:after { .track_ip:after {
   content: ")";    content: ")";
} }
#memberlist { #memberlist {
   margin: 6px 0 0 0;    margin: 6px 0 0 0;
} }
#memberlist>.content { #memberlist>.content {
   padding: 12px 0;    padding: 12px 0;
} }
#memberlist .status { #memberlist .status {
   width: 60px;    width: 60px;
} }
#memberlist .selected { #memberlist .selected {
   width: auto;    width: auto;
   white-space: nowrap    white-space: nowrap
} }
#memberlist_search, #memberlist>.content>.submitbutton { #memberlist_search, #memberlist>.content>.submitbutton {
   margin: 0 auto;    margin: 0 auto;
   width: 32em;    width: 32em;
} }
#memberlist_search>dt, #memberlist_search>dd { #memberlist_search>dt, #memberlist_search>dd {
   width: 12em;    width: 12em;
} }
#memberlist_search>dd { #memberlist_search>dd {
   width: 20em;    width: 20em;
} }
#memberlist_search .input_check { #memberlist_search .input_check {
   margin: 4px 0 0 0;    margin: 4px 0 0 0;
} }
#memberlist_search .input_text { #memberlist_search .input_text {
   margin: 0 0 12px 0;    margin: 0 0 12px 0;
   overflow: hidden;    overflow: hidden;
   width: 100%;    width: 100%;
} }
#mlsearch { #mlsearch {
   padding-top: 2px;    padding-top: 2px;
} }
#mlsearch_options { #mlsearch_options {
   position: absolute;    position: absolute;
   display: none;    display: none;
   padding: 0.5em;    padding: 0.5em;
} }
#mlsearch_options.nojs { #mlsearch_options.nojs {
   display: none;    display: none;
} }
#mlsearch_options.nojs li:nth-child(odd) { #mlsearch_options.nojs li:nth-child(odd) {
   float: left;    float: left;
   max-width: 25em;    max-width: 25em;
} }
#mlsearch_options.nojs li:nth-child(even) { #mlsearch_options.nojs li:nth-child(even) {
   float: right;    float: right;
} }
#mlsearch_options .mlsearch_option .input_check { #mlsearch_options .mlsearch_option .input_check {
   margin: 0 0 0 0.5em;    margin: 0 0 0 0.5em;
   float: right;    float: right;
} }
#mlsearch_options .mlsearch_option { #mlsearch_options .mlsearch_option {
   padding: 0.2em 0;    padding: 0.2em 0;
} }
   
   
/*   $LOGIN      */  /*   $LOGIN      */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
/* Styles for the login areas. */  /* Styles for the login areas. */ 
/* @todo - Width would be better in em. */  /* @todo - Width would be better in em. */ 
.login { .login {
   margin: 0 auto;    margin: 0 auto;
   max-width: 540px;    max-width: 540px;
} }
.login dl { .login dl {
   clear: right;    clear: right;
   overflow: auto;    overflow: auto;
} }
.login dt, .login dd { .login dt, .login dd {
   margin: 0 0 5px 0;    margin: 0 0 5px 0;
   padding: 1px;    padding: 1px;
   width: 44%;    width: 44%;
} }
.login dt { .login dt {
   float: left;    float: left;
   clear: both;    clear: both;
   text-align: right;    text-align: right;
   font-weight: bold;    font-weight: bold;
} }
.login dd { .login dd {
   float: right;    float: right;
   width: 54%;    width: 54%;
   text-align: left;    text-align: left;
} }
.login dl:nth-of-type(2) dt { .login dl:nth-of-type(2) dt {
   padding-top: 3px;    padding-top: 3px;
} }
.login dl:nth-of-type(2) dd img { .login dl:nth-of-type(2) dd img {
   vertical-align: top;    vertical-align: top;
} }
.login p { .login p {
   text-align: center;    text-align: center;
} }
   
/* Additional register fields. */  /* Additional register fields. */ 
.register_form { .register_form {
   clear: right;    clear: right;
   margin: 0;    margin: 0;
} }
.register_form dt { .register_form dt {
   float: left;    float: left;
   clear: both;    clear: both;
   margin: 6px 0 0 0;    margin: 6px 0 0 0;
   width: 50%;    width: 50%;
   font-weight: normal;    font-weight: normal;
} }
.register_form dt span { .register_form dt span {
   display: block;    display: block;
} }
.register_form dd { .register_form dd {
   float: left;    float: left;
   margin: 6px 0 0 0;    margin: 6px 0 0 0;
   width: 49%;    width: 49%;
} }
.register_form img { .register_form img {
   vertical-align: middle;    vertical-align: middle;
} }
#confirm_buttons { #confirm_buttons {
   padding: 12px 0;    padding: 12px 0;
   text-align: center;    text-align: center;
} }
#confirm_buttons .button_submit { #confirm_buttons .button_submit {
   white-space: normal;    white-space: normal;
} }
.coppa_contact { .coppa_contact {
   margin-left: 5ex;    margin-left: 5ex;
   padding: 4px;    padding: 4px;
   width: 32ex;    width: 32ex;
} }
#agreement_box { #agreement_box {
   overflow-y: scroll;    overflow-y: scroll;
   height: 180px;    height: 180px;
   padding: 8px;    padding: 8px;
   text-align: justify;    text-align: justify;
   border: 1px solid;    border: 1px solid;
   margin-bottom: 2em;    margin-bottom: 2em;
} }
   
/* Styles for maintenance mode. */  /* Styles for maintenance mode. */ 
#maintenance_mode { #maintenance_mode {
   min-width: 520px;    min-width: 520px;
   width: 75%;    width: 75%;
   text-align: left;    text-align: left;
} }
#maintenance_mode .floatleft { #maintenance_mode .floatleft {
   margin-right: 12px;    margin-right: 12px;
} }
   
/* Common for all admin sections. */  /* Common for all admin sections. */ 
/* The admin logon form */  /* The admin logon form */ 
#admin_content { #admin_content {
   clear: both;    clear: both;
   padding-top: 8px;    padding-top: 8px;
} }
/* Custom profile fields like to play with us some times. */  /* Custom profile fields like to play with us some times. */ 
#admin_content .custom_field { #admin_content .custom_field {
   margin-bottom: 15px;    margin-bottom: 15px;
} }
#admin_login { #admin_login {
   padding: 12px;    padding: 12px;
} }
#admin_login img { #admin_login img {
   vertical-align: middle;    vertical-align: middle;
   padding: 2px 2px 4px;    padding: 2px 2px 4px;
} }
   
/*   $BOXES      */  /*   $BOXES      */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
   
/* Lotsa boxes. */  /* Lotsa boxes. */ 
.description, .information, .warningbox, .successbox, .infobox, .errorbox { .description, .information, .warningbox, .successbox, .infobox, .errorbox {
   margin: 0 0 12px 0;    margin: 0 0 12px 0;
   padding: 6px 12px;    padding: 6px 12px;
   border: 1px solid #ccc;  
   background: #fff;  
   font-size: 0.929em;    font-size: 0.929em;
} }
/* Information boxes. */   
.information {  
   background: #f0f6f0;  
}  
.information p { .information p {
   padding: 12px;    padding: 12px;
} }
/* More little boxes on a hillside. */  /* More little boxes on a hillside. */ 
.warningbox, .successbox, .infobox, .errorbox { .warningbox, .successbox, .infobox, .errorbox {
   padding-left: 35px;    padding-left: 35px;
} }
.errorbox { .errorbox {
   margin-bottom: 12px;    margin-bottom: 12px;
   text-align: left;    text-align: left;
} }
   
/* Styles for (fatal) errors. */  /* Styles for (fatal) errors. */ 
#fatal_error { #fatal_error {
   margin: auto;    margin: auto;
   padding-bottom: 1em;    padding-bottom: 1em;
   width: 80%;    width: 80%;
} }
.errorbox h3 { .errorbox h3 {
   margin: 0;    margin: 0;
   padding: 0;    padding: 0;
   text-decoration: underline;    text-decoration: underline;
   font-size: 1.071em;    font-size: 1.071em;
} }
.errorbox .listlevel1, .errorbox .listlevel1,
.warningbox .listlevel1 { .warningbox .listlevel1 {
   float: none;    float: none;
   padding-left: 1em;    padding-left: 1em;
   line-height: 1.75em;    line-height: 1.75em;
} }
.errorbox .alert { .errorbox .alert {
   float: left;    float: left;
   margin: 0;    margin: 0;
   padding: 0;    padding: 0;
   width: 12px;    width: 12px;
   font-size: 1.5em;    font-size: 1.5em;
} }
.errorbox .smalltext { .errorbox .smalltext {
   display: block;    display: block;
   padding-left: 1em;    padding-left: 1em;
} }
.ban_cannot_post { .ban_cannot_post {
   margin: 2ex;    margin: 2ex;
   padding: 2ex;    padding: 2ex;
   border: 2px dashed;    border: 2px dashed;
} }
   
   
/*   $PROGRESS   */  /*   $PROGRESS   */ 
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
/* Styles for the progress bar */  /* Styles for the progress bar */ 
/* @todo - Height in pt? WTF? */  /* @todo - Height in pt? WTF? */ 
.progress_bar { .progress_bar {
   position: relative;    position: relative;
   margin: 20px auto 0 auto;    margin: 20px auto 0 auto;
   padding: 3px;    padding: 3px;
   width: 80%;    width: 80%;
   height: 15pt;    height: 15pt;
} }
.progress_bar .full_bar { .progress_bar .full_bar {
   position: absolute;    position: absolute;
   z-index: 2;    z-index: 2;
   padding-top: 1pt;    padding-top: 1pt;
   width: 100%;    width: 100%;
   text-align: center;    text-align: center;
   font-weight: bold;    font-weight: bold;
} }
.progress_bar .green_percent { .progress_bar .green_percent {
   z-index: 1;    z-index: 1;
   height: 15pt;    height: 15pt;
} }
.progress_bar .blue_percent { .progress_bar .blue_percent {
   z-index: 1;    z-index: 1;
   height: 15pt;    height: 15pt;
} }
.loading { .loading {
   width: 35px;    width: 35px;
   height: 35px;    height: 35px;
} }
   
/* floating error box */  /* floating error box */ 
/* currently used by like functionality */  /* currently used by like functionality */ 
.floating_error { .floating_error {
   position: fixed;    position: fixed;
   width: 50%;    width: 50%;
   margin: 0;    margin: 0;
   padding: 10px 0 0;    padding: 10px 0 0;
   text-align: center;    text-align: center;
   z-index: 102;    z-index: 102;
} }
   
.floating_error .error_heading { .floating_error .error_heading {
   margin: 0;    margin: 0;
   padding: 5px 10px 0;    padding: 5px 10px 0;
} }
   
.floating_error .error_msg { .floating_error .error_msg {
   margin: 10px auto 15px;    margin: 10px auto 15px;
   width: 100%;    width: 100%;
} }
   
.floating_error .error_btn { .floating_error .error_btn {
   padding: 10px;    padding: 10px;
   position: relative;    position: relative;
   margin: 0;    margin: 0;
   text-align: center;    text-align: center;
} }
   
   
   
/*   $MEDIA      */  /*   $MEDIA      */ 
/* Experimental media queries. /* Experimental media queries.
/* ------------------------------------------------------- */  /* ------------------------------------------------------- */ 
/* NOTE: /* NOTE:
/* When setting break points for media queries, don't set them in pixels. /* When setting break points for media queries, don't set them in pixels.
/* Use em instead. /* Use em instead.
/* Why? Because the point of re-stacking/dropping content is to fit it all /* 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, /* 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. /* but also on the user-selected text size that is set in the browser.
/* /*
/* If, for whatever reason (eyesight, pixel pitch, workstation arrangement, etc.) /* If, for whatever reason (eyesight, pixel pitch, workstation arrangement, etc.)
/* a user requires text 50% larger than theme default, then their screen is /* a user requires text 50% larger than theme default, then their screen is
/* effectively a lot smaller than its nominal resolution would indicate. /* effectively a lot smaller than its nominal resolution would indicate.
/* If the break points are set in em, suddenly the media queries become equally /* If the break points are set in em, suddenly the media queries become equally
/* responsive for all users, without any extra code being required. /* responsive for all users, without any extra code being required.
/* /*
/* Testing em break points is just as easy as testing pixels, /* Testing em break points is just as easy as testing pixels,
/* and it will make more people happier. This is cool. :) /* 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. /* Of course, having comments to map em to px for each query is a good idea too.
   
/* Styles for print media. /* Styles for print media.
------------------------------------------------------- */  ------------------------------------------------------- */ 
@media print { @media print {
   #headerarea    #headerarea
   {    {
       display: none;        display: none;
   }    }
} }
   
/* @todo - WIP - Still needs more elements and stuff. */  /* @todo - WIP - Still needs more elements and stuff. */ 
   
/* Not sure how fussy we should get here, /* Not sure how fussy we should get here,
/* given that there is supposed to be a separate phone theme. /* given that there is supposed to be a separate phone theme.
/* Am currently inclined to think that just having break points that correlate /* Am currently inclined to think that just having break points that correlate
/* to 1024, 800 and 480 at standard font size is probably adequate. */  /* 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. */  /* using 100% = 1 em ~= 16px ~= 14pt for our em sizing .. 64em*16px = 1024 etc. */ 
   
/* This one does 1024 screens at default font size. */  /* This one does 1024 screens at default font size. */ 
@media screen and (max-width: 64em) { @media screen and (max-width: 64em) {
   .topic_latest {    .topic_latest {
       min-width: 20em;        min-width: 20em;
   }    }
   .topic_latest.relative {    .topic_latest.relative {
       min-width: 15em;        min-width: 15em;
   }    }
   .board_latest {    .board_latest {
       min-width: 22em;        min-width: 22em;
       width: 40%;        width: 40%;
   }    }
   .lastpost_link {    .lastpost_link {
       display: block;        display: block;
   }    }
   .board_stats, .topic_stats {    .board_stats, .topic_stats {
       display: none;        display: none;
   }    }
   .bbc_img, .elk_video {    .bbc_img, .elk_video {
       max-width: 100%;        max-width: 100%;
   }    }
   .elk_previewvideo {    .elk_previewvideo {
       max-width: 100%;        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. */  /* This one does 800 screens at default font size. */ 
@media screen and (max-width: 50em) { @media screen and (max-width: 50em) {
   #logobox img {    #logobox img {
       max-width: 95%;        max-width: 95%;
   }    }
   .topic_latest {    .topic_latest {
       min-width: 15em;        min-width: 15em;
       display: block;        display: block;
   }    }
   .board_avatar {    .board_avatar {
       display: none;        display: none;
   }    }
   #main_menu .linklevel1 {    #main_menu .linklevel1 {
       margin-right: 5px;        margin-right: 5px;
       box-shadow: none;        box-shadow: none;
       border: 1px solid transparent;        border: 1px solid transparent;
   }    }
   #main_menu .linklevel1, #main_menu .linklevel1 a {    #main_menu .linklevel1, #main_menu .linklevel1 a {
       margin: 0;        margin: 0;
       padding: 0;        padding: 0;
   }    }
   #main_menu .linklevel1>.pm_indicator {    #main_menu .linklevel1>.pm_indicator {
       display: none;        display: none;
   }    }
   .button_title, .topic_moderation_alt {    .button_title, .topic_moderation_alt {
       display: none;        display: none;
   }    }
   .topic_moderation {    .topic_moderation {
       display: inline-block;        display: inline-block;
       float: right;        float: right;
       width: auto;        width: auto;
   }    }
   #collapse_button {    #collapse_button {
       display: none;        display: none;
   }    }
   .wrapper {    .wrapper {
       min-width: 98%;        min-width: 98%;
   }    }
   .linktree {    .linktree {
       max-width: 95%;        max-width: 95%;
       white-space: nowrap;        white-space: nowrap;
       text-overflow: ellipsis;        text-overflow: ellipsis;
   }    }
   .topic_lastpost {    .topic_lastpost {
       min-width: 18em;        min-width: 18em;
   }    }
   .topic_latest.relative .topic_lastpost {    .topic_latest.relative .topic_lastpost {
       min-width: 16em;        min-width: 16em;
   }    }
   .board_row {    .board_row {
       min-width: 20em;        min-width: 20em;
   }    }
   .board_name {    .board_name {
       margin: 12px 0 0 56px;        margin: 12px 0 0 56px;
   }    }
   .board_lastposter {    .board_lastposter {
       display: block;        display: block;
   }    }
   .board_lastpost, .board_latest {    .board_lastpost, .board_latest {
       min-width: 14em;        min-width: 14em;
   }    }
   .board_name:after {    .board_name:after {
       display: block;        display: block;
       clear: both;        clear: both;
       content: "";        content: "";
   }    }
   .board_info .board_description, .board_info .moderators, .childboards {    .board_info .board_description, .board_info .moderators, .childboards {
       margin: 0 0 0 8px;        margin: 0 0 0 8px;
   }    }
   /* Playing silly buggers with a sidebar menu option for narrow screens. */     /* Playing silly buggers with a sidebar menu option for narrow screens. */ 
   #main_container {    #main_container {
       position: relative;        position: relative;
       padding: 0 0 0 12px;        padding: 0 0 0 12px;
   }    }
   #menu_sidebar {    #menu_sidebar {
       position: absolute;        position: absolute;
       left: -0.8em;        left: -0.8em;
       width: 6px;        width: 6px;
       min-height: 500px;        min-height: 500px;
       z-index: 90;        z-index: 90;
   }    }
   #menu_sidebar ul, #menu_sidebar .category_header {    #menu_sidebar ul, #menu_sidebar .category_header {
       display: none;        display: none;
   }    }
   #menu_sidebar:hover {    #menu_sidebar:hover {
       width: 200px;        width: 200px;
       padding: 0.8em 1em 1em 0.6em;        padding: 0.8em 1em 1em 0.6em;
   }    }
   #menu_sidebar:hover ul, #menu_sidebar:hover .category_header {    #menu_sidebar:hover ul, #menu_sidebar:hover .category_header {
       display: block;        display: block;
   }    }
   /* End playing silly buggers. */     /* End playing silly buggers. */ 
   #top_section_notice {    #top_section_notice {
       min-width: 250px;        min-width: 250px;
   }    }
   #password_login select {    #password_login select {
       display: none;        display: none;
   }    }
   .poster {    .poster {
       width: 7em;        width: 7em;
   }    }
   .poster .poster_online {    .poster .poster_online {
       display: none;        display: none;
   }    }
   .postarea {    .postarea {
       margin: 0 0 0 6em;        margin: 0 0 0 6em;
   }    }
   .avatar {    .avatar {
       max-width: 7em;        max-width: 7em;
   }    }
   .poster_avatar a {    .poster_avatar a {
       padding: 0;        padding: 0;
   }    }
   .quickbuttons .modified {    .quickbuttons .modified {
       display: block;        display: block;
       width: 100%;        width: 100%;
       text-align: left;        text-align: left;
   }    }
   #forumposts .views_text {    #forumposts .views_text {
       display: none;        display: none;
   }    }
   #forumposts .nextlinks {    #forumposts .nextlinks {
       width: 100%;        width: 100%;
       text-align: right;        text-align: right;
       white-space: normal;        white-space: normal;
   }    }
   #search_options {    #search_options {
       width: 100%;        width: 100%;
   }    }
   .ignoreboards {    .ignoreboards {
       width: 100%;        width: 100%;
   }    }
   .ignoreboards.floatright {    .ignoreboards.floatright {
       float: none;        float: none;
   }    }
   /* our stats page */     /* our stats page */ 
   .statistics .category_header {    .statistics .category_header {
       width: 100%;        width: 100%;
       box-sizing: border-box;        box-sizing: border-box;
       margin: 0;        margin: 0;
   }    }
   .stats {    .stats {
       width: 100%;        width: 100%;
       box-sizing: border-box;        box-sizing: border-box;
       float: none;        float: none;
       margin: 0;        margin: 0;
   }    }
   .stats dt {    .stats dt {
       font-weight: bold;        font-weight: bold;
   }    }
   #list_mentions .listaction {    #list_mentions .listaction {
       display: none;        display: none;
   }    }
   .mlist li div:nth-child(n+6), .mlist li .email {    .mlist li div:nth-child(n+6), .mlist li .email {
       display: none;        display: none;
   }    }
   .mlist li div.posts {    .mlist li div.posts {
       display: table-cell;        display: table-cell;
   }    }
   .sticky_row .topic_info:before, .locked_row .topic_info:before, .locked_row.sticky_row .topic_info:before {    .sticky_row .topic_info:before, .locked_row .topic_info:before, .locked_row.sticky_row .topic_info:before {
       margin-right: -18px;        margin-right: -18px;
   }    }
   .topic_name, .topic_starter {    .topic_name, .topic_starter {
       margin-right: 18px;        margin-right: 18px;
   }    }
     #ic_recentposts, #ps_recentposts, #ps_recenttopics {
         font-size: 1em;
     }
} }
/* This one does 540 and smaller screens at default font size. */  /* This one does 540 and smaller screens at default font size. */ 
@media screen and (max-width: 33.750em) { @media screen and (max-width: 33.750em) {
   select, .input_text, .input_password {    select, .input_text, .input_password {
       max-width: 12em;        max-width: 12em;
   }    }
   dt, dd, dd label, .login dt, #advanced_search dt {    dt, dd, dd label, .login dt, #advanced_search dt {
       display: block;        display: block;
       width: 90% !important;        width: 90% !important;
       text-align: left;        text-align: left;
   }    }
   dd {    dd {
       padding-left: 8% !important;        padding-left: 8% !important;
   }    }
   dd input, dd select, dd textarea {    dd input, dd select, dd textarea {
       width: 90% !important;        width: 90% !important;
       max-width: 90% !important;        max-width: 90% !important;
   }    }
   dd .input_check, dd .input_radio {    dd .input_check, dd .input_radio {
       display: inline !important;        display: inline !important;
       width: auto !important;        width: auto !important;
   }    }
   #search_options {    #search_options {
       width: 100%;        width: 100%;
   }    }
   #posting_icons, .table_list .stats, .table_list .lastpost, .table_grid .lastpost {    #posting_icons, .table_list .stats, .table_list .lastpost, .table_grid .lastpost {
       display: none;        display: none;
   }    }
   #wrapper, .frame {    #wrapper, .frame {
       width: 100%;        width: 100%;
       min-width: 300px;        min-width: 300px;
   }    }
   #main_content_section {    #main_content_section {
       padding: 1px 2px 16px 3px;        padding: 1px 2px 16px 3px;
   }    }
   #search_form .input_text {    #search_form .input_text {
       width: 7em;        width: 7em;
   }    }
   .post {    .post {
       margin: 0 0 0 5px;        margin: 0 0 0 5px;
   }    }
   .frame {    .frame {
       min-width: 100%;        min-width: 100%;
   }    }
   .topic_info {    .topic_info {
       display: block;        display: block;
       width: 95%;        width: 95%;
       padding: 8px;        padding: 8px;
   }    }
   .locked_row, .sticky_row, .basic_row,.topic_listing, .topic_listing>li {    .locked_row, .sticky_row, .basic_row,.topic_listing, .topic_listing>li {
       display: block;        display: block;
   }    }
   .sticky_row .topic_info:before, .locked_row .topic_info:before, .locked_row.sticky_row .topic_info:before {    .sticky_row .topic_info:before, .locked_row .topic_info:before, .locked_row.sticky_row .topic_info:before {
       margin-right: 0;        margin-right: 0;
   }    }
   .topic_icons, .topic_moderation {    .topic_icons, .topic_moderation {
       display: none;        display: none;
   }    }
   .topic_latest {    .topic_latest {
       display: block;        display: block;
       padding: 5px;        padding: 5px;
       width: 97%;        width: 97%;
   }    }
   ul.buttonlist:before {    ul.buttonlist:before {
       display: block;        display: block;
       clear: both;        clear: both;
       content: "";        content: "";
   }    }
   .pagelinks {    .pagelinks {
       height: 30px;        height: 30px;
       /* Necessary for some browsers to keep the pages all on the same line */         /* Necessary for some browsers to keep the pages all on the same line */ 
       min-width: 100%;        min-width: 100%;
   }    }
   .quickbuttons {    .quickbuttons {
       white-space: nowrap;        white-space: nowrap;
   }    }
   .pagesection .buttonlist {    .pagesection .buttonlist {
       float: none;        float: none;
       width: 100%;        width: 100%;
   }    }
   #whoisviewing {    #whoisviewing {
       display: none;        display: none;
   }    }
   .pagesection .buttonlist li {    .pagesection .buttonlist li {
       white-space: nowrap;        white-space: nowrap;
       margin-bottom: 4px;        margin-bottom: 4px;
   }    }
   .topic_name, .topic_starter {    .topic_name, .topic_starter {
       margin: 0;        margin: 0;
   }    }
   .topic_starter {    .topic_starter {
       margin-top: 5px;        margin-top: 5px;
   }    }
   .topic_name h4 {    .topic_name h4 {
       display: block;        display: block;
       font-size: 1.357em;        font-size: 1.357em;
   }    }
   .topic_name h4 a {    .topic_name h4 a {
       word-wrap: break-word;        word-wrap: break-word;
   }    }
   #wrapper {    #wrapper {
       padding-left: 2px;        padding-left: 2px;
       padding-right: 2px;        padding-right: 2px;
   }    }
   #gobottom, #gotop {    #gobottom, #gotop {
       padding-right: 0.25em;        padding-right: 0.25em;
   }    }
   #message_index_jump_to {    #message_index_jump_to {
       display: block;        display: block;
       float: none;        float: none;
   }    }
   #news, #logobox, .rightheader #logobox, #top_section_notice {    #news, #logobox, .rightheader #logobox, #top_section_notice {
       display: none;        display: none;
   }    }
   .avatar {    .avatar {
       max-width: 40px;        max-width: 40px;
       max-height: 40px;        max-height: 40px;
   }    }
   .postarea {    .postarea {
       display: block;        display: block;
       margin: 0;        margin: 0;
   }    }
   #forumposts .windowbg {    #forumposts .windowbg {
       padding: 5px;        padding: 5px;
   }    }
   #forumposts h2 img {    #forumposts h2 img {
       display: none;        display: none;
   }    }
   .keyinfo h5 {    .keyinfo h5 {
       padding: 3px;        padding: 3px;
   }    }
   h2 .views_text, h2 .nextlinks {    h2 .views_text, h2 .nextlinks {
       display: block;        display: block;
       float: none;        float: none;
       line-height: 1.4em;        line-height: 1.4em;
   }    }
   .modified {    .modified {
       display: none;        display: none;
   }    }
   .board_row {    .board_row {
       margin-top:3px;        margin-top:3px;
       padding: 15px 0;        padding: 15px 0;
   }    }
   .board_info .board_description, .board_info .moderators {    .board_info .board_description, .board_info .moderators {
       display: none;        display: none;
   }    }
   .childboard_row {    .childboard_row {
       padding: 0 0 0 35px;        padding: 0 0 0 35px;
   }    }
   .childboards {    .childboards {
       margin: 0 5px;        margin: 0 5px;
   }    }
   .childboards li {    .childboards li {
       display: block;        display: block;
       font-size: 1.2em;        font-size: 1.2em;
   }    }
   .childboards li:nth-child(n+2):before {    .childboards li:nth-child(n+2):before {
       content: " - ";        content: " - ";
   }    }
   .board_info, .board_latest {    .board_info, .board_latest {
       width: 100%;        width: 100%;
       display: block;        display: block;
       box-sizing: border-box;        box-sizing: border-box;
       margin-bottom: 2px;        margin-bottom: 2px;
   }    }
   .board_latest {    .board_latest {
       margin: 0 0 0 35px;        margin: 0 0 0 35px;
       padding: 0 8px;        padding: 0 8px;
       width: 90%;        width: 90%;
       max-width: 90%;        max-width: 90%;
       min-width: 90%;        min-width: 90%;
   }    }
   .board_lastpost, .topic_lastpost {    .board_lastpost, .topic_lastpost {
       min-width: 18em;        min-width: 18em;
   }    }
   .board_lastpost {    .board_lastpost {
       padding-top: 6px;        padding-top: 6px;
       margin: 3px;        margin: 3px;
   }    }
   .board_info h3 a {    .board_info h3 a {
       font-size: 1.357em;        font-size: 1.357em;
       word-wrap: break-word;        word-wrap: break-word;
   }    }
   .board_name {    .board_name {
       margin: 0 0 0 35px;        margin: 0 0 0 35px;
   }    }
   .board_info:after {    .board_info:after {
       display: block;        display: block;
       clear: both;        clear: both;
       content: "";        content: "";
   }    }
   .topic_listing>li {    .topic_listing>li {
       margin-bottom: 5px;        margin-bottom: 5px;
   }    }
   .icon_anchor {    .icon_anchor {
       min-width: 0;        min-width: 0;
   }    }
   .lastpost_link, .board_lastposter {    .lastpost_link, .board_lastposter {
       font-size: 1.071em;        font-size: 1.071em;
       display: inline;        display: inline;
   }    }
   .recentboard, .recentposter {    .recentboard, .recentposter {
       display: none;        display: none;
   }    }
   .lastpost_link, .board_lastposter, .board_lasttime {    .lastpost_link, .board_lastposter, .board_lasttime {
       white-space: normal;        white-space: normal;
   }    }
   #basicinfo, #detailedinfo {    #basicinfo, #detailedinfo {
       float: none;        float: none;
       width: 100%;        width: 100%;
   }    }
   .views_text, .nextlinks {    .views_text, .nextlinks {
       display: none !important;        display: none !important;
   }    }
   #gotop, #gobottom {    #gotop, #gobottom {
       bottom: 0%;         bottom: 0; 
       padding: 0.2em 0.1em;        padding: 0.2em 0.1em;
       height: 1em;        height: 1em;
       width: 1.2em;        width: 1.2em;
       top: auto;        top: auto;
       text-align: center;        text-align: center;
   }    }
   #gotop {    #gotop {
       margin-left: 1.45em;        margin-left: 1.45em;
   }    }
   .admin_menu li {    .admin_menu li {
       float: left;        float: left;
       display: block;        display: block;
       width: 48%;        width: 48%;
   }    }
   #main_menu {    #main_menu {
       clear: left;        clear: left;
   }    }
   .listlevel2:hover .menulevel3, .listlevel2.sfhover .menulevel3 {    .listlevel2:hover .menulevel3, .listlevel2.sfhover .menulevel3 {
       left: -4px;        left: -4px;
   }    }
   .listlevel2, .listlevel3 {    .listlevel2, .listlevel3 {
       max-width: 10em !important;        max-width: 10em !important;
   }    }
   .menulevel2 {    .menulevel2 {
       max-width: 11em;        max-width: 11em;
   }    }
   .menulevel3 {    .menulevel3 {
       display: none !important;        display: none !important;
   }    }
   #main_menu li ul li, .admin_menu li ul li {    #main_menu li ul li, .admin_menu li ul li {
       float: left;        float: left;
       display: block;        display: block;
       width: 100%;        width: 100%;
   }    }
   .generalinfo {    .generalinfo {
       overflow: auto;        overflow: auto;
   }    }
   ul.poster {    ul.poster {
       display: block;        display: block;
       clear: both;        clear: both;
       text-align: center;        text-align: center;
   }    }
   .poster {    .poster {
       float: none;        float: none;
       width: auto;        width: auto;
   }    }
   .poster .name {    .poster .name {
       white-space: nowrap;        white-space: nowrap;
   }    }
   .poster .listlevel1 {    .poster .listlevel1 {
       float: left;        float: left;
       display: inline-block;        display: inline-block;
   }    }
   .poster li.membergroup {    .poster li.membergroup {
       display: none;        display: none;
   }    }
   .poster li.avatar {    .poster li.avatar {
       float: left;        float: left;
   }    }
   .poster .subsections {    .poster .subsections {
       max-width: 200px;        max-width: 200px;
       max-height: 1.5em;        max-height: 1.5em;
       float: right;        float: right;
       text-align: right;        text-align: right;
   }    }
   .poster .membergroup {    .poster .membergroup {
       float: right;        float: right;
   }    }
   .poster .title, .poster .poster_online, .icons img {    .poster .title, .poster .poster_online, .icons img {
       display: none;        display: none;
   }    }
   .poster:after, .posterarea:before {    .poster:after, .posterarea:before {
       display: block;        display: block;
       clear: both;        clear: both;
       content: "";        content: "";
       padding-bottom: 3px;        padding-bottom: 3px;
   }    }
   .postarea, .forumtitle {    .postarea, .forumtitle {
       padding: 2px;        padding: 2px;
   }    }
   .linktree .board_moderators {    .linktree .board_moderators {
       display: none;        display: none;
   }    }
   .statsbar .bar {    .statsbar .bar {
       max-width: 12em;        max-width: 12em;
   }    }
   .signature {    .signature {
       display: none;        display: none;
   }    }
   .forumposts .windowbg, .forumposts .windowbg2 {    .forumposts .windowbg, .forumposts .windowbg2 {
       margin-bottom: 6px;        margin-bottom: 6px;
   }    }
   #moderationbuttons, a.linklevel1.button_strip_notify,    #moderationbuttons, a.linklevel1.button_strip_notify,
   a.linklevel1.button_strip_print, a.linklevel1.button_strip_send, .inline_mod_check,    a.linklevel1.button_strip_print, a.linklevel1.button_strip_send, .inline_mod_check,
   a.linklevel1.quotetonew_button, a.linklevel1.button_strip_post_poll,    a.linklevel1.quotetonew_button, a.linklevel1.button_strip_post_poll,
   a.linklevel1.post_options, .keyinfo .post_subject, li.listlevel1.quickmod_select_all,    a.linklevel1.post_options, .keyinfo .post_subject, li.listlevel1.quickmod_select_all,
   #collapse_button, p.inline.membergroups {    #collapse_button, p.inline.membergroups {
       display: none !important;        display: none !important;
   }    }
   #display_jump_to {    #display_jump_to {
       float: none;        float: none;
   }    }
   #button_profile .avatar {    #button_profile .avatar {
       display: none;        display: none;
   }    }
   .quickbuttons {    .quickbuttons {
       margin: 8px 8px 6px 3px;        margin: 8px 8px 6px 3px;
   }    }
   #search_form {    #search_form {
       float: none;        float: none;
       text-align: center;        text-align: center;
   }    }
   #search_jump_to, .search_controls {    #search_jump_to, .search_controls {
       display: none;        display: none;
   }    }
   .small_pagelinks, .sort_by_container {    .small_pagelinks, .sort_by_container {
       display: none;        display: none;
   }    }
   .profileblock_left, .profileblock_right {    .profileblock_left, .profileblock_right {
       float: none;        float: none;
       width: 100%;        width: 100%;
       overflow: auto;        overflow: auto;
   }    }
   .profile_attachments {  
     .profile_attachments .profile_attachment {
       display: none;         width: 100px; 
     }
     .profile_attachment a img {
         max-width: 100px;
         max-height: 100px;
   }    }
   .pagesection div.floatright {    .pagesection div.floatright {
       float: none;        float: none;
       display: block;        display: block;
   }    }
   .pm_icon, .pm_quickmod, .label_pms {    .pm_icon, .pm_quickmod, .label_pms {
       display: none;        display: none;
   }    }
   .popup_window {    .popup_window {
       width: 95%;        width: 95%;
   }    }
   .poster .menulevel2 {    .poster .menulevel2 {
        float: right;         float: right;
   }    }
   .poster .listlevel1:hover .menulevel2, .poster .listlevel1.sfhover .menulevel2 {    .poster .listlevel1:hover .menulevel2, .poster .listlevel1.sfhover .menulevel2 {
       left: auto;        left: auto;
       right: 0;        right: 0;
   }    }
   .poster .listlevel2 {    .poster .listlevel2 {
       max-width: 8em;        max-width: 8em;
       width: 8em;        width: 8em;
   }    }
   .bbc_table_container {    .bbc_table_container {
       max-width: 100%;        max-width: 100%;
       overflow: auto;        overflow: auto;
   }    }
   .pm_from {    .pm_from {
       text-align: left;        text-align: left;
       max-width: 6em;        max-width: 6em;
       word-wrap: break-word;        word-wrap: break-word;
   }    }
   #month_grid {    #month_grid {
       display: none;        display: none;
   }    }
   #warning_level {    #warning_level {
       max-width: 5em !important;        max-width: 5em !important;
   }    }
   /* mentions */     /* mentions */ 
   .mentionavatar .avatar {    .mentionavatar .avatar {
       max-width: 40px;        max-width: 40px;
       max-height: 40px;        max-height: 40px;
   }    }
   #list_mentions thead, .mention_log_time {    #list_mentions thead, .mention_log_time {
       display: none;        display: none;
   }    }
   ul.navigate_section li:not(:first-child):not(:last-child) a {    ul.navigate_section li:not(:first-child):not(:last-child) a {
       width: 3em;        width: 3em;
       display: block;        display: block;
       white-space: nowrap;        white-space: nowrap;
       overflow: hidden;        overflow: hidden;
       text-overflow: ellipsis;        text-overflow: ellipsis;
   }    }
   .mlist li .website, .mlist li .date_registered {    .mlist li .website, .mlist li .date_registered {
       display: none;        display: none;
   }    }
   .whos_online dt {    .whos_online dt {
       display: none;        display: none;
   }    }
   .whos online dd, .whos_online dd div {    .whos online dd, .whos_online dd div {
       display: block;        display: block;
   }    }
} }
/* This one does 480px screens at default font size. */  /* This one does 480px screens at default font size. */ 
@media screen and (max-width: 30em) { @media screen and (max-width: 30em) {
   #button_admin {    #button_admin {
       display: none;        display: none;
   }    }
   .quickbuttons .modified {    .quickbuttons .modified {
       display: none;        display: none;
   }    }
   .mlist li div.posts {    .mlist li div.posts {
       display: none;        display: none;
   }    }
   .shortcuts {    .shortcuts {
       display: none;        display: none;
   }    }
} }