Custom pages - Trying to replicate a certain layout

[Blue]

Nov 8, 2017 21:16:42 GMT -8 Boy_Wonder said:

Nov 8, 2017 16:10:55 GMT -8 Blue said:

Perfectly fine just thought I'd like it anyway. The forum I'll be using this on uses a range of different themes, we current have Otherworld (Default), Revolution, Wild Skin and Metro Stripe but we'll be adding some new ones soon. The problem I found with it is the background - I tested in on a range of different skins (Lights out, Revolution, Default PB skin) and it just has a transparent background, on all themes but Otherworld it shows as the second image (In the first posts) with the only change being the background colour to whatever the theme's background colour is.

Would it be easier to replicate this into a template and then changing '[]' to '<>' so that it would load as HTML in the custom page?

Now I'm confused xD replicate what

Haha sorry xD! The layout I've been looking to make from the first post; Dark background with 4 sections, updates, staff, event and then the time one. Since members on forum use lots of different themes we'd like the home page to have that layout (from Otherworld) visible for all themes so members can easily check any of this. However I can't seem to get it to work properly on any other theme but Otherworld so I've come here to help from someone better with code xD

[Boy_Wonder]

Nov 8, 2017 23:57:08 GMT -8 Blue said:

Nov 8, 2017 21:16:42 GMT -8 Boy_Wonder said:

Now I'm confused xD replicate what

Haha sorry xD! The layout I've been looking to make from the first post; Dark background with 4 sections, updates, staff, event and then the time one. Since members on forum use lots of different themes we'd like the home page to have that layout (from Otherworld) visible for all themes so members can easily check any of this. However I can't seem to get it to work properly on any other theme but Otherworld so I've come here to help from someone better with code xD

Okay - so if you can provide me with a copy of the code and a sample of the themes (I can't do anything without seeing the theme coding unfortunately)

[Blue]

Nov 9, 2017 0:50:04 GMT -8 Boy_Wonder said:

Nov 8, 2017 23:57:08 GMT -8 Blue said:

Haha sorry xD! The layout I've been looking to make from the first post; Dark background with 4 sections, updates, staff, event and then the time one. Since members on forum use lots of different themes we'd like the home page to have that layout (from Otherworld) visible for all themes so members can easily check any of this. However I can't seem to get it to work properly on any other theme but Otherworld so I've come here to help from someone better with code xD

Okay - so if you can provide me with a copy of the code and a sample of the themes (I can't do anything without seeing the theme coding unfortunately)

Sorry for all this delay I haevn't been able to get back to this in a while x-x. The theme is still available for download here, We don't use the board images and as you'll see in the HTML below we change the census section at the end to be more like the Event section as it suited our forum better.

The HTML is pretty good,
<div id="ow_sec02">
           <div id="ow_topinfo">
               <div id="ow_toptbl">
                   <div id="ow_toptr">
               <div class="ow_topinfodiv">
                   <div class="ow_topinfodiv01">
                       <div class="ow_topsubtitle">&#60; Keep up to date &#62;</div>
                       <div class="ow_topinfotitle"><i class="fa fa-wrench" aria-hidden="true"></i> updates </div>
                       
                       <div class="ow_topinfocont">
                        <font class="ow_newstitle">&#60; Design changes &#62;</font> You may have noticed a few changes to CB overall design, the two biggest changes have been a complete redo of the profile pages and secondly we've updated the shoutbox if be a little more user friendly, it now even comes with avatars! Enjoy everyone!
                           <div class="ow_newsdivider"></div>
<font class="ow_newstitle">&#60; Competitions are Back! &#62;</font> The competitions were gone for a while there but now they have return! We've updated the model and layout of the competitions to make them easier for everyone. So go enter now!
                           <div class="ow_newsdivider"></div>                              
                       </div>
                   </div>
              </div>
               
                       <div class="ow_topspace"></div>
                       
               <div class="ow_topinfodiv">
                   <div class="ow_topinfodiv01">
                       <div class="ow_topsubtitle">&#60; Keeping everything in check &#62;</div>
                       <div class="ow_topinfotitle"><i class="fa fa-star" aria-hidden="true"></i> staff </div>
                       
                       <table class="ow_stafftbl" cellspacing="0" cellpadding="0" width="100%">
                           <tr>
                               <div class="scrollmenu">
                               <td><a class="ow_stafflink" href="http://championblood.boards.net/user/1" title="GREY EFFECTS" id="staff01"></a></td>
                               <td><a class="ow_stafflink" href="http://championblood.boards.net/user/4" title="MAMMOTH" id="staff02"></a></td>
                               <td><a class="ow_stafflink" href="http://championblood.boards.net/user/2" title="BONECLAW" id="staff03"></a></td>
                               </div>
                           </tr>
                       </table>
                   </div>
              </div>

                       <div class="ow_topspace"></div>
                       
               <div class="ow_topinfodiv">
                   <div class="ow_topinfodiv01">
                       <div class="ow_topsubtitle">&#60; hear it through the grapevine &#62;</div>
                       <div class="ow_topinfotitle"><i class="fa fa-newspaper-o" aria-hidden="true"></i> events</div>
                       
                       <div class="ow_eventdiv_E1" title="Treasure Hunt">
                           <a class="ow_eventname" href="http://championblood.boards.net/thread/493/treasure-hunt">&#60; Treasure Hunt &#62;</a>
                       </div>
                       
                       <div class="ow_eventdiv_E2" title="Great Chess Games">
                           <a class="ow_eventname" href="http://championblood.boards.net/thread/607/great-chess-games">&#60; Great Chess Games &#62;</a>
                       </div>
                       
                   </div>
              </div>
                       
                       <div class="ow_topspace"></div>
                   
                       
               <!-- Start mark here--> <div class="ow_topinfodiv">
                   <div class="ow_topinfodiv01">
                       <div class="ow_topsubtitle">&#60; Status of the world &#62;</div>
                     
                       <div class="ow_topinfotitle"><i class="fa fa-area-chart" aria-hidden="true"></i> Time </div>
                       
                       <div class="ow_eventdiv_time" title="Year 6, December ">
                           <a class="ow_eventname" href="/">&#60; Year 6 &#62;</a>
                       </div>
                       <br>
                       <left>
                       <p class="timetext" >  <b> Year 6 , Month December </b>
<br>
<br>
A year is equal to 12 weeks, a month is 1 week.
                       </p>
                       <left>
                           
                           </div>
                       
                   </div>
               </div>
           </div>
And then the CSS is a bit of a free-for-all and I apologies for that - I tired to only take bits that it was referencing in the HTML but it wouldn't work until I copy out all the CSS above what it references as well.

<style>
@color_001: #77badf; /*lavender*/
@color_002: #313131; /*dark dark gray*/
@color_003: #707070; /*gray*/
@color_004: #6b6b6b; /*darker than 003 gray*/
@color_005: #5d5d5d; /*darker than 004 gray*/
@color_006: #cecece; /*light grey*/
@color_007: #ececec; /*lighter than 006 grey*/

@empty: ~"";

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

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

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

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

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

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

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

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

/* Required for proper functioning of the Colors & Theme Creator */
@banner_height: 100px;
@banner_background_color: #006CB7;
@banner_background_image: none;
@banner_background_position: left center;
@banner_text_color: #FFFFFF;
@banner_text_align: left;
@wrapper_width: 100%;
@all_gradients: none;
@body_background_image: inherit;

@body_background_color: @color_002;
@default_forum_text_color: @color_003;
@link_color: @color_001;
@link_visited_color: @color_001;

@title_bar_background_color: @color_003;
@title_text_color: #FFFFFF;
@title_buttons_background_color: @color_002;
@title_buttons_color: #FFFFFF;

@buttons_background_color: @color_002;
@buttons_text_color: #FFFFFF;

@container_background_color_1: #fff;
@container_text_color_1: @color_005;
@container_background_color_2: #fff;
@container_text_color_2: @color_005;
@container_links_color: @color_001;
@container_highlight_color: #F6F6F6;
@container_outer_border_color: @color_003;
@container_inner_border_color: #E6E6E6;

@pagination_background_color: #FFFFFF;
@pagination_text_color: #000000;
@pagination_hover_color: #EFEFEF;
/* End required for proper functioning of the Colors & Theme Creator */


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

/* Common Elements and Classes */
@body_background_attachment: fixed;
@body_background_repeat: no-repeat;
@body_background_position: center center;
@default_forum_text_font_style: @empty;
@default_forum_text_font_weight: @empty;
@default_forum_text_font_size: 10pt;
@default_forum_text_font_family: 'Open Sans',Verdana,Arial;
@default_forum_text_decoration: none;
@default_forum_text_case: none;
@default_forum_text_caps: normal;
@bold_weight: 700;
@bold_size: @empty;
@italic_style: italic;
@link_font: 100% @default_forum_text_font_family;
@link_decoration: none;
@link_active_color: @link_color;
@link_active_decoration: @link_decoration;
@link_visited_decoration: @link_decoration;
@link_hover_color: @link_color;
@link_hover_decoration: @link_decoration;
@h2_color: @empty;
@h2_font: 100% @default_forum_text_font_family;
@h2_decoration: @empty;
@h2_case: @empty;
@h2_caps: @empty;
@h3_color: @empty;
@h3_font: 140% @default_forum_text_font_family;
@h3_decoration: @empty;
@h3_case: @empty;
@h3_caps: @empty;
@timestamp_color: lighten(@default_forum_text_color, 15%);
@timestamp_font: italic 85% @default_forum_text_font_family;
@description_color: @empty;
@description_font: italic 85% @default_forum_text_font_family;
@viewing_color: @empty;
@viewing_font: 75% @default_forum_text_font_family;
@small_desc_color: lighten(@default_forum_text_color, 15%);
@small_desc_font: 70% @default_forum_text_font_family;
@shadow_color: #333333;
* { word-wrap: break-word; }
body { background-color: @body_background_color; background-image: @body_background_image; background-attachment: @body_background_attachment; background-repeat: @body_background_repeat; background-position: @body_background_position; background-size: cover; 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; }


body::-webkit-scrollbar-track { background-color: @color_004; border:3px solid @color_002; }
body::-webkit-scrollbar { width: 7px; background-color: @color_004; }
body::-webkit-scrollbar-thumb { background-color: @color_006; border-radius: 3px; }

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

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

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


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

/* Welcome Text / Login / Logout Links */
@welcome_text_color: @title_text_color;
@welcome_text_font: 1em "Trebuchet MS", Verdana, Arial;
@welcome_text_shadow: none;
@welcome_links_color: @color_001;
@welcome_links_font: 8px 'Open Sans';
@welcome_links_decoration: none;
@welcome_links_shadow: @welcome_text_shadow;
#welcome { text-align: center; color: @welcome_text_color; font: @welcome_text_font; text-shadow: @welcome_text_shadow;  vertical-align: middle; line-height: 31px !important; }
#welcome a {
   color: @welcome_links_color; text-decoration: @welcome_links_decoration;
   text-shadow: @welcome_links_shadow; font: @welcome_links_font;
   background: @color_002; padding: 2px 3px; transition: 0.5s all ease;
}
#welcome a:hover { color: #fff; }
.ow_wel01 { font: 9px 'Open Sans'; letter-spacing: 0.5em; color: #fff; }
.ow_wel02 { font: bold 22px 'Open Sans'; color: @color_001; letter-spacing: 0.1em; text-transform: uppercase; }
.ow_wel03 { font: 8px 'Open Sans'; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 0 20px 0; margin-bottom: 5px;
border-bottom: 1px solid @color_002;
}
/* Navigation Menu */
@nav_bar_background: transparent;
@nav_bar_border: 0px solid @container_outer_border_color;
@nav_bar_border_radius: 0 0 5px 5px;
@nav_bar_button_color: @color_001;
@nav_bar_button_font: 0.8em 'Open Sans';
@nav_bar_button_decoration: none;
@nav_bar_button_shadow: none;
@nav_bar_button_background: @empty;
@nav_bar_button_hover_color: @nav_bar_button_color;
@nav_bar_button_hover_font: @nav_bar_button_font;
@nav_bar_button_hover_decoration: @nav_bar_button_decoration;
@nav_bar_button_hover_shadow: @nav_bar_button_shadow;
@nav_bar_button_hover_background: @nav_bar_button_background;
@nav_bar_button_current_color: #fff;
@nav_bar_button_current_font: bold @nav_bar_button_font;
@nav_bar_button_current_decoration: @nav_bar_button_decoration;
@nav_bar_button_current_shadow: @nav_bar_button_shadow;
@nav_bar_button_current_background: transparent;
@nav_bar_bubble_text_color: #000000;
@nav_bar_bubble_font: .8em "Trebuchet MS", Verdana, Arial;
@nav_bar_bubble_background: #FFFFFF;
@nav_bar_bubble_border_radius: 5px;
#navigation-menu { padding: 0 8px; background: @nav_bar_background; border: @nav_bar_border; .rounded-corners(@nav_bar_border_radius); }
#navigation-menu a { position: relative; }
#navigation-menu > ul, #navigation-menu > ul li { /*float: left; */}
#navigation-menu > ul li a {
   display: block; padding: 0 .75em 0 .75em; color: @nav_bar_button_color; font: @nav_bar_button_font;
   text-decoration: @nav_bar_button_decoration; text-shadow: @nav_bar_button_shadow;
   background: @nav_bar_button_background; line-height: 31px !important; text-transform: uppercase;
   border-bottom: 1px solid @color_002; letter-spacing: 0.1em; transition: 0.5s all ease;
}
#navigation-menu > ul li:hover a {
   color: #fff !important; font: @nav_bar_button_hover_font;
   text-decoration: @nav_bar_button_hover_decoration !important; text-shadow: @nav_bar_button_hover_shadow;
   background: @nav_bar_button_hover_background; line-height: 31px !important; padding-left: 2em;
}
#navigation-menu > ul li a.state-active { color: @nav_bar_button_current_color !important; font: @nav_bar_button_current_font; text-decoration: @nav_bar_button_current_decoration !important; text-shadow: @nav_bar_button_current_shadow; background: @nav_bar_button_current_background; line-height: 31px !important; }
#navigation-menu div.tip-holder { position: absolute; top: -8px; right: 3px; display: inline-block; }
#navigation-menu div.tip-holder div.tip-number { padding: 3px 7px 2px 7px; background-color: @nav_bar_bubble_background; .rounded-corners(@nav_bar_bubble_border_radius); font: @nav_bar_bubble_font; line-height: .8em; text-shadow: none; .box-shadow(2px, 2px, 2px, @shadow_color); height: .8em; color: @nav_bar_bubble_text_color; }
#navigation-menu div.tip-holder span.tip { border-top: 4px solid @nav_bar_bubble_background; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; left: 6px; }

/* Navigation Tree + Participated Button + News Bar */
@nav_tree_color: @color_006;
@nav_tree_font: .7em 'Open Sans';
@nav_tree_decoration: none;
@nav_tree_background_color: @color_002;
@nav_tree_border_width: 0px;
@nav_tree_border_style: solid;
@nav_tree_border_color: @container_outer_border_color;
@nav_tree_border_radius: 0px;
@nav_tree_hover_color: @color_006;
@nav_tree_hover_font: @nav_tree_font;
@nav_tree_hover_decoration: none;
@nav_tree_hover_background_color: @color_003;
.recent-threads-button, #navigation-tree { color: @nav_tree_color; border-width: @nav_tree_border_width; border-style: @nav_tree_border_style; border-color: @nav_tree_border_color; background: @nav_tree_background_color; margin-bottom: 0px; height: 20px; .rounded-corners(@nav_tree_border_radius);  text-transform: uppercase;  }
.recent-threads-button.new .new-icon { display: inline-block; }
#navigation-tree { overflow: hidden; }
#nav-tree { white-space: nowrap; }
.popup_html { position: absolute; top: 0; left: 0; z-index: 999999; }
#nav-tree ul { display: none; list-style-type: none; border-width: @nav_tree_border_width; border-style: @nav_tree_border_style; border-color: @nav_tree_border_color; background-color: @nav_tree_background_color; .box-shadow(); }
#nav-tree > li { display: inline-block; position: relative; height: 20px; }
#nav-tree > li a { font: @nav_tree_font; letter-spacing: 0.1em; text-transform: uppercase; color: @nav_tree_color; text-decoration: @nav_tree_decoration; display: block; padding: 4px 10px 4px 15px; margin: 0px; }
#nav-tree > li:hover, #nav-tree .ui-menu li:hover { color: @nav_tree_hover_color; background-color: @nav_tree_hover_background_color;  }
#nav-tree > li:hover > div > a { letter-spacing: 0.1em; text-transform: uppercase; font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }
#nav-tree .ui-menu li:hover > a { letter-spacing: 0.1em; text-transform: uppercase; font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }
#nav-tree > li:first-child { .rounded-corners(@nav_tree_border_radius, 0, 0, @nav_tree_border_radius); }
#nav-tree > li:first-child a { margin-left: -2px; }
#nav-tree .ui-menu { display: none; position: absolute; float: left; }
#nav-tree .ui-menu a { .rounded-corners(0px); }
#nav-tree .ui-menu li { position: relative; white-space: nowrap; padding: 2px 10px 2px 5px; }
#nav-tree .ui-menu li ul { display: none; z-index: 9999; position: absolute; }
#nav-tree .ui-menu li .arrow { position: absolute; right: 2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; display: none; }
#nav-tree .ui-menu li.ui-menu-has-sub-menu > .arrow { display: block; }
#nav-tree li.new_span > a > .new-icon { float: none; display: inline-block; }
#nav-tree li.state-selected > a { font-weight: bold !important; }
#nav-tree .menu_arrow { width: 0; height: 0; position: absolute; top: 0px; right: 0px; border-width: 0px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_border_color; z-index: 1001; }
#nav-tree .menu_arrow span { width: 0; height: 0; position: absolute; top: -10px; left: -11px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_background_color; z-index: 1002; }
#nav-tree > li:hover .menu_arrow { border-color: transparent transparent transparent @nav_tree_border_color; }
#nav-tree > li:hover .menu_arrow span { border-color: transparent transparent transparent @nav_tree_hover_background_color; }
.popup_html ul { display: none; list-style-type: none; border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; background-color: @nav_tree_background_color; .box-shadow(); }
.popup_html li a { letter-spacing: 0.1em; text-transform: uppercase; font: @nav_tree_font; color: @nav_tree_color; text-decoration: @nav_tree_decoration; display: block; padding: 4px 10px 4px 15px; margin: 0 1px 0 5px; }
.popup_html li:hover, .popup_html .ui-menu li:hover { color: @nav_tree_hover_color; background-color: @nav_tree_hover_background_color;  }
.popup_html li:hover > div > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }
.popup_html .ui-menu li:hover > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }
.popup_html li { .rounded-corners(@nav_tree_border_radius, 0, 0, @nav_tree_border_radius); }
.popup_html li a { margin-left: -2px; }
.popup_html .ui-menu { display: none; position: absolute; float: left; z-index: 11; }
.popup_html .ui-menu a { .rounded-corners(0px); overflow: hidden; max-width: 550px; }
.popup_html .ui-menu li { position: relative; white-space: nowrap; padding: 2px 15px 2px 5px; }
.popup_html .ui-menu li ul { display: none; z-index: 9999; position: absolute; }
.popup_html .ui-menu li .arrow { position: absolute; right: 2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; display: none; }
.popup_html .ui-menu li.ui-menu-has-sub-menu > .arrow { display: block; }
.popup_html li.new_span > a > .new-icon { float: none; display: inline-block; }
.popup_html li.state-selected > a { font-weight: bold !important; }
.popup_html .menu_arrow { width: 0; height: 0; position: absolute; top: 0px; right: -10px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_border_color; z-index: 1001; }
.popup_html .menu_arrow span { width: 0; height: 0; position: absolute; top: -10px; left: -11px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_background_color; z-index: 1002; }
.popup_html li:hover .menu_arrow { border-color: transparent transparent transparent @nav_tree_border_color; }
.popup_html li:hover .menu_arrow span { border-color: transparent transparent transparent @nav_tree_hover_background_color; }
/* Participated Button */
.recent-threads-button { font: @nav_tree_font; cursor: pointer; float: right; height: 14px; margin: 0 0 10px 10px; padding: 3px 6px 3px 6px; text-align: center; }
.recent-threads-button:hover { color: @nav_tree_hover_color; font: @nav_tree_hover_font; text-decoration: @nav_tree_hover_decoration; background-color: @nav_tree_hover_background_color; }
.recent-threads-button .new-icon { margin: 0px 5px 0px 0px; }
/* News Bar */
#news { color: @nav_tree_color; font: @nav_tree_font; text-decoration: @nav_tree_decoration; z-index: 9; height: 20px; font: @nav_tree_font; background-color: @nav_tree_background_color; overflow: hidden; margin: 0 auto 10px; border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; .rounded-corners(@nav_tree_border_radius); }
#news .items { height: 20px; position: relative; overflow: hidden; }
#news .items > div > div { padding: 0 10px; line-height: 20px !important; }
#news .items div img { vertical-align: text-bottom; }
#news .nav { float: left; background-position: center; }
#news .nav > span { border-width: 0px 1px 0px 0px; border-style: solid; border-color: transparent; cursor: default; float: left; display: inline-block; padding: 0 3px; height: 20px; }
#news .nav > span.title { text-align: center; display: inline-block; height: 20px; padding: 0px 6px; line-height: 20px !important; }
#news .nav .arrow.left { .rounded-corners(@nav_tree_border_radius, 0, 0, @nav_tree_border_radius); }
#news .nav .arrow.left span { border-right-color: @nav_tree_border_color; }
#news .nav .arrow.right span { border-left-color: @nav_tree_border_color; }
#news .nav:hover { background-color: @nav_tree_hover_background_color; }
#news .nav:hover > span { border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; border-width: 0px @nav_tree_border_width 0px 0px; }
#news .nav:hover .arrow { background-color: @nav_tree_hover_background_color; }

/* Participated Dialog */
@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: none;
@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: 0;
@title_text_font: 1.3em 'Open Sans';
@title_text_decoration: @empty;
@title_text_transform: uppercase;
@title_text_variant: @empty;
@title_text_align: center;
@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: 0px;
@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 { letter-spacing: 0.2em; 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 !important; background: @title_buttons_hover_background; font: @title_buttons_hover_font; text-decoration: @title_buttons_hover_decoration !important; }
.container > .content, .ui-dialog .ui-dialog-content, .ui-dialog .ui-dialog-buttonpane, .container.copy .clone { background: @content_background; border-width: @content_border_width; border-style: @content_border_style; border-color: @container_outer_border_color; border-top-width: 0px; padding: 0px; .rounded-corners(@content_border_radius); }
.content-box { background: @content_area_background; border: @content_area_border; .rounded-corners(@content_area_border_radius); color: @content_area_text_color; font: @content_area_text_font; }
.content-box a, .container a { color: @container_links_color; font: @content_area_links_font; text-decoration: @content_area_links_decoration; }
.container > .control-bar { background: @action_bar_background; border: @action_bar_border; border-top-width: 0px; border-bottom-width: 0px; .rounded-corners(@action_bar_border_radius); margin-bottom: 0px; }
.container { margin-bottom: 10px; color: @container_text_color_1; }
.container > .title-bar { 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); line-height: inherit !important; padding: 0px; display: block; }
*+html .container > .title-bar.bbcode h2 { line-height: 16px !important; }
.title_wrapper { padding: 20px 10px; overflow: hidden; }
.title_wrapper img { display: block; }
.container abbr.time { color: @timestamp_color; }
.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: hidden;*/ }
.controls > li a { display: inline-block; }
.control-bar .ui-pagination { padding: 5px 5px 3px 10px; }
.control-bar > div.float-left { padding-left: 10px; padding-top: 8px; padding-bottom: 8px; }
.control-bar > div.float-left img { padding-right: 5px; }
.control-bar .controls ul { z-index: 233; }
.control-bar .controls .ui-selectMenu-box { margin-left: 10px; }
.control-bar .ui-search { padding-bottom: 5px !important; }
.ui-selectMenu-box { border: 1px solid darken(@container_inner_border_color, 20%); }
.ui-selectMenu-box .arrow.down > span { border-top-color: #000000; }
.ui-dialog { .rounded-corners(); .hsla-bgcolor-safe(@container_outer_border_color, .5); }
.ui-dialog .ui-dialog-titlebar-close:hover span, .ui-dialog .ui-dialog-titlebar-close:focus span { background-image:url('//images.proboards.com/v5/ui-icons.png'); background-position: -20px, 0px; }
.ui-dialog div.ui-dialog-buttonpane.ui-widget-content { text-align: right; margin-top: 10px; padding: 0 0 0 10px; border-width: 1px; .rounded-corners(5px); }
.ui-dialog div.section { text-align: center; background-color: @container_background_color_1; border-width: 1px; border-style: solid; border-color: @container_inner_border_color; .rounded-corners(10px); padding: 10px; margin: 10px 0; }
.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; min-height: 19px; padding: 3px 4px 2px 4px; border-width: 1px 1px 1px 0px !important; border-style: solid; border-color: darken(@container_inner_border_color, 20%); .rounded-corners(0, 5px, 5px, 0); vertical-align: top; cursor: pointer; }
.ui-search .search-filters-button .icon { display: inline-block; width: auto; height: auto; }
.ui-search .search-filters-button.state-active { background: @title_buttons_color; }
.event_icon { cursor: pointer; }
.container.copy .clone { .rounded-corners(0px); border-collapse: inherit; border-bottom-width: 0px; }

/* Pagination Menus */
@pagination_micro_background_color: @pagination_background_color;
@pagination_micro_hover_color: @pagination_hover_color;
@pagination_micro_text_color: @pagination_text_color;
.ui-pagination { display: inline-block; overflow: hidden; }
.ui-pagination li { cursor: pointer; list-style: none; float: left; margin-right: 2px; }
.ui-pagination li:last-child { margin-right: 0px; }
.ui-pagination li > a, .ui-pagination li > div { .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: 0px;
@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: auto; font-size: 90%; width: 100%; .box-sizing(); }
.list a { color: @lists_links_color; font: @lists_links_font; text-decoration: @lists_links_decoration; }
.list .item.state-hover, .list .board.item:hover, #calendar-list .item:hover { color: @lists_hover_text_color; font: @lists_hover_text_font; background-color: @container_highlight_color; background-image: @lists_hover_background_image; background-attachment: @lists_hover_background_attachment; background-repeat: @lists_hover_background_repeat; background-position: @lists_hover_background_position; }
.list .item > .main.state-hover .link a, .list .item:hover > .main .link a { color: @lists_hover_links_color; font: @lists_hover_links_font; text-decoration: @lists_hover_links_decoration; }
.list .item.state-selected { color: @lists_selected_text_color; font: @lists_selected_text_font; background: @lists_selected_background; }
.list .item.state-selected a { color: @lists_selected_links_color; font: @lists_selected_links_font; text-decoration: @lists_selected_links_decoration; }
table.list > thead > tr > th { padding: 5px 10px; white-space: nowrap; }
table.list > thead > tr.last > td, table.list > tbody > tr.last > td { border-bottom-width: 0px; }
table.list > thead > tr > .last, table.list > tbody > tr > .last { border-right: none; }
table.list td.icon, table.list th.icon { width: 55px; text-align: center; }
table.list td.main, table.list th.main { padding: 10px 10px 10px 0px; }
table.list .checkbox { width: 25px; text-align: center; padding: 0px; border-right: none; }
table.list .checkbox-placeholder { border-right: none !important; }
.list .item > .main { cursor: pointer; overflow: hidden; }
.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: @timestamp_color; }

/* 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; text-decoration: @new_hover_link_decoration; text-transform: @new_hover_link_transform; }

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

/**************************************************************************
*                                Pages                                   *
**************************************************************************/

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


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

/* 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: 9px Verdana, Arial;
@buttons_text_decoration: none;
@buttons_hover_background: @color_004;
@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;  text-transform: uppercase; letter-spacing: 1px; }
.button:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover { color: @buttons_hover_text_color; font: @buttons_hover_text_font; text-decoration: @buttons_hover_text_decoration; background: @buttons_hover_background; border: @buttons_hover_border; }
.button:active, input[type="submit"]:active, input[type="button"]:active, button:active, .shoutbox_refresh_button.active, .liked.likes-button, .button.state-selected { color: @buttons_active_text_color; font: @buttons_active_text_font; text-decoration: @buttons_active_text_decoration; background: @buttons_active_background; border: @buttons_active_border; }
a.button { padding: 2px 6px; }
.button .status { padding: 0 6px 0 2px; .rounded-corners(0); border: @buttons_border; border-width: 0px 1px 0px 0px; float: left; overflow: hidden; word-wrap: break-word; white-space: nowrap; }
.button .status img { display: block; margin-top: 2px; position: relative; left: 2px; }
.button .icon { padding: 1px 2px 1px 1px; border: 0; float: left; line-height: normal !important; }
input[type="submit"], input[type="button"], button { padding: 2px 6px; min-height: 26px; }
.button-x { position: absolute; top: 50%; right: 3px; margin-top: -8px; cursor: pointer; display: block; text-indent: -9999px; width: 16px; height: 16px; background: url('//images.proboards.com/v5/icons-default.png') -16px -32px no-repeat; }
.button-x:hover { background: url('//images.proboards.com/v5/icons-default.png') 0px -32px no-repeat; }
.button.post-options { padding: 2px 0 2px 0; }
.reply_button { float: right; }
.reply-button { font-size: 9px!important;  text-transform: uppercase!important; letter-spacing: 1px!important; }

/**************************************************************************
*                             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 .shoutbox_form textarea { word-wrap: break-word; }
.ie7 #banner { padding: 0px 0px; }
.ie7 a#logo { padding: 0px 20px; line-height: 100px !important; }
.ie7 div.post-options { display: inline !important; }
.ie7 .ui-menu li { background-image: none; }
.ie7 .ui-menu li:hover > a { background-image: none; }
.ie7 .attachment-button-text { padding: 0 5px 3px 5px; }
.ie7 .wysiwyg-area .edit_reason > div { height: 28px; margin-left: 0; margin-right: 8px; }
.ie7 .wysiwyg-area .submit { line-height: 1px !important; }
.ie7 .show-user .controls { margin-right: 10px; }
.ie7 #nav-tree > li { display: inline; }
.ie7 #navigation-tree, .ie7 #nav-tree, .ie7 #nav-tree > li { height: 21px; }
.ie7 .recent-threads-button { height: 15px; }
.ie7 #nav-tree .menu_arrow { top: -1px; border-width: 11px 1px 11px 11px; }
.ie7 #password-wrapper div { display: inline; }
.ie7 #password-wrapper div input[name="password"] { position: relative; top: 5px; }
.ie7 #banner { min-height: @banner_height; height: auto; }
.ie7 #nav-tree { position: relative; overflow: hidden; }
.ie7 .show-user table .center-col:first-child table { table-layout: auto; }
.ie7 .popup_html .ui-menu { position: relative; z-index: 99999999; }
.ie7 #navigation-menu > ul li a { min-width: 21px; }
.ie7 #welcome { min-width: 200px; }
.ie7 .avatar_size_default { font-size: 120px; }
.ie7 .avatar_size_medium { font-size: 60px; }
.ie7 .avatar_size_small { font-size: 40px; }
.ie7 .avatar_size_quote { font-size: 24px; }

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

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

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

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

.ow_toggle {
   color: #000; font-size: 30px; float: right; margin: 5px -35px 0 0; transition: 0.5s all ease;
   position: relative; z-index: 5000; cursor: pointer;
}
.ow_in { margin-right: 10px; color: #fff; }
.ow_sidetd { width: 0px; transition: 0.5s all ease; }
.showtd { width: 200px!important;   }
#ow_maintd { transition: 0.5s all ease; }
.ow_sidediv {
   position: fixed; top: 0; left: -200px; z-index: 5000; background: rgba(0,0,0,0.9);
   width: 200px; height: 100vh; transition: 0.5s all ease;
}
.showsidediv { left: 0; }
#ow_sec01 { height: 100vh; background: rgba(88,88,88,0.6); position: relative; }
#ow_sec02 { background: @color_003; border-top: 30px solid @color_002; padding-top: 20px; }
#ow_sec01cont {
position: absolute;  top: 25vh; width: 100%;
}
#ow_title {
   font: 13vw 'Reenie Beanie'; color: #fff; text-align: center;
text-shadow: 2px 2px 3px #393939; line-height: 0.7em;
}
#ow_subtitle {
font: 0.8em 'Open Sans'; letter-spacing: 1.5em; color: #fff; text-align: center;
   text-shadow: 1px 1px 3px #393939;
}
#ow_prevcont {
width: 40vw; margin: 0 auto; font: 1em 'Open Sans'; color: #fff;
   text-shadow: 1px 1px 3px #393939; padding-top: 3vh; letter-spacing: 0.05em;
   max-height: 600px; overflow-y: auto;
}
.ow_menuicon {
float: right;  
}
#ow_sideicon {
position: relative; height: 180px;  
}
#ow_sideicon .avatar-wrapper {
   position: absolute; top: 40px; left: 50px; border-radius: 100%; overflow: hidden;
   height: 100px; width: 100px;
}
#ow_sideicon .avatar-wrapper img { width: 100px; height: 100px; }
#ow_icon { border-radius: 100%; overflow: hidden; position: absolute; top: 40px; left: 50px; }
#ow_sideicondiv01 {
   width: 120px; height: 120px; border-radius: 100%;
   border-top: 1px solid #fff; border-bottom: 1px solid #fff;
   border-left: 1px solid transparent; border-right: 1px solid transparent;
   position: absolute; top: 29px; left: 39px;
   animation-name: iconrotate01; animation-duration: 5s;
   animation-iteration-count: infinite;
animation-timing-function: linear;
   transition: 0.5s all linear;
}
#ow_sideicon:hover #ow_sideicondiv01 {
   border-top: 1px solid @color_001; border-bottom: 1px solid @color_001;
}
#ow_sideicondiv02 {
   width: 140px; height: 140px; border-radius: 100%;
   border-left: 1px solid #fff; border-right: 1px solid #fff;
   border-top: 1px solid transparent; border-bottom: 1px solid transparent;
   position: absolute; top: 19px; left: 29px;
   animation-name: iconrotate02; animation-duration: 5s;
   animation-iteration-count: infinite;
animation-timing-function: linear;
   transition: 0.5s all linear;
}
#ow_sideicon:hover #ow_sideicondiv02 {
   border-left: 1px solid @color_001; border-right: 1px solid @color_001;  
}
@keyframes iconrotate01 {
   0% { transform: rotate(0deg);}
   35% { border-left: 1px solid transparent; border-right: 1px solid transparent; }
   50% { border-left: 1px solid @color_001; border-right: 1px solid @color_001; }
   65% { border-left: 1px solid transparent; border-right: 1px solid transparent; }
   100% { transform: rotate(360deg); }
}
@keyframes iconrotate02 {
   0% { transform: rotate(0deg);}
   30% { border-top: 1px solid transparent; border-bottom: 1px solid transparent; }
   50% { border-top: 1px solid @color_001; border-bottom: 1px solid @color_001; }
   70% { border-top: 1px solid transparent; border-bottom: 1px solid transparent; }
   100% { transform: rotate(-360deg); }
}
#ow_qklkdiv {
margin-top: 20px; border-top: 1px solid @color_002; border-bottom: 1px solid @color_002;  
   padding: 20px 0; text-align: center;
}
.ow_qklink {
display: inline-block; width: 50px; height: 50px; border: 1px solid @color_002; font-size: 18px; line-height: 50px;
   margin-bottom: 5px; color: @color_001; transition: 0.5s all linear;
}
.ow_qklink:hover { color: #fff; }
.ow_qktitle { font: 9px 'Open Sans'; letter-spacing: 0.5em; color: #fff; }
#ow_topinfo { margin: 0 20px; }
#ow_toptbl {
   text-align: center; display: table; table-layout: fixed; width: 100%;
   border-collapse: separate; border-spacing: 10px;
}
#ow_toptr { display: table-row;  }
.ow_topinfodiv {
   display: block; margin-bottom: 10px;
}
@media screen and (min-width: 1200px) {
.ow_topinfodiv {
   display: table-cell; width: 24.25%; float: left;
}
}

.ow_topspace { display: table-cell; width: 1%; float: left; height: 1px; }
.ow_topinfodiv01 {
height: 250px; background: @color_004; border: 1px solid @color_005;
}

.ow_topsubtitle {
font: bold 0.5em 'Open Sans'; text-transform: uppercase;
   color: @color_006; letter-spacing: 0.3em; text-align: left;  
   margin: 10px 10px 0 10px; border-top: 1px solid @color_001; padding-top: 5px;
}
.ow_topinfotitle {
font: bold 1.5em 'Open Sans'; text-transform: uppercase;
   color: @color_001; letter-spacing: 0.1em; text-align: left;
   background: @color_005; margin: 5px 0 0 0; padding: 0 10px;
}
.ow_topinfotitle > .fa {
   color: @color_004; border-left: 3px solid @color_004; border-right: 3px solid @color_004;
   height: 28px; line-height: 28px; padding: 0 5px;  background: @color_002;
}
.ow_topinfocont {
margin: 10px; font: 0.9em 'Open Sans'; color: @color_006; text-align: left;
   height: 170px; overflow-y: auto; padding-right: 10px;
   letter-spacing: 0.02em; line-height: 1.5em;
}
.ow_newstitle {
color: @color_001; font: 1em 'Open Sans'; background: @color_005; padding:  0 5px 2px 5px;
   line-height:1em; font-variant: small-caps; letter-spacing: 0.08em;
}
.ow_newsdivider {
border-top: 1px solid @color_001; height: 0; margin: 15px 0;
}
.ow_topinfocont::-webkit-scrollbar-track { background-color: @color_002; border: 3px solid @color_004; }
.ow_topinfocont::-webkit-scrollbar { width: 7px; background-color: @color_002; }
.ow_topinfocont::-webkit-scrollbar-thumb { background-color: @color_002; }
.ow_stafftbl { border-spacing: 10px; border-collapse: separate; }
.ow_stafflink {
   display: block; width: 100%; height: 170px; background: @color_001 no-repeat center center;
   background-size: cover;
}
#staff01 { background-image: url('http://www.dacorakhalteke.com/uploads/h_photos/2772_1317893602.99.jpg'); }

#staff02 { background-image: url('http://i.imgur.com/3RkuXtU.jpg'); }
#staff03 { background-image: url('http://i.imgur.com/MWJJFX6.jpg'); }

.ow_eventdiv {
height: 80px; background: url('http://placehold.it/500x80') no-repeat center center; margin: 10px 10px 0 10px;  
   background-size: cover;
}

.ow_eventdiv_E1 {
height: 80px; background: url('https://static.pexels.com/photos/65867/dog-mountain-mombarone-clouds-65867.jpeg') no-repeat center center; margin: 10px 10px 0 10px;  
   background-size: cover;
}

.ow_eventdiv_E2 {
height: 80px; background: url('https://images.pexels.com/photos/69128/chess-chess-board-black-play-69128.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') no-repeat center center; margin: 10px 10px 0 10px;  
   background-size: cover;
}

.ow_eventdiv_time {
height: 80px; background: url('https://static.pexels.com/photos/237180/pexels-photo-237180.jpeg') no-repeat center center; margin: 10px 10px 0 10px;  
   background-size: cover;
}

.ow_topinfodiv01:first-child .ow_eventdiv { margin-bottom: 10px; }
.ow_eventname {
height: 80px; display: block; font: bold 20px 'Open Sans'; line-height: 80px;  color: #fff!important;
   background: rgba(88,88,88,0.6); opacity: 0; transition: 0.5s all ease;
}
.ow_eventname:hover { opacity: 1; }
.ow_censusdiv { margin:10px; padding-right: 5px; height: 170px; overflow-y: auto; }
.ow_censusdiv::-webkit-scrollbar-track { background-color: @color_002; border: 3px solid @color_004; }
.ow_censusdiv::-webkit-scrollbar { width: 7px; background-color: @color_002; }
.ow_censusdiv::-webkit-scrollbar-thumb { background-color: @color_002; }
.ow_censustbl { width: 100%; }
.ow_male, .ow_female, .ow_other, .ow_total {
   width: 30px; text-align: center; }
.ow_censustbl td { font: 0.7em 'Open Sans'; color: @color_006; border-bottom: 1px solid @color_005; padding: 5px 0; }
#ow_censustoprow > td { font-weight: bold; color: @color_001; }
.ow_class { text-align: left; font-weight: bold !important; }
#ow_bans {
   font: 0.7em 'Open Sans'; color: @color_006; border-bottom: 1px solid @color_005;
   padding: 5px 0; text-align: left;
}
#ow_navtree { background: @color_002; padding: 5px 10px; }
#ow_sec03 { background: @color_006; padding-top: 10px; }

/*BOARD REMODEL*/
.ow_mainrow { background: #fff; position: relative; overflow: hidden; }
.ow_brdname { background: @color_006; height: 40px; }
.ow_brdname > a {
font: bold 14px 'Open Sans'; text-transform: uppercase; letter-spacing: 1px;
   color: @color_005; padding: 10px 15px; background: @color_007;
   display: inline-block;
   height: 20px; float: left; clear: left;
}
.ow_brdnametri { width: 0; height: 0; border-style: solid;
border-width: 20px 0 20px 30px;
border-color: transparent transparent transparent @color_007;
   display: inline-block; float: left; margin-right: 20px;
}
.ow_brdlpinfo {
height: 13px; padding: 13.5px 0px 13.5px 20px; white-space: nowrap;  
}
.ow_brdlpinfo, .ow_brdlpinfo > a, .ow_brdlpinfo > abbr {
font: bold 9px 'Open Sans'; text-transform: uppercase; letter-spacing: 1px;
}
.ow_brdlpinfo, .ow_brdlpinfo > abbr { color: @color_004!important; }
.ow_brdlpinfo > a { color: #000!important; }
.ow_subbrds {
   font: bold 9px 'Open Sans'; text-transform: uppercase; letter-spacing: 1px;
   background: @color_002; border-left: 100px solid @color_005; height: 17px;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ow_subbrds > a {
   color: @color_001; display: inline-block; border-right: 1px solid @color_004;
   height: 11px; padding: 3px 10px; background: @color_002;
   transition: 0.5s all ease; float: left;
}
.ow_subbrds > a:hover { color: #fff; }
.ow_subbrdtri { width: 0; height: 0; border-style: solid;
border-width: 8.5px 0 8.5px 10px;
border-color: transparent transparent transparent @color_005;
   display: inline-block; float: left; margin-right: 10px;
}
.ow_brdimg {
   position: absolute; top: 0; right: -1px;
width: 200px; height: 167px;
background: url('http://placehold.it/500x167/transparent/000000') no-repeat right top, @body_background_image  no-repeat right center;
   background-size: cover;
-webkit-clip-path: polygon(40% 0, 100% 0%, 100% 100%, 0% 100%);
   -moz-clip-path: polygon(40% 0, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(40% 0, 100% 0%, 100% 100%, 0% 100%);
}
@media screen and (min-width: 1200px) {
.ow_brdimg {
       position: absolute; top: 0; right: 0;
       width: 500px; height: 167px;
       -webkit-clip-path: polygon(25% 0, 100% 0%, 100% 100%, 0% 100%);
       clip-path: polygon(25% 0, 100% 0%, 100% 100%, 0% 100%);
   }
}
.ow_brdlt { width: 40%; }
.ow_brdrt { width: 200px; }
@media screen and (min-width: 1200px) {
   .ow_brdrt { width: 500px; }
}
.ow_brdltdiv, .ow_brdmtdiv, .ow_brdrtdiv { height: 107px; }
.ow_brdltdiv { padding: 10px 5px 10px 10px; }
.ow_brdmtdiv { padding: 10px 5px; }
.ow_brdrtdiv { padding: 10px 10px 10px 5px; }
.ow_brdavaouter { height: 107px; width: 107px; position: relative; float: left; margin-right: 10px; }
.ow_brdavaouter > .avatar-wrapper { position: absolute; left: 16px; top: 16px; }
.ow_brdavaouter img { border-radius: 100%; overflow: hidden; }
.ow_avacircle01 { position: absolute; width: 105px; height: 105px; top: 0; left: 0; }
.ow_avacircle02 { position: absolute; width: 89px; height: 89px; top: 8px; left: 8px; }
.ow_nonewpostavacircle01, .ow_nonewpostavacircle02 {
   border-radius: 100%; border: 1px solid @color_006;
}
.ow_newpostavacircle01 {
   border-radius: 100%;
   border-top: 1px solid @color_001; border-bottom: 1px solid @color_001;
   border-left: 1px solid transparent; border-right: 1px solid transparent;
   animation-name: iconrotate03; animation-duration: 5s;
   animation-iteration-count: infinite;
animation-timing-function: linear;
   transition: 0.5s all linear;
}
.ow_newpostavacircle02 {
   border-radius: 100%;
   border-top: 1px solid @color_001; border-bottom: 1px solid @color_001;
   border-left: 1px solid transparent; border-right: 1px solid transparent;    
   animation-name: iconrotate04; animation-duration: 5s;
   animation-iteration-count: infinite;
animation-timing-function: linear;
   transition: 0.5s all linear;
}
@keyframes iconrotate03 {
   0% { transform: rotate(0deg);}
   100% { transform: rotate(360deg); }
}
@keyframes iconrotate04 {
   0% { transform: rotate(0deg);}
   100% { transform: rotate(-360deg); }
}
.ow_nonewpost {
   position: absolute; left: 16px; top: 16px; border-radius: 100%; background: @color_007;
   width: 75px; height: 75px;
}
.ow_brddesc {
height: 87px; overflow-y: scroll; padding: 10px;
   font: 11px 'Open Sans'; border: 1px solid @color_007;
}
.ow_brddesc::-webkit-scrollbar-track { background-color: @color_006; border: 3px solid #fff; }
.ow_brddesc::-webkit-scrollbar { width: 7px; background-color: @color_006; }
.ow_brddesc::-webkit-scrollbar-thumb { background-color: @color_006; }
.ow_brdnum {
border: 1px solid @color_007; height: 107px; position: relative; overflow: hidden;
}
.ow_brdpostnum {
   position: absolute; top: 0; left: 20px; height: 107px;
   font: bold 100px 'Open Sans'; line-height: 107px; color: @color_007; letter-spacing: -3px;
}
.ow_brdpostnumcap {
   position: absolute; font: 11px 'Open Sans'; color: @color_003; transform: rotate(-90deg);
   width: 107px; text-align: center; bottom: -15px; transform-origin: 0% 0%;
   background: @color_007; letter-spacing: 3px;
}

/*CUSTOM FORUM INFO CENTER*/
.ow_foruminfomaindiv { background: #fff; }
.ow_infosidetd { width: 20%; vertical-align: top; }
.ow_infousertd { width: 30%; vertical-align: top;}
.ow_infocontdiv {
   padding: 10px; background: #fff; border-left: 1px solid @color_007;
   border-top: 5px solid @color_007;
   font: bold 11px 'Open Sans'; height: 124px;
}
.ow_infoconttotals { margin: 0px; }
.ow_infocontlinks { margin: 0px; }

.ow_infototals, .ow_infolinks {
   white-space: nowrap; height: 30px; position: relative; overflow: hidden;
   border-bottom: 1px solid @color_006; font: bold 11px 'Open Sans'; line-height: 30px;
   letter-spacing: 1px; text-overflow: ellipsis;
}
.ow_infototals > i,  {
float: right; font-size: 17px; margin: 6.5px 0 ;
   color: @color_001; width: 20px;
}
.ow_infototals > a { text-transform: uppercase; font-weight: bold; }
.ow_infolinks > a {
   font-size: 17px; float: right;
width: 20px; height: 25px; margin-top: 3px;
   transition: 0.5s all ease; color: @color_001;
}
.ow_infolinks:hover > a { color: @color_002; }
.ow_memcount {
font: 9px 'Open Sans'; color: @color_003; text-transform: uppercase;
   letter-spacing: 1px; padding:3px 0; white-space: nowrap; text-overflow: ellipsis;
   overflow: hidden;
}
.ow_memcount > a { color: @color_003; }
.ow_memdiv {
padding-right: 10px; height: 77px; overflow-y: auto;
}
.ow_memdiv > a { text-transform: uppercase; }
.ow_memdiv::-webkit-scrollbar-track { background-color: @color_006; border: 3px solid #fff; }
.ow_memdiv::-webkit-scrollbar { width: 7px; background-color: @color_006; }
.ow_memdiv::-webkit-scrollbar-thumb { background-color: @color_006; }

.ow_threadtr { border-top: 1px solid @color_006; }
.ow_threadtr a { text-transform: uppercase; font-weight: bold; }
.ow_threadlisthd > th { text-transform: uppercase; letter-spacing: 2px; font-size: 9px; color: @color_006; }
.ow_threadlisthd {  border-bottom: 1px solid @color_006; }

/*CUSTOM MINIPROFILE*/
.ow_leftpaneltd { padding: 0!important; }
.ow_mpavareldiv img {
   width: 50px; height: 50px; border-radius: 100%; overflow: hidden;
   border: 5px solid @color_007;
}
.ow_mpavareldiv .avatar-wrapper { width: 50px; height: 50px; }
.ow_mphoverreldiv, .ow_mpflddiv { display: none; }
.ow_slimscrn { position: relative; width: 60px; height: 200px; }
.ow_slimscrn > div {
transform: rotate(90deg);
   transform-origin: left top 0;
text-transform: uppercase;
   position: absolute; font-size: 25px;
   left: 45px; top: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.ow_guestname { font-size: 13px; color: @color_007; }
.ow_guestsub { padding: 5px 0; font-size: 9px;  color: @color_007; }
@media screen and (min-width: 1024px) {
   .ow_slimscrn { display: none; }
   .ow_mpavareldiv {
       position: relative; width: 180px; height: 170px; margin: 0 auto;  
       border: 0px solid #000;
   }
   .ow_mpavareldiv img {
       width: 100px; height: 100px; border-radius: 100%; overflow: hidden;
       border: 10px solid @color_007;}
   .ow_mpavareldiv .avatar-wrapper {
       width: 120px; height: 120px; position: absolute; border-radius: 100%;
       top: 20px; left: 20px; box-shadow: 1px 1px 5px @color_002;
   }
   .ow_mpicondiv01 {
       position: absolute; border-radius: 100%; border: 1px solid @color_007;
       width: 138px; height: 138px; top: 10px; left: 10px;
   }
   .ow_mpicondiv02 {
       position: absolute; border-radius: 100%; border: 1px solid @color_007;
       width: 158px; height: 158px; top: 0px; left: 0px;    
   }
   .ow_mpcnt01 {
       position: absolute; right: 0; top:80px; width: 45px;
       z-index: 10; border-bottom: 3px dotted @color_007;
   }
   .ow_mpcnt02 {
       position: absolute; right: 0; bottom: 0; height: 90px;  
       z-index: 10; border-right: 3px dotted @color_007;
   }
   
   .ow_mpavareldivon img { border-color: @color_001; }
   .ow_mpavareldivon .ow_mpicondiv01, .ow_mpavareldivon .ow_mpicondiv02 {
       border-top: 1px solid @color_001; border-bottom: 1px solid @color_001;
       border-left: 1px solid transparent; border-right: 1px solid transparent;
   }
   .ow_mpavareldivon .ow_mpicondiv01 {
       animation-name: iconrotate03; animation-duration: 5s;
       animation-iteration-count: infinite;
       animation-timing-function: linear;
   }
   .ow_mpavareldivon .ow_mpicondiv02 {
       animation-name: iconrotate04; animation-duration: 5s;
       animation-iteration-count: infinite;
       animation-timing-function: linear;
   }
   .ow_mpavareldivon .ow_mpcnt01, .ow_mpavareldivon .ow_mpcnt02 { border-color: @color_001; }
.ow_mphoverreldiv, .ow_mpflddiv { display: block; }
   .ow_mphoverreldiv {
       position: relative; height: 300px; width: 200px; border: 10px solid @color_007; background-color: @color_007;
       border-radius: 10px; box-shadow: 1px 1px 5px @color_002;
   }
   .ow_mphoverreldiv > img, .ow_mpbigava {
       position: absolute; top: 0; left: 0; border-radius: 5px;
   }
   .ow_mpbigava { background-size: cover; width: 200px; height: 300px; }
   .ow_mphoverreldivon { border-color: @color_001; background-color: @color_001; }
   .mp_links {
       position: relative; z-index: 10; width: 20px; height: 20px;
       background: #fff; font-size: 10px; line-height: 20px; text-align: center;
       border-radius: 100%; border: 5px solid @color_007; margin: 5px 0 0 -20px;
       color: @color_006;
   }
   .mp_links:first-child { margin-top: 20px; }
   .ow_mphoverreldivon .mp_links { border-color: @color_001; }
   .mp_links > div, .mp_links > a {
       position: absolute; display: block; top: 0; left: 0; width: 20px; height: 20x;
       background: #fff; border-radius: 100%; font-size: 10px; line-height: 20px; text-align: center;
   }
   .ow_mpflddiv {
       width: 180px; margin: 0 auto; border-left: 2px dotted @color_007;
       position: relative; z-index: 10; padding-top: 10px; border-radius: 0 0 0 3px;
   }
   .ow_mpfld {
       border-bottom: 2px dotted @color_007; margin-bottom: 12px;  
   }
   .ow_mpfld > div {
       border: 1px solid @color_007; border-bottom: none!important;
       margin-left: 15px; margin-bottom: -9px;
       background: @color_007; padding: 2px 5px; text-transform: uppercase;
       font: bold 8px 'Open Sans'; color: @color_004;
       white-space: nowrap; text-overflow: ellipsis;
       overflow: hidden; border-radius: 3px; box-shadow: 1px 1px 3px @color_002;
   }
   .ow_mpfld > div > i { color: @color_001; }
   .ow_mpname > a { font-size: 14px; font-weight: bold; }
   .ow_mpname { background: #fff!important; }
   .ow_mpflddivon, .ow_mpflddivon .ow_mpfld { border-color: @color_001; }
   .ow_mpfld .personal-text {
       font: bold 8px 'Open Sans'!important; color: @color_004;
   }
   .ow_pertxt { white-space: normal!important; }
   .ow_pertxt > i { color: @color_001; float: left; margin: 2px 3px 0 0; }
}
#ow_cboxtab { border-top: 5px solid @color_007; }
#ow_affbox { text-align: center; padding: 10px; }
#ow_affbox > a, #ow_affbox img { width: 88px; height: 31px; display: inline-block; }
#ow_affbox > a { border: 2px solid @color_007; margin: 2px; }
#ow_credsbox { background: @color_002; font-size: 9px; letter-spacing: 1px; color: #fff; padding: 10px; margin: 0 auto; width: 70%; }

#s-m-t-tooltip{
 /* basic */
 max-width:300px;
 z-index:10000;
 margin:24px 14px 7px 12px;
 /* style and design */
 padding:5px;
 background:#222; /* fallback if rgba not supported */
 background:rgba(0,0,0,0.8);
 border: 1px solid @color_002;
 /* font */
 font-family:'Open Sans';
 font-size:9px;
 line-height:9px;
 color:#fff;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

/*BOARD IMGS*/
/* #board-____ .ow_brdimg { background-image: url('insertlinkhere'); } */

/* View Profile */

.viewproftop {
width:100%;
background-color:#333333;
font:75px Poiret One;
line-height:70px;
padding-top:20px;
color:#eeeeee;
}

.viewprofimgborder {
height:300px;
width:200px;
padding:9px;
border:solid 1px #333333;
}

.viewproffoot {
padding:10px;background-color:#333333;color:#eeeeee;
}

.viewprofavatar {
height:100px;
width:200px;
padding:5px;
border:solid 0px #333333;
margin-left:20px;
   margin-bottom:10px;
}

.viewprofarrow {
border-top:solid 5px transparent;
border-left:solid 5px transparent;
border-right:solid 5px #eeeeee;
border-bottom:solid 5px #eeeeee;
margin-top:35px;
}

.viewprofstatus {
padding:5px 0px;
background-color:#eeeeee;
text-align:center;
height:80px;
font:11px Verdana;
text-transform:lowercase;
color:#333333;
}

.viewproflink1 {
background-color:#333333;
height:20px;
width:100%;
text-align:center;
font:10px Courier New;
color:#eeeeee;
line-height:20px;
-webkit-transition-duration:.8s;transition-duration:.8s;-moz-transition-duration:.8s;
}

.viewproflink1:hover {
background-color:#444444;
color:#aaaaaa;
}

.viewprofleft {
width:90px;
height:90px;
background-color:#eeeeee;
overflow:hidden;
color:#aaaaaa;
text-align:center;
margin-top:10px;
font:11px Courier New;
}

.viewprofleft a {
line-height:90px!important;
font-size:20px;
font-family:Courier New;
color:#aaaaaa;
}

.viewprofmiddle {
background-color:#eeeeee;
font:11px Courier New;
text-transform:uppercase;
color:#333333;
}

.ui-tabMenu ul { background: #333333; border: none; border-bottom:solid 5px #333333; border-top:solid 5px #333333; padding: 0px;text-transform:uppercase; }
.ui-tabMenu ul li { height: 25px; list-style: none; float: left; top:0px; margin: 0px; margin-left:5px; position: relative; background: transparent; border: none; .rounded-corners(0px); -webkit-transition-duration:.8s;transition-duration:.8s;-moz-transition-duration:.8s; }
.ui-tabMenu ul li a { color: #eeeeee; font: 11px Courier New; text-decoration: @tabs_unselected_text_decoration; float: left; padding: 5px 14px; white-space: nowrap;-webkit-transition-duration:.8s;transition-duration:.8s;-moz-transition-duration:.8s; }
.ui-tabMenu ul li:hover { background: #404040; border: none; .rounded-corners(0px); }
.ui-tabMenu ul li:hover a { color: #aaaaaa; font: 11px Courier New; text-decoration: @tabs_hover_text_decoration; }
.ui-tabMenu ul li.ui-active { background: transparent; border: none; .rounded-corners(0px); }
.ui-tabMenu ul li.ui-active a { color: #aaaaaa; font: 11px Courier New; text-decoration: @tabs_selected_text_decoration; border-bottom: 0px solid @tabs_selected_background; }


div.scrollmenu {
   background-color: #333;
   overflow: auto;
   white-space: nowrap;
}

div.scrollmenu a {
   display: inline-block;
   color: white;
   text-align: center;
   padding: 14px;
   text-decoration: none;
}

div.scrollmenu a:hover {
   background-color: #777;
}





   /* Facebook Profiles */
   /* by Trinity Blair */
   @import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i');
   /*.show-user { background-color: #e9ebee; padding: 50px; box-sizing: border-box; border-radius: 3px; border: 1px solid #d3d6db; }*/
   .show-user td.avatar, .show-user th.avatar { display: none; }
   .show-user .list .main { padding: 10px; }
   .show-user, .show-user a, .show-user a:hover { font-family: Roboto; }
   .show-user .content { background: transparent; padding: 0; border: 0; }
   .show-user .content-box { border-radius: 3px; border-color: #e5e5e5; margin-bottom: 20px; }
   .status-title { border-radius: 3px 3px 0 0; background-color: #f6f7f9; color: #4b4f56; border-bottom: 0 !important; font-size: 12px; font-weight: bold; border: 1px solid #e5e5e5; padding: 10px; }
   .show-user .status-box { display: flex; background-color: white; border: 1px solid #e5e5e5; border-radius: 0; padding: 10px; margin: 0; }
   .show-user .status-box .avatar-wrapper { margin-right: 10px; border: 1px solid rgba(0, 0, 0, .1) !important; height: 40px; width: 40px; }
   .show-user .status-box .avatar-wrapper img { height: 40px; width: 40px; }
   .show-user .status-box input { width: 100%; height: 34px; border: 0; }
   .show-user .status-submit { width: initial; background-color: white; padding: 7px; border: 1px solid #e5e5e5; border-top: 0; border-radius: 0 0 3px 3px; margin-bottom: 20px; }
   .show-user .status-submit input[type="submit"] { padding: 0 16px; background-image: none; height: initial; line-height: 22px; background-color: #4267b2; color: white; border: 0; font-size: 12px; border-radius: 3px; font-family: Roboto; }
   .show-user .status { padding: 10px; }
   .show-user .status .avatar-wrapper { margin-right: 5px; border: 1px solid rgba(0, 0, 0, .1) !important; height: 40px; width: 40px; }
   .show-user .status .avatar-wrapper img { height: 40px; width: 40px; }
   .show-user .status-header { display: flex; align-items: center; margin-bottom: 11px; }
   .show-user .status-name a { color: #365899 !important; font-weight: bold; font-size: 14px; }
   .show-user .status-name span { color: #90949c; }
   .show-user #left-column { width: 323px; vertical-align: top; padding-right: 20px; }
   .show-user #left-column .content-box { padding: 12px; box-sizing: border-box; }
   .show-user #left-column .content-box h4 { display: flex; align-items: center; font-size: 16px; font-weight: normal; color: #4b4f56; margin-bottom: 12px; }
   .show-user #left-column .content-box h4 a { color: #4b4f56; }
   .show-user #left-column .content-box h4 i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: #4267b2; color: white; font-size: 13px; margin-right: 5px; }
   .show-user #left-column #awards h4 i { background-color: #a5d950; }
   .show-user #left-column #following h4 i, .show-user #left-column #followers h4 i { background-color: #f50e6b; }
   .show-user .follow { margin: -5px; }
   .show-user .mini-user { padding: 4px 0 0 0; width: 100px; max-width: 100px; height: 100px; max-height: 100px; }
   .show-user .status-title.warning { display: flex; align-items: center; margin-bottom: 20px; border-radius: 3px; border: 1px solid #e5e5e5 !important; }
   .show-user .status-title.warning > div { margin-left: 10px; flex: 1 1; }
   .show-user .friends-title { background-color: #f6f7f9; border: 1px solid #d3d6db; border-bottom: 0; border-radius: 3px 3px 0 0; color: #4b4f56; font-size: 20px; padding: 10px; }
   .show-user .friends-title.other-members { margin-top: 20px; }
   .show-user .friends-title i { width: 24px; text-align: center; color: #adb3bc; margin-right: 5px; }
   .show-user .friends-list { background-color: white; border: 1px solid #d3d6db; padding: 10px; border-radius: 0 0 3px 3px; }
   .show-user .friends { display: flex; flex-wrap: wrap; margin: -5px; }
   .show-user .friends .micro-profile { display: flex; align-items: center; flex: 0 1 32.1% !important; box-sizing: border-box; margin: 5px; padding: 0; border-radius: 0; height: 100px; }
   .show-user .friends .micro-profile .avatar { position: initial; top: 0; width: 100px; }
   .show-user .friends .micro-profile .info { position: initial; top: 0; width: initial; padding: 10px; }
   .show-user .friends .micro-profile .nowrap { white-space: normal; }
   .show-user .friends .micro-profile .avatar_size_small, .show-user .friends .micro-profile .avatar_size_small img { max-width: 100px; width: 100px; height: 100px; max-height: 100px; }
   .show-user .members-link-container { margin: 0; }
   .show-user .mini-avatar { position: relative; }
   .show-user .mini-avatar .avatar_size_medium, .show-user .mini-avatar .avatar_size_medium img { width: 100px; max-width: 100px; height: 100px; max-height: 100px; }
   .show-user .mini-avatar span.name { background: linear-gradient(transparent, rgba(0, 0, 0, .7)); position: absolute; bottom: 0; width: 100px; padding: 5px; box-sizing: border-box; text-align: left; left: 0; }
   .show-user .badges-awards { display: flex; align-items: center; flex-wrap: wrap; }
   .show-user .content-box.signature, .show-user .content-box.recent,  .show-user .content-box.networks,  .show-user .content-box.messengers { padding: 10px; border-radius: 0 0 3px 3px; }
   .show-user .content-box.signature img { max-width: 100%; }
   .show-user .mini-avatar span.name a { color: white !important; }
   .show-user .mini-avatar span.name i { color: #4080ff; }
   .show-user .mini-avatar span.small { color: white; }
   .show-user a.button, .show-user .button, .show-user a.button:hover, .show-user .button:hover { background-color: #f6f7f9; background-image: none; padding: 2px 10px; border-radius: 0; border-color: rgba(0, 0, 0, .4); font-weight: bold; color: #4b4f56; }
   .show-user div#options-container { padding: 0 10px 0 0; }
   .show-user .button .status { padding: 2px 7px; font-family: Roboto; font-size: 12px; font-weight: bold; }
   .show-user .button i { color: #d2d4d8; padding: 7px 0 0 10px; }
   .show-user .custom-title { padding: 12px 16px; text-align: center; border-bottom: 1px solid #e9ebee; margin-bottom: 12px; font-size: 12px; }
   .show-user .basic { padding: 4px; font-size: 12px; }
   .show-user .basic i { width: 12px; text-align: center; margin-right: 10px; height: 12px; color: #a6aab3; }
   .show-user .show-user-cover { background-color: white; border-radius: 3px 3px 0 0; display: flex; justify-content: space-between; align-items: flex-end; height: 315px; padding: 15px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .25); border-bottom-color: rgba(0, 0, 0, .4); box-shadow: inset 0 -200px 200px -200px #000000; -moz-box-shadow: inset 0 -200px 200px -200px #000000; -webkit-box-shadow: inset 0 -200px 200px -200px #000000; background-size: cover; background-position: center center; }
   .show-user .name_and_group { flex: 1 1; padding: 0 0 0 20px; box-sizing: border-box; text-shadow: 0 0 3px rgba(0,0,0,.8); color: white; text-rendering: optimizelegibility; }
   .show-user .fa.fa-check-circle { color: rgb(66, 183, 42); }
   .show-user .show-user-cover .avatar_size_default { width: 168px; height: 168px; background: rgba(0, 0, 0, .3); border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, .07); padding: 1px; }
   .show-user .show-user-cover .avatar_size_default img { max-height: 160px; height: 160px; max-width: 160px; width: 160px; background-color: white; border: 4px solid white; border-radius: 2px; }
   .show-user .ui-tabMenu { background-color: white; border: 1px solid;  border-top: 0; border-color: #d3d6db; border-radius: 0 0 3px 3px; padding: 0 0 0 201px; box-sizing: border-box; margin-bottom: 20px; }
   .show-user .ui-tabMenu ul { background-color: transparent; border-left: 1px solid #e9eaed; border-bottom: 0; padding: 0; }
   .show-user .ui-tabMenu ul li { background: transparent; border: 0; border-radius: 0; top: 0; margin: 0; height: inherit; }
   .show-user .ui-tabMenu ul li.ui-active a { border-bottom: 0; color: #4b4f56; }
   .show-user .ui-tabMenu ul li a { display: flex; align-items: center; border-right: 1px solid #e9eaed; font-weight: bold; height: 43px; padding: 0 17px; font-family: Roboto; }
   .show-user .ui-tabMenu ul li a:hover { background-color: #f6f7f9; }
   .show-user .avie { position: relative; bottom: -45px; overflow: hidden; }
   .show-user .avie:hover .avie-edit { bottom: 5px; opacity: .7; transition: .13s ease-in; }
   .show-user .avie-edit { position: absolute; display: flex; align-items: center; justify-content: center; bottom: -50px; left: 5px; width: 160px; padding: 20px; box-sizing: border-box; background-color: black; opacity: 0; color: white; transition: .13s ease-in; }
   .show-user .avie-edit i { margin-right: 5px; opacity: .5; }
   .show-user .delete { border-right: 0; }


.timetext {
   color: white;
}

.shoutbox_messages .details {
   position: static;
   float: right;
}
   
</style>