[middy♥]

here is the site in question! Now! I have a few issues I'm running into, and I want to get them fixed before I continue on with this skin. Please bear with the dumb questions. This is the first v5 skin I'm making. Everything is from scratch. ;o;

1. How do I make the notification bubbles appear next to the "Profile" and "Messages" section? How do I make it a circle? Atm it's kinda lopsided.
2. My info sticks out of the tabbed table. How do I get it to go back in there?
3. Scroll down to my info center. I, for the life of me, cannot get my table to have padding/cellpadding/cellspacing/whatever so that there is SPACE between the columns! I don't want them all smushed. ;o;
4. Take a look here. I like having those little squares pop up so that it makes moving threads easier, but how do I make it pop up again? They're all showing up at once...
5. Take a look here. My post does not align the entire width of the board! It stops about halfway... I noticed it as I was trying to make the date align all the way to the right. >.>;
6. How do I do the "transition" text? I want to use it on my board link names but I don't know what to put where and... ugh. So frustrating.

[Egao, Egao Everywhere]

I. I've always thought it was something automatic. Can you give a screenshot?

II. I can't see your source code but I think you're using a pure CSS3 carousel? If so, make sure the width of the <li> is 25%, the <ul> as 400% and sp-parallax-bg as 100%. I might not have gotten the classes right but that sizes should go that way from the innermost class to the outermost class.

III. Cellspacing is what you're looking for. Add it in the table tag. Don't add in px. eg. <table cellspacing="10">

IV. You mean the boxes you tick when mass moderating posts? If so, I can't see them since I'm a guest. Screenshot?

v. Could you show to me the source code / style sheets?

VI. Transition is just the method to make it smoother. What you're after is animation. I suppose you want the links to change color upon hover or something similar?

div { color: red;
transition: all 0.5s ease;
}

div:hover { color: green;
transition: all 0.5s ease;
}

The :hover selector will allow you to specify the style of the class when it is hovered. To make the animation smooth, you add in transitions. Putting transition in div:hover allows the default link to smoothly turn to green. Putting transition in div allows the hovered link to smoothly turn back to red.

There are a lot of methods you could do with transitions and animations. You could do more research on it if you want but the transition code I provided does the trick. You might want to make sure it's cross-browser friendly though. css-tricks.com/almanac/properties/t/transition/ (see the last block of code)

[middy♥]

Thanks for the reply!

Firstly, here is all of the source coding that you asked for.

CSS
@empty: ~"";

.rounded-corners(@a, @b, @c, @d) {
border-radius: @arguments;
-moz-border-radius: @arguments;
-webkit-border-radius: @arguments;
}

.rounded-corners(@a, @b, @c) {
border-radius: @arguments;
-moz-border-radius: @arguments;
-webkit-border-radius: @arguments;
}

.rounded-corners(@a, @b) {
border-radius: @arguments;
-moz-border-radius: @arguments;
-webkit-border-radius: @arguments;
}

.rounded-corners(@a: 5px) {
border-radius: @arguments;
-moz-border-radius: @arguments;
-webkit-border-radius: @arguments;
}

.box-shadow(@h-shadow: 2px, @v-shadow: 2px, @blur: 2px, @box-shadow-color: #333333) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}

.box-sizing(@box-model: border-box) {
box-sizing: @arguments;
-moz-box-sizing: @arguments;
-webkit-box-sizing: @arguments;
-ms-box-sizing: @arguments;
}

.hsla-bgcolor-safe(transparent, @alpha) {
background-color: transparent;
}

.hsla-bgcolor-safe(@color, @alpha) when (iscolor(@color)) {
background-color: @color;
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}

// Reference: http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
.absolute-center() { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }

/* ------ Colors & Theme Creator CSS Variables ------ */
/* CSS Variables that are connected to not only the Visual Editor, but the Colors & Theme Creator section. */

@banner_height: 100px;
@banner_background_color: #999999;
@banner_background_image: none;
@banner_background_position: left center;
@banner_text_color: #FFFFFF;
@banner_text_align: center;
@wrapper_width: 950px;
@all_gradients: none;
@body_background_image: url('http://storage.proboards.com/6158448/i/nxEJRlIQFi3IP1N8ZXE9.png');

@body_background_color: #eeeeee;
@default_forum_text_color: #989898;
@link_color: #79c1e0;
@link_visited_color: #79c1e0;

@title_bar_background_color: #ffffff;
@title_text_color: #79c1e0;
@title_buttons_background_color: #372c6f;
@title_buttons_color: #FFFFFF;

@buttons_background_color: #c7c7c7;
@buttons_text_color: #989898;

@container_background_color_1: #FFFFFF;
@container_text_color_1: #989898;
@container_background_color_2: #ffffff;
@container_text_color_2: #989898;
@container_links_color: #79c1e0;
@container_highlight_color: #ffffff;
@container_outer_border_color: #ffffff;
@container_inner_border_color: #ffffff;

@pagination_background_color: #FFFFFF;
@pagination_text_color: #999999;
@pagination_hover_color: #EFEFEF;


/* ------ Global Styles ------ */
/* All the global styles (that appear pretty much everywhere on your forum) for your theme will be within this section which includes your Header, Navigation Menu Bar, Navigation Tree, News Slider, Containers, Tabs, Tables & Lists, and Pages also known as the Pagination Menu! */

/* Common Elements and Classes */
@body_background_attachment: fixed;
@body_background_repeat: @empty;
@body_background_position: @empty;
@default_forum_text_font_style: @empty;
@default_forum_text_font_weight: @empty;
@default_forum_text_font_size: 9pt;
@default_forum_text_font_family: Tahoma, Geneva, sans-serif;
@default_forum_text_decoration: none;
@default_forum_text_case: none;
@default_forum_text_caps: normal;
@bold_weight: 700;
@bold_size: @empty;
@italic_style: italic;
@link_font: 100% @default_forum_text_font_family;
@link_decoration: none;
@link_active_color: @link_color;
@link_active_decoration: @link_decoration;
@link_visited_decoration: @link_decoration;
@link_hover_color: @link_color;
@link_hover_decoration: @link_decoration;
@h2_color: #6cbcde;
@h2_font: normal  100% Arial;
@h2_decoration: @empty;
@h2_case: @empty;
@h2_caps: @empty;
@h3_color: @empty;
@h3_font: 140% @default_forum_text_font_family;
@h3_decoration: @empty;
@h3_case: @empty;
@h3_caps: @empty;
@timestamp_color: lighten(@default_forum_text_color, 15%);
@timestamp_font: italic 85% @default_forum_text_font_family;
@description_color: @empty;
@description_font: italic 85% @default_forum_text_font_family;
@viewing_color: @empty;
@viewing_font: 75% @default_forum_text_font_family;
@small_desc_color: lighten(@default_forum_text_color, 15%);
@small_desc_font: 70% @default_forum_text_font_family;
@shadow_color: #333333;
* { word-wrap: break-word; }
body { background-color: @body_background_color; background-image: @body_background_image; background-attachment: @body_background_attachment; background-repeat: @body_background_repeat; background-position: @body_background_position; line-height: 1.2; color: @default_forum_text_color; font-style: @default_forum_text_font_style; font-weight: @default_forum_text_font_weight; font-size: @default_forum_text_font_size; font-family: @default_forum_text_font_family; text-decoration: @default_forum_text_decoration; text-transform: @default_forum_text_case; font-variant: @default_forum_text_caps; }

/*
#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }
*/

#wrapper {
width: @wrapper_width;
overflow-x: hidden;
margin: 20px auto 20px auto;
padding: 15px 20px 5px 20px;
background-color:#ffffff;
border: 5px solid #e5e5e5;
border-radius: 20px;
}

table { table-layout: fixed; }
a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; }
:visited { color: @link_visited_color; text-decoration: @link_visited_decoration; }
a:hover { color: @link_hover_color; text-decoration: @link_hover_decoration; }
a:active { color: @link_active_color; text-decoration: @link_active_decoration; }
a.text { cursor: default; }
h1, h2 { color: @h2_color; font: @h2_font; text-decoration: @h2_decoration; text-transform: @h2_case; font-variant: @h2_caps; }
h3 { color: @h3_color; font: @h3_font; text-decoration: @h3_decoration; text-transform: @h3_case; font-variant: @h3_caps; }
abbr.time, .last-edited, #event_range .time { color: @timestamp_color; font: @timestamp_font; }
abbr.time.recent_time { font-weight: bold; font-style: normal; }
blockquote { display: block; margin: 15px 40px; }
sub, sup { font-size: 80%; }
.bold, b { font-weight: @bold_weight; font-size: @bold_size; }
.italic { font-style: @italic_style; }
.description { color: @description_color; font: @description_font; }
.viewing { color: @viewing_color; font: @viewing_font; }
.small { font: @small_desc_font; vertical-align: middle; }
.note { color: @small_desc_color; }
.placeholder, .placeholder-empty { color: #888888; }
.foot abbr.time, .small abbr.time { font-size: 100%; }
.pointer { cursor: pointer; }
.border-round { border-width: 1px; border-style: solid; border-color: @container_inner_border_color; .rounded-corners(); }
.clear { clear: both; }
.float-right { float: right; }
.float-left { float: left; }
.hide, .spoiler { display: none; }
.absolute-hide { display: none; position: absolute; }
.block-item { display: block; }
.center { text-align: center; }
.no-right-margin { margin-right: 0px; }
.valigntt { vertical-align: text-top; }
.auto-overflow { overflow: auto; }
.inline-block { display: inline-block; }
.break-word { word-wrap: break-word; }
.nowrap { white-space: nowrap; }
.aria-hidden { width: 1px; height: 1px; overflow: hidden; text-indent: -1000px; position: absolute; top: 0; left: 0; display: block; }
.wysiwyg-textarea { width: 100%; height: 200px; }
.post-options, .message-options { display: none; }
.options_menu { max-width: 190px; }
.posting-options-list.options_menu { max-width: 100%; }
.options_menu li { height: 28px; }
.options_menu a { height: 20px; line-height: 20px !important; }
.options_menu hr { color: #AAAAAA; background-color: #AAAAAA; height: 1px; border: none; }
.controls .checkbox { display: none; }
.clickable { cursor: pointer; }

/* Generic Padding Classes */
.pad-all-thin { padding: 3px !important; }
.pad-all { padding: 5px !important; }
.pad-all-double { padding: 10px !important; }
.pad-all-thick { padding: 20px !important; }
.pad-sides-thin { padding: 0px 3px !important; }
.pad-sides { padding: 0px 5px !important; }
.pad-sides-double { padding: 0px 10px !important; }
.pad-sides-thick { padding: 0px 20px !important; }
.pad-top-bottom-thin { padding: 3px 0px !important; }
.pad-top-bottom { padding: 5px 0px !important; }
.pad-top-bottom-double { padding: 10px 0px !important; }
.pad-top-bottom-thick { padding: 20px 0px !important; }
.pad-top-thin { padding-top: 3px !important; }
.pad-top { padding-top: 5px !important; }
.pad-top-double { padding-top: 10px !important; }
.pad-top-thick { padding-top: 20px !important; }
.pad-right-thin { padding-right: 3px !important; }
.pad-right { padding-right: 5px !important; }
.pad-right-double { padding-right: 10px !important; }
.pad-right-thick { padding-right: 20px !important; }
.pad-bottom-thin { padding-bottom: 3px !important; }
.pad-bottom { padding-bottom: 5px !important; }
.pad-bottom-double { padding-bottom: 10px !important; }
.pad-bottom-thick { padding-bottom: 20px !important; }
.pad-left-thin { padding-left: 3px !important; }
.pad-left { padding-left: 5px !important; }
.pad-left-double { padding-left: 10px !important; }
.pad-left-thick { padding-left: 20px !important; }
.pad-all-sides-thick { padding: 5px 20px !important; }

/* Status Text */
@status_text_success_color: @container_text_color_1;
@status_text_failure_color: @container_text_color_1;
.saved { color: @status_text_success_color; }
.status-box { font-weight: 800; margin-left: 5px; .rounded-corners(); padding: 1px 5px; }
.status-box.error { background-color: @container_background_color_1; }
.status-box.saved { background-color: @container_background_color_1; }
.error { color: @status_text_failure_color; }
.flood-control { padding: 5px; color: @status_text_failure_color; }
.posting-errors { padding: 5px; color: @status_text_failure_color; }
.noscript-form-error { color: @status_text_failure_color; background: @container_background_color_1; font-weight: 800; .rounded-corners(); padding: 5px; margin: 0 0 10px 0; }
.ui-form-error { display: none; position: absolute; z-index: 9000; color: @container_text_color_1; border: 2px solid @status_text_failure_color; padding: 4px; font-size: 80%; background-color: @container_background_color_1; }
input.ui-error { background-color: @container_background_color_1; color: @status_text_failure_color; padding: 2px; }
.shoutbox_error { color: @status_text_failure_color; }

/* Header */
@banner_background_repeat: repeat;
@banner_text_font: normal normal bold 30px "Trebuchet MS", Verdana, Arial;
@banner_text_decoration: none;
@banner_text_case: none;
@banner_text_caps: normal;
@banner_text_shadow: 2px 2px 2px #555555;
header { display: block; position: relative; margin-bottom: 10px; }
#banner-container { display: table; width: 100%; }
#banner { display: table-cell; height: @banner_height; background-color: @banner_background_color; background-image: @banner_background_image; background-position: @banner_background_position; background-repeat: @banner_background_repeat; vertical-align: middle; padding: 0px 20px; text-align: @banner_text_align; overflow: hidden; }
a#logo { vertical-align: middle; color: @banner_text_color; text-shadow: @banner_text_shadow; text-decoration: @banner_text_decoration; font: @banner_text_font; font-variant: @banner_text_caps; text-transform: @banner_text_case; white-space: normal; word-break: break-all; }
a#logo:hover { color: @banner_text_color !important; text-decoration: @banner_text_decoration !important; }

/* Welcome Text / Login / Logout Links */
@welcome_text_color: #ffffff;
@welcome_text_font: 1em "Trebuchet MS", Verdana, Arial;
@welcome_text_shadow: 0 0 2px;
@welcome_links_color: #6cbcde;
@welcome_links_font: @welcome_text_font;
@welcome_links_decoration: none;
@welcome_links_shadow: none;
#welcome { text-align: right; color: @welcome_text_color; font: @welcome_text_font; text-shadow: @welcome_text_shadow; float: right; vertical-align: middle; line-height: 31px !important; }
#welcome a { color: @welcome_links_color; text-decoration: @welcome_links_decoration; text-shadow: @welcome_links_shadow; font: @welcome_links_font; }

/* Navigation Menu */
@nav_bar_background: #372c6f left center repeat-x scroll;
@nav_bar_border: 0px solid @container_outer_border_color;
@nav_bar_border_radius: 0 0 0px 0px;
@nav_bar_button_color: @title_text_color;
@nav_bar_button_font: normal normal 1em "Courier New", Courier, monospace;
@nav_bar_button_decoration: none;
@nav_bar_button_shadow: inherit;
@nav_bar_button_background: scroll;
@nav_bar_button_hover_color: @nav_bar_button_color;
@nav_bar_button_hover_font: @nav_bar_button_font;
@nav_bar_button_hover_decoration: @nav_bar_button_decoration;
@nav_bar_button_hover_shadow: @nav_bar_button_shadow;
@nav_bar_button_hover_background: scroll;
@nav_bar_button_current_color: @title_buttons_color;
@nav_bar_button_current_font: @nav_bar_button_font;
@nav_bar_button_current_decoration: @nav_bar_button_decoration;
@nav_bar_button_current_shadow: @nav_bar_button_shadow;
@nav_bar_button_current_background: #c7c7c7 center repeat-x scroll;
@nav_bar_bubble_text_color: #000000;
@nav_bar_bubble_font: .8em "Trebuchet MS", Verdana, Arial;
@nav_bar_bubble_background: #FFFFFF;
@nav_bar_bubble_border_radius: 10px 10px 10px 10px;
@nav_bar_bubble_box_shadow: 2px 2px 2px #555555;
#navigation-menu { padding: 0 8px; background: @nav_bar_background; border: @nav_bar_border; .rounded-corners(@nav_bar_border_radius); }
#navigation-menu a { position: relative; }
#navigation-menu > ul, #navigation-menu > ul li { float: left; }
#navigation-menu > ul li a { display: inline-block; padding: 0 .75em; color: @nav_bar_button_color; font: @nav_bar_button_font; text-decoration: @nav_bar_button_decoration; text-shadow: @nav_bar_button_shadow; background: @nav_bar_button_background; line-height: 31px !important; }
#navigation-menu > ul li:hover a { color: @nav_bar_button_hover_color !important; font: @nav_bar_button_hover_font; text-decoration: @nav_bar_button_hover_decoration !important; text-shadow: @nav_bar_button_hover_shadow; background: @nav_bar_button_hover_background; line-height: 31px !important; }
#navigation-menu > ul li a.state-active { color: @nav_bar_button_current_color !important; font: @nav_bar_button_current_font; text-decoration: @nav_bar_button_current_decoration !important; text-shadow: @nav_bar_button_current_shadow; background: @nav_bar_button_current_background; line-height: 31px !important; }
#navigation-menu div.tip-holder { position: absolute; top: -8px; right: 3px; display: inline-block; }
#navigation-menu div.tip-holder div.tip-number { padding: 3px 7px 2px 7px; background-color: @nav_bar_bubble_background; .rounded-corners(@nav_bar_bubble_border_radius); font: @nav_bar_bubble_font; line-height: .8em; text-shadow: none; height: .8em; color: @nav_bar_bubble_text_color; margin-top:32px; }
#navigation-menu div.tip-holder span.tip { border-top: 0px solid @nav_bar_bubble_background; border-left: 0px solid transparent; border-right: 0px solid transparent; position: absolute; left: 0px; }

/* Navigation Tree + Participated Button + News Bar */
@nav_tree_color: @container_text_color_1;
@nav_tree_font: .8em @default_forum_text_font_family;
@nav_tree_decoration: none;
@nav_tree_background_color: @container_background_color_1;
@nav_tree_border_width: 1px;
@nav_tree_border_style: solid;
@nav_tree_border_color: #dddddd;
@nav_tree_border_radius: 0px 0px 0px 0px;
@nav_tree_hover_color: @container_text_color_1;
@nav_tree_hover_font: @nav_tree_font;
@nav_tree_hover_decoration: none;
@nav_tree_hover_background_color: #f8f8f8;
@nav_tree_box_shadow: 2px 2px 2px #555555;
.recent-threads-button, #navigation-tree { color: @nav_tree_color; border-width: @nav_tree_border_width; border-style: @nav_tree_border_style; border-color: @nav_tree_border_color; background: @nav_tree_background_color; margin-bottom: 10px; height: 20px; .rounded-corners(@nav_tree_border_radius); }
.recent-threads-button.new .new-icon { display: inline-block; }
#navigation-tree { overflow: hidden; }
#nav-tree { white-space: nowrap; }
.popup_html { position: absolute; top: 0; left: 0; z-index: 999999; }
#nav-tree ul { display: none; list-style-type: none; border-width: @nav_tree_border_width; border-style: @nav_tree_border_style; border-color: @nav_tree_border_color; background-color: @nav_tree_background_color; box-shadow: @nav_tree_box_shadow !important; }
#nav-tree > li { display: inline-block; position: relative; height: 20px; }
#nav-tree > li a { font: @nav_tree_font; color: @nav_tree_color; text-decoration: @nav_tree_decoration; display: block; padding: 4px 10px 4px 15px; margin: 0 1px 0 5px; }
#nav-tree > li:hover, #nav-tree .ui-menu li:hover { color: @nav_tree_hover_color; background-color: @nav_tree_hover_background_color;  }
#nav-tree > li:hover > div > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }
#nav-tree .ui-menu li:hover > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }
#nav-tree > li:first-child { .rounded-corners(@nav_tree_border_radius, 0, 0, @nav_tree_border_radius); }
#nav-tree > li:first-child a { margin-left: -2px; }
#nav-tree .ui-menu { display: none; position: absolute; float: left; }
#nav-tree .ui-menu a { .rounded-corners(0px); }
#nav-tree .ui-menu li { position: relative; white-space: nowrap; padding: 2px 10px 2px 5px; }
#nav-tree .ui-menu li ul { display: none; z-index: 9999; position: absolute; }
#nav-tree .ui-menu li .arrow { position: absolute; right: 2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; display: none; }
#nav-tree .ui-menu li.ui-menu-has-sub-menu > .arrow { display: block; }
#nav-tree li.new_span > a > .new-icon { float: none; display: inline-block; }
#nav-tree li.state-selected > a { font-weight: bold !important; }
#nav-tree .menu_arrow { width: 0; height: 0; position: absolute; top: 0px; right: -10px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_border_color; z-index: 1001; }
#nav-tree .menu_arrow span { width: 0; height: 0; position: absolute; top: -10px; left: -11px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_background_color; z-index: 1002; }
#nav-tree > li:hover .menu_arrow { border-color: transparent transparent transparent @nav_tree_border_color; }
#nav-tree > li:hover .menu_arrow span { border-color: transparent transparent transparent @nav_tree_hover_background_color; }
.popup_html ul { display: none; list-style-type: none; border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; background-color: @nav_tree_background_color; box-shadow: @nav_tree_box_shadow; }
.popup_html li a { font: @nav_tree_font; color: @nav_tree_color; text-decoration: @nav_tree_decoration; display: block; padding: 4px 10px 4px 15px; margin: 0 1px 0 5px; }
.popup_html li:hover, .popup_html .ui-menu li:hover { color: @nav_tree_hover_color; background-color: @nav_tree_hover_background_color;  }
.popup_html li:hover > div > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }
.popup_html .ui-menu li:hover > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }
.popup_html li { .rounded-corners(@nav_tree_border_radius, 0, 0, @nav_tree_border_radius); }
.popup_html li a { margin-left: -2px; }
.popup_html .ui-menu { display: none; position: absolute; float: left; z-index: 11; }
.popup_html .ui-menu a { .rounded-corners(0px); overflow: hidden; max-width: 550px; }
.popup_html .ui-menu li { position: relative; white-space: nowrap; padding: 2px 15px 2px 5px; }
.popup_html .ui-menu li ul { display: none; z-index: 9999; position: absolute; }
.popup_html .ui-menu li .arrow { position: absolute; right: 2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; display: none; }
.popup_html .ui-menu li.ui-menu-has-sub-menu > .arrow { display: block; }
.popup_html li.new_span > a > .new-icon { float: none; display: inline-block; }
.popup_html li.state-selected > a { font-weight: bold !important; }
.popup_html .menu_arrow { width: 0; height: 0; position: absolute; top: 0px; right: -10px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_border_color; z-index: 1001; }
.popup_html .menu_arrow span { width: 0; height: 0; position: absolute; top: -10px; left: -11px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_background_color; z-index: 1002; }
.popup_html li:hover .menu_arrow { border-color: transparent transparent transparent @nav_tree_border_color; }
.popup_html li:hover .menu_arrow span { border-color: transparent transparent transparent @nav_tree_hover_background_color; }

/* Participated Button */
.recent-threads-button { font: @nav_tree_font; cursor: pointer; float: right; height: 14px; margin: 0 0 10px 10px; padding: 3px 6px 3px 6px; text-align: center; }
.recent-threads-button:hover { color: @nav_tree_hover_color; font: @nav_tree_hover_font; text-decoration: @nav_tree_hover_decoration; background-color: @nav_tree_hover_background_color; }

/* News Bar */
#news { color: @nav_tree_color; font: @nav_tree_font; text-decoration: @nav_tree_decoration; z-index: 9; height: 20px; font: @nav_tree_font; background-color: @nav_tree_background_color; overflow: hidden; margin: 0 auto 10px; border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; .rounded-corners(@nav_tree_border_radius); }
#news .items { height: 20px; position: relative; overflow: hidden; }
#news .items > div > div { padding: 0 10px; line-height: 20px !important; }
#news .items div img { vertical-align: text-bottom; }
#news .nav { float: left; background-position: center; }
#news .nav > span { border-width: 0px 1px 0px 0px; border-style: solid; border-color: transparent; cursor: default; float: left; display: inline-block; padding: 0 3px; height: 20px; }
#news .nav > span.title { text-align: center; display: inline-block; height: 20px; padding: 0px 6px; line-height: 20px !important; }
#news .nav .arrow.left { .rounded-corners(@nav_tree_border_radius, 0, 0, @nav_tree_border_radius); }
#news .nav .arrow.left span { border-right-color: @nav_tree_border_color; }
#news .nav .arrow.right span { border-left-color: @nav_tree_border_color; }
#news .nav:hover { background-color: @nav_tree_hover_background_color; }
#news .nav:hover > span { border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; border-width: 0px @nav_tree_border_width 0px 0px; }
#news .nav:hover .arrow { background-color: @nav_tree_hover_background_color; }

/* Participated Dialog */
/* This controls the styles of the pop-up that appears when clicking on the "Participated" button to the right of the Navigation Tree. */
@participated_background: @container_background_color_1;
@participated_inner_border: 1px solid @container_inner_border_color;
@participated_text_color: @container_text_color_1;
@participated_text_font: @empty;
@participated_links_color: @empty;
@participated_links_font: @empty;
@participated_links_decoration: @empty;
@participated_subject_align: left;
@participated_last_post_align: right;
@participated_hover_background: @container_highlight_color;
@participated_hover_text_color: @empty;
@participated_hover_text_font: @empty;
@participated_hover_links_color: @empty;
@participated_hover_links_font: @empty;
@participated_hover_links_decoration: @empty;
#recent-threads { background: @participated_background; color: @participated_text_color; font: @participated_text_font; }
#recent-threads a { color: @participated_links_color; font: @participated_links_font; text-decoration: @participated_links_decoration; }
#recent-threads th { border-bottom: 1px solid; padding: 10px; }
#recent-threads .subject { text-align: @participated_subject_align; }
#recent-threads .latest { text-align: @participated_last_post_align; }
#recent-threads th, #recent-threads td { border: @participated_inner_border; border-top-width: 0px; border-left-width: 0px; }
#recent-threads tbody tr:hover { color: @participated_hover_text_color; font: @participated_hover_text_font; background: @participated_hover_background; }
#recent-threads tbody tr:hover a { color: @participated_hover_links_color; font: @participated_hover_links_font; text-decoration: @participated_hover_links_decoration; }

/* Selection Dialogs */
#thread_listing, #conversation_listing { padding: 0; }

/* CSS Arrows */
.arrow { position: relative; display: inline-block; width: 10px; height: 10px; z-index: 10; }
.arrow > span { content: ''; position: absolute; left: 50%; top: 50%; display: block; border-color: transparent; border-style: solid; border-width: 4px; height: 0; width: 0; }
.arrow.up > span { margin-left: -4px; margin-top: -6px; border-bottom-color: @container_text_color_1; }
.arrow.right > span { margin-left: -2px; margin-top: -4px; border-left-color: @container_text_color_1; }
.arrow.down > span { margin-left: -4px; margin-top: -2px; border-top-color: @container_text_color_1; }
.arrow.left > span { margin-left: -7px; margin-top: -4px; border-right-color: @container_text_color_1; }
.arrow.big > span { border-width: 5px; }
.arrow.big.up > span { margin-left: -5px; margin-top: -7px; }
.arrow.big.right > span { margin-top: -5px; }
.arrow.big.down > span { margin-left: -5px; }
.arrow.big.left > span { margin-left: -8px; margin-top: -5px; }

/* Title Bars */
@title_bar_background_image: @all_gradients;
@title_bar_background_attachment: @empty;
@title_bar_background_repeat: repeat-x;
@title_bar_background_position: left center;
@title_bar_padding: 0 10px;
@title_bar_border: @empty;
@title_bar_border_radius: 0px 0px 0 0;
@title_text_font: bold 100% @default_forum_text_font_family;
@title_text_height: 30px;
@title_text_decoration: @empty;
@title_text_transform: @empty;
@title_text_variant: @empty;
@title_text_align: right;
@title_text_shadow: @empty;
@title_buttons_padding: 0 10px;
@title_buttons_padding_hover: 0 10px;
@title_buttons_background_image: @all_gradients;
@title_buttons_background_attachment: scroll;
@title_buttons_background_repeat: repeat-x;
@title_buttons_background_position: left center;
@title_buttons_font: 11px Courier New;
@title_buttons_line_height: 30px;
@title_buttons_line_height_hover: 30px;
@title_buttons_decoration: @empty;
@title_buttons_hover_background: @empty;
@title_buttons_hover_color: @title_buttons_color;
@title_buttons_hover_font: @title_buttons_font;
@title_buttons_hover_decoration: @title_buttons_decoration;
.title-bar, .ui-dialog .ui-dialog-titlebar { padding: @title_bar_padding; background-color: @title_bar_background_color; background-image: @title_bar_background_image; background-attachment: @title_bar_background_attachment; background-repeat: @title_bar_background_repeat; background-position: @title_bar_background_position; border: @title_bar_border; .rounded-corners(@title_bar_border_radius); text-align: @title_text_align; }
.title-bar h1, .container > .title-bar h2, .container > .title-bar h3, .ui-dialog .ui-dialog-title { color: @title_text_color; font: @title_text_font; line-height: @title_text_height !important; text-decoration: @title_text_decoration; font-variant: @title_text_variant; text-transform: @title_text_transform; text-shadow: @title_text_shadow; }
.title-bar > .controls li a, .container > .title-bar > .controls li div { color: #000000!important; background-color: #c7c7c7; background-image: @title_buttons_background_image; background-attachment: @title_buttons_background_attachment; background-repeat: @title_buttons_background_repeat; background-position: @title_buttons_background_position; font: @title_buttons_font; text-decoration: @title_buttons_decoration; line-height: @title_buttons_line_height; padding: @title_buttons_padding; }
.title-bar > .controls:hover li a, .container > .title-bar > .controls:hover li div { color: @title_buttons_hover_color !important; background: @title_buttons_hover_background; font: @title_buttons_hover_font; text-decoration: @title_buttons_hover_decoration !important; line-height: @title_buttons_line_height_hover; padding: @title_buttons_padding_hover; }

/* Thead Bars */
@thead_background: #eeeeee   scroll;
@thead_borders: 0px solid;
@thead_font: normal bold 1em @default_forum_text_font_family;
.container table.list > thead > tr > th { background: @thead_background; border: @thead_borders; font: @thead_font; }

/* Containers */
@content_background: @container_background_color_1;
@content_border_width: 1px;
@content_border_style: solid;
@content_border_radius: 0 0 0px 0px;
@content_area_background: @container_background_color_1;
@content_area_border: 1px solid #e6e6e6;
@content_area_border_radius: 0px 0px 0px 0px;
@content_area_text_color: @container_text_color_1;
@content_area_text_font: @empty;
@content_area_links_font: @content_area_text_font;
@content_area_links_decoration: @empty;
.container > .content, .ui-dialog .ui-dialog-content, .ui-dialog .ui-dialog-buttonpane, .container.copy .clone { background: @content_background; border-width: @content_border_width; border-style: @content_border_style; border-color: @container_outer_border_color; border-top-width: 0px; padding: 0px; .rounded-corners(@content_border_radius); }
.content-box { background: @content_area_background; border: @content_area_border; .rounded-corners(@content_area_border_radius); color: @content_area_text_color; font: @content_area_text_font; }
.content-box a, .container a { color: @container_links_color; font: @content_area_links_font; text-decoration: @content_area_links_decoration; }
.container > .control-bar { background: @action_bar_background; border: @action_bar_border; border-top-width: 0px; border-bottom-width: 0px; .rounded-corners(@action_bar_border_radius); margin-bottom: 0px; }
.container { margin-bottom: 10px; color: @container_text_color_1; }
.container > .title-bar h1, .container > .title-bar h2, .container > .title-bar h3 { display: inline; }
.container abbr.time { color: @timestamp_color; }
.container .note { color: lighten(@container_text_color_1, 15%); }

/* Action Bars */
@action_bar_background: @container_inner_border_color;
@action_bar_border: 1px solid @container_outer_border_color;
@action_bar_border_radius: @empty;
@action_bar_content_border_radius: 0px;
.container > .title-bar > .controls { float: right; }
.container > .control-bar > .controls { float: right; padding: 5px; color: #000000; }
.container > .content { overflow: hidden; }
.controls > li a { display: inline-block; }
.control-bar .ui-pagination { padding: 5px 5px 3px 10px; }
.control-bar > div.float-left { padding-left: 10px; padding-top: 8px; padding-bottom: 8px; }
.control-bar > div.float-left img { padding-right: 5px; }
.control-bar .controls ul { z-index: 233; }
.control-bar .controls .ui-selectMenu-box { margin-left: 10px; }
.control-bar .ui-search { padding-bottom: 5px !important; }
.ui-selectMenu-box { border: 1px solid darken(@container_inner_border_color, 20%); border-radius: @action_bar_content_border_radius; }
.ui-selectMenu-box .arrow.down > span { border-top-color: #000000; }

/* Dialogs */
/* Dialogs are what you might know as pop-ups. Anything that appears when you click on something is called a dialog! */
.ui-dialog { .rounded-corners(); .hsla-bgcolor-safe(@container_outer_border_color, .5); }
.ui-dialog .ui-dialog-titlebar-close { position: static !important; margin: 0 !important; float: right; }
.ui-dialog .ui-dialog-titlebar-close:hover span, .ui-dialog .ui-dialog-titlebar-close:focus span { background-image:url('//images.proboards.com/v5/ui-icons.png'); background-position: -20px, 0px; }
.ui-dialog div.ui-dialog-buttonpane.ui-widget-content { text-align: right; margin-top: 10px; padding: 0 0 0 10px; border-width: 1px; .rounded-corners(5px); }
.ui-dialog div.section { text-align: center; background-color: @container_background_color_1; border-width: 1px; border-style: solid; border-color: @container_inner_border_color; .rounded-corners(10px); padding: 10px; margin: 10px 0; }

/* Search Bars */
.ui-search .search-input.filters-input { .rounded-corners(); }
.ui-search .search-input { line-height: 16px !important; padding: 2px; border-width: 1px; border-style: solid; border-color: darken(@container_inner_border_color, 20%); border-radius: @action_bar_content_border_radius 0 0 @action_bar_content_border_radius; }
.ui-search .search-filters-button { display: inline-block; width: auto; height: auto; margin-left: -2px; min-height: 19px; padding: 3px 4px 2px 4px; border-width: 1px 1px 1px 0px !important; border-style: solid; border-color: darken(@container_inner_border_color, 20%); border-radius: 0 @action_bar_content_border_radius @action_bar_content_border_radius 0; vertical-align: top; cursor: pointer; }
.ui-search .search-filters-button .icon { display: inline-block; width: auto; height: auto; }
.ui-search .search-filters-button.state-active { background: @title_buttons_color; }
.event_icon { cursor: pointer; }
.container.copy .clone { .rounded-corners(0px); border-collapse: inherit; border-bottom-width: 0px; }

/* Pagination Menus */
@pagination_micro_background_color: @pagination_background_color;
@pagination_micro_hover_color: @pagination_hover_color;
@pagination_micro_text_color: @pagination_text_color;
.ui-pagination { display: inline-block; overflow: hidden; }
.ui-pagination li { cursor: pointer; list-style: none; float: left; margin-right: 2px; }
.ui-pagination li:last-child { margin-right: 0px; }
.ui-pagination li > a, .ui-pagination li > div { border-radius: @action_bar_content_border_radius; font-weight: bold; text-decoration: none; background-color: @pagination_background_color; border: 1px solid darken(@container_inner_border_color, 20%); color: @pagination_text_color; display: inline-block; padding: 4px 5px;  }
.ui-pagination li > a:hover, .ui-pagination li > div:hover { border-style: solid; text-decoration: none; background-color: @pagination_hover_color; color: @pagination_text_color; border-color: mix(@pagination_text_color, @pagination_background_color, 70%); }
.ui-pagination li.state-selected > a { border: 0px solid transparent; background-color: @pagination_text_color; color: @pagination_background_color; padding: 5px 6px; cursor: default; }
.ui-pagination li.state-disabled > a { cursor: default; padding: 4px 5px; border-width: 1px; border-style: solid; opacity: .5; filter: alpha(opacity=50); }
.ui-pagination li.state-disabled > a:hover { background-color: @pagination_background_color; border-color: mix(@pagination_text_color, @pagination_background_color, 40%); }
.ui-micro-pagination { overflow: hidden; font-size: 75%; margin-top: 3px; }
.ui-micro-pagination ul, .ui-micro-pagination ul li div { display: inline; }
.ui-micro-pagination ul li { list-style: none; display: inline; margin-right: 2px; }
.ui-micro-pagination ul li:last-child { margin-right: 0px; }
.ui-micro-pagination ul li > a { display: inline-block; text-decoration: none; padding: 0 3px; color: @pagination_micro_text_color; background-color: @pagination_micro_background_color; border: 1px solid mix(@pagination_text_color, @pagination_background_color, 40%); border-radius: @action_bar_content_border_radius; }
.ui-micro-pagination ul li > a:hover { color: @pagination_micro_text_color; border: 1px solid mix(@pagination_text_color, @pagination_background_color, 70%); background-color: @pagination_micro_hover_color; }

/* Tabs */
@tabs_background: @container_inner_border_color none left center repeat-x;
@tabs_border: 1px solid @container_inner_border_color;
@tabs_border_radius: 0px 0px 0 0;
@tabs_unselected_background: @container_background_color_2;
@tabs_unselected_border: @empty;
@tabs_unselected_border_radius: 0px 0px 0 0;
@tabs_unselected_text_color: @container_links_color;
@tabs_unselected_text_font: 100% @default_forum_text_font_family;
@tabs_unselected_text_decoration: none;
@tabs_selected_background: @container_background_color_1;
@tabs_selected_border: @tabs_unselected_border;
@tabs_selected_border_radius: @tabs_unselected_border_radius;
@tabs_selected_text_color: @container_links_color;
@tabs_selected_text_font: @tabs_unselected_text_font;
@tabs_selected_text_decoration: @tabs_unselected_text_decoration;
@tabs_hover_background: @container_highlight_color;
@tabs_hover_border: @tabs_unselected_border;
@tabs_hover_border_radius: @tabs_unselected_border_radius;
@tabs_hover_text_color: @tabs_unselected_text_color;
@tabs_hover_text_font: @tabs_unselected_text_font;
@tabs_hover_text_decoration: @tabs_unselected_text_decoration;
.ui-tabMenu ul { background: @tabs_background; border: @tabs_border; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; padding: 5px 5px 0 5px; }
.ui-tabMenu ul li { height: 26px; list-style: none; float: left; top: 1px; margin: 0 2px 1px 0; position: relative; background: @tabs_unselected_background; border: @tabs_unselected_border; .rounded-corners(@tabs_border_radius); }
.ui-tabMenu ul li a { color: @tabs_unselected_text_color; font: @tabs_unselected_text_font; text-decoration: @tabs_unselected_text_decoration; float: left; padding: 5px 14px; white-space: nowrap; }
.ui-tabMenu ul li:hover { background: @tabs_hover_background; border: @tabs_hover_border; .rounded-corners(@tabs_hover_border_radius); }
.ui-tabMenu ul li:hover a { color: @tabs_hover_text_color; font: @tabs_hover_text_font; text-decoration: @tabs_hover_text_decoration; }
.ui-tabMenu ul li.ui-active { background: @tabs_selected_background; border: @tabs_selected_border; .rounded-corners(@tabs_selected_border_radius); }
.ui-tabMenu ul li.ui-active a { color: @tabs_selected_text_color; font: @tabs_selected_text_font; text-decoration: @tabs_selected_text_decoration; border-bottom: 1px solid @tabs_selected_background; }

/* Tables / Lists */
@lists_inner_border_width: 1px;
@lists_inner_border_style: solid;
@lists_background: @empty;
@lists_text_color: @container_text_color_1;
@lists_text_font: @empty;
@lists_links_color: @container_links_color;
@lists_links_font: @empty;
@lists_links_decoration: none;
@lists_hover_background_image: @empty;
@lists_hover_background_attachment: @empty;
@lists_hover_background_repeat: @empty;
@lists_hover_background_position: @empty;
@lists_hover_text_color: @lists_text_color;
@lists_hover_text_font: @lists_text_font;
@lists_hover_links_color: @lists_links_color;
@lists_hover_links_font: @lists_links_font;
@lists_hover_links_decoration: underline;
@lists_selected_background: @container_highlight_color;
@lists_selected_text_color: @lists_text_color;
@lists_selected_text_font: @lists_text_font;
@lists_selected_links_color: @lists_links_color;
@lists_selected_links_font: @lists_links_font;
@lists_selected_links_decoration: none;
table.list > thead > tr > th, table.list > tbody > tr > td { border-width: 0px @lists_inner_border_width @lists_inner_border_width 0px; border-style: @lists_inner_border_style; border-color: @container_inner_border_color; vertical-align: middle; padding: 10px; .box-sizing(); }
table.list { color: @lists_text_color; font: @lists_text_font; background: @lists_background; table-layout: fixed; font-size: 90%; width: 100%; .box-sizing(); }
.list a { color: @lists_links_color; font: @lists_links_font; text-decoration: @lists_links_decoration; }
.list .item.state-hover, .list .board.item:hover, #calendar-list .item:hover { color: @lists_hover_text_color; font: @lists_hover_text_font; background-color: @container_highlight_color; background-image: @lists_hover_background_image; background-attachment: @lists_hover_background_attachment; background-repeat: @lists_hover_background_repeat; background-position: @lists_hover_background_position; }
.list .item > .main.state-hover .link a, .list .item:hover > .main .link a { color: @lists_hover_links_color; font: @lists_hover_links_font; text-decoration: @lists_hover_links_decoration; }
.list .item.state-selected { color: @lists_selected_text_color; font: @lists_selected_text_font; background: @lists_selected_background; }
.list .item.state-selected a { color: @lists_selected_links_color; font: @lists_selected_links_font; text-decoration: @lists_selected_links_decoration; }
table.list > thead > tr > th { padding: 5px 10px; white-space: nowrap; }
table.list > thead > tr.last > td, table.list > tbody > tr.last > td { border-bottom-width: 0px; }
table.list > thead > tr > .last, table.list > tbody > tr > .last { border-right: none; }
table.list td.icon, table.list th.icon { width: 55px; text-align: center; }
table.list td.main, table.list th.main { padding: 10px 10px 10px 0px; }
table.list .checkbox { width: 25px; text-align: center; padding: 0px; border-right: none; }
table.list .checkbox-placeholder { border-right: none !important; }
.list .item > .main { cursor: pointer; overflow: hidden; }
table.list .item .list-item-checkbox { visibility: hidden; }
table.list .item.state-hover .list-item-checkbox, .list .item.state-selected .list-item-checkbox { visibility: visible; }
table.list abbr.time, table.list .last-edited { color: @timestamp_color; }

/* New Icons */
/* Wherever a "NEW" icon may appear, this controls the styles for it! */
@new_background: @title_buttons_background_color @all_gradients left center repeat-x;
@new_border: 2px solid @title_buttons_background_color;
@new_border_radius: 0px 0px 0px 0px;
@new_link_transform: uppercase;
@new_link_color: @title_buttons_color;
@new_link_font: bold 7px @default_forum_text_font_family;
@new_link_decoration: none;
@new_hover_background: @new_background;
@new_hover_border: @new_border;
@new_hover_border_radius: @new_border_radius;
@new_hover_link_transform: @new_link_transform;
@new_hover_link_color: @new_link_color;
@new_hover_link_font: @new_link_font;
@new_hover_link_decoration: @new_link_decoration;
.new-icon { background: @new_background; border: @new_border; .rounded-corners(@new_border_radius); display: none; float: left; margin: 0px 5px 0px 0px; padding: 0px 1px; word-wrap: normal; }
.new-icon, .new-icon a { color: @new_link_color !important; font: @new_link_font; text-decoration: @new_link_decoration; text-transform: @new_link_transform; text-align: center; line-height: 10px !important; height: 10px; }
.new-icon:hover { background: @new_hover_background; border: @new_hover_border; .rounded-corners(@new_hover_border_radius); }
.new-icon:hover, .new-icon:hover a { color: @new_hover_link_color !important; font: @new_hover_link_font; text-decoration: @new_hover_link_decoration; text-transform: @new_hover_link_transform; }

/* Footer */
@footer_text_color: @link_color;
@footer_text_font: .8em @default_forum_text_font_family;
@footer_text_decoration: none;
@footer_background: ~"";
@footer_border: ~"";
@footer_hover_color: @footer_text_color;
@footer_hover_font: @footer_text_font;
@footer_hover_decoration: @footer_text_decoration;
@footer_pipe_color: @default_forum_text_color;
@footer_copyright_color: @default_forum_text_color;
@footer_copyright_font: .8em @default_forum_text_font_family;
@footer_pb_link_color: @link_color;
@footer_pb_link_font: 100% @default_forum_text_font_family;
@footer_pb_link_decoration: none;
footer { text-align: center; display: block; background: @footer_background; border: @footer_border; padding-top: 5px; padding-bottom: 28px; }
footer .footer-links { margin: 0 auto; color: @footer_pipe_color; }
footer .footer-links a { color: @footer_text_color; text-decoration: @footer_text_decoration; font: @footer_text_font; }
footer .footer-links a:hover { color: @footer_hover_color; text-decoration: @footer_hover_decoration; font: @footer_hover_font; }
footer .footer-text { text-align: center; color: @footer_copyright_color; margin: 5px 0 0 0; font: @footer_copyright_font; }
footer .footer-text a { color: @footer_pb_link_color; text-decoration: @footer_pb_link_decoration; font: @footer_pb_link_font; }

/* ------ Pages ------ */
/* This section controls the styles for your pages wich include the Search Page, Calender Page, Members List, View and Edit Profile, Board/Thread/Conversation Lists, Polls, Post List, and Message List. */

/* Help */
.help-topics li { display: block; float: left; padding: 5px 10px; min-width: 280px; }
.help.content ul { margin-left: 31px; list-style-type: disc; }
.help.content ol { margin-left: 31px; list-style-type: decimal; }
.help.content ol li, .help.content ul li { padding: 2px 0; }
.help.content h1 { font-size: 18px; font-weight: bold; }
.help.content h2 { font-size: 16px; font-weight: bold; }
.help.content h3 { font-size: 14px; font-weight: bold; }
.help.content code { display: block; border: @posts_code_border; padding: 5px; margin: 0 16px; background: @posts_code_background; color: @posts_code_text_color; font: @posts_code_text_font; white-space: pre-wrap; }

/* Search Page */
.search .content { padding: 10px 0px 0px 10px; }
.search .content form > div { padding: 10px; margin-right: 10px; margin-bottom: 10px; }
.search .header, #how { font-size: 14px; padding: 10px; }
.search .options-container { padding: 10px; width: 432px; font-size: 11px; margin-right: 10px; height: 200px; overflow: hidden; }
.search .options-container th { padding-bottom: 5px; font-size: 14px; text-align: left; font-weight: normal; }
.search .options-container td { padding: 5px 5px 5px 0; }
.search .footer { font-size: 14px; line-height: 20px !important; }
.search .footer input { float: right; }
.search .footer #transcription { width: 89%; font-size: 11px; }
.search .disabled { background-color: #DDDDDD; }
.search #what input, .search #where input, .search #who input { width: 230px; }
.search #who select { width: 235px; }
.search #when input { width: 80px; }
.search input[id*="-placeholder"] { cursor: pointer; }
#where-board-subboard, #where-without, #where-category, #who-member-group { display: none; }

/* Calendar Page */
@cal_background: @container_background_color_1;
@cal_border: 1px solid @container_inner_border_color;
@cal_border_radius: 0px 0px 0px 0px;
@cal_inner_border: 1px solid @container_inner_border_color;
@cal_link_alignment: right;
@cal_title_color: @container_text_color_1;
@cal_title_font: @empty;
@cal_day_background: @container_highlight_color;
@cal_day_link_color: @container_links_color;
@cal_day_link_font: @empty;
@cal_day_link_decoration: @empty;
@cal_cur_month_background: @container_background_color_2;
@cal_cur_month_link_color: @container_links_color;
@cal_cur_month_link_font: @empty;
@cal_cur_month_link_decoration: @empty;
@cal_month_background: @container_background_color_1;
@cal_month_link_color: @container_text_color_1;
@cal_month_link_font: @empty;
@cal_month_link_decoration: @empty;
@cal_list_title_border_radius: 0px 0px 0 0;
@cal_list_align_icon: center;
@cal_list_align_last: right;
@cal_list_last_color: @empty;
@cal_list_last_font: @empty;
.cal-box { background: @cal_background; border: @cal_border; .rounded-corners(@cal_border_radius); width: 100%; border-collapse: separate; }
.cal-box th { padding: 3px 0px; }
.cal-box th, .cal-current-panel .cal-box td, #calendar-list .cal-box td { border: @cal_inner_border; border-top-width: 0px; border-left-width: 0px; }
.cal-box th, .cal-box th * { color: @cal_title_color; font: @cal_title_font; }
.cal-box .current-day .head, .cal-box .today .head, .ui-datepicker td.ui-datepicker-today a { background: @cal_day_background; }
.cal-box .current-day .head a, .cal-box .today .head a, .ui-datepicker td.ui-datepicker-today a { color: @cal_day_link_color; font: @cal_day_link_font; text-decoration: @cal_day_link_decoration; }
.cal-box .head { background: @cal_cur_month_background; }
.cal-box a { color: @cal_cur_month_link_color; font: @cal_cur_month_link_font; text-decoration: @cal_cur_month_link_decoration; }
.cal-box .off .head a { color: @cal_month_link_color; font: @cal_month_link_font; text-decoration: @cal_month_link_decoration; }
.cal-current-panel { vertical-align: top; }
.cal-current-panel .cal-box .last { border-right: none; }
.cal-current-panel .cal-box .last td { border-bottom: none; }
.cal-current-panel .body { min-height: 74px; height: 74px; padding-bottom: 15px; padding: 3px; overflow: hidden; }
.cal-current-panel .body a, .cal-current-panel .birthday-event { white-space: nowrap; }
.cal-current-panel .off .head { background: @cal_month_background; }
.cal-current-panel .head { text-align: @cal_link_alignment; cursor: pointer; padding-bottom: 3px; height: 16px; overflow: hidden; }
.cal-current-panel .head a { font-weight: bold; font-size: 12px; padding: 2px; overflow: hidden; }
.cal-preview-panel { width: 180px; padding-right: 10px; vertical-align: top; }
.cal-preview-panel .header th { border-right: none; }
.cal-preview-panel .header th a { color: @container_links_color; }
.cal-preview-panel td { padding: 2px 0px; }
.cal-preview-panel .weekdays td { padding-top: 5px; }
.cal-preview-panel .cal-box { table-layout: auto; width: 100%; text-align: center; padding-bottom: 10px; margin-bottom: 10px; }
.cal-preview-panel .cal-box .head { padding: 0px 1px 2px 0px; }
.cal-preview-panel .off .head { background-color: transparent; }
.cal-preview-panel a.has-events { font-weight: bold; }
#calendar-list { vertical-align: top; }
#calendar-list .new .new-icon { display: inline-block; }
#calendar-list table { table-layout: auto; }
#calendar-list table.cal-box td { border-width: 0px 0px 1px 0px; }
#calendar-list tr:last-child td { border-bottom: none; }
#calendar-list tr:first-child th { .rounded-corners(@cal_list_title_border_radius); }
#calendar-list th { padding: 5px 15px; text-align: left; border-right: none; }
#calendar-list td.icon { width: 60px; height: 60px; text-align: @cal_list_align_icon; border: @cal_inner_border; border-width: 0px 1px 1px 0px; }
#calendar-list td.main { cursor: pointer; padding: 0 10px; }
#calendar-list td.last_post { color: @cal_list_last_color; font: @cal_list_last_font; text-align: @cal_list_align_last; width: 250px; padding-right: 10px; }
.calendar .content { padding: 10px; }
.calendar .content > table { width: 100%; vertical-align: top; }
.calendar .content > table > tr > td { vertical-align: top; }
.calendar .control-bar .calendar-jump .button { float: left; }
.calendar .control-bar .calendar_go_button { display: none; margin: 0 5px 0 10px; }
#to-date-container { display: none; }
.ui-datepicker { .hsla-bgcolor-safe(@container_outer_border_color, .5); }
.ui-datepicker .ui-datepicker-header { background-color: @title_bar_background_color; background-image: @all_gradients; border-color: @container_outer_border_color; }
.ui-datepicker .ui-datepicker-title { color: @title_text_color; }
.ui-datepicker table { background-color: @container_background_color_1; border-color: @container_outer_border_color; }
.ie7 .calendar .control-bar .calendar_go_button { margin-left: 0; }
.ie7 .calendar .control-bar .controls .ui-selectMenu-box { margin-left: 0; margin-right: 10px; }

/* Members Page */
@members_background: @empty;
@members_text_color: @empty;
@members_text_font: @empty;
@members_text_align: left;
@members_align_name: left;
@members_align_username: left;
@members_align_rank: left;
@members_align_group: left;
@members_align_posts: left;
@members_align_date_registered: left;
@members_align_last_online: right;
.member { cursor: pointer; }
.members table.list { table-layout: fixed; }
.members thead { color: @members_text_color; font: @members_text_font; background: @members_background; }
.members th.sortable { cursor: pointer; overflow: hidden; text-align: @members_text_align; }
.members .name { width: 19%; text-align: @members_align_name; }
.members .username { width: 17%; text-align: @members_align_username; }
.members .rank { width: 16%; text-align: @members_align_rank; }
.members .group { width: 16%; text-align: @members_align_group; }
.members .posts { width: 8%; text-align: @members_align_posts; }
.members .date-registered { width: 18%; text-align: @members_align_date_registered; }
.members .last-online { width: 18%; text-align: @members_align_last_online; }
.members .last-online abbr.timestamp { font-size: 100%; }
.members .list-content td { word-wrap: break-word; overflow: hidden; padding: 3px 10px; .box-sizing(content-box); }
.members .list-content .checkbox { padding: 3px 0px 3px 7px; }

/* View Profile */
.show-user table { width: 100%; }
.show-user .controls > * { float: right; }
.show-user table.list { font-size: 100%; }
.show-user .heading th, .show-user .heading td { font-weight: bold; padding: 8px 0px; text-align: center; border-right: 0px; }
.show-user td.avatar, th.avatar { width: 81px; border-width: 1px 1px 0 0; padding: 3px; }
.show-user .list .main { border-right-width: 0; border-width: 1px 0 0 0;  padding: 10px; }
.show-user .delete { width: 60px; padding: 5px 10px 5px 5px; border-width: 1px 1px 0 0; vertical-align: middle; text-align: right; }
.show-user .time-container { width: 22%; padding: 3px 10px 3px 3px; text-align: right; border-width: 1px 0 0 0; }
.show-user a.show-more { border-top: 1px solid @container_inner_border_color; display: block; font-weight: bold; padding: 8px 0px; text-align: center; }
.show-user .content-box { margin-bottom: 10px; overflow: hidden; }
.show-user .content-box:last-child { margin-bottom: 0px; }
.show-user .following { table-layout: auto; }
.show-user .center-col { padding: 10px; }
.show-user td.status-input input { width: 100%; }
.show-user td.status-submit { width: 120px; text-align: right; }
.show-user .headings { width: 175px; }
.show-user #center-column { vertical-align: top; }
.show-user #right-column { width: 190px; vertical-align: top; }
.show-user .right-col { padding: 10px; margin-left: 10px; text-align: center; }
.show-user .social { width: 50%; float: left; }
.show-user .messengers span.label { width: 55px; display: inline-block; }
.show-user .mini-user { width: 75px; max-width: 75px; min-height: 90px; display: inline-block; overflow: hidden; padding: 4px 0px; vertical-align: top; text-align: center; }
.ie7 .show-user .mini-user { display: inline; margin-right: 10px; }
.show-user #status-bar { border-top: none !important; }
.show-user #status-bar td { border: none; }
.show-user #status-input-box input { width: 99%; }
.show-user .delete a { display: none; }
.show-user .notifications .main { padding: 10px; }
.show-user .notifications .main .new-icon { display: inline-block; }
.show-user .friends-stats { float: right; }
.online-friends .mini-profile { margin-right: 10px; margin-bottom: 10px; vertical-align: top; display: inline-block; }
.offline-friends .micro-profile { float: left; text-align: left; margin-right: 10px; margin-bottom: 10px; }
.show-user .members-link-container { margin-bottom: 10px; }
.show-user .empty-result-message { text-align: center; padding-bottom: 25px; }
.show-user .groups td { border-width: 1px 1px 0px 0px; text-align: center; padding: 12px 0px; }
.show-user .groups td:first-child { text-align: left; padding-left: 20px; }
.show-user .groups td:last-child { border-right: 0px; }
.show-user .groups .group_desc { width: 40%; }
.show-user .groups .leaders { width: 25%; }
.show-user .groups .members { width: 10%; }
.show-user .groups .status { width: 15%; }
.show-user .groups .heading td { padding: 4px 0px; text-align: center; }
.show-user .badge-wish { text-align: center; height: 100px; margin-right: 10px; }
.show-user .badge-wish img { display: block; }
.show-user .visit-badge-store { text-align: center; width: 130px; }
.show-user .visit-badge-store .badge-store-text { width: 110px; height: 54px; margin: 10px auto 5px auto; }
.badge-thumbs { padding: 5px 100px 5px 5px !important; position: relative; min-height: 36px; }
.badge-thumbs .badge-thumb { margin: 5px; }
.badge-thumbs .button { position: absolute; top: 50%; right: 10px; margin-top: -13px; }

/* Edit Profile */
.big_username { font-size: 20pt; }
.edit-user .title { font-weight: bold; margin-bottom: 4px; }
.edit-user textarea { padding: 2px; margin: 0; }
.edit-user input, .edit-user select, .edit-user textarea { display: inline-block; zoom: 1; margin-top: 5px; }
.edit-user .content-box { margin: 10px; padding: 10px; }
.edit-user .content-box.options { position: relative; zoom: 1; }
.edit-user .content-box.options table { table-layout: auto; }
.edit-user .content-box.options td { padding: 9px 5px; }
.edit-user .content-box.options input[type="radio"] { margin-top: 0px; }
.edit-user .pad { padding: 10px; }
.edit-user .pad.info { padding-bottom: 0; clear: both; }
.edit-user .pad .username { font-size: 1em; font-weight: normal; margin-top: 14px; }
.edit-user .note { font-style: italic; font-size: 85%; }
.edit-user label { display: block; font-weight: 800; }
.edit-user .radio label, .edit-user .checkbox label { display: inline; font-weight: 400; }
.edit-user .avatar.content-box { padding: 10px 10px 0px 0px; }
.edit-user .avatar h4 { margin-bottom: 5px; }
.edit-user .user-search { padding-top: 3px; }
.edit-user .avatar { margin-bottom: 10px; }
.edit-user .notifications table { table-layout: auto; }
.edit-user .notifications th, .edit-user .notifications td { padding: 0px 5px; }
.edit-user .notifications th.description { width: 760px; }
.edit-user .edit_button_spacer { min-width: 275px; display: inline-block; }
#user_block_list .user-search-selection .ui-selectlist-item { float: none; clear: both; margin-bottom: 10px; }
#user_block_list .user-search-selection .ui-selectlist-item .block_list_options { float: left; width: 430px; padding-left: 20px; }
#user_block_list .selectlist-wrapper { float: left; position: relative; }
#user_block_list .block_list_options input { margin: 0 5px 5px 5px; padding: 0; height: 13px; }
#user_block_list .block_list_options label { position: relative; top: -2px; }
.edit-user #avatar-options .content-box { position: relative; margin: 10px 0px 0px 10px; float: left; min-height: 250px; padding: 10px; text-align: center; width: 150px; }
.edit-user #avatar-options .content-box.options { width: 100%; min-width: 279px; max-width: 350px; text-align: left; }
#forum-avatars-wrapper img:hover { border-width: 3px; border-style: solid; border-color: @link_color; .rounded-corners(); margin: -3px; }
#image-avatar-editor-container .wrapper { padding: 10px 5px 5px 5px; margin-top: 15px; *width: 520px; }
#image-avatar-editor-container .wrapper.first { clear: both; margin-top: 10px; }
#image-avatar-editor-container span.fileupload-buttonbar { display: inline-block; margin: 10px 0; }
#image-avatar-editor-container .files { margin: 0; }
#image-avatar-editor-container #link-image { height: 18px; }
#image-avatar-editor-container #link-image.button { cursor: pointer; }
#forum-avatar-editor-container { padding: 0; }
#forum-avatars-wrapper { width: 510px; margin: 0 auto; padding: 10px; }
#forum-avatars-wrapper .avatar-wrapper { float: left; margin: 10px; }
#forum-avatars-wrapper img { max-height: 150px; max-width: 150px; }

/* Badge Options Tab */
#badge-options h4 { margin-top: 10px; }
#badge-options .badges-have .badge-thumbs { width: 240px; }
#badge-options .badges-dont-have .badge-thumbs { width: 110px; }
#badge-options .badge-thumbs { float: left; padding: 5px !important; }
#badge-options .badge-thumbs .badge-thumb, #badge-options .badge-thumbs .badge-icons { float: left; }
#badge-options .badge-icons img { margin: 5px 0 5px 10px; vertical-align: middle; }
#badge-options .badge-thumbs .badge-icons img, #badge-options .badge-thumbs .badge-icons input { margin: 5px 0 0 10px; width: 16px; height: 16px; }
#badge-options .badge-thumbs .badge-icons input { margin-top: 8px; padding: 0; }
#badge-options .badge-thumbs .small { vertical-align: bottom; }
#badge-options .badges-dont-have .badge-icons img { margin-top: 16px; }
#badge-options .badge-gift, #badge-options .badge-use-action { color: @container_text_color_1; }

/* Board List */
@board_names_color: @empty;
@board_names_font: 105% @default_forum_text_font_family;
@board_desc_color: @empty;
@board_desc_font: normal 90% @default_forum_text_font_family;
@board_mod_color: @empty;
@board_mod_font: 75% @default_forum_text_font_family;
@board_sub_color: @empty;
@board_sub_font: 75% @default_forum_text_font_family;
@board_align_main: left;
@board_align_threads: center;
@board_align_posts: center;
@board_align_last_post: right;
.boards .main { width: 59%; text-align: @board_align_main; }
.boards .threads { width: 9%; text-align: @board_align_threads; white-space: nowrap; }
.boards .posts { width: 8%; text-align: @board_align_posts; white-space: nowrap; }
.boards .latest { width: 20%; text-align: @board_align_last_post; }
.boards .main.redirect { border-right: 0px; }
.boards .main .link a { color: @board_names_color; font: @board_names_font; }
.boards .main .description { color: @board_desc_color; font: @board_desc_font; padding-left: 0px; padding-bottom: 3px; }
.boards .main .moderators { color: @board_mod_color; font: @board_mod_font; padding-bottom: 3px; }
.boards .main .sub-boards { color: @board_sub_color; font: @board_sub_font; }
.boards table.list { table-layout: auto; }
.boards table.list th.main { padding-left: 10px; }
.boards table.list > tbody > tr > td { padding: 5px 10px; }
/* Board Password Page */
#password-wrapper { margin: 10px 0px; }
#password-wrapper div { display: inline-block; margin-right: 5px; }
#password-wrapper input { padding: 1px 6px 3px 6px; }

/* Thread List */
@thread_align_subject: left;
@thread_align_created_by: center;
@thread_align_replies: center;
@thread_align_views: center;
@thread_align_last_post: right;
.threads .main { width: 41%; text-align: @thread_align_subject; }
.threads .created-by { width: 14%; text-align: @thread_align_created_by; }
.threads .replies { width: 9%; text-align: @thread_align_replies; }
.threads .views { width: 8%; text-align: @thread_align_views; }
.threads .latest { width: 20%; text-align: @thread_align_last_post; cursor: pointer; }
.threads .icons { white-space: nowrap; }
.threads .control-icons img { padding-right: 5px; }
.threads .control-icons .lock_icon, .threads .control-icons .falling_icon, .threads .control-icons .event_icon, #bookmarks.threads .bookmark_icon { width: 0; padding-right: 0; }
.threads .checkbox { width: 2%; }
.threads .checkbox-placeholder { width: 5px; }
.threads .main table { table-layout: auto; }
.threads table.list { table-layout: auto; }
.threads .item.new .new-icon { display: inline-block; }
.threads .item.announcement.last > td { border-bottom-width: 10px; }
.threads .item.announcement.last > td.checkbox, .threads .item.announcement.last > td.last { border-right: none; }

/* Conversation List */
@conversation_align_created_by: center;
@conversation_align_replies: center;
@conversation_align_last_reply: right;
.conversations table.list { table-layout: auto; }
.conversations .created-by, .conversations .recipients { width: 17%; text-align: @conversation_align_created_by; }
.conversations .replies { width: 8%; text-align: @conversation_align_replies; }
.conversations .latest { width: 20%; text-align: @conversation_align_last_reply; padding-right: 10px; cursor: pointer; }
.conversations .checkbox { width: 24px; }
.conversations .item.new .new-icon { display: inline-block; }
.conversations th.latest, .conversations td.latest { border-right: none; }

/* Polls */
@polls_selection_border: 1px solid @container_inner_border_color;
@polls_selection_background: @container_highlight_color;
@polls_rank_default_background: #aaaaaa left center repeat-x scroll;
@polls_rank_default_border: 1px solid #000000;
@polls_rank_default_border_radius: 5px;
@polls_rank_default_rank_color: #FFFFFF;
@polls_rank_default_rank_background: #000000;
@polls_rank_default_rank_border: 5px;
@polls_rank_first_background_color: #FFCC22;
@polls_rank_second_background_color: #66DDEE;
@polls_rank_third_background_color: #FF0000;
.ui-poll .results td .select-box { min-width: 15px; min-height: 15px; border: @polls_selection_border; }
.ui-poll .results tr.ui-selected { background: @polls_selection_background; }
.ui-poll .poll-vote-bar .bar { background: @polls_rank_default_background; border: @polls_rank_default_border; border-right-width: 0px; .rounded-corners(@polls_rank_default_border_radius, 0, 0, @polls_rank_default_border_radius); float: left; height: 17px; min-width: 5px; }
.ui-poll .poll-vote-bar .rank { float: left; background: @polls_rank_default_background; border: @polls_rank_default_border; border-left-width: 0px;  height: 17px; padding-left: 2px; .rounded-corners(0, @polls_rank_default_border_radius, @polls_rank_default_border_radius, 0); }
.ui-poll .poll-vote-bar .rank div { margin-right: 1px; margin-top: 1px; color: @polls_rank_default_rank_color; font-size: 80%; background: @polls_rank_default_rank_background; opacity: .5; filter: alpha(opacity=50); padding: 1px 2px; .rounded-corners(@polls_rank_default_rank_border); }
.ui-poll .poll-vote-bar.rank-1 .rank, .ui-poll .poll-vote-bar.rank-1 .bar { background-color: @polls_rank_first_background_color; }
.ui-poll .poll-vote-bar.rank-2 .rank, .ui-poll .poll-vote-bar.rank-2 .bar { background-color: @polls_rank_second_background_color; }
.ui-poll .poll-vote-bar.rank-3 .rank, .ui-poll .poll-vote-bar.rank-3 .bar { background-color: @polls_rank_third_background_color; }
.ui-poll { padding: 10px; }
.ui-poll table { table-layout: fixed; width: auto; }
.ui-poll .icon-poll { margin-right: 5px; }
.ui-poll .results { margin-bottom: 5px; }
.ui-poll .results td { padding: 5px; }
.ui-poll .results tr.ui-hover { background-color: @container_highlight_color; cursor: default; }
.ui-poll .results td:first-child { padding-right: 0px; }
.ui-poll .results .stats { float: left; margin-left: 5px; line-height: 18px !important; }
.ui-poll .voted ul { list-style: disc; padding-left: 20px; }
.ui-poll .vote-input { margin-top: 5px; }
.ui-poll .vote-input-cooldown { margin-left: 5px; margin-top: 2px; }
.ui-poll .poll-vote-bar { float: left; overflow: hidden; min-width: 10px; }
.ui-poll .results tr td .select-box img { visibility: hidden; display: block; }
.ui-poll .results tr.ui-selected td .select-box img { visibility: visible; }

/* Posts */
@posts_odd_background_color: @container_background_color_1;
@posts_odd_background_image: @empty;
@posts_odd_background_attachment: @empty;
@posts_odd_background_repeat: @empty;
@posts_odd_background_position: @empty;
@posts_odd_text_color: @container_text_color_1;
@posts_even_background_color: @container_background_color_2;
@posts_even_background_image: @empty;
@posts_even_background_attachment: @empty;
@posts_even_background_repeat: @empty;
@posts_even_background_position: @empty;
@posts_even_text_color: @container_text_color_2;
@posts_separator_border: 1px solid @container_inner_border_color;
@posts_likes_color: @empty;
@posts_likes_font: 80% @default_forum_text_font_family;
@posts_header_border: 1px solid @container_inner_border_color;
@posts_code_background: @container_background_color_1;
@posts_code_border: 1px solid @container_inner_border_color;
@posts_code_text_color: @container_text_color_1;
@posts_code_text_font: @empty;
@posts_edited_text_color: @empty;
@posts_edited_text_font: 80% @default_forum_text_font_family;
@posts_signatures_border: 1px solid @container_inner_border_color;
@posts_signatures_text_color: @empty;
@posts_signatures_text_font: 80% @default_forum_text_font_family;
.posts .post, .post .quote div.quote div.quote_body, .post.even .quote div.quote_body { color: @posts_odd_text_color; background-color: @posts_odd_background_color; background-image: @posts_odd_background_image; background-attachment: @posts_odd_background_attachment; background-repeat: @posts_odd_background_repeat; background-position: @posts_odd_background_position; }
.posts .post.even, .post .quote div.quote_body, .post.even .quote div.quote div.quote_body { color: @posts_even_text_color; background-color: @posts_even_background_color; background-image: @posts_even_background_image; background-attachment: @posts_even_background_attachment; background-repeat: @posts_even_background_repeat; background-position: @posts_even_background_position; }
.post.item abbr.time, .post.item.even .quote abbr.time, .post.item .quote .quote abbr.time { color: @posts_odd_text_color; }
.post.item.even abbr.time, .post.item .quote abbr.time, .post.item.even .quote .quote abbr.time { color: @posts_even_text_color; }
.posts .post .post-method { font-size: .8em; }
/* If your Action Bar is taller than 35px, change the line-height here! */
.posts span.labels { line-height: 35px; }
.posts span.labels .ui-label { padding: 5px 0 0 5px; display: inline-block; zoom: 1; }
.posts .poll { border-width: 0px 1px 10px 1px; border-style: solid; border-color: @container_inner_border_color; }
.posts .post table { width: 100%; }
.posts .post .left-panel { width: 172px; vertical-align: top; }
.posts .post .content { padding-left: 10px; vertical-align: top; }
.posts .post .content-head .info { float: left; line-height: 10% !important; }
.posts .post .content-head .info .post-subject { /* Styles */ }
.posts .post .content-head .info .date { margin-right: 7px; }
.posts .post .content-head .info .date, .posts .post .post-method { vertical-align: -7px; }
.posts .post.recent .content-head .info .date, .posts .post.recent .post-method { vertical-align: 0; }
.posts .post.recent .content-head .info { line-height: 13px !important; }
.posts .post .thread-link { display: none; }
.posts .post.recent .thread-link { display: block; }
.posts .post.recent .likes { vertical-align: 0px; }
.posts .post .content-head .controls { float: right; border-collapse: separate; }
.posts .post .content-head .controls > a { float: left; margin-left: 3px; padding-right: 5px; }
.posts .post .content-head .controls > a.likes-button { padding: 1px 6px 0px 6px; }
.posts .post .content-head .controls > a.likes-button img { margin-top: 2px; }
.posts .post .message { word-wrap: break-word; overflow-x: auto; overflow-y: hidden; margin-bottom: 1.3em; }
.posts .post .message table { width: inherit; }
.posts .post .message table td { padding: 3px; }
.posts .post .message ul { margin-left: 31px; list-style-type: disc; }
.posts .post .message ol { margin-left: 31px; list-style-type: decimal; }
.posts.summary .post .content-head .info { float: none; }
.posts .post td.unblocked { border-right-width: 0 !important; }
.posts .post.blocked .unblocked { display: none; }
.posts .post .content .thread-link { max-width: 450px; overflow: hidden; }
.posts.item .ui-pagination { padding-left: 0px; }
.likes { vertical-align: -7px; }
.posts #labels { display: none; text-align: right; padding: 5px; }
.likes, .likes:hover { color: @posts_likes_color; font: @posts_likes_font; }
.likes-button { padding: 4px 0px 0px 5px; display: none; }
.liked.likes { display: inline; }
.posts .post .content-head { border: @posts_header_border; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; padding-bottom: 5px; margin-bottom: 10px; }
.posts .post .message code { display: block; border: @posts_code_border; padding: 5px; margin-left: 16px; margin-right: 16px; background: @posts_code_background; color: @posts_code_text_color; font: @posts_code_text_font; white-space: pre-wrap; }
.posts .post .foot { height: 1px; vertical-align: bottom; padding-left: 10px; }
.posts .post .foot .edited_by { text-align: right; color: @posts_edited_text_color; font: @posts_edited_text_font; margin-top: 10px; }
.posts .post .foot .signature { color: @posts_signatures_text_color; font: @posts_signatures_text_font; vertical-align: bottom; border: @posts_signatures_border; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 10px; margin-top: 10px; }
.posts .bookmark_icon { padding-right: 5px; }
.quote_clear { clear: both; }

/* Thread Descriptions & Participants */
@messages_participants_background_color: @empty;
@messages_participants_color: @empty;
@messages_participants_border: 1px solid @container_inner_border_color;
.thread_description_list { font-size: 90%; }
.messages .participants, .thread_description_page { background-color: @messages_participants_background_color; color: @messages_participants_color; padding: 5px 10px; border: @messages_participants_border; border-top-width: 0px; border-left-width: 0px; border-right-width: 0px; }

/* Message List */
@messages_odd_background: @container_background_color_1;
@messages_odd_text_color: @container_text_color_1;
@messages_even_background: @container_background_color_2;
@messages_even_text_color: @container_text_color_2;
@messages_header_border: 1px solid @container_inner_border_color;
@messages_code_background: @container_background_color_1;
@messages_code_border: 1px solid @container_inner_border_color;
@messages_code_text_color: @container_text_color_1;
@messages_code_text_font: @empty;
@messages_signatures_border: 1px solid @container_inner_border_color;
@messages_signatures_text_color: @empty;
@messages_signatures_text_font: 80% @default_forum_text_font_family;
.messages .item { color: @messages_odd_text_color; background: @messages_odd_background; }
.messages .item.even { color: @messages_even_text_color; background: @messages_even_background; }
.messages .item .quote div.quote div.quote_body { color: @messages_odd_text_color; background: @messages_odd_background; }
.messages .item.even .quote div.quote_body { color: @messages_odd_text_color; background: @messages_odd_background; }
.messages .item .quote div.quote_body { color: @messages_even_text_color; background: @messages_even_background; }
.messages .item.even .quote div.quote div.quote_body { color: @messages_even_text_color; background: @messages_even_background; }
.message.item abbr.time, .message.item.even .quote abbr.time, .message.item .quote .quote abbr.time { color: @messages_odd_text_color; }
.message.item.even abbr.time, .message.item .quote abbr.time, .message.item.even .quote .quote abbr.time { color: @messages_even_text_color; }
.messages .item .content-head { border: @messages_header_border; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; padding-bottom: 5px; margin-bottom: 10px; }
.messages .item table { width: 100%; }
.messages .item td.unblocked { /* Styles */ }
.messages .item .left-panel { width: 172px; vertical-align: top; }
.messages .item .content { padding-left: 10px; word-wrap: break-word; overflow-x: auto; overflow-y: hidden; vertical-align: top; }
.messages .item .content table { width: inherit; }
.messages .item .content ul { margin-left: 31px; list-style-type: disc; }
.messages .item .content ol { margin-left: 31px; list-style-type: decimal; }
.messages .item .content .message { overflow-x: auto; overflow-y: hidden; margin-bottom: 1.3em; }
.messages .item .content .message table td { padding: 3px; }
.messages .item .content code { display: block; border: @messages_code_border; padding: 5px; margin-left: 16px; margin-right: 16px; background: @messages_code_background; color: @messages_code_text_color; font: @messages_code_text_font; white-space: pre-wrap; }
.messages .item .content-head .info { float: left; line-height: 10% !important; }
.messages .item .content-head .info .message-subject { color: @link_color; font: @link_font; text-decoration: @link_decoration; }
.messages .item .content-head .info .date { vertical-align: -7px; }
.messages .item .content-head .controls { float: right; }
.messages .item .content-head .controls > a { float: left; margin-left: 3px; padding-right: 5px; display: inline; }
.messages .item .foot { padding-left: 10px; vertical-align: bottom; }
.messages .item .foot .signature { text-align: left; color: @messages_signatures_text_color; font: @messages_signatures_text_font; vertical-align: bottom; border: @messages_signatures_border; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 10px; margin-top: 10px; }
.message .post-method { vertical-align: -7px; font-size: .8em; }
/* If your Action Bar is taller than 35px, change the line-height here! */
.messages .conversation-labels { margin: 0 !important; line-height: 35px; }
.messages.summary .message .content-head .info { width: 100%; }
.messages .message .controls { min-width: 100px; }
.posting-options-list, .messaging-options-list { display: none; }

/* Custom Pages */
.pbcpe-widget-title { color: @default_forum_text_color; }

/* ------ Objects ------ */
/* This section controls your objects which includes your Micro Profiles, Mini Profiles, Buttons, Warning Bars, Avatars, Forms, Labels, Quotes, Info Centers, Shoutbox, Posting Page, Legend, Quick Reply, and the segments of the Posting Page. */

/* Micro Profiles */
@micro_background: @container_background_color_1;
@micro_border: 1px solid @container_inner_border_color;
@micro_border_radius: 0px 0px 0px 0px;
@micro_text_color: @empty;
@micro_text_font: @empty;
@micro_link_color: @empty;
@micro_link_font: @empty;
@micro_link_decoration: @empty;
@micro_remove_background: @container_background_color_1;
@micro_remove_border: 1px solid @container_inner_border_color;
@micro_remove_border_radius: 0 5px 5px 0;
@micro_remove_text_color: @container_text_color_1;
@micro_remove_text_font: bold 80% @default_forum_text_font_family;
.micro-profile { color: @micro_text_color; font: @micro_text_font; position: relative; height: 50px; width: 200px; display: inline-block; padding: 5px; margin-bottom: 3px; border: @micro_border; background: @micro_background; .rounded-corners(@micro_border_radius); overflow: hidden; }
.grp_recipients_div li { color: @micro_text_color; font: @micro_text_font; position: relative; width: 240px; display: inline-block; margin: 3px; padding: 3px 22px 3px 5px; border: @micro_border; background: @micro_background; .rounded-corners(@micro_border_radius); overflow: hidden; float: left; }
.micro-profile a, .grp_recipients_div li a { color: @micro_link_color; font: @micro_link_font; text-decoration: @micro_link_decoration; }
.user-search-selection .ui-selectlist-item .close { color: @micro_remove_text_color; font: @micro_remove_text_font; background: @micro_remove_background; border: @micro_remove_border; .rounded-corners(@micro_remove_border_radius); cursor: pointer; height: 35px; padding: 20px 3px 5px; position: absolute; right: 0px; }
.micro-profile .avatar { display: block; width: 50px; position: absolute; top: 5px; border-width: 0px; }
.micro-profile .info { width: 145px; overflow: hidden; position: absolute; top: 5px; left: 60px; }
.micro-profile .info input { width: 112px; }
.user-search-box { width: 200px; }
.user-search-selectlist { z-index: 99999; }
.user-search-selectlist .content { cursor: pointer; padding: 1px 0px; }
.user-search-selectlist .micro-profile .info { width: 200px; }
.user-search-selection .ui-selectlist-item { float: left; margin-right: 5px; }
.user-search-selection .ui-selectlist-item .micro-profile { .rounded-corners(5px, 0, 0, 5px); }
.user-search-displaybox { min-width: 250px; z-index: 99999; }
.user-search-displaybox .control-bar { border: none; }
.user-search-displaybox .control-bar .ui-pagination { padding: 5px; display: inherit; }
.user-search-selectlist .micro-profile { margin: 1px auto; display: inherit; }
.ie7 .user-search-pagination-note { margin: 5px 0; }
.ie7 .user-search-displaybox .control-bar { width: 350px; }
.ie7 .user-search-displaybox { min-width: 350px; }
.ie7 .user-search-selectlist .micro-profile { margin: 1px 68px 1px 67px; width: 198px; display: inline-block; }

/* Mini Profiles */
@mini_background: transparent;
@mini_border: 1px solid @container_inner_border_color;
@mini_border_radius: 0px 0px 0px 0px;
@mini_text_align: left;
@mini_text_color: @container_text_color_1;
@mini_text_font: @empty;
@mini_links_color: @container_links_color;
@mini_links_font: @empty;
@mini_links_decoration: @empty;
@mini_avatar_align: center;
@mini_personal_text_color: @container_text_color_1;
@mini_personal_text_font: 75% @default_forum_text_font_family;
@mini_personal_text_align: left;
@mini_info_text_color: @container_text_color_1;
@mini_info_text_font: 75% @default_forum_text_font_family;
@mini_info_text_align: left;
@mini_even_background: @mini_background;
@mini_even_border: @mini_border;
@mini_even_border_radius: @mini_border_radius;
@mini_even_text_align: @mini_text_align;
@mini_even_text_color: @container_text_color_2;
@mini_even_text_font: @mini_text_font;
@mini_even_links_color: @container_links_color;
@mini_even_links_font: @mini_links_font;
@mini_even_links_decoration: @mini_links_decoration;
@mini_even_personal_text_color: @container_text_color_2;
@mini_even_personal_text_font: @mini_personal_text_font;
@mini_even_personal_text_align: @mini_personal_text_align;
@mini_even_info_text_color: @container_text_color_2;
@mini_even_info_text_font: @mini_info_text_font;
@mini_even_info_text_align: @mini_info_text_align;
.mini-profile { color: @mini_text_color; font: @mini_text_font; background: @mini_background; border: @mini_border; .rounded-corners(@mini_border_radius); text-align: @mini_text_align; overflow: hidden; padding: 13px 10px; width: 150px; }
.mini-profile .personal-text { color: @mini_personal_text_color; display: block; font: @mini_personal_text_font; text-align: @mini_personal_text_align; }
.mini-profile .info { color: @mini_info_text_color; font: @mini_info_text_font; text-align: @mini_info_text_align; }
div.mini-profile a { color: @mini_links_color; font: @mini_links_font; text-decoration: @mini_links_decoration; }
.even .mini-profile { color: @mini_even_text_color; font: @mini_even_text_font; background: @mini_even_background; border: @mini_even_border; .rounded-corners(@mini_even_border_radius); text-align: @mini_even_text_align; }
.even .mini-profile .personal-text { color: @mini_even_personal_text_color; font: @mini_even_personal_text_font; text-align: @mini_even_personal_text_align; }
.even .mini-profile .info { color: @mini_even_info_text_color; font: @mini_even_info_text_font; text-align: @mini_even_info_text_align; }
.even div.mini-profile a { color: @mini_even_links_color; font: @mini_even_links_font; text-decoration: @mini_even_links_decoration; }

/* Warning Bars */
@mini_warning_background: #aaaaaa left center repeat-x scroll;
@mini_warning_border: 1px solid #000000;
@mini_warning_border_radius: 5px;
@mini_warning_text_align: right;
@mini_warning_number_background_color: #000000;
@mini_warning_number_border_radius: 5px;
@mini_warning_number_text_color: #FFFFFF;
@mini_warning_number_text_font: @empty;
@mini_warning_number_text_decoration: @empty;
@mini_warning_low_background_color: #FFCC22;
@mini_warning_medium_background_color: #FF6611;
@mini_warning_high_background_color: #FF0000;
.warning-bar { background: @mini_warning_background; border: @mini_warning_border; .rounded-corners(@mini_warning_border_radius); padding-bottom: 2px; height: 14px; line-height: 100%; text-align: @mini_warning_text_align; min-width: 40px !important; }
.warning-bar .number { color: @mini_warning_number_text_color; font: @mini_warning_number_text_font; text-decoration: @mini_warning_number_text_decoration; background-color: @mini_warning_number_background_color; .rounded-corners(@mini_warning_number_border_radius); opacity: 0.5; font-size: 0.6em; margin-right: 1px; padding: 0px 2px 1px 2px; }
.warning-low { background-color: @mini_warning_low_background_color; background-position: center; }
.warning-medium { background-color: @mini_warning_medium_background_color; background-position: center; }
.warning-high { background-color: @mini_warning_high_background_color; background-position: center; }

/* Avatars */
.mini-profile .avatar { max-width: 150px; max-height: 150px; overflow-x: hidden; overflow-y: hidden; margin: auto; border-width: 0px; vertical-align: middle; }
.avatar-wrapper { display: table-cell; text-align: @mini_avatar_align; vertical-align: middle; }
.avatar-wrapper > div, #avatar-preview.flash_present.image_present > div { position: relative; }
.avatar-wrapper div object, .flash-avatar object, #avatar-preview.flash_present.image_present div object, .avatar-wrapper > div > img { position: absolute; top: 0; left: 0; }
.avatar-wrapper * { vertical-align: middle; }
.avatar_size_default, .avatar_size_default embed, .avatar_size_default object, .avatar_size_default > div, .avatar-wrapper.avatar_size_default > div > div { height: 150px; width: 150px; }
.avatar-wrapper > div > div { display: table-cell; vertical-align: middle; }
.avatar_size_default img, .avatar_size_default default { max-height: 150px; max-width: 150px; }
.avatar_size_medium, .avatar_size_medium embed, .avatar_size_medium object, .avatar_size_medium > div, .avatar-wrapper.avatar_size_medium > div > div { height: 100px; width: 100px; }
.avatar_size_medium img, .avatar_size_medium default { max-height: 100px; max-width: 100px; }
.avatar_size_small, .avatar_size_small embed, .avatar_size_small object, .avatar_size_small > div, .avatar-wrapper.avatar_size_small > div > div { height: 50px; width: 50px; }
.avatar_size_small img, .avatar_size_small default { max-height: 50px; max-width: 50px; }
.avatar_size_quote, .avatar_size_quote embed, .avatar_size_quote object, .avatar_size_quote > div, .avatar-wrapper.avatar_size_quote > div > div { height: 30px; width: 30px; }
.avatar_size_quote img, .avatar_size_quote default { max-height: 30px; max-width: 30px; }
#flash-avatar-preview .flash-avatar object { position: relative; }
#avatar-preview.flash_present div object { position: inherit; }
#avatar-preview.flash_present > div { position: inherit; }
#avatar-preview .hide { display: none; }
.avatar_size_placeholder { height: 150px; width: 150px; }
.mini-profile .badges img { height: 24px; width: 24px; }

/* Buttons */
@buttons_background_image: none;
@buttons_background_attachment: @empty;
@buttons_background_repeat: repeat-x;
@buttons_background_position: center center;
@buttons_border: 1px solid darken(@buttons_background_color, 20%);
@buttons_border_radius: 0px 0px 0px 0px;
@buttons_text_font: normal normal 9px "Courier New", Courier, monospace;
@buttons_text_decoration: none;
@buttons_hover_background: #dadada center repeat-x scroll;
@buttons_hover_border: 1px solid darken(@buttons_background_color, 20%);
@buttons_hover_text_color: #000000;
@buttons_hover_text_font: @buttons_text_font;
@buttons_hover_text_decoration: @buttons_text_decoration;
@buttons_active_background: #dadada   scroll;
@buttons_active_border: 1px solid darken(@buttons_background_color, 20%);
@buttons_active_text_color: #000000;
@buttons_active_text_font: @buttons_text_font;
@buttons_active_text_decoration: @buttons_text_decoration;
.button, a.button, input[type="submit"], input[type="button"], button { color: @buttons_text_color; font: @buttons_text_font; text-decoration: @buttons_text_decoration; background-color: @buttons_background_color; background-image: @buttons_background_image; background-attachment: @buttons_background_attachment; background-repeat: @buttons_background_repeat; background-position: @buttons_background_position; border: @buttons_border; border-radius: @buttons_border_radius; min-height: 20px; line-height: 20px !important; padding: 2px 0px; display: inline-block; vertical-align: middle; margin-left: 3px; cursor: pointer; white-space: nowrap; }
.button:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover { color: @buttons_hover_text_color; font: @buttons_hover_text_font; text-decoration: @buttons_hover_text_decoration; background: @buttons_hover_background; border: @buttons_hover_border; }
.button:active, input[type="submit"]:active, input[type="button"]:active, button:active, .shoutbox_refresh_button.active, .liked.likes-button, .button.state-selected { color: @buttons_active_text_color; font: @buttons_active_text_font; text-decoration: @buttons_active_text_decoration; background: @buttons_active_background; border: @buttons_active_border; }
a.button { padding: 2px 6px; }
.button .status { padding: 0 6px 0 2px; .rounded-corners(0); border: @buttons_border; border-width: 0px 1px 0px 0px; float: left; overflow: hidden; word-wrap: break-word; white-space: nowrap; }
.button .status img { display: block; margin-top: 2px; position: relative; left: 2px; }
.button .icon { padding: 1px 2px 1px 1px; border: 0; float: left; line-height: normal !important; }
input[type="submit"], input[type="button"], button { padding: 2px 6px; min-height: 26px; }
.button-x { position: absolute; top: 50%; right: 3px; margin-top: -8px; cursor: pointer; display: block; text-indent: -9999px; width: 16px; height: 16px; background: url('//images.proboards.com/v5/icons-default.png') -16px -32px no-repeat; }
.button-x:hover { background: url('//images.proboards.com/v5/icons-default.png') 0px -32px no-repeat; }
.button.post-options { padding: 2px 0 2px 0; }
.reply_button { float: right; }

/* Forms */
@forms_field_background: #FFFFFF;
@forms_field_border: @empty;
@forms_field_border_radius: @empty;
@forms_field_text_color: @empty;
@forms_field_text_font: @empty;
@forms_area_background: @empty;
@forms_area_border: @empty;
@forms_area_border_radius: @empty;
@forms_area_text_color: @empty;
@forms_area_text_font: @empty;
@forms_select_background: @empty;
@forms_select_border: @empty;
@forms_select_border_radius: @empty;
@forms_select_text_color: @empty;
@forms_select_text_font: @empty;
input[type="text"], input[type="email"], input[type="password"] { color: @forms_field_text_color; font: @forms_field_text_font; background: @forms_field_background; border: @forms_field_border; .rounded-corners(@forms_field_border_radius); width: 300px; height: 20px; padding: 2px; }
textarea { color: @forms_area_text_color; font: @forms_area_text_font; background: @forms_area_background; border: @forms_area_border; .rounded-corners(@forms_area_border_radius); resize: none; }
select { color: @forms_select_text_color; font: @forms_select_text_font; background-color: @forms_select_background; border: @forms_select_border; .rounded-corners(@forms_select_border_radius); height: 26px; padding: 2px; }
input[type="text"].short { width: 50px; }
input[type="text"].search-input { width: inherit; }
input.date { width: 77px; }
input.time { width: 55px; }
.setting-wrapper + .setting-wrapper { margin-top: 4px; }
.setting-wrapper input { vertical-align: middle; }

/* Labels */
@labels_weight: bold;
@labels_size: 80%;
@labels_case: none;
@labels_caps: normal;
.ui-label { font-size: @labels_size; font-weight: @labels_weight; text-transform: @labels_case; font-variant: @labels_caps; position: relative; top: -1px; margin: 0 5px 0 0; display: inline; }
.label-row { height: 20px; line-height: 20px !important; margin: 10px 0; clear: left; }
.label-row * { float: left; }
.label-row .ui-label, .label-row span.label-delete-button { margin-bottom: -5px; margin-left: 5px; }
#manage-labels-container .style-wrapper .color_input { border: 1px solid #AAAAAA; }
#manage-labels-container .style-wrapper .color-picker { border: 1px solid #AAAAAA; background: #EEEEEE; .rounded-corners(0, 5px, 5px, 0); }
#manage-labels-container .style-wrapper .color-picker-preview { border: 1px solid #AAAAAA; border-right: none; }

/* Quotes */
@quotes_background: @empty;
@quotes_border: 2px solid @container_inner_border_color;
@quotes_border_radius: 0px 0px 0px 0px;
@quotes_sub_background: @quotes_background;
@quotes_sub_border: @quotes_border;
@quotes_sub_border_radius: @quotes_border_radius;
#content .content .quote div.quote_body { background: @quotes_background; border: @quotes_border; .rounded-corners(@quotes_border_radius); margin-top: 7px; padding: 10px 10px; }
#content .content .quote div.quote div.quote_body { background: @quotes_sub_background; border: @quotes_sub_border; .rounded-corners(@quotes_sub_border_radius); }
.quote { margin: 0 10px; padding-bottom: 10px; position: relative; top: 0px; }
.quote div.quote_avatar_container { float: left; }
.quote div.no_avatar_placeholder { display: inline-block; height: 30px; width: 30px; position: absolute; top: 14px; left: 4px; }
.quote div.quote_header { display: block; margin: 7px 0px 16px 35px; }
.quote.no_header { padding-top: 10px; }

/* Info Centers */
@info_background: @empty;
@info_inner_border: 1px solid @container_inner_border_color;
@info_text_color: @container_text_color_1;
@info_text_font: @empty;
@info_links_color: @container_links_color;
@info_links_font: @empty;
@info_links_decoration: @empty;
@info_titles_color: @empty;
@info_titles_font: @empty;
.stats table { background: @info_background; width: 100%; }
.stats .content > table > tbody > tr > td { border: @info_inner_border; border-right-width: 0px; border-bottom-width: 0px; width: 43%; }
.stats .content { color: @info_text_color; font: @info_text_font; }
.stats .content a { color: @info_links_color; font: @info_links_font; text-decoration: @info_links_decoration; }
.stats th { color: @info_titles_color; font: @info_titles_font; text-align: left; }
.stats .icon { width: 70px; text-align: center; vertical-align: middle; }
.stats .info { padding: 10px 10px 10px 0px; }
.stats .content > table { width: 100%; table-layout: auto; }
.stats .content > table table table tr:last-child td a { white-space: nowrap; }
.stats .content > table > tbody > tr > td:first-child { border-left-width: 0px; width: 57%; }
.stats .content > table > tbody > tr:first-child > td { border-top-width: 0px; }

/* Shoutbox */
@shoutbox_message_background: @empty;
@shoutbox_message_border: @empty;
@shoutbox_message_border_radius: 0px 0px 0px 0px;
@shoutbox_message_text_color: @empty;
@shoutbox_message_text_font: @empty;
@shoutbox_shouts_background: @empty;
@shoutbox_shouts_border: 1px solid @container_inner_border_color;
@shoutbox_shouts_border_radius: 0px 0px 0px 0px;
@shoutbox_shouts_text_color: @empty;
@shoutbox_shouts_text_font: @empty;
@shoutbox_shouts_edit_color: @empty;
@shoutbox_shouts_edit_font: 85% @default_forum_text_font_family;
@shoutbox_shouts_edit_decoration: @empty;
@shoutbox_shouts_delete_background: @empty;
@shoutbox_shouts_delete_border: 1px solid @container_inner_border_color;
@shoutbox_shouts_delete_border_radius: 5px;
@shoutbox_shouts_delete_text_color: @container_text_color_1;
@shoutbox_shouts_delete_text_font: bold 100% @default_forum_text_font_family;
@shoutbox_shouts_delete_text_decoration: none;
@shoutbox_shouts_selected_background: @container_highlight_color;
@shoutbox_reply_background: @empty;
@shoutbox_reply_border: 1px solid @container_inner_border_color;
@shoutbox_reply_border_radius: 0px 0px 0px 0px;
@shoutbox_reply_counter_color: @container_text_color_1;
@shoutbox_reply_counter_font: 85% @default_forum_text_font_family;
.shoutbox_welcome_message { color: @shoutbox_message_text_color; font: @shoutbox_message_text_font; background: @shoutbox_message_background; border: @shoutbox_message_border; .rounded-corners(@shoutbox_message_border_radius); margin-bottom: 10px; }
.shoutbox_messages .shoutbox-post { color: @shoutbox_shouts_text_color; font: @shoutbox_shouts_text_font; background: @shoutbox_shouts_background; border: @shoutbox_shouts_border; .rounded-corners(@shoutbox_shouts_border_radius); text-align: left; position: relative; overflow: hidden; margin-top: 10px; margin-right: 10px; padding: 5px 15px 5px 10px; }
.shoutbox_messages .shoutbox_edit_button { color: @shoutbox_shouts_edit_color; font: @shoutbox_shouts_edit_font; text-decoration: @shoutbox_shouts_edit_decoration; display: inline-block; width: 32px; margin-right: 5px; visibility: visible; }
.shoutbox_messages .hidden { visibility: hidden; }
.shoutbox_messages .shoutbox_delete_button { color: @shoutbox_shouts_delete_text_color; font: @shoutbox_shouts_delete_text_font; text-decoration: @shoutbox_shouts_delete_text_decoration; background: @shoutbox_shouts_delete_background; border: @shoutbox_shouts_delete_border; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; position: absolute; right: -7px; top: 0; width: 15px; cursor: pointer; margin-left: 20px; margin-top: 0px; padding: 3px; height: 100%; display: inline-block; }
.shoutbox .state-selected { background: @shoutbox_shouts_selected_background; }
.shoutbox_form { background: @shoutbox_reply_background; border: @shoutbox_reply_border; .rounded-corners(@shoutbox_reply_border_radius); padding: 10px; height: 100px; }
.shoutbox_form .shoutbox_counter { color: @shoutbox_reply_counter_color; font: @shoutbox_reply_counter_font; float: right; margin-top: -5px; }
.shoutbox_form textarea.gray { color: #666666; }
.shoutbox_messages { overflow-y: scroll; text-align: center; position: relative; }
.shoutbox .content { padding: 10px; }
.shoutbox_messages .shoutbox-post:first-child { margin-top: 0px; }
.shoutbox_messages .message { padding-right: 10px; word-wrap: break-word; }
.shoutbox_messages .details { float: right; margin: 0px 15px 0px 10px; height: 16px; vertical-align: bottom; }
.shoutbox_form.reply-box-bottom { margin-top: 10px; }
.shoutbox_form.reply-box-top { margin-bottom: 10px; }
.shoutbox_form input[type="text"] { margin-top: 2px; margin-bottom: 4px; }
.shoutbox_form .button img { display: inline; padding: 2px 0 0; }
.shoutbox_form .shoutbox_refresh_button { float: right; padding: 2px 6px 0px 6px; }
.shoutbox_form ul.tools { white-space: nowrap; display: inline-block; }
.shoutbox_form ul.tools li { float: left; margin: 0; padding: 0; .rounded-corners(0px); border: 0; height: 22px; width: 26px; text-align: center; line-height: 18px !important; }
.shoutbox_form ul.tools li img { padding: 0; }
.shoutbox_form textarea { height: 38px; width: 100%; margin-right: 0px; margin-bottom: 5px; margin-top: 5px; position: inherit; .box-sizing(); }
.shoutbox_form .shoutbox_post_button { margin-left: 0px; }
.shoutbox_form .shoutbox_cancel_button { vertical-align: bottom; }
.shoutbox_name { padding: 5px 0; }
.shoutbox_name input { height: 15px; width: 50%; min-width: 150px; }
.shoutbox_container { position: relative; }
.shoutbox_container > .shoutbox_form_container { width: 100%; }

/* Legend */
.legend .content td { padding: 10px 5px; vertical-align: middle; color: @container_text_color_1; }
.legend .content td:first-child { padding-left: 15px; }
.legend .content td * { vertical-align: middle; }
.legend .new-icon { display: block; }

/* Quick Reply */
.quick-reply textarea { border-width: 1px; border-style: solid; border-color: @container_inner_border_color; height: 150px; padding: 5px; width: 100%; resize: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
.quick-reply .content { padding: 10px; }
.quick-reply .message { margin-bottom: 10px; }
.quick-reply .guest_name { padding: 0px 10px 10px 0px; vertical-align: middle; }
.quick-reply .guest_name label { display: inline; font-weight: 800; }
.quick-reply input[type="submit"] { margin-left: 0px; }

/* Posting Page */
@smiles_menu_width: 280px;
@smile_padding: 5px;
.wysiwyg-area label { font-weight: 800; }
.wysiwyg-area .outline { padding: 10px; border-width: 1px; border-style: solid; border-color: @container_inner_border_color; .rounded-corners(); }
.wysiwyg-area .content { padding: 10px 10px 0px 10px; }
.wysiwyg-area .content > form > div { margin-bottom: 10px; }
.wysiwyg-area .subject_line .controls { float: right; }
.wysiwyg-area .subject_line .subject_input { overflow: hidden; padding-right: 13px; }
.wysiwyg-area .subject_line input { width: 100%; }
.wysiwyg-area .subject_line table { width: 100%; table-layout: auto; }
.wysiwyg-area .subject_line .subject_input { line-height: 28px !important; }
.wysiwyg-area .subject_line table .subject { width: 70px; }
.wysiwyg-area .end-date, .wysiwyg-area .attachment, .new-area .captcha { display: none; }
.wysiwyg-area .poll .poll-options { line-height: 30px !important; }
.wysiwyg-area .poll [name="poll_max_answers"] { width: 25px; }
.wysiwyg-area .poll table { width: 100%; table-layout: auto; }
.wysiwyg-area .poll td { vertical-align: top; padding: 5px 10px 5px 0px; line-height: 230%; }
.wysiwyg-area .poll th { text-align: left; padding-bottom: 5px; }
.wysiwyg-area .submit { height: 32px; vertical-align: middle; line-height: 28px !important; }
.ui-wysiwyg .button { border: none; margin: 0; padding: 0; .rounded-corners(0px); color: #000000; background: none; }
.ui-wysiwyg .button-fontName, .ui-wysiwyg .button-fontSize { background-color: transparent; }
.ui-wysiwyg .ui-selectMenu { line-height: normal; }
.ui-wysiwyg .ui-selectMenu-box { height: 20px; }
.ui-wysiwyg .ui-selectMenu-box .status { border: none; line-height: 20px !important; padding: 0; width: auto; }
.ui-wysiwyg .ui-selectMenu-box .icon { border: none; }
.ui-wysiwyg .ui-selectMenu-box .arrow { height: 20px; }
.new-area .user-search .content { padding: 0px 15px 0px 0px; }
.new-area .recipients h4 { display: block; margin-bottom: 3px; }
.new-area .guest_name input { width: 485px; }
.wysiwyg-area .edit_reason > label { float: left; line-height: 28px; width: 180px; }
.wysiwyg-area .edit_reason > div { margin-left: 180px; margin-right: 8px; }
.wysiwyg-area .edit_reason > div > input { width: 100%; }
.grp_recipients_div { display: none; }
.grp_recipients_div a { display: block; clear: both; padding-top: 10px; }
.loadingOverlay { background-image: url('//images.proboards.com/v5/loader/processing.gif'); background-position: center center; background-repeat: no-repeat; position: absolute; }
#announcement-options { display: none; width: 500px; }
.smiley-menu { width: @smiles_menu_width; }
.smiley-menu > li > a { padding: @smile_padding; }
.smiley-menu > li:hover > a { padding: @smile_padding; }

/* Editing Area */
.ui-wysiwyg .editors { border-width: 1px; border-style: solid; border-color: @container_inner_border_color; }
.wysiwyg-tabs li { float: left; position: relative; bottom: 1px; margin: 1px 2px 0 0; list-style: none; background: @tabs_unselected_background; border: 1px solid @container_inner_border_color; border-top-width: 0px; .rounded-corners(0, 0, 5px, 5px); }
.wysiwyg-tabs li:hover { background: @tabs_hover_background; border: @tabs_hover_border; }
.wysiwyg-tabs li a { color: @tabs_unselected_text_color; font: @tabs_unselected_text_font; text-decoration: @tabs_unselected_text_decoration; float: left; padding: 5px 15px; text-decoration: none; }
.wysiwyg-tabs li.ui-active { background-color: @posts_odd_background_color; background-image: @posts_odd_background_image; background-attachment: @posts_odd_background_attachment; background-repeat: @posts_odd_background_repeat; background-position: @posts_odd_background_position; border: @tabs_selected_border; margin-top: 0px; padding-top: 1px; }
.wysiwyg-tabs li.ui-active a { color: @tabs_selected_text_color; font: @tabs_selected_text_font; text-decoration: @tabs_selected_text_decoration; }
.wysiwyg-smiley-menu .state-disabled { display: none; }

/* BBCode Editor */
@bbcode_editor_background_color: @posts_odd_background_color;
@bbcode_editor_text_color: @posts_odd_text_color;
@bbcode_editor_text_font_family: @empty;
.ui-wysiwyg .editors .bbcode-editor textarea { color: @bbcode_editor_text_color; font-family: @bbcode_editor_text_font_family; background-color: @bbcode_editor_background_color; }

/* Preview Editor */
@ve_posts_odd_text_color: @posts_odd_text_color;
@ve_posts_odd_background_color: @posts_odd_background_color;
@ve_posts_odd_background_image: @posts_odd_background_image;
@ve_posts_odd_background_attachment: @posts_odd_background_attachment;
@ve_posts_odd_background_repeat: @posts_odd_background_repeat;
@ve_posts_odd_background_position: @posts_odd_background_position;
@ve_lists_links_color: @lists_links_color;
@ve_default_forum_text_font_style: @default_forum_text_font_style;
@ve_default_forum_text_font_weight: @default_forum_text_font_weight;
@ve_default_forum_text_font_size: @default_forum_text_font_size;
@ve_default_forum_text_font_family: @default_forum_text_font_family;
@ve_quotes_background: @quotes_background;
@ve_quotes_border: @quotes_border;
@ve_quotes_border_radius: @quotes_border_radius;
@ve_quotes_sub_background: @quotes_sub_background;
@ve_quotes_sub_border: @quotes_sub_border;
@ve_quotes_sub_border_radius: @quotes_sub_border_radius;
@ve_posts_code_background: @posts_code_background;
@ve_posts_code_border: @posts_code_border;
@ve_posts_code_text_color: @posts_code_text_color;
@ve_posts_code_text_font: @posts_code_text_font;

/* Guests Online Dialogs */
#guests-online table { width: 150px; margin: auto; }
#guests-online th, #guests-online td { padding: 2px 0; text-align: @members_align_name; }

/* Login & Registration */
#register-form table { table-layout: auto; }
#register-form td { padding: 5px; }
#register-form td > * { vertical-align: middle; }
#register-form textarea { height: 100px; width: 300px; }
#register-form select { margin: 0; }
#request-msg textarea { margin: 5px 0; height: 100px; width: 50%; }
#forum-message-container { background: @container_background_color_2; color: @container_text_color_2; margin: 10px; padding: 10px; .rounded-corners(@content_area_border_radius); }

/* Transparent Options & Like Buttons */
#options-container, .button.likes-button, .button.post-options, .message-options.button { background-color: transparent; border: 0; }

/* ------ Browser Hacks ------ */
/* This section controls browser combatibility CSS. Since different browsers read coding in different ways (the bastards) you often will have to style things separately for different browser. */

/* IE7 */
.ie7 * { word-wrap: normal; }
.ie7 .shoutbox .shoutbox-post * { word-wrap: break-word; }
.ie7 .show-user .status-input input { width: 95%; margin-top: 0px; }
.ie7 .show-user .status-submit { width: 130px; text-align: right; }
.ie7 .show-user .edit-controls { text-align: right; padding-right: 10px; }
.ie7 .show-user .edit-controls .icon { text-align: center; }
.ie7 .search .options-container { height: 250px; }
.ie7 .calendar .cal-box { border-collapse: collapse; }
.ie7 .ui-pagination { float: left; }
.ie7 .recipients .user-search-selection .ui-selectlist-item .close { right: 0px; }
.ie7 .user-search-selection .ui-selectlist-item .close { right: -8px; }
.ie7 .micro-profile { zoom: 1; *display: inline; width: 188px; margin: 0px 0px 3px 0px; padding-right: 9px; text-align: left; }
.ie7 .container.copy table.list { border-collapse: separate; }
.ie7 .ui-search .search-input { margin-top: -1px; }
.ie7 .threads .main table, .ie7 .conversations .main table { table-layout: auto; }
.ie7 table.list .checkbox { padding-left: 1px; }
.ie7 .avatar-wrapper span { display: inline-block; height: 100%; }
.ie7 .cal-preview-panel .cal-box .head { padding: 2px 0px 2px 4px; }
.ie7 input[type="text"] { padding-top: 5px; vertical-align: middle; }
.ie7 select { vertical-align: middle; }
.ie7 input[type=text].search-input { width: auto; padding: 4px 2px 0px 2px; }
.ie7 .search #what input, .ie7 .search #where input, .ie7 .search #who input, .ie7 .search #who select { width: 210px; }
.ie7 .legend table { table-layout: auto; }
.ie7 .edit-user .options.content-box input[type="submit"] { left: auto; }
/* I'm aware that this line is ridiculous.  It removes the extra black border around submit buttons, by making black transparent and setting the color to off-black */
.ie7 input[type="submit"], .ie7 input[type="button"], .ie7 button { padding: 1px 6px 3px 6px; height: 26px; color: lighten(@buttons_text_color, 1%); background-color: lighten(@buttons_background_color, 1%); filter:chroma(color=#000000); overflow: visible; }
.ie7 .container > .control-bar { margin-bottom: 0px; }
.ie7 a.likes-button, .ie7 .messages .quote-button { margin-right: 3px; min-height: 23px; }
.ie7 .user-search-box input[type=text].search-input, .ie7 .filter input[type="text"].search-input { width: 112px; }
.ie7 .recent-threads-button { padding-right: 2px; }
.ie7 .subject_line .controls { margin-top: 1px; }
.ie7 .ui-poll .results td.answer { width: 175px; }
.ie7 .shoutbox_messages .shoutbox-post.content-box { padding-right: 16px; }
.ie7 footer ul { width: 530px; }
.ie7 .options_menu li.ui-menu-has-sub-menu > .arrow { display: inline; }
.ie7 .options_menu li { width: 190px; position: static; }
.ie7 .options_menu li .arrow { margin-top: -22px; top: auto; }
.ie7 .options_menu hr { display: none; }
.ie7 .quick-reply textarea { width: 99%; }
.ie7 .ui-poll table { table-layout: auto; }
.ie7 .ui-poll .results .stats { float: none; }
.ie7 .users { width: 100%; }
.ie7 .users .ui-pagination { margin: 0 auto; display: inline; float: none; }
.ie7 .name_and_group.float-right { float: none; }
.ie7 .shoutbox_form ul.tools li img { border: 1px solid transparent; }
.ie7 .shoutbox_form textarea { word-wrap: break-word; }
.ie7 #banner { padding: 0px 0px; }
.ie7 a#logo { padding: 0px 20px; line-height: 100px !important; }
.ie7 div.post-options { display: inline !important; }
.ie7 .ui-menu li { background-image: none; }
.ie7 .ui-menu li:hover > a { background-image: none; }
.ie7 .attachment-button-text { padding: 0 5px 3px 5px; }
.ie7 .wysiwyg-area .edit_reason > div { height: 28px; margin-left: 0; margin-right: 8px; }
.ie7 .wysiwyg-area .submit { line-height: 1px !important; }
.ie7 .show-user .controls { margin-right: 10px; }
.ie7 #nav-tree > li { display: inline; }
.ie7 #navigation-tree, .ie7 #nav-tree, .ie7 #nav-tree > li { height: 21px; }
.ie7 .recent-threads-button { height: 15px; }
.ie7 #nav-tree .menu_arrow { top: -1px; border-width: 11px 1px 11px 11px; }
.ie7 #password-wrapper div { display: inline; }
.ie7 #password-wrapper div input[name="password"] { position: relative; top: 5px; }
.ie7 #banner { min-height: @banner_height; height: auto; }
.ie7 #nav-tree { position: relative; overflow: hidden; }
.ie7 .show-user table .center-col:first-child table { table-layout: auto; }
.ie7 .popup_html .ui-menu { position: relative; z-index: 99999999; }
.ie7 #navigation-menu > ul li a { min-width: 21px; }
.ie7 #welcome { min-width: 200px; }
.ie7 .avatar_size_default { font-size: 120px; }
.ie7 .avatar_size_medium { font-size: 60px; }
.ie7 .avatar_size_small { font-size: 40px; }
.ie7 .avatar_size_quote { font-size: 24px; }

/* IE8 */
.ie8 select {padding-top: 2px; padding-bottom: 2px; }
.ie8 .user-search-selection .ui-selectlist-item .close { right: 0px; }
.ie8 .container.copy table.list { border-collapse: separate; }
.ie8 .boards .threads { padding-left: 8px; padding-right: 8px; }
.ie8 .options_menu { max-width: 190px; }
.ie8 input[type="text"] { line-height: 20px; }
.ie8 .recent-threads-button { line-height: 1.4em; }
.ie8 .shoutbox_messages .shoutbox-post.content-box { padding-right: 16px; }
.ie8 .user-search .user-search-box .user-search-input { width: 135px; }
.ie8 table.list td.icon, .ie8 table.list th.icon { width: 54px; }
.ie8 #nav-tree { display: inline-block; }
.ie8 #content #navigation-tree, .ie8 #nav-tree, .ie8 #nav-tree > li { height: 21px; }
.ie8 #content .recent-threads-button { height: 15px; }
.ie8 #nav-tree .menu_arrow { top: -1px; border-width: 11px 1px 11px 11px; }
.ie8 #nav-tree > li { padding-right: 1px; }
.ie8 .popup_html ul { max-width: 550px; }
.ie8 input[type="submit"], input[type="button"], button { min-height: 20px; }
.ie8 .avatar-wrapper { display: block; position: relative;
img { .absolute-center; }
}

/* IE9 */
.ie9 .avatar-wrapper > div > div { display: inherit; }
.ie9 .user-search-selection .ui-selectlist-item .close { right: 1px; }
.ie9 #nav-tree { display: inline-block; }

/* Firefox */
@-moz-document url-prefix() {
select { padding: 4px 2px; }
.ui-search .search-filters-button { padding-left: 6px; }
.ui-tabMenu ul li { height: 27px; }
}

/* Screen-only (tablets, phones) */
@media only handheld {
textarea { font-size: 2em; }
}

/* ------ New Content ------ */
/* Add your new CSS below this line to keep things organized! Use comments to label sections so you can easily find it again! */

/* ==========================================================================
  STICKY MENU CSS BEGINS HERE
  ========================================================================== */

#wrapper {
  /* This number should be the preferred distance between your header and
     the menu bar PLUS the height of your menu bar */
  margin-top: 50px;
}
#navigation-menu {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.container>.control-bar {
  /* This number should be the height of your menu bar */
  top: 31px !important;
}

/* ==========================================================================
  END OF STICKY MENU CSS
  ========================================================================== */

/* Centered Navigation */
#navigation-menu > ul, #navigation-menu > ul li { float:none; }
#navigation-menu > ul { text-align:center; }
#navigation-menu > ul li { display:inline; }

#welcome { float:none; display:inline; }

/* Edited iSlider Remodel by Trinity Blair of Adoxography */
#banner { padding: 0px !important; }

.sp-slideshow {
position: relative;
margin-top:250px;
margin-left:-67px;
width: 500px;
height: 280px;
background-color:#ffffff;
border-radius:20px;
border: 5px solid #E5E5E5;
}

.sp-content {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
font-family:verdana;
font-size:9px;
text-align:justify;
padding:20px; }

.sp-slideshow input {
position: absolute;
bottom: 15px;
left: 49.5%;
width: 13px;
height: 13px;
z-index: 1001;
cursor: pointer;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0; }

.sp-slideshow input + label {
   position: absolute;
   bottom: -50px;
   left: 50%;
   width: 15px;
   height: 15px;
   display: block;
   z-index: 1000;
   background:#372C6F;
   border-radius: 50%;
   transition: background-color linear 0.1s;
}

.sp-slideshow input:checked + label {
background-color: #8DC1E0; }

.sp-selector-1, .button-label-1 {
margin-left: -36px; }

.sp-selector-2, .button-label-2 {
margin-left: -18px; }

.sp-selector-4, .button-label-4 {
margin-left: 18px; }

.sp-selector-5, .button-label-5 {
margin-left: 36px; }

.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
.sp-selector-4:checked ~ .sp-arrow.sp-a5 {
right: 15px;
display: block;
background-position: top right; }

   .sp-selector-2:checked ~ .sp-arrow.sp-a1,
   .sp-selector-3:checked ~ .sp-arrow.sp-a2,
   .sp-selector-4:checked ~ .sp-arrow.sp-a3,
   .sp-selector-5:checked ~ .sp-arrow.sp-a4 {
       left: 15px;
       display: block;
       background-position: top left;
}
   .sp-slider {
       position: relative;
       left: 0px;
       width: 600%;
       height: 100%;
       list-style: none;
       margin: 0px;
       padding: 0px;
       -webkit-transition: left ease-in 0.8s;
       -moz-transition: left ease-in 0.8s;
       -o-transition: left ease-in 0.8s;
       -ms-transition: left ease-in 0.8s;
       transition: left ease-in 0.8s;
   }
   .sp-slider > li {
       color: #000;
       text-align: center;
       width: 16.66%;
       position: relative;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
       -ms-box-sizing: border-box;
       box-sizing: border-box;
       height: 100%;
       float: left;
       opacity: 0.4;
       -webkit-transition: opacity ease-in 0.4s 0.8s;
       -moz-transition: opacity ease-in 0.4s 0.8s;
       -o-transition: opacity ease-in 0.4s 0.8s;
       -ms-transition: opacity ease-in 0.4s 0.8s;
       transition: opacity ease-in 0.4s 0.8s;
   }
   input.sp-selector-1:checked ~ .sp-content .sp-slider {
       left: 0;
   }
   input.sp-selector-2:checked ~ .sp-content .sp-slider {
       left: -100%;
   }
   input.sp-selector-3:checked ~ .sp-content .sp-slider {
       left: -200%;
   }
   input.sp-selector-4:checked ~ .sp-content .sp-slider {
       left: -300%;
   }
   input.sp-selector-5:checked ~ .sp-content .sp-slider {
       left: -400%;
   }
   input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
   input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
   input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
   input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
   input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){
       opacity: 1;
   }
   @media screen and (max-width: 840px){
       .sp-slideshow { height: 345px; }
   }
   @media screen and (max-width: 680px){
       .sp-slideshow { height: 285px; }
   }
   @media screen and (max-width: 560px){
       .sp-slideshow { height: 235px; }
   }
   @media screen and (max-width: 320px){
       .sp-slideshow { height: 158px; }
   }

.thread a {
font-family:arial black;
letter-spacing:-2px;
font-size:18px;
text-transform: lowercase;}

.created a {
font-family: courier new;
font-size:12px;
text-transform: uppercase; }

.sub {
color:#333333!important;
}

FORUM WRAPPER
<!DOCTYPE HTML> <!-- DO NOT REMOVE! -->
$[tag.html.open] <!-- DO NOT REMOVE! -->
<head> <!-- THE HEAD TAGS ARE IMPORTANT // DO NOT REMOVE! -->

<link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <!-- DO NOT REMOVE! -->
<title>$[title] | $[forum.name]</title> <!-- THIS IS HOW YOUR FORUM'S TITLE APPEARS AT THE TOP OF A BROWSER WINDOW -->
$[head] <!-- DO NOT REMOVE! -->
       <!-- PLACE ALL SCRIPTS HERE -->
</head>
<body> <!-- THE BODY TAGS ARE IMPORTANT // DO NOT REMOVE! -->
       <!-- THIS IS WHAT APPEARS FOR STAFF AT THE TOP OF YOUR FORUM IF YOU HAVE YOUR FORUM ON MAINTENCE MODE -->
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<!-- START OF YOUR NAVIGATION BAR -->
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a> <!-- DO NOT REMOVE! -->
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a> <!-- DO NOT REMOVE! -->
               <!-- THIS IS THE CONTAINER OF YOUR NAVIGATION BAR -->
<div id="navigation-menu" class="ui-helper-clearfix">
                   <!-- THIS IS THE CONTAINER OF YOUR NAVIGATION MENU BUTTONS -->
<ul role="navigation">
                       <!-- THIS FOREACH STATEMENT IS PLACING EACH BUTTON -->
{foreach $[navigation.menu]}
<li>
<a {if $[navigation.menu.active]}class="state-active"{/if} href="$[navigation.menu.href]" {if $[navigation.menu.accesskey]}accesskey="$[navigation.menu.accesskey]"{/if}> <!-- IGNORE THE RED // IT'S CORRECT! -->
$[navigation.menu.name] <!-- DO NOT REMOVE! -->
                                   <!-- IF THERE IS A NOTIFICATION FOR A PARTICULAR BUTTON -->
{if $[navigation.menu.notification.total]}
                                    <!-- THIS IS THE NAVIGATION BUTTON BUBBLE CONTAINER -->
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
                                           <!-- THIS IS THE SQUARE CONTAINING THE NUMBER IN THE NAVIGATION BUTTON BUBBLE -->
<div class="tip-number">$[navigation.menu.notification.total]</div>
                                           <!-- THIS IS THE SMALL ARROW AT THE BOTTOM OF THE NAVIGATION BUTTON BUBBLE -->
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
<li>
<!-- THIS IS THE WELCOME TEXT OF YOUR NAVIGATION BAR THAT APPEARS TO THE RIGHT -->
<div id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.  
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span>  $[logout_link]
{/if}
</div>
</li>
</ul>
                   
</div>
               <!-- END OF YOUR NAVIGATION BAR -->
       
           <!-- START OF BANNER STUFF -->
<center>
<table width="950px;">
<tr>
<td><img src="http://i.imgur.com/ZwYncdt.png" style="margin-left:-50px;margin-top:30px;"></td>
<td><div class="sp-slideshow">
           
   <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
   <label for="button-1" class="button-label-1"></label>
   
   <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
   <label for="button-2" class="button-label-2"></label>
   
   <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
   <label for="button-3" class="button-label-3"></label>
   
   <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
   <label for="button-4" class="button-label-4"></label>
   
   <div class="sp-content">
       <div class="sp-parallax-bg"></div>
       <ul class="sp-slider clearfix">
           <li>Kitty ipsum dolor sit amet, zzz nibh rhoncus tincidunt a fluffy fur attack, scratched judging you iaculis jump enim bat. Sunbathe attack your ankles nibh feed me faucibus orci turpis, lay down in your way nunc kittens sleep in the sink attack. Meow zzz zzz hairball, etiam toss the mousie quis nunc sleep in the sink tristique purr pharetra attack. Faucibus stuck in a tree ac adipiscing, adipiscing hiss zzz sagittis stuck in a tree sleep in the sink justo climb the curtains. Sleep in the sink justo tempus litter box, vestibulum faucibus biting pharetra sagittis shed everywhere vestibulum. Amet nullam etiam leap rip the couch nibh, nunc leap sleep in the sink consectetur fluffy fur. Nunc in viverra orci turpis vulputate tincidunt a kittens, sleep on your face elit in viverra faucibus stretching consectetur. Stuck in a tree pellentesque shed everywhere biting, egestas chase the red dot toss the mousie hairball biting tristique sleep on your keyboard eat.</li>
           <li>slide 2</li>
           <li>slide 3</li>
           <li>slide 4</li>
       </ul>
   </div><!-- sp-content -->
   
</div><!-- sp-slideshow --></td>
</tr>
</table>
</center>
           <!-- END OF BANNER STUFF -->

<!-- THE START OF YOUR FORUM WRAPPER -->
<div id="wrapper">

$[participated_threads_link] <!-- PARTICIPATED BUTTON VARIABLE THAT APPEARS FOR MEMBERS ONLY AND SHOWS A "NEW" ICON WHEN A THREAD YOU PARTICIPATED IN HAS BEEN UPDATED -->

           <!-- YOUR NAVIGATION TREE THAT DROPS DOWN TO SHOW YOU THE CONTENTS OF YOUR FORUM -->
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}

$[header] <!-- HEADER VARIABLE (THE PLACES THE TOP ADVERTISEMENT AND ALL HEADER INFORMATION WITHIN GLOBAL, MAIN, OR BOARD HEADERS) MUST BE PRESENT AND ABOVE THE CONTENT VARIABLE -->

<div id="content" role="main">
               <!-- NOTICE CONTAINER // DON'T REMOVE! -->
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
               <!-- END NOTICE CONTAINER -->
$[content] <!-- CONTENT VARIABLE // DON'T REMOVE! -->
$[shoutbox] <!-- SHOUTBOX VARIABLE, YOU CAN MOVE IT WHEREVER YOU WANT IT TO APPEAR! -->
</div>

$[footer] <!-- FOOTER VARIABLE (THE PLACES THE BOTTTOM ADVERTISEMENT, PROBOARDS CREDITS, AND ALL FOOTER INFORMATION WITHIN GLOBAL, MAIN, OR BOARD FOOTERS) MUST BE PRESENT AND BELOW THE CONTENT VARIABLE -->
       </div>
       <!-- THE END OF YOUR FORUM WRAPPER -->
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html> <!-- DO NOT REMOVE! I HAVE NO IDEA WHY IT'S RED, BUT IT'S FINE. NO TOUCHY. -->

THREAD LIST
{foreach $[thread]} <!-- DO NOT REMOVE! -->
<tr><td class="main clickable">
<table><tr>
                   <td class="checkbox clickable">$[thread.checkbox]</td><td>
<table><tr><td width="550px"><div class="thread">$[thread]</div>
<div class="created" style="font-family: courier new; font-size:12px; text-transform: uppercase;">created by $[thread.created_by] {if $[thread.pagination]}<span class="ui-micro-pagination" style="padding-left:5px">$[thread.pagination]</span>{/if}</div>
</td>
<td vAlign="middle">
<table><tr><td><div style="width:50px;height:50px;border:4px solid #ACACAC;border-radius: 50px; -moz-border-radius: 50px;-webkit-border-radius: 50px;-o-border-radius: 50px;overflow:hidden;margin-bottom:0px;">$[thread.last_post.created_by.avatar_small]</div></td>
<td><div class="circle">$[thread.views]<br>views</div></td>
                       <td><div class="circle">$[thread.replies]<br>posts</div></td></tr></table>
                   </td>
<td width="200px" class="thread" style="font-family:courier new; font-size:12px; text-transform:uppercase; text-align:center;">last post created by
<br>
$[thread.last_post.created_by]</td></tr></table></tr></table></td></tr>{/foreach}

<style>
.circle {
background-color: #32346E;
color:#ffffff;
text-transform: uppercase;
text-align: center;
font: 11px courier new;
padding: 20px 5px;
line-height:10px;
width: 50px;
border-radius: 50px;
vertical-align: middle;
margin-left: 5px;

.circle a { color:#ffffff!important;font:11px Courier New!important; }
</style>

HOME
$[news] <!-- VARIABLE THAT PLACES YOUR NEWS SLIDER -->
<!-- FOREACH STATEMTENT THAT PLACES EACH OF YOUR FORUM'S CATEGORIES ON THE HOME PAGE -->
{foreach $[category]}
$[category.anchor] <!-- DO NOT REMOVE! -->
<div class="container boards">
   <div class="title-bar"><div style="font-family: 'Dancing Script', cursive;font-size:48px;text-transform:lowercase;color:#6CBCDE;"><font color="#5E98C2">●</font><font color="#5174A6">●</font><font color="#44508A">●</font><font color="#372C6F">●</font> $[category.display_name]</div></div>
   <div class="content cap-bottom">
       $[category.board_list]
   </div>
</div>
{/foreach}

{if $[show_stats]}

   <div class="title-bar"><div style="font-family: 'Dancing Script', cursive;font-size:48px;text-transform:lowercase;color:#6CBCDE;"><font color="#5E98C2">●</font><font color="#5174A6">●</font><font color="#44508A">●</font><font color="#372C6F">●</font> information station</div></div>
   
       <table width="100%" cellspacing="10">
<tbody>
<tr>
<td class="infotitle" width="50%">posts & threads</td>
<td class="infotitle" style="text-align:right;" width="50%">member statistics</td>
</tr>
<tr>
<td class="infobg" style="margin-right:5px;" width="50%"><div style="font-family:courier new;">$[last_updated_thread.recent_link] by $[last_updated_thread.last_post.created_by]

<table width="100%"><tr><td align="right"><div class="circle">$[recent_posts_link]</div> <div class="circle">$[recent_threads_link]</div></td></tr></table></div></td>
<td class="infobg" style="margin-left:5px;" width="50%"><div class="circle">$[total_members]
<br>
MEMBERS</div></td>
</tr>
<tr>
<td class="infotitle" width="50%">online now</td>
<td class="infotitle" style="text-align:right;" width="50%">online in the past 24 hours</td>
</tr>
<tr>
<td class="infobg" width="50%">
{foreach $[online_user]}
                                   $[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
                                   {/foreach}
<div style="text-align:right;font-family:courier new; font-size:10px; text-transform:uppercase;">$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, {if $[view_guests_online_link]}{/if}$[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}{if $[view_guests_online_link]}{/if}</div></td>
<td class="infobg" width="50%">
{foreach $[online_user_24]}
                                   $[online_user_24]{if $[online_user_24.invisible]} <span class="small">(invisible)</span>{/if}$[online_user_24.comma]
                                   {/foreach}
<div style="text-align:right;font-family:courier new; font-size:10px; text-transform:uppercase;">$[total_staff_online_24] Staff, $[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}, $[total_guests_online_24] Guest{if $[total_guests_online_24] != 1}s{/if}</div></td>
</tr>
</tbody>
</table>

{/if}

<style>
.infotitle {
font-family: arial;
font-size: 28px;
letter-spacing: -3px;
text-transform: lowercase;
color: #6cbcde;
text-shadow: -1px -1px 0 #f9f9f9, 1px -1px 0 #f9f9f9, -1px 1px 0 #f9f9f9, 1px 1px 0 #f9f9f9, 2px 2px 2px rgba(0,0,0,.15); }

.infobg {
background-color:#F2F2F2;
padding:5px;
margin:20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}

.circle {
background-color: #32346E;
color:#ffffff;
text-transform: uppercase;
text-align: center;
font: 10px courier new;
padding: 20px 5px;
line-height:10px;
width: 50px;
border-radius: 50px;
vertical-align: middle;
margin-left: 5px;

.circle a {
color:#ffffff!important;
font:9px Courier New!important; }
</style>

POST LIST
{foreach $[post]}
<tr id="$[post.content_id]" class="$[post.content_class]{if $[post.even]} even{/if}{if $[viewing_recent_posts]} recent{/if}">
<td class="$[post.unblocked_class]">
<table role="grid">
<tr>
<td class="left-panel" rowspan="2">
$[post.created_by.miniprofile]
</td>
<td class="content">
<article><div style="text-align:right;" class="info">
$[post.created_on]
{if $[post.how_posted]}
<span class="post-method">via $[post.how_posted]</span>
{/if}
</div>
<h3 class="title aria-hidden">Post by $[post.created_by.name] on $[post.created_on]</h3>
<div class="message">$[post.message]</div>
</article>
</td>
</tr>
<tr>
                   <!-- THE FOOT COLUMN THAT HOLDS THE USER SIGNATURE AND THE LAST EDITED INFORMATION -->
<td class="foot">
                       <!-- USER SIGNATURE -->
{if $[post.created_by.signature]}
<div class="signature">$[post.created_by.signature]</div>
{/if}
</td>
<td>
<div class="controls" style="text-align:right;">
$[post.quote_button]
$[post.edit_button]
$[post.select_options]
</div>
</td>
</tr>
</table>
</td>
       <!-- IF THE POST IS POSTED BY A USER YOU HAVE BLOCKED, THIS WILL BE DISPLAYED INSTEAD // DO NOT REMOVE! -->
{if $[post.is_blocked]}
<td class="$[post.blocked_class] content center">
<div class="message note pad-bottom">This post is hidden</div>
$[post.display_blocked_post_button]
</td>
{/if}
</tr>
{/foreach}
<!-- IF THERE ARE NO POSTS TO BE DISPLAYED // DO NOT REMOVE! -->
{if !$[post]}
<tr class="last"><td class="last center" colspan="1">No posts were found.</td></tr>
{/if}

<style>
.postinfo {
width:100%;
background-color:#000;
text-align:right;
font-family:courier new;
font-size:9px;
text-transform:uppercase; }
</style>

I think those are all of the ones you need to help me with my problems? If you need others, let me know.

1. HERE is what I mean with the bubbles. It's not a circle, and it also isn't next to the links. I want it inside, next to them. and round. lol

2. I tried what you did, but it brought me back to the same position that it is in right now. I'm not sure how to fix it now...

3. I also added in the cellspacing, but it did nothing again.

4. This is what I mean when I say they are all showing up. Normally, when you hover over a thread, the little check box appears, but for me, all of them are showing at once. D:

5. All of the source sheets are provided, hopefully that can help with the issue!

6. I know it's a transition code, but what I want it to do is spread out and move to the right. I am not sure how to do that, or if I am even using the right sort of transition code?

[Egao, Egao Everywhere]

II. Did you get the carousel code from somewhere? It's really confusing and has a lot of clutter. I don't see the class for sp-parallax-bg or sp-slider clearfix either. I'll get back on this later when I get home but here's the carousel I use: jsfiddle.net/1npLvp4h/ I changed the buttons to text but besides that, it should be the same carousal as the one that you use, but more bare bone.

III. The code works fine. I think it has something to do with the body of the wrapper? When I tried to inspect the element, the two infobg are joined together and there is no space in-between.

IV. I can imagine how the code would work but I'm not familiar with PB CP. I'll get back to this one if someone else haven't answered it.

VI. When hovered? You should be able to accomplish it by adding padding-left in the hover class of the div. jsfiddle.net/tbotc/uwu79jfh/2/ I added letter spacing if you literally meant "spread out."

I'll get back on you on the rest tomorrow if no one has gotten back to you. Not feeling well at the moment.

[middy♥]

II. That code is a lot better, thanks! But now how do I get the buttons to be round again, and below the box? And how do I move the box back to below the image?

III. That is what I am talking about. The infobg needs padding or margin or something, but I can't figure out how to change it. I checked out the fiddle and it works there, but I don't know why it's not working on the actual board...

IV. Ok, thanks!

VI. I got it to work how I wanted. Thanks a lot!

Thanks so much for your help so far. I hope you feel better soon!

[Egao, Egao Everywhere]

I. It's something CSS I think. Could you right click -> view page source and ctrl+f "Start of your navigation bar" copy paste to me the block of code. Something like this:

<!-- START OF YOUR NAVIGATION BAR -->
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a> <!-- DO NOT REMOVE! -->
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a> <!-- DO NOT REMOVE! -->
<!-- THIS IS THE CONTAINER OF YOUR NAVIGATION BAR -->
<div id="navigation-menu" class="ui-helper-clearfix">
<!-- THIS IS THE CONTAINER OF YOUR NAVIGATION MENU BUTTONS -->
<ul role="navigation">
<!-- THIS FOREACH STATEMENT IS PLACING EACH BUTTON -->

<li>
<a class="state-active" href="/" accesskey="1"> <!-- IGNORE THE RED // IT'S CORRECT! -->
Home <!-- DO NOT REMOVE! -->
<!-- IF THERE IS A NOTIFICATION FOR A PARTICULAR BUTTON -->

</a>
</li>

<li>
<!-- THIS IS THE WELCOME TEXT OF YOUR NAVIGATION BAR THAT APPEARS TO THE RIGHT -->
<div id="welcome">

Welcome Guest.

Please <a href="https://login.proboards.com/login/6158448/1">Login</a> or <a href="https://login.proboards.com/register/6158448">Register</a>.


</div>
</li>
</ul>

</div>
<!-- END OF YOUR NAVIGATION BAR -->

II. Moving the buttons below the content

Just move the #controls block under the slides. Be sure to leave the input where it is; it needs to be above the slides.

Getting the buttons round again

<div id="controls">
<label for=slide1> one </label>
<label for=slide2> two </label>
<label for=slide3> three </label>
</div>

Set your eyes on the label tag. Getting the buttons is just css work.

You don't want any text (one, two, three) for the tabs. Instead, you want circles. So we're going to make circles. (You can get rid of the text in the label, btw.)

#controls label { background-color: grey;
width: 10px;
height: 10px;
border-radius: 10px;
display: inline-block;
margin: 0px 2px;
opacity: 0.4;
}

You would probably want to have the circle be styled slightly differently so you would know you're in that tab. In this case, I just increased the opacity to 1.

#slide1:checked ~ #controls label:nth-child(1),
#slide2:checked ~ #controls label:nth-child(2),
#slide3:checked ~ #controls label:nth-child(3){
opacity: 1;
}

Yeah, you have to manually add more slide classes if you have more than 3, which I don't think is an issue since you only need few.

If you don't know what the squiggly does (because I got stuck on this one for a while): stackoverflow.com/questions/10782054/what-does-the-css-tilde-squiggle-twiddle-selector-do

And this was my source: csscience.com/responsiveslidercss3/

III. Try adjusting the wrapper_width to 1200px or something. Anything that will make the forum wide.

IV. I'LL BRB AGAIN ON THIS.

V. Get rid of the <article> tag

VI. Whoo!

[EY ✻ BECKET !?]

I don't mean to butt in on this middy♥ and Egao, Egao Everywhere, so if I seem like I am I apologize.

I. I think that what you want can be done with simply CSS- I don't know if this will help but reading what you wanted reminded me of it ~ Wouldn't be too hard to modify the stylesheet modifications Alisha gives, so that the bubbles are circular.

[SEADRA]

Mar 1, 2015 13:20:52 GMT -8 EY ✻ BECKET !? said:

I don't mean to butt in on this middy♥ and Egao, Egao Everywhere, so if I seem like I am I apologize.

I. I think that what you want can be done with simply CSS- I don't know if this will help but reading what you wanted reminded me of it ~ Wouldn't be too hard to modify the stylesheet modifications Alisha gives, so that the bubbles are circular.

you can also easily edit this in the advanced css visual editor thing i feel like people look down on it but it is honestly bae, and you can find where to edit it here, smangii makes it super easy to find.

[middy♥]

That modification to the notification bubble worked~ It is exactly how I want it!

Now the buttons for the table is fine, but I am actually considering having a different sort of information style... So how do I make a sticky side-table with the tabbed tables? |D I am just having a hard time with the apparat table...

My posts are still aligned weird, even after taking out the <article> tags. And I upped the wrapper_width to 1000px (after seeing that making it 1200 makes it way too wide) and there is still no space between my infobg items.

[Egao, Egao Everywhere]

Sorry, totally missed your post here. I'll get back to this later. Just gonna be gone for a few hours.

[middy♥]

Thank you! Though as you can probably see, I have taken out the info center because it was just bugging me so much. I wanted to do something a little bit different. I was wondering if you wanted to maybe... give me some ideas? Or something. lol IDK I am just blocked right now when it comes to design.

As of now, the posts are the only things giving me a problem.

[Egao, Egao Everywhere]

I think removing the design of the info center was for the better. Make it simple and purely textual? Some typography of some sort to balance out the block designs you have in the forums.

1. cdn.tutsplus.com/webdesign/uploads/legacy/083_Winning_Typography/typography_4.jpg
You could try a horizontal statistic style in that manner. 40 members, 1, 234 posts, etc, with the numbers being huge and the text being underneath them.

2. designmodo.com/wp-content/uploads/2011/08/292.jpg
It's not that appropriate for your current design but it's another idea

3. images.wookmark.com/web-design-buffalo-studio-typography-wookmark-174504.jpg
If you want your circles

Those are just ideas. They might not be best for your design.

As for the info table, I think you got it running? Is it how you wanted it to be?

Will get back on you again on the posts. Gotta eat lunch and watch yugioh arc v again while eating

[Egao, Egao Everywhere]

Oh, looks like you got your posts working too? How'd you fix it?

[middy♥]

I love the first example you gave, that's actually really neat. I'll try to do something like that!

I reset the posting area back to default. :( this is my mock for the posting area, but every time I move the "quote/edit/settings" section below the posting area, it messes up and makes everything aligned weird. So I guess maybe I won't do that. x.x

[SEADRA]

can i suggest making your forum width smaller it's not friendly to smaller screens