Member Legend in Info Center (Update: 3 May '13)

[Stinky666]

Drop Down Member / User Legend in Info Center


I just posted this for someone so figured I would make a thread and share for everyone to see/use.
Any problems, questions, help etc. just reply asking

Preview:

---

So first of all, go to Admin > Themes > Layout Templates > Home
For the default Info Center: If you want it to appear to the right side of the "users online" section, add it to line 85
If you have made edits to your home template/info center, and are not sure where to add it, just ask

<font style ="float:right; padding: 0px;">
<a href="#" class="admlegend" title="Administrator"><div id="squareAdm"></div></a> <a href="#" class="gmodlegend" title="Global Moderator"><div id="squareGMod"></div></a> <a href="#" class="modlegend" title="Moderator"><div id="squareMod"></div></a> <a href="#" class="memlegend" title="Member"><div id="squareMem"></div></a>
</font>


The green bits are the ID's for the CSS for when you hover over the squares.
The blue bits are the text that displays in the dropdown when you hover (on my site I gave a link to, hover over the blue and it says "Administrator"). So, these are the Group/Rank names for that colour.
The orange bits are the ID's for the coloured squares.

The above green parts NEED to match with the green parts below. So for example, above it has admlegend, this relates to the Admin Legend. So below, it needs to be the same ID as the admlegend. You can name it differently, to be adminlegend, but be sure to change the 3 for it below in the CSS.

Also, the orange bits below need to match their ID's too. squareAdm for example below, needs to match squareAdm above.

---

Next go to your Style Sheet. When there, on line 456 you should see:

.container > .content { overflow: hidden; }

Change the part in pink to visible


UPDATE 3^rd MAY 2013: (with major thanks to Shrike)
- For some reason the above stopped working on its own, so now you also need to go to line 128 (on a default theme), and find:

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

Change "hidden" to "visible", like so:
#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: visible; }

---

Copy and paste the below into your Style Sheet (Admin > Themes > Advanced Styles & CSS > Style Sheet) at the very bottom.
Each section has a heading, to tell you what is for what to make editing slightly easier.
For the coloured squares, make sure the last one in the list (currently squareMem) does NOT have the bit for "margin-right: 3px",


/**************************************************************************
* Member Legend - Info Center *
**************************************************************************/
/* Coloured Squares */
#squareAdm { width: 10px; height: 10px; background: #1979e6; margin-right: 3px; display: inline-block; }
#squareGMod { width: 10px; height: 10px; background: #e68819; margin-right: 3px; display: inline-block; }
#squareMod { width: 10px; height: 10px; background: #e219e6; margin-right: 3px; display: inline-block; }
#squareMem { width: 10px; height: 10px; background: #8ccf55; display: inline-block; }


/* Administrator */
a.admlegend {
position: relative;
text-decoration: none;
}
a.admlegend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -15px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.admlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(39, 39, 39,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}

/* Global Moderator */
a.gmodlegend {
position: relative;
text-decoration: none;
}
a.gmodlegend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -42px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.gmodlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(39, 39, 39,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left:-2px;
}

/* Moderator */
a.modlegend {
position: relative;
text-decoration: none;
}
a.modlegend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -30px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.modlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(39, 39, 39,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}

/* Member */
a.memlegend {
position: relative;
text-decoration: none;
}
a.memlegend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -30px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.memlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(39, 39, 39,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}

---

To add more groups:
Find where it says /* Member */, and then copy all of the lines below that (including that bit) and paste BELOW the already existing bit. Now edit it to the new group name. Lets for the fun of it call it a Ninja group. I would change the "heading" from /* Member */ to /* Ninja */
Then I would think of an ID for it, because remember you need to edit those 3 sections in green. We will give this new group the ID of ninjlegend.
Edit those 3 sections for it in orange.

Now at the top for the Home Layout Template (the first part we did) add this to the end:
<a href="#" class="ninjlegend" title="Ninja"><div id="squareNinj"></div></a>

Also, don't forget to add a new line for the coloured squares, and remember to make sure the orange ID's match up.

To change the hover background/border colours from being dark, find (39, 39, 39,.8) for each portion above in the CSS (I have coloured them red), and change it to any RGB percent you want. A good site to find this is: colorhexa.com - simply type in the hex code, then on the left side it says RGB Percent. The last number ".8" is the opacity in which to have it set to. ".0" would be completely invisible/transparent.

[Welshling]

hrm ok i don't get the instructions here i'm sorry >.<

<a href="#" class="admlegend" title="Administrator"><div id="squareAdm"></div></a> <a href="#" class="gmodlegend" title="Global Moderator"><div id="squareGMod"></div></a> <a href="#" class="modlegend" title="Moderator"><div id="squareMod"></div></a> <a href="#" class="memlegend" title="Member"><div id="squareMem"></div></a>

is this piece already in the home tab, if so where about's since i don't know where to look

[Stinky666]

Apr 13, 2013 12:46:46 GMT -8 Welshling said:

hrm ok i don't get the instructions here i'm sorry >.<

<a href="#" class="admlegend" title="Administrator"><div id="squareAdm"></div></a> <a href="#" class="gmodlegend" title="Global Moderator"><div id="squareGMod"></div></a> <a href="#" class="modlegend" title="Moderator"><div id="squareMod"></div></a> <a href="#" class="memlegend" title="Member"><div id="squareMem"></div></a>

is this piece already in the home tab, if so where about's since i don't know where to look

You need to place it in yourself. It all depends where you want it.
If you want it on the far right side of the users online, create a new line on line 85, and paste it in, so it looks like this:

<tbody>
<tr><th>Users Online</th></tr>
<tr><td>$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, $[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}.</td></tr>
<tr><td>
{foreach $[online_user]}
$[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
{/foreach}
{if $[total_online_not_shown]}
, and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>
{/if}
       <font style ="float:right; padding: 0px;">
                                                       <a href="#" class="admlegend" title="Administrator"><div id="squareAdm"></div></a> <a href="#" class="gmodlegend" title="Global Moderator"><div id="squareGMod"></div></a> <a href="#" class="modlegend" title="Moderator"><div id="squareMod"></div></a> <a href="#" class="memlegend" title="Member"><div id="squareMem"></div></a>
                                                   </font></td></tr>
</tbody>

[pawl]

Might be worth adding your last post to the first (or at least a couple of lines either side) for people that have modified their Home template already. =]

[Stinky666]

Apr 13, 2013 14:13:35 GMT -8 pawl said:

Might be worth adding your last post to the first (or at least a couple of lines either side) for people that have modified their Home template already. =]

In the original post, it says:

"So first of all, go to Admin > Themes > Layout Templates > Home
(If you want it to appear to the right side of the "users online" section, add it to line 85)"

[pawl]

Apr 13, 2013 14:16:28 GMT -8 Stinky666 said:

Apr 13, 2013 14:13:35 GMT -8 pawl said:

Might be worth adding your last post to the first (or at least a couple of lines either side) for people that have modified their Home template already. =]

In the original post, it says:

"So first of all, go to Admin > Themes > Layout Templates > Home
(If you want it to appear to the right side of the "users online" section, add it to line 85)"

But people who have modified their home template (like me) may find that where you're talking about is nowhere near their line 85. =P


Also, added to index. =]

[Stinky666]

Apr 13, 2013 14:19:22 GMT -8 pawl said:

Apr 13, 2013 14:16:28 GMT -8 Stinky666 said:

In the original post, it says:

"So first of all, go to Admin > Themes > Layout Templates > Home
(If you want it to appear to the right side of the "users online" section, add it to line 85)"

But people who have modified their home template (like me) may find that where you're talking about is nowhere near their line 85. =P


Also, added to index. =]

Good point. Ok how's the following:

So first of all, go to Admin > Themes > Layout Templates > Home
For the default Info Center: If you want it to appear to the right side of the "users online" section, add it to line 85
If you have made edits to your home template/info center, and are not sure where to add it, just ask

[Sunny]

Hey there.

I've added in all of the code but I'm not getting anything. Here is my text site: folksongs.freemessageboards.com/

[Welshling]

Stinky666 yes your edited version sounds much better quick question, is there an easier way to do this for multiple member groups? all are members in the sense they're not staff, but all have different species specific names to suit. err yeah >.<
vampire, hunter, werewolf, angel, demon and so many more ~is dreading doing all this~

[Stinky666]

Apr 17, 2013 10:13:23 GMT -8 Sunny said:

Hey there.

I've added in all of the code but I'm not getting anything. Here is my text site: folksongs.freemessageboards.com/

Hi Sunny. Could you possibly paste me the "Home" template in your Layout Templates, and also the CSS for the member legend in the Style Sheets?
Because both are long (especially the CSS), you can PM me them if you prefer, or stick them in [spoiler]CSS HERE[/spoiler] tags

Apr 17, 2013 10:30:15 GMT -8 Welshling said:

Stinky666 yes your edited version sounds much better quick question, is there an easier way to do this for multiple member groups? all are members in the sense they're not staff, but all have different species specific names to suit. err yeah >.<
vampire, hunter, werewolf, angel, demon and so many more ~is dreading doing all this~

Hate to be the bearer of bad news, but unfortunately not.
The only things I could recommend for something like that is to be organized.

How I would personally do it for instance. I would open up 2 different Notepad Files.
Notepad 1, I would paste the following:

<font style ="float:right; padding: 0px;">
<a href="#" class="admlegend" title="Administrator"><div id="squareAdm"></div></a> <a href="#" class="gmodlegend" title="Global Moderator"><div id="squareGMod"></div></a> <a href="#" class="modlegend" title="Moderator"><div id="squareMod"></div></a> <a href="#" class="memlegend" title="Member"><div id="squareMem"></div></a>
</font>

I would also put Each one of those onto a NEW line (only for the notepad, it wont work properly if copy and pasted back like this). For example:


<a href="#" class="admlegend" title="Administrator"><div id="squareAdm"></div></a>
<a href="#" class="gmodlegend" title="Global Moderator"><div id="squareGMod"></div></a>
<a href="#" class="modlegend" title="Moderator"><div id="squareMod"></div></a>
<a href="#" class="memlegend" title="Member"><div id="squareMem"></div></a>


That just makes it MUCH easier to edit the ID's and titles.

Thirdly, Try stick to some form of character count for the Group ID's. For instance, I like to stick with 3 or 4 characters per group (adm / gmod / mod / mem (all followed by "legend").

In your other Notepad file, copy and paste the BIG part of CSS only - so none of the /* Coloured Squares */ part (I edit that part last)
By default there are 4 legends/groups. I would paste that into the notepad TWICE, so there is then 8.

The BOTTOM 4, I would EDIT to be the new groups. Once done and happy, I would then paste in so many more (in my case, another 4) to the bottom of the notepad file. So then I would have 12 in total. I'd repeat the process and edit those.
(Note: Edit ALL ID's and titles for Notepad 1, FIRST before doing the CSS)


May seem obvious, but little tips like that are life savers, or can be.

[Welshling]

Stinky666 ok thanks, i am not going to even attempt this yet. way too early in the morning for css >.< I will let you know if i get around to it today, no doubt i will need further help cause that wasn't obvious to me and yeah its not sinking in yet.

[Stinky666]

Apr 18, 2013 0:34:00 GMT -8 Welshling said:

Stinky666 ok thanks, i am not going to even attempt this yet. way too early in the morning for css >.< I will let you know if i get around to it today, no doubt i will need further help cause that wasn't obvious to me and yeah its not sinking in yet.

Haha I know that feeling
You know where I am =D

[Sunny]

Sure:

Home Templet

SPOILER: Click to show

$[news]
{foreach $[category]}
$[category.anchor]
<div class="container boards">
<div class="title-bar bbcode"><h2><div class="title_wrapper" style="text-transform: uppercase;">$[category.display_name]</div></h2></div>
<div class="content cap-bottom">
$[category.board_list]
</div>
</div>
{/foreach}
{if $[legend]}
<div class="container legend">
<div class="title-bar"><h2>Legend</h2></div>
<div class="content">
<table>
<tr>
{foreach $[legend]}
<td>$[legend.icon] <span>$[legend.name]</span></td>
{/foreach}
</tr>
</table>
</div>
</div>
{/if}
{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>Forum Information & Statistics</h2></div>
<div class="content">
<table>
<tbody>
<tr>
<td>
<table>
<tr>
<td class="icon">$[image.stats]</td>
<td class="info">
<table>
<tbody>
<tr><th>Threads and Posts</th></tr>
<tr><td>Total Threads: $[total_threads]      Total Posts: $[total_posts]</td></tr>
{if $[last_updated_thread]}<tr><td>Last Updated: $[last_updated_thread.recent_link] by $[last_updated_thread.last_post.created_by_user] ($[last_updated_thread.last_post.date])</td></tr>{/if}
<tr><td>$[recent_threads_link] - $[recent_posts_link] - $[rss_feed_link]{if $[mark_boards_read_link]} - $[mark_boards_read_link]{/if}</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="icon">$[image.members]</td>
<td class="info">
<table>
<tbody>
<tr><th>Members</th></tr>
<tr><td>Total Members: $[total_members]</td></tr>
<tr><td>Newest Member: $[newest_user]</td></tr>
<tr><td>Most Users Online: $[most_users_online] <span class="small">($[most_users_online_date])</span></td></tr>
<tr><td>$[birthdays_today_link]</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td class="icon">$[image.online]</td>
<td class="info last">
<table>
<tbody>
<tr><th>Users Online</th></tr>
<tr><td>$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, $[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}.</td></tr>
<tr><td>
{foreach $[online_user]}
$[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]
{/foreach}
{if $[total_online_not_shown]}
, and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>
{/if}

<font style ="float:right; padding: 0px;">
<a href="#" class="admlegend" title="Administrator"><div id="squareAdm"></div></a> <a href="#" class="gmodlegend" title="Global Moderator"><div id="squareGMod"></div></a> <a href="#" class="modlegend" title="Moderator"><div id="squareMod"></div></a> <a href="#" class="memlegend" title="Member"><div id="squareMem"></div></a>
</font></td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr class="last">
<td colspan="2">
<table>
<tr>
<td class="icon">$[image.online_24]</td>
<td class="info last">
<table>
<tbody>
<tr><th>Users Online in the Last 24 Hours</th></tr>
<tr><td>$[total_staff_online_24] Staff, <a class="$[view_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}</a>, $[total_guests_online_24] Guest{if $[total_guests_online_24] != 1}s{/if}.</td></tr>
<tr><td>
{foreach $[online_user_24]}
$[online_user_24]{if $[online_user_24.invisible]} <span class="small">(invisible)</span>{/if}$[online_user_24.comma]
{/foreach}
{if $[total_online_not_shown_24]}
, and <a class="$[view_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>
{/if}
</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{/if}

CSS Style Sheet

SPOILER: Click to show

@empty: ~"";

.rounded-corners(a, b, JASP!, d) {
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}

.rounded-corners(a, b, JASP!) {
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}

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

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

.box-shadow(StickHell-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;
}

/* Required for proper functioning of the Easy Theme Creator */
@banner_height: 450px;
@banner_background_color: #e6e6e6;
@banner_background_image: url('http://i45./f55/mizuni_uni-chan/Folk%20Songs/Layouts/FS_layoutbanner7v1_zpsac6c1eda.png');
@banner_background_position: center center;
@banner_text_color: transparent;
@banner_text_align: left;
@wrapper_width: 940px;
all_gradients: none;
@body_background_image: url('http://i45./f55/mizuni_uni-chan/Folk%20Songs/Layouts/FS_BG_3v3_zps7ae8166e.png');

@body_background_color: #ffffff;
@default_forum_text_color: #000000;
Link_color: #c7b13f;
Link_visited_color: #c7b13f;
Link_hover_background: #29290b;

@title_bar_background_color: #29290b;
@title_text_color: #dca52b;
@title_buttons_background_color: #c6c6c6;
@title_buttons_color: #000000;

@buttons_background_color: #2c3004;
@buttons_text_color: #000000;

@container_background_color_1: #43431b;
@container_text_color_1: #000000;
@container_background_color_2: #43431b;
@container_text_color_2: #000000;
@container_links_color: #c7b13f;
@container_highlight_color: #43431b;
@container_outer_border_color: #43431b;
@container_inner_border_color: #43431b;

@pagination_background_color: #d3d3d3;
@pagination_text_color: #000000;
@pagination_hover_color: #e6e6e6;
/* End required for proper functioning of the Easy Theme Creator */


/**************************************************************************
* Global Styles *
**************************************************************************/

/* 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: 12px;
@default_forum_text_font_family: helvetica, sans;
@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_font: Link_font;
Link_active_decoration: Link_decoration;
Link_visited_font: Link_font;
Link_visited_decoration: Link_decoration;
Link_hover_color: #dca52b;
Link_hover_font: Link_font;
Link_hover_decoration: none;
H_color: @empty;
H_font: 100%;
H_decoration: @empty;
H_case: @empty;
H_caps: @empty;
h3_color: @empty;
h3_font: 140% @default_forum_text_font_family;
h3_decoration: @empty;
h3_case: @empty;
h3_caps: @empty;
@timestamp_color: #000000;
@timestamp_font: italic 85% @default_forum_text_font_family;
@description_color: #000000;
@description_font: italic 85% @default_forum_text_font_family;
small_desc_color: #000000;
small_desc_font: 80% Arial;
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;}
table { table-layout: fixed; }
a { cursor: pointer; color: Link_color; font: Link_font; text-decoration: Link_decoration; }
:visited { color: Link_visited_color; font: Link_visited_font; text-decoration: Link_visited_decoration; }
a:hover { color: Link_hover_color; font: Link_hover_font; text-decoration: Link_hover_decoration; }
a:active { color: Link_active_color; font: Link_active_font; text-decoration: Link_active_decoration; }
a.text { cursor: default; }
h1, h2 { color: H_color; font: H_font; text-decoration: H_decoration; text-transform: H_case; font-variant: H_caps; }
h3 { color: h3_color; font: h3_font; text-decoration: h3_decoration; text-transform: h3_case; font-variant: h3_caps; }
abbr.time, .last-edited { 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; }
.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: #FFFFFF; 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 bold 1em 'Trebuchet MS', Verdana, Arial;
@banner_text_decoration: none;
@banner_text_case: none;
@banner_text_caps: normal;
@banner_text_shadow: inherit;
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; }

/* Welcome Text / Login / Logout Links */
Titan Girl_text_color: @title_text_color;
Titan Girl_text_font: 1em "Trebuchet MS", Verdana, Arial;
Titan Girl_text_shadow: none;
Titan Girl_links_color: #c7b13f;
Titan Girl_links_font: Titan Girl_text_font;
Titan Girl_links_decoration: none;
Titan Girl_links_shadow: Titan Girl_text_shadow;
#welcome { text-align: right; color: Titan Girl_text_color; font: Titan Girl_text_font; text-shadow: Titan Girl_text_shadow; float: right; vertical-align: middle; line-height: 31px !important; }
#welcome a { color: Titan Girl_links_color; text-decoration: Titan Girl_links_decoration; text-shadow: Titan Girl_links_shadow; font: Titan Girl_links_font; }

/* Navigation Menu */
johnnynav_bar_background: left center repeat-x scroll;
johnnynav_bar_border: 0px solid;
johnnynav_bar_border_radius: 0 0 0 0;
johnnynav_bar_button_color: #c7b13f;
johnnynav_bar_button_font: 1em "Trebuchet MS", Verdana, Arial;
johnnynav_bar_button_decoration: none;
johnnynav_bar_button_shadow: none;
johnnynav_bar_button_background: scroll;
johnnynav_bar_button_hover_color: johnnynav_bar_button_color;
johnnynav_bar_button_hover_font: johnnynav_bar_button_font;
johnnynav_bar_button_hover_decoration: johnnynav_bar_button_decoration;
johnnynav_bar_button_hover_shadow: johnnynav_bar_button_shadow;
johnnynav_bar_button_hover_background: #29290b scroll;
johnnynav_bar_button_current_color: #dca52b;
johnnynav_bar_button_current_font: johnnynav_bar_button_font;
johnnynav_bar_button_current_decoration: johnnynav_bar_button_decoration;
johnnynav_bar_button_current_shadow: johnnynav_bar_button_shadow;
johnnynav_bar_button_current_background: #29290b center repeat-x scroll;
johnnynav_bar_bubble_text_color: #000000;
johnnynav_bar_bubble_font: .8em "Trebuchet MS", Verdana, Arial;
johnnynav_bar_bubble_background: #FFFFFF;
johnnynav_bar_bubble_border_radius: 5px;
#navigation-menu { padding: 0 8px; background: johnnynav_bar_background; border: johnnynav_bar_border; .rounded-corners(johnnynav_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: johnnynav_bar_button_color; font: johnnynav_bar_button_font; text-decoration: johnnynav_bar_button_decoration; text-shadow: johnnynav_bar_button_shadow; background: johnnynav_bar_button_background; line-height: 31px !important; }
#navigation-menu > ul li:hover a { color: johnnynav_bar_button_hover_color; font: johnnynav_bar_button_hover_font; text-decoration: johnnynav_bar_button_hover_decoration; text-shadow: johnnynav_bar_button_hover_shadow; background: johnnynav_bar_button_hover_background; line-height: 31px !important; }
#navigation-menu > ul li a.state-active { color: johnnynav_bar_button_current_color; font: johnnynav_bar_button_font; text-decoration: johnnynav_bar_button_current_decoration; text-shadow: johnnynav_bar_button_current_shadow; background: johnnynav_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: johnnynav_bar_bubble_background; .rounded-corners(johnnynav_bar_bubble_border_radius); font: johnnynav_bar_bubble_font; line-height: .8em; text-shadow: none; .box-shadow(2px, 2px, 2px, shadow_color); height: .8em; color: johnnynav_bar_bubble_text_color; }
#navigation-menu div.tip-holder span.tip { border-top: 4px solid johnnynav_bar_bubble_background; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; left: 6px; }




/* Navigation Tree + Participated Button + News Bar */
johnnynav_tree_color: #c7b13f;
johnnynav_tree_font: .8em @default_forum_text_font_family;
johnnynav_tree_decoration: strikethrough;
johnnynav_tree_background_color: @container_background_color_1;
johnnynav_tree_border_width: 1px;
johnnynav_tree_border_style: solid;
johnnynav_tree_border_color: #43431b;
johnnynav_tree_border_radius: 5px;
johnnynav_tree_hover_color: #dca52b;
johnnynav_tree_hover_font: johnnynav_tree_font;
johnnynav_tree_hover_decoration: none;
johnnynav_tree_hover_background_color: #29290b;
.recent-threads-button, #navigation-tree { color: johnnynav_tree_color; border-width: johnnynav_tree_border_width; border-style: johnnynav_tree_border_style; border-color: johnnynav_tree_border_color; background: johnnynav_tree_background_color; margin-bottom: 10px; height: 20px; .rounded-corners(johnnynav_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: johnnynav_tree_border_width; border-style: johnnynav_tree_border_style; border-color: johnnynav_tree_border_color; background-color: johnnynav_tree_background_color; .box-shadow(); }
#nav-tree > li { display: inline-block; position: relative; height: 20px; }
#nav-tree > li a { font: johnnynav_tree_font; color: johnnynav_tree_color; text-decoration: johnnynav_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: johnnynav_tree_hover_color; background-color: johnnynav_tree_hover_background_color; }
#nav-tree > li:hover > div > a { font: johnnynav_tree_hover_font; color: johnnynav_tree_hover_color; text-decoration: johnnynav_tree_hover_decoration; }
#nav-tree .ui-menu li:hover > a { font: johnnynav_tree_hover_font; color: johnnynav_tree_hover_color; text-decoration: johnnynav_tree_hover_decoration; }
#nav-tree > li:first-child { .rounded-corners(johnnynav_tree_border_radius, 0, 0, johnnynav_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 johnnynav_tree_border_width 10px 10px; border-style: johnnynav_tree_border_style none johnnynav_tree_border_style johnnynav_tree_border_style; border-color: transparent transparent transparent johnnynav_tree_border_color; z-index: 1001; }
#nav-tree .menu_arrow span { width: 0; height: 0; position: absolute; top: -10px; left: -11px; border-width: 10px johnnynav_tree_border_width 10px 10px; border-style: johnnynav_tree_border_style none johnnynav_tree_border_style johnnynav_tree_border_style; border-color: transparent transparent transparent johnnynav_tree_background_color; z-index: 1002; }
#nav-tree > li:hover .menu_arrow { border-color: transparent transparent transparent johnnynav_tree_border_color; }
#nav-tree > li:hover .menu_arrow span { border-color: transparent transparent transparent johnnynav_tree_hover_background_color; }
.popup_html ul { display: none; list-style-type: none; border: johnnynav_tree_border_width johnnynav_tree_border_style johnnynav_tree_border_color; background-color: johnnynav_tree_background_color; .box-shadow(); }
.popup_html li a { font: johnnynav_tree_font; color: johnnynav_tree_color; text-decoration: johnnynav_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: johnnynav_tree_hover_color; background-color: johnnynav_tree_hover_background_color; }
.popup_html li:hover > div > a { font: johnnynav_tree_hover_font; color: johnnynav_tree_hover_color; text-decoration: johnnynav_tree_hover_decoration; }
.popup_html .ui-menu li:hover > a { font: johnnynav_tree_hover_font; color: johnnynav_tree_hover_color; text-decoration: johnnynav_tree_hover_decoration; }
.popup_html li { .rounded-corners(johnnynav_tree_border_radius, 0, 0, johnnynav_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 johnnynav_tree_border_width 10px 10px; border-style: johnnynav_tree_border_style none johnnynav_tree_border_style johnnynav_tree_border_style; border-color: transparent transparent transparent johnnynav_tree_border_color; z-index: 1001; }
.popup_html .menu_arrow span { width: 0; height: 0; position: absolute; top: -10px; left: -11px; border-width: 10px johnnynav_tree_border_width 10px 10px; border-style: johnnynav_tree_border_style none johnnynav_tree_border_style johnnynav_tree_border_style; border-color: transparent transparent transparent johnnynav_tree_background_color; z-index: 1002; }
.popup_html li:hover .menu_arrow { border-color: transparent transparent transparent johnnynav_tree_border_color; }
.popup_html li:hover .menu_arrow span { border-color: transparent transparent transparent johnnynav_tree_hover_background_color; }
/* Participated Button */
.recent-threads-button { font: johnnynav_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: johnnynav_tree_hover_color; font: johnnynav_tree_hover_font; text-decoration: johnnynav_tree_hover_decoration; background-color: johnnynav_tree_hover_background_color; }
.recent-threads-button .new-icon { margin: 0px 5px 0px 0px; }
/* News Bar */
#news { color: johnnynav_tree_color; font: johnnynav_tree_font; text-decoration: johnnynav_tree_decoration; z-index: 9; height: 20px; font: johnnynav_tree_font; background-color: johnnynav_tree_background_color; overflow: hidden; margin: 0 auto 10px; border: johnnynav_tree_border_width johnnynav_tree_border_style johnnynav_tree_border_color; .rounded-corners(johnnynav_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(johnnynav_tree_border_radius, 0, 0, johnnynav_tree_border_radius); }
#news .nav .arrow.left span { border-right-color: johnnynav_tree_border_color; }
#news .nav .arrow.right span { border-left-color: johnnynav_tree_border_color; }
#news .nav:hover { background-color: johnnynav_tree_hover_background_color; }
#news .nav:hover > span { border: johnnynav_tree_border_width johnnynav_tree_border_style johnnynav_tree_border_color; border-width: 0px johnnynav_tree_border_width 0px 0px; }
#news .nav:hover .arrow { background-color: johnnynav_tree_hover_background_color; }

/* Participated Dialog */
@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; }
#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; }

/* Containers and Dialogs */
@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_border: @empty;
@title_bar_border_radius: 5px 5px 0 0;
@title_text_font: bold 100% @default_forum_text_font_family;
@title_text_decoration: @empty;
@title_text_transform: @empty;
@title_text_variant: @empty;
@title_text_align: @empty;
@title_text_shadow: @empty;
@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: 100% @default_forum_text_font_family;
@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;
@content_background: @container_background_color_1;
@content_border_width: 1px;
@content_border_style: solid;
@content_border_radius: 0 0 5px 5px;
@content_area_background: @container_background_color_1;
@content_area_border: 1px solid @container_inner_border_color;
@content_area_border_radius: 10px;
@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;
action_bar_background: @container_inner_border_color;
action_bar_border: 1px solid @container_outer_border_color;
action_bar_border_radius: @empty;
.container > .title-bar { 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); }
.ui-dialog .ui-dialog-titlebar { padding: .3em 1em; position: relative; 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); }
.ui-dialog .ui-dialog-title { color: @title_text_color; font: @title_text_font; text-decoration: @title_text_decoration; font-variant: @title_text_variant; text-transform: @title_text_transform; text-align: @title_text_align; text-shadow: @title_text_shadow; float: left; margin: .1em 16px .2em 0; }
.container > .title-bar h1, .container > .title-bar h2, .container > .title-bar h3 { color: @title_text_color; font: @title_text_font; text-decoration: @title_text_decoration; font-variant: @title_text_variant; text-transform: @title_text_transform; text-align: @title_text_align; text-shadow: @title_text_shadow; }
.container > .title-bar > .controls li a, .container > .title-bar > .controls li div { color: @title_buttons_color; background-color: @title_buttons_background_color; 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; height: 30px; line-height: 30px !important; padding: 0 10px; }
.container > .title-bar > .controls:hover li a, .container > .title-bar > .controls:hover li div { color: @title_buttons_hover_color; background: @title_buttons_hover_background; font: @title_buttons_hover_font; text-decoration: @title_buttons_hover_decoration; }
.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; border-radius: action_bar_border_radius; margin-bottom: 0px; }
.container { margin-bottom: 10px; color: @container_text_color_1; }
.container > .title-bar { min-height: 30px; padding: 0px 10px; }
.container > .title-bar h1, .container > .title-bar h2, .container > .title-bar h3 { line-height: 30px !important; display: inline; }
.container > .title-bar.bbcode { min-height: 30px; padding: 0px; }
.container > .title-bar.bbcode h2 { width: (@wrapper_width - 10); line-height: inherit !important; padding: 0px; display: block; }
*+html .container > .title-bar.bbcode h2 { line-height: 16px !important; }
.title_wrapper { padding: 7px 10px; overflow: hidden; }
.title_wrapper img { display: block; }
.container abbr.time { color: lighten(@container_text_color_1, 15%); }
.container .note { color: lighten(@container_text_color_1, 15%); }
.container > .title-bar > .controls { float: right; }
.container > .control-bar > .controls { float: right; padding: 5px; color: #000000; }
.container > .content { overflow: visible; }
.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%); }
.ui-selectMenu-box .arrow.down > span { border-top-color: #000000; }
.ui-dialog { .rounded-corners(); background-color: @container_outer_border_color; background-color: hsla(hue(@container_outer_border_color), saturation(@container_outer_border_color), lightness(@container_outer_border_color), .5); }
.ui-dialog .ui-dialog-titlebar-close:hover span, .ui-dialog .ui-dialog-titlebar-close:focus span { background-image:url('http://images.proboards.com/v5/ui-icons.png'); background-position: -20px, 0px; }
.ui-dialog div.ui-dialog-buttonpane { text-align: left; margin-top: 10px; padding: 0 0 0 10px; border-width: 1px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 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); }
.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%); .rounded-corners(5px, 0, 0, 5px); }
.ui-search .search-filters-button { display: inline-block; width: auto; height: auto; margin-left: -2px; padding: 3px 4px 2px 4px; border-width: 1px 1px 1px 0px !important; border-style: solid; border-color: darken(@container_inner_border_color, 20%); .rounded-corners(0, 5px, 5px, 0); vertical-align: top; cursor: pointer; }
.ui-search .search-filters-button .icon { display: inline-block; width: auto; height: auto; }
.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 { .rounded-corners(3px); 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%); .rounded-corners(2px); }
.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: 5px 5px 0 0;
@tabs_unselected_background: @container_background_color_2;
@tabs_unselected_border: @empty;
@tabs_unselected_border_radius: 5px 5px 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; 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; 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; 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; }
.list .item .list-item-checkbox { visibility: hidden; }
.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: lighten(@container_text_color_1, 15%); }

/* New Icons */
new_background: @title_buttons_background_color all_gradients left center repeat-x;
new_border: 1px solid darken(@title_buttons_background_color, 15%);
new_border_radius: 5px;
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: 3px 5px 3px 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; 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 *
**************************************************************************/

/* 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: 10px;
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: 10px 10px 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 { 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-width: 0px 1px 1px 0px; border-style: solid; border-color: cal_inner_border; }
#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 { background-color: @container_outer_border_color; background-color: hsla(hue(@container_outer_border_color), saturation(@container_outer_border_color), lightness(@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: 75px; border-width: 1px 1px 0 0; padding: 3px; }
.show-user .list .main { border-right-width: 0; border-width: 1px 0 0 0; padding: 2px 33px 2px 33px; }
.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: 180px; vertical-align: top; }
.show-user .right-col { width: 167px; 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 33px; }
.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 .content-box.options input[type="submit"] { position: absolute; bottom: 10px; left: 10px; }
.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; }
#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; height: 246px; 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 { height: 80px; 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: 100% Arial;
@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; }
.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-width: 0px 1px 10px 0px; border-style: solid; }
.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; }
.conversations .checkbox { width: 24px; }
.conversations .item.new .new-icon { display: inline-block; }

/* Polls */
@polls_selection_border: 1px solid @container_inner_border_color;
@polls_selection_background: @container_highlight_color;
@polls_rank_default_background: #AAAAAA url('http://images.proboards.com/v5/gradients/bar.png') repeat-x left center;
@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 abbr.time, .post.even .quote abbr.time, .post .quote .quote abbr.time { color: posts_odd_text_color; }
.post.even abbr.time, .post .quote abbr.time, .post.even .quote .quote abbr.time { color: posts_even_text_color; }
.posts .post .post-method { font-size: .8em; }
.posts span.labels { border-width: 0px 1px 0 1px; border-style: solid; border-color: @container_inner_border_color; display: block; }
.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; margin-top: 3px; line-height: 20px !important; }
.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.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; }
.posts .post > td, .posts #labels { border: posts_separator_border; border-top-width: 0px; }
.likes, .likes:hover { color: posts_likes_color; font: posts_likes_font; margin: 0 0 0 7px; }
.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; }
.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; }

/* 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_participants_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 abbr.time, .message.even .quote abbr.time, .message .quote .quote abbr.time { color: @messages_odd_text_color; } /* red */
.message.even abbr.time, .message .quote abbr.time, .message.even .quote .quote abbr.time { color: @messages_even_text_color; } /* green */
.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 { vertical-align: top; }
.messages .item > td { border-width: 0px 1px 1px 1px; border-style: solid; border-color: @container_inner_border_color; }
.messages .item .left-panel { width: 172px; }
.messages .item .content { padding-left: 10px; word-wrap: break-word; overflow-x: auto; overflow-y: hidden; }
.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; }
.messages .item .content-head .info { float: left; margin-top: 3px; line-height: 20px !important; }
.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; }
.messages .conversation-labels { float: right; margin-right: 5px; margin-top: 5px; }
.messages.summary .message .content-head .info { width: 100%; }
.messages .message .controls { min-width: 100px; }
.messages .participants { padding: 5px 10px; border: @messages_participants_border; border-top-width: 0px; }
.posting-options-list, .messaging-options-list { display: none; }

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


/**************************************************************************
* Objects *
**************************************************************************/

/* Micro Profiles */
MicroJunk_background: @container_background_color_1;
MicroJunk_border: 1px solid @container_inner_border_color;
MicroJunk_border_radius: 5px;
MicroJunk_text_color: @empty;
MicroJunk_text_font: @empty;
MicroJunk_link_color: @empty;
MicroJunk_link_font: @empty;
MicroJunk_link_decoration: @empty;
MicroJunk_remove_background: @container_background_color_1;
MicroJunk_remove_border: 1px solid @container_inner_border_color;
MicroJunk_remove_border_radius: 0 5px 5px 0;
MicroJunk_remove_text_color: @container_text_color_1;
MicroJunk_remove_text_font: bold 80% @default_forum_text_font_family;
.micro-profile { color: MicroJunk_text_color; font: MicroJunk_text_font; position: relative; height: 50px; width: 200px; display: inline-block; padding: 5px; margin-bottom: 3px; border: MicroJunk_border; background: MicroJunk_background; .rounded-corners(MicroJunk_border_radius); overflow: hidden; }
.grp_recipients_div li { color: MicroJunk_text_color; font: MicroJunk_text_font; position: relative; width: 240px; display: inline-block; margin: 3px; padding: 3px 22px 3px 5px; border: MicroJunk_border; background: MicroJunk_background; .rounded-corners(MicroJunk_border_radius); overflow: hidden; float: left; }
.micro-profile a, .grp_recipients_div li a { color: MicroJunk_link_color; font: MicroJunk_link_font; text-decoration: MicroJunk_link_decoration; }
.user-search-selection .ui-selectlist-item .close { color: MicroJunk_remove_text_color; font: MicroJunk_remove_text_font; background: MicroJunk_remove_background; border: MicroJunk_remove_border; .rounded-corners(MicroJunk_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: #676731 scroll;
@mini_border: 1px none;
@mini_border_radius: 10px;
@mini_text_align: justify;
@mini_text_color: @container_text_color_1;
@mini_text_font: small Arial;
@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: #676731 scroll;
@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_warning_background: #AAAAAA url("http://images.proboards.com/v5/gradients/bar.png") repeat-x scroll left center;
@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;
.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-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; }
.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: 75px; width: 75px; }
.avatar_size_medium img, .avatar_size_medium default { max-height: 75px; max-width: 75px; }
.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; }
.mini-profile .avatar .avatar-wrapper, .micro-profile .avatar .avatar-wrapper { height: auto; }
.avatar_size_placeholder { height: 150px; width: 150px; }
.mini-profile .badges img { height: 16px; width: 16px; }

/* 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: 5px;
@buttons_text_font: 12px Verdana, Arial;
@buttons_text_decoration: none;
@buttons_hover_background: #454a0f center repeat-x scroll;
@buttons_hover_border: 1px solid darken(@buttons_background_color, 20%);
@buttons_hover_text_color: lighten(@buttons_text_color, 20%);
@buttons_hover_text_font: @buttons_text_font;
@buttons_hover_text_decoration: @buttons_text_decoration;
@buttons_active_background: @container_highlight_color;
@buttons_active_border: 1px solid darken(@buttons_background_color, 20%);
@buttons_active_text_color: Link_color;
@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; .rounded-corners(@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 1px; .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; }
.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('http://images.proboards.com/v5/icons-default.png') -16px -32px no-repeat; }
.button-x:hover { background: url('http://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; }

/* 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: 10px;
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: 5px;
@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: 5px;
@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 @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: 5px;
@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 .shoutbox_edit_button.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-break: break-all; }
.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: 10px 0; height: 22px; }
.shoutbox_name input { height: 15px; width: 50%; min-width: 150px; }
.shoutbox_container { position: relative; }
.shoutbox_container > .shoutbox_form_container { position: absolute; width: 100%; }
.shoutbox_container.orientation-top { padding-top: 174px; }
.shoutbox_container.orientation-top.no-post { padding-top: 0; }
.shoutbox_container.orientation-top > .shoutbox_form_container { top: 0; }
.shoutbox_container.orientation-bottom { padding-bottom: 174px; }
.shoutbox_container.orientation-bottom.no-post { padding-bottom: 0; }
.shoutbox_container.orientation-bottom > .shoutbox_form_container { bottom: 0; }
#content .shoutbox.container .smiley-menu > li > a { border: none; padding: 6px; }

/* 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(); }
.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 */
.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('http://images.proboards.com/v5/loader/processing.gif'); background-position: center center; background-repeat: no-repeat; position: absolute; }
#announcement-options { display: none; width: 500px; }

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

/* Visual 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_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;

/**************************************************************************
* Browser Hacks *
**************************************************************************/

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

/* IE8 */
.ie8 select {padding-top: 2px; padding-bottom: 2px; }
.ie8 .user-search-selection .ui-selectlist-item .close { right: 0px; }
.ie8 .avatar-wrapper { display: inherit; }
.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; }

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


/**************************************************************************
* Member Legend - Info Center *
**************************************************************************/
/* Coloured Squares */
#squareAdm { width: 10px; height: 10px; background: #1979e6; margin-right: 3px; display: inline-block; }
#squareGMod { width: 10px; height: 10px; background: #e68819; margin-right: 3px; display: inline-block; }
#squareMod { width: 10px; height: 10px; background: #e219e6; margin-right: 3px; display: inline-block; }
#squareMem { width: 10px; height: 10px; background: #8ccf55; display: inline-block; }


/* Administrator */
a.admlegend {
position: relative;
text-decoration: none;
}
a.admlegend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -15px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.admlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(39, 39, 39,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}

/* Global Moderator */
a.gmodlegend {
position: relative;
text-decoration: none;
}
a.gmodlegend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -42px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.gmodlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(39, 39, 39,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left:-2px;
}

/* Moderator */
a.modlegend {
position: relative;
text-decoration: none;
}
a.modlegend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -30px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.modlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(39, 39, 39,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}

/* Member */
a.memlegend {
position: relative;
text-decoration: none;
}
a.memlegend:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -30px;
background: rgba(39, 39, 39,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
font-size: .86em;
}
a.memlegend:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(39, 39, 39,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}

/*Begin MiniProfile CSS*/
td.left-panel {
text-align: center;
}
.mpinfo, .mptitle, .mpcontent, .mp {
border: 1px solid #fff;
}
.mptitle {
background-color: @title_bar_background_color;
color: @title_text_color;
}
.mpinfo, .mpcontent {
background-color: posts_odd_background_color;
}
.mpinfo {
width: 50%;
}
/*End MiniProfile CSS*/

[Stinky666]

Hiya Sunny.
I just added all of your CSS and Home Template into mine and saved it, and it shows perfectly for me.

exdat.freeforums.net/

I have set the default theme as your one for a moment. Can you confirm whether you can see the legend or not?

[Sunny]

Yes, I can see it

I don't get it. I followed the directions and everything. I'll try again. I must have put it in the wrong place or something...