Help with background issue

[Barkley]

Forum URL: loveevertonforum.com

Hi.
I've a Samsung Core Prime, and the missus has similar.

On my phone, all my custom pages work perfectly in terms of responsiveness etc (except the nav bar etc which I can't touch).

However, I've noticed that on my daughters iphone 7, and her friends' iphone 5, the content is responsive, BUT the background images are unresponsive, and are scrolling with the page, as well as squeezed.

I wasn't aware of this problem, so it probably explains why my forum has now died a death, although disappointed that nobody could have tipped me off at some point given the amount of traffic we once had.

Can somebody tell me how to fix this please, as opposed to simply saying "wait until v6" as we'll 100% close before v6 arrives if I don't rectify this as lucky if we've a dozen members left.

I'm sure it's just a simple question of background sizing in the settings.

Many thanks in advance. 

[Barkley]

I don't know if it is important but apparently the default browser of the iphone is Safari.

[Barkley]

body {background-image:url('http://storage.proboards.com/3625327/i/uHXgvYV0fZrnXRfYMSvW.jpg');background-repeat:no-repeat;}

it's to do with the above I think.

[Barkley]

body {background: url(http://storage.proboards.com/3625327/i/uHXgvYV0fZrnXRfYMSvW.jpg) no-repeat center center fixed;
background-size: cover;height: 100%;overflow: hidden;overflow: scroll;}
html{height:100%;overflow: scroll;-webkit-overflow-scrolling: touch;}

I tried to Google for help, and using the above code did seem to have an effect, on 'this' page, loveevertonforum.com/page/site-map

However with 500 or so pages to edit, I need to know any coding is correct, and I don't trust the above.

Also, it's not just my custom pages that don't work on iphones, as my homepage relies on the background in the theme, and that is also not displaying correctly on iphones.

[Kami]

Barkley - the image you have specified is huge (1650 x 950 px). The reason it looks one way on one device and another on a different device is because images don't inherently scale. What you would need to do is change this:

body {background-image:url('http://storage.proboards.com/3625327/i/uHXgvYV0fZrnXRfYMSvW.jpg');background-repeat:no-repeat;}

to this:

body {
    background-image:url('http://storage.proboards.com/3625327/i/uHXgvYV0fZrnXRfYMSvW.jpg');
    background-repeat:no-repeat center center fixed;
    background-size: cover;
}

[Barkley]

May 29, 2017 14:13:20 GMT -8 Kami said:

Barkley - the image you have specified is huge (1650 x 950 px). The reason it looks one way on one device and another on a different device is because images don't inherently scale. What you would need to do is change this:

body {background-image:url('http://storage.proboards.com/3625327/i/uHXgvYV0fZrnXRfYMSvW.jpg');background-repeat:no-repeat;}

to this:

body {
    background-image:url('http://storage.proboards.com/3625327/i/uHXgvYV0fZrnXRfYMSvW.jpg');
    background-repeat:no-repeat center center fixed;
    background-size: cover;
}

Thanks for responding Kami.

I can't check it at the moment as daughter isn't here with the iphone, but will check and report back once I've managed to prize it from her. I've a feeling I've tried those things, but I'll certainly give it another go.

Appreciated.

[Barkley]

May 29, 2017 14:13:20 GMT -8 Kami said:

Barkley - the image you have specified is huge (1650 x 950 px). The reason it looks one way on one device and another on a different device is because images don't inherently scale. What you would need to do is change this:

body {background-image:url('http://storage.proboards.com/3625327/i/uHXgvYV0fZrnXRfYMSvW.jpg');background-repeat:no-repeat;}

to this:

body {
    background-image:url('http://storage.proboards.com/3625327/i/uHXgvYV0fZrnXRfYMSvW.jpg');
    background-repeat:no-repeat center center fixed;
    background-size: cover;
}

What I've found after a lot of playing around is that the following appears to work:

body {background-image:url('http://storage.proboards.com/3625327/i/uHXgvYV0fZrnXRfYMSvW.jpg'); background-repeat:no-repeat center center fixed; height: 100%; overflow: scroll;}

html {overflow: scroll; -webkit-overflow-scrolling: touch;}
If I remove any of the code it stops working, so it's now as minimal as I can make it.

I removed the background-size: cover; as that stops the image from being shrunk to fit. 
Without -webkit-overflow-scrolling: touch; the page only scrolls as far as your finger moves it on the iphone, i.e, it won't scroll long distances with a finger push when flicking up and down, so included that.

It appears the html is vital to the whole thing working, but not sure what this does, as my coding experience is basic, and so before I start editing 500 pages, it would be cool if Brian could give me the thumbs up, to tell me that the code is safe to add to each page without consequence if he'd be so kind.

The only difference I see now, between the Samsung Core, and the iphone, is that there are now slight gaps in the nav bar on the Samsung, but I can live with that if it solves the iphone problems. 

One small problem still exists though.

For my home page, I don't include an image in the custom page, as I allow the homepage to be dictated to by the various 'themes' on the website in the visual editor.

I can change my custom pages manually with ease. What I can't do though is edit the style sheet with the same confidence. When I upload a background image using the Visual editor in the admin panel, this still displays poorly on the iphone, so I need to take the code above in the code box (If Brian gives it the thumbs up) and somehow add it to the style sheet. 

Below is the complete CSS & HTML of the page which shows how I make the content responsive, if it helps others. When I first wrote it out, I was getting quite an understanding with the various bits, but been over a year now, so now not as confident as I was, but it's here anyway.

SPOILER: Click to show

<style type="text/css">
 
    html { height: 100%; width: 100%; }
        P.blocktext {margin-left: auto;margin-right: auto; width: 13em}
   ul.a {list-style-type: none; text-align: center;}/*UNORDERED LIST (as opposed to ordered list ol)- can have circle, square, none etc - can have a,b,c etc for different ones*/
   p.details {text-align: center;}/*TITLES UNDERNEATH IMAGE*/
p.main {text-align: justify;}/*MAIN AREAS OF TEXT*/
a:link {color:#38a6c8;font-size:100%;} /*LINK COLOUR*/
a:visited {color:#497988;font-size:100%;} /*LINK VISITED COLOUR*/
a:hover {color:#f38df9;font-size:100%;} /*LINK HOVER COLOUR*/
 h2 {background-color: #000000; color: #ffffff; font-size: 22px; text-align: center; margin-left: -10px; margin-right: -10px;} /*HEADING FOR EACH SECTION*/
   .text_over_image{overflow: hidden; /* so div won't change size */}  
   .textwrap{float: right;margin-left: 10px;margin-right: 0px; }/*IMAGES RIGHT*/
   .textwrap2{float: left;margin-left: 0px;margin-right: 10px; }/*IMAGES LEFT*/

body {background-image:url('http://storage.proboards.com/3625327/i/uHXgvYV0fZrnXRfYMSvW.jpg'); background-repeat:no-repeat center center fixed;height: 100%;overflow: scroll;}
   html{overflow: scroll;}

img.center {display: block; margin-left: auto; margin-right: auto; max-width: 100%;} /*PICTURES*/
.widget {display: block;margin-left: auto;margin-right: auto; max-width: 100%;} /*WIDGETS*/
img.banner {display: block; margin-left: auto; margin-right: auto; max-width: 100%;} /*BANNERS*/
iframe{display: block;margin-left: auto;margin-right: auto; max-width: 100%;} /*IFRAME*/

/*TEXTBOX 2*/
#textbox1,#textbox2,#textbox3,#textbox4,#textbox5,#textbox6,#textbox7,#textbox8,#textbox9,#textbox10,#textbox11,#textbox12{
background: url(https://farm6.staticflickr.com/5700/24039526125_d7b3ed8729_o.jpg); /* image to display */
max-width:100%; /* width of image */
background-repeat:repeat; /* repeat no-repeat repeat-x repeat-y inherit */
color: #ffffff; /* text color */
font-size: 15px; /* font size */
font-weight: normal; /* font weight */
font-family: Arial; /* font family */
padding-left: 10px; /* left position of text */
padding-right: 10px;
padding-top:px; /* top position of text */
padding-bottom:px; /* bottom position of text */
border: 0px solid; /* border around image if desired */
overflow: hidden; /* so div won't change size */
text-decoration: none; /* text decoration underline etc */
}

  /*  SECTIONS  */
.section {
clear: both;
padding: 0px;
margin: 0px;
}

/*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
   

   
   /*  GRID OF FOUR  */
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 74.6%;
}
.span_2_of_4 {
width: 49.2%;
}
.span_1_of_4 {
width: 23.8%;
}

/*  GO FULL WIDTH BELOW 568 PIXELS */
@media only screen and (max-width: 480px) {
.col {  margin: 1% 0 1% 0%; }
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}
   
   @media screen and (max-width: 1480px) {
       

       /* change grid4 to 2-column */    
       .span_1_of_4 {
width: 48.4%;
margin: 1% 0 1% 3.2%;
           clear:none;
}
.span_1_of_4 .col:nth-of-type(3n+1) {
margin-left: 3.2%;
clear: none;
}
.span_1_of_4:nth-child(2n+1) {
clear: both;
margin-left: 0;
   clear: left;
}
 
       @media screen and (max-width: 768px) {
       

       /* change grid 2 to 1-column */    
       .span_1_of_4 {
width: 98.4%;
margin: 1% 0 1% 1.6%;
}

.span_1_of_4:nth-child(1n+1) {
clear: both;
margin-left: 0;
}
           /*  Stop resizing at 320px */
 @media screen and (max-width: 320px) {
#wrapper{
width:320px;
}
}
</style>

<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="section group">
<div class="col span_1_of_4">$[zone_1]</div>
<div class="col span_1_of_4">$[zone_2]</div>
<div class="col span_1_of_4">$[zone_3]</div>
<div class="col span_1_of_4">$[zone_4]</div>
</div>
<div class="section group">
<div class="col span_1_of_4">$[zone_5]</div>
<div class="col span_1_of_4">$[zone_6]</div>
<div class="col span_1_of_4">$[zone_7]</div>
<div class="col span_1_of_4">$[zone_8]</div>
</div>
<div class="section group">
<div class="col span_1_of_4">$[zone_9]</div>
<div class="col span_1_of_4">$[zone_10]</div>
<div class="col span_1_of_4">$[zone_11]</div>
<div class="col span_1_of_4">$[zone_12]</div>
</div>


[Brian]

background-repeat only accepts one argument. The center center fixed you've added to it need to be assigned to other CSS properties to work.

Other than that it looks fine. CSS is probably the safest language to mess around with since messing it up is of little consequence (improper HTML is at the mercy of your browser, and improper Javascript will usually spam you with syntax errors).

[Barkley]

May 30, 2017 8:18:18 GMT -8 Brian said:

background-repeat only accepts one argument. The center center fixed you've added to it need to be assigned to other CSS properties to work.

Other than that it looks fine. CSS is probably the safest language to mess around with since messing it up is of little consequence (improper HTML is at the mercy of your browser, and improper Javascript will usually spam you with syntax errors).

Thanks Brian. 

As I didn't create 'any' of the code myself in the other stuff, I'll need to Google a solution regarding the center center things, as not experienced enough to rewrite anything myself yet, so should it be something like this?

background-repeat: no-repeat;


   background-position: center; or even background-position: center center;

Is that what you mean?

Do you have a solution to also apply these settings to the style sheet once corrected, in order for that background image to work, please mate?

[Brian]

Both of those would be acceptable values for the background-position property.

Everything between the opening and closing <style> tags is CSS and can go in the style sheet. There's no special method to it.

[Barkley]

May 30, 2017 8:44:47 GMT -8 Brian said:

Both of those would be acceptable values for the background-position property.

Everything between the opening and closing <style> tags is CSS and can go in the style sheet. There's no special method to it.

I thought about using also : background-attachment: fixed; after reading w3schools


So, is this the way forward? (no panic btw - please feel free to help others first and get back to me in your own time)



body {background-image:url('http://storage.proboards.com/3625327/i/uHXgvYV0fZrnXRfYMSvW.jpg');
background-repeat:no-repeat; 
background-repeat: no-repeat;

background-position: center center;
background-attachment: fixed;
height: 100%;
overflow: scroll;}



html {overflow: scroll; -webkit-overflow-scrolling: touch;}

If your answer is yes, are you suggesting I paste the whole lot into the style sheet, and if so, can you tell me where, and what I need to delete from the sheet in order to do it please?

Here is my style sheet:

SPOILER: Click to show

@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;

}



/* Required for proper functioning of the Easy Theme Creator */

@banner_height: 20px;

@banner_background_color: #00A0E2;

@banner_background_image: none;

@banner_background_position: center center;

@banner_text_color: #ffffff;

@banner_text_align: left;

@wrapper_width: 81%;

@all_gradients: none;

@body_background_image: url('http://storage.proboards.com/3625327/i/_l4J7byr2eSk7Jt9BQEY.jpg');



@banner_background_color: transparent;



@body_background_color: #101b3b;

@default_forum_text_color: #250223;

@link_color: #e2d3b4;

@link_visited_color: #e2d3b4;



@title_bar_background_color: #000000;

@title_text_color: #ffffff;

@title_buttons_background_color: #0950a2;

@title_buttons_color: #ffffff;



@buttons_background_color: #dadada;

@buttons_text_color: #000000;



@container_background_color_1: #ffffff;

@container_text_color_1: #000000;

@container_background_color_2: #f8f8f8;

@container_text_color_2: #000000;

@container_links_color: #9a9b9c;

@container_highlight_color: #fff7e0;

@container_outer_border_color: #e9e9e9;

@container_inner_border_color: #dddddd;



@pagination_background_color: #fff8f8;

@pagination_text_color: #000102;

@pagination_hover_color: #a0a0a0;

/* End required for proper functioning of the Easy 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: normal;

@default_forum_text_font_weight: normal;

@default_forum_text_font_size: medium;

@default_forum_text_font_family: Arial, Helvetica, sans-serif;

@default_forum_text_decoration: none;

@default_forum_text_case: inherit;

@default_forum_text_caps: normal;

@bold_weight: bold;

@bold_size: inherit;

@italic_style: normal;

@link_font: normal normal small Arial, Helvetica, sans-serif;

@link_decoration: none;

@link_active_color: #ffffff;

@link_active_font: normal normal x-small Arial, Helvetica, sans-serif;

@link_active_decoration: none;

@link_visited_font: normal normal x-small Arial, Helvetica, sans-serif;

@link_visited_decoration: none;

@link_hover_color: #ffffff;

@link_hover_font: normal normal x-small Arial, Helvetica, sans-serif;

@link_hover_decoration: none;

@h2_color: #250223;

@h2_font: normal 400 medium Arial, Helvetica, sans-serif;

@h2_decoration: none;

@h2_case: inherit;

@h2_caps: normal;

@h3_color: #250223;

@h3_font: normal 400 x-small Arial, Helvetica, sans-serif;

@h3_decoration: none;

@h3_case: inherit;

@h3_caps: normal;

@timestamp_color: #250223;

@timestamp_font: normal 700 xx-small Arial;

@description_color: #250223;

@description_font: normal 400 xx-small Arial, Helvetica, sans-serif;

@small_desc_color: #250223;

@small_desc_font: normal normal x-small Arial;

@status_text_success_color: #250223;

@status_text_failure_color: #fc0808;

@shadow_color: #333333;

* { word-wrap: ; }

body { background-color: @body_background_color; background-image: @body_background_image; background-attachment: @body_background_attachment; background-repeat: @body_background_repeat; background-position: @body_background_position; line-height: 1.2; color: @default_forum_text_color; font-style: @default_forum_text_font_style; font-weight: @default_forum_text_font_weight; font-size: @default_forum_text_font_size; font-family: @default_forum_text_font_family; text-decoration: @default_forum_text_decoration; text-transform: @default_forum_text_case; font-variant: @default_forum_text_caps; }

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

table { table-layout: fixed; }

a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; }

:visited { color: @link_visited_color; font: @link_visited_font; text-decoration: @link_visited_decoration; }

a:hover { color: @link_hover_color; font: @link_hover_font; text-decoration: @link_hover_decoration; }

a:active { color: @link_active_color; font: @link_active_font; text-decoration: @link_active_decoration; }

a.text { cursor: default; }

h1, 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 { color: @timestamp_color !important; font: @timestamp_font; }

blockquote { display: block; margin: 15px 40px; }

sub, sup { font-size: 80%; }

.bold, b { font-weight: @bold_weight; font-size: @bold_size; }

.italic { font-style: @italic_style; }

.description { color: @description_color; font: @description_font; }

.small { font: @small_desc_font; vertical-align: middle; }

.note { color: @small_desc_color; }

.flood-control { padding: 5px; color: @status_text_failure_color; }

.placeholder, .placeholder-empty { color: #888888; }

.posting-errors { padding: 5px; color: @status_text_failure_color; }

.noscript-form-error { color: @status_text_failure_color; background: lighten(@status_text_failure_color, 25%); font-weight: 800; .rounded-corners(); padding: 5px; margin: 0 0 10px 0; }

.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 */

.error { color: @status_text_failure_color; }

.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_2; }

.status-box.saved { background-color: @container_background_color_2; }



/* Header */

@banner_background_repeat: no-repeat;

@banner_text_font: italic normal small Verdana, Geneva, sans-serif;

@banner_text_decoration: none;

@banner_text_case: inherit;

@banner_text_caps: normal;

@banner_text_shadow: 0 2px 2px;

header { display: block; position: relative; margin-bottom: 10px; }

#banner-container { display: table; width: 100%; }

#banner { display: table-cell; height: @banner_height; background-color: @banner_background_color; background-image: @banner_background_image; background-position: @banner_background_position; background-repeat: @banner_background_repeat; vertical-align: middle; padding: 0px 20px; text-align: @banner_text_align; overflow: hidden; }

a#logo { vertical-align: middle; color: @banner_text_color; text-shadow: @banner_text_shadow; text-decoration: @banner_text_decoration; font: @banner_text_font; font-variant: @banner_text_caps; text-transform: @banner_text_case; white-space: normal; word-break: break-all; }



/* Welcome Text / Login / Logout Links */

@welcome_text_color: #ffffff;

@welcome_text_font: normal bold 0.9em Arial, Helvetica, sans-serif;

@welcome_text_shadow: inherit;

@welcome_links_color: #dfcba3;

@welcome_links_font: normal bold 0.9em Arial, Helvetica, sans-serif;

@welcome_links_decoration: none;

@welcome_links_shadow: none;

#welcome { text-align: right; color: @welcome_text_color; font: @welcome_text_font; text-shadow: @welcome_text_shadow; float: right; vertical-align: middle; line-height: 31px !important; }

#welcome a { color: @welcome_links_color; text-decoration: @welcome_links_decoration; text-shadow: @welcome_links_shadow; font: @welcome_links_font; }



/* Navigation Menu */

@nav_bar_background: center top no-repeat scroll;

@nav_bar_border: 2px none;

@nav_bar_border_radius: 5px 5px 5px 5px;

@nav_bar_button_color: #ffffff;

@nav_bar_button_font: normal normal 0.9em Arial, Helvetica, sans-serif;

@nav_bar_button_decoration: none;

@nav_bar_button_shadow: 0 2px 2px #232323;

@nav_bar_button_background: #292929 center top repeat scroll;

@nav_bar_button_hover_color: #ffffff;

@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: #283458 center center  scroll url('//images.proboards.com/v5/gradients/wave.png');

@nav_bar_button_current_color: #ccc4a3;

@nav_bar_button_current_font: normal normal 0.9em Arial, Helvetica, sans-serif;

@nav_bar_button_current_decoration: none;

@nav_bar_button_current_shadow: inherit;

@nav_bar_button_current_background: #292929 center center repeat scroll url('//images.proboards.com/v5/gradients/wave.png');



@nav_bar_bubble_text_color: #ffffff;

@nav_bar_bubble_font: normal normal 0.8em Arial, Helvetica, sans-serif;

@nav_bar_bubble_background: #58c5f0;

@nav_bar_bubble_border_radius: 2px 2px 2px 2px;

#navigation-menu { padding: 0 8px; background: @nav_bar_background; border: @nav_bar_border; .rounded-corners(0, 0, @nav_bar_border_radius, @nav_bar_border_radius); }

#navigation-menu a { position: relative; }

#navigation-menu > ul, #navigation-menu > ul li { float: left; }

#navigation-menu > ul li a { display: inline-block; padding: 0 .75em; color: @nav_bar_button_color; font: @nav_bar_button_font; text-decoration: @nav_bar_button_decoration; text-shadow: @nav_bar_button_shadow; background: @nav_bar_button_background; line-height: 31px !important; }

#navigation-menu > ul li:hover a { color: @nav_bar_button_hover_color; font: @nav_bar_button_hover_font; text-decoration: @nav_bar_button_hover_decoration; text-shadow: @nav_bar_button_hover_shadow; background: @nav_bar_button_hover_background; line-height: 31px !important; }

#navigation-menu > ul li a.state-active { color: @nav_bar_button_current_color; font: @nav_bar_button_current_font; text-decoration: @nav_bar_button_current_decoration; 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: #ffffff;

@nav_tree_font: normal bold x-small Arial, Helvetica, sans-serif;

@nav_tree_decoration: none;

@nav_tree_background_color: #070b18;

@nav_tree_border_width: 0px;

@nav_tree_border_style: solid;

@nav_tree_border_color: #fcfcff;

@nav_tree_border_radius: 0;

@nav_tree_hover_color: #ffffff;

@nav_tree_hover_font: @nav_tree_font;

@nav_tree_hover_decoration: none;

@nav_tree_hover_background_color: #283458;

.recent-threads-button, #navigation-tree { color: @nav_tree_color; border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; background: @nav_tree_background_color; margin-bottom: 10px; height: 20px; .rounded-corners(@nav_tree_border_radius); }

.recent-threads-button.new .new-icon { display: inline-block; }

#navigation-tree { overflow: hidden; }

#nav-tree { white-space: nowrap; }

.popup_html { position: absolute; top: 0; left: 0; z-index: 999999; }

#nav-tree ul { display: none; list-style-type: none; border: @nav_tree_border_width @nav_tree_border_style @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; color: @nav_tree_color; text-decoration: @nav_tree_decoration; display: block; padding: 4px 10px 4px 15px; margin: 0 1px 0 5px; }

#nav-tree > li:hover, #nav-tree .ui-menu li:hover { color: @nav_tree_hover_color; background-color: @nav_tree_hover_background_color;  }

#nav-tree > li:hover > div > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }

#nav-tree .ui-menu li:hover > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }

#nav-tree > li:first-child { .rounded-corners(@nav_tree_border_radius, 0, 0, @nav_tree_border_radius); }

#nav-tree > li:first-child a { margin-left: -2px; }

#nav-tree .ui-menu { display: none; position: absolute; float: left; }

#nav-tree .ui-menu a { .rounded-corners(0px); }

#nav-tree .ui-menu li { position: relative; white-space: nowrap; padding: 2px 10px 2px 5px; }

#nav-tree .ui-menu li ul { display: none; z-index: 9999; position: absolute; }

#nav-tree .ui-menu li .arrow { position: absolute; right: 2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; display: none; }

#nav-tree .ui-menu li.ui-menu-has-sub-menu > .arrow { display: block; }

#nav-tree li.new_span > a > .new-icon { float: none; display: inline-block; }

#nav-tree li.state-selected > a { font-weight: bold !important; }

#nav-tree .menu_arrow { width: 0; height: 0; position: absolute; top: 0px; right: -10px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_border_color; z-index: 1001; }

#nav-tree .menu_arrow span { width: 0; height: 0; position: absolute; top: -10px; left: -11px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_background_color; z-index: 1002; }

#nav-tree > li:hover .menu_arrow { border-color: transparent transparent transparent @nav_tree_border_color; }

#nav-tree > li:hover .menu_arrow span { border-color: transparent transparent transparent @nav_tree_hover_background_color; }

.popup_html ul { display: none; list-style-type: none; border: @nav_tree_border_width @nav_tree_border_style @nav_tree_border_color; background-color: @nav_tree_background_color; .box-shadow(); }

.popup_html li a { font: @nav_tree_font; color: @nav_tree_color; text-decoration: @nav_tree_decoration; display: block; padding: 4px 10px 4px 15px; margin: 0 1px 0 5px; }

.popup_html li:hover, .popup_html .ui-menu li:hover { color: @nav_tree_hover_color; background-color: @nav_tree_hover_background_color;  }

.popup_html li:hover > div > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }

.popup_html .ui-menu li:hover > a { font: @nav_tree_hover_font; color: @nav_tree_hover_color; text-decoration: @nav_tree_hover_decoration; }

.popup_html li { .rounded-corners(@nav_tree_border_radius, 0, 0, @nav_tree_border_radius); }

.popup_html li a { margin-left: -2px; }

.popup_html .ui-menu { display: none; position: absolute; float: left; z-index: 11; }

.popup_html .ui-menu a { .rounded-corners(0px); overflow: hidden; max-width: 550px; }

.popup_html .ui-menu li { position: relative; white-space: nowrap; padding: 2px 15px 2px 5px; }

.popup_html .ui-menu li ul { display: none; z-index: 9999; position: absolute; }

.popup_html .ui-menu li .arrow { position: absolute; right: 2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; display: none; }

.popup_html .ui-menu li.ui-menu-has-sub-menu > .arrow { display: block; }

.popup_html li.new_span > a > .new-icon { float: none; display: inline-block; }

.popup_html li.state-selected > a { font-weight: bold !important; }

.popup_html .menu_arrow { width: 0; height: 0; position: absolute; top: 0px; right: -10px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_border_color; z-index: 1001; }

.popup_html .menu_arrow span { width: 0; height: 0; position: absolute; top: -10px; left: -11px; border-width: 10px @nav_tree_border_width 10px 10px; border-style: @nav_tree_border_style none @nav_tree_border_style @nav_tree_border_style; border-color: transparent transparent transparent @nav_tree_background_color; z-index: 1002; }

.popup_html li:hover .menu_arrow { border-color: transparent transparent transparent @nav_tree_border_color; }

.popup_html li:hover .menu_arrow span { border-color: transparent transparent transparent @nav_tree_hover_background_color; }

/* Participated Button */

.recent-threads-button { font: @nav_tree_font; cursor: pointer; float: right; height: 14px; margin: 0 0 10px 10px; padding: 3px 6px 3px 6px; text-align: center; }

.recent-threads-button:hover { color: @nav_tree_hover_color; font: @nav_tree_hover_font; text-decoration: @nav_tree_hover_decoration; background-color: @nav_tree_hover_background_color; }

.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; }



/* Recent Threads Dialog */

@participated_background: #010002   scroll;

@participated_inner_border: 1px solid;

@participated_text_color: #ffffff;

@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: #58c5f0   scroll;

@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-width: 0px 1px 1px 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: url('//images.proboards.com/v5/gradients/wave.png');

@title_bar_background_attachment: scroll;

@title_bar_background_repeat: repeat-x;

@title_bar_background_position: center center;

@title_bar_border: 0px;

@title_bar_border_radius: 0;

@title_text_font: normal normal small Arial, Helvetica, sans-serif;

@title_text_decoration: none;

@title_text_transform: inherit;

@title_text_variant: normal;

@title_text_align: left;

@title_text_shadow: inherit;

@title_buttons_background_image: url('http://images.proboards.com/v5/gradients/soft.png');

@title_buttons_background_attachment: scroll;

@title_buttons_background_repeat: repeat-x;

@title_buttons_background_position: left center;

@title_buttons_font: medium Arial, Helvetica, sans-serif;

@title_buttons_decoration: none;

@title_buttons_hover_background: #056e97   scroll;

@title_buttons_hover_color: #ffffff;

@title_buttons_hover_font: @title_buttons_font;

@title_buttons_hover_decoration: @title_buttons_decoration;

@content_background: #ffffff  repeat scroll;

@content_border_width: 13px 13px 13px 13px;

@content_border_style: solid;

@content_border_radius: 0;

@content_area_background: #ffffff   scroll;

@content_area_border: 1px solid #070a58;

@content_area_border_radius: 5px 5px 5px 5px;

@content_area_text_color: #250223;

@content_area_text_font: normal normal small Arial, Helvetica, sans-serif;

@content_area_links_font: normal normal 100% Tahoma, Geneva, sans-serif;

@content_area_links_decoration: none;

@action_bar_background: #d7d1d1   scroll url('http://images.proboards.com/v5/gradients/highline.png');

@action_bar_border: 0px solid;

@action_bar_border_radius: 0 0 0 0;

.container > .title-bar { min-height: 30px; padding: 0px 10px; 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 h1, .container > .title-bar h2, .container > .title-bar h3 { color: @title_text_color; font: @title_text_font; text-decoration: @title_text_decoration; font-variant: @title_text_variant; text-transform: @title_text_transform; text-align: @title_text_align; text-shadow: @title_text_shadow; line-height: 30px !important; display: inline; }

.container > .title-bar > .controls li a, .container > .title-bar > .controls li div { color: @title_buttons_color; background-color: @title_buttons_background_color; background-image: @title_buttons_background_image; background-attachment: @title_buttons_background_attachment; background-repeat: @title_buttons_background_repeat; background-position: @title_buttons_background_position; font: @title_buttons_font; text-decoration: @title_buttons_decoration; height: 30px; line-height: 30px !important; padding: 0 10px; }

.container > .title-bar > .controls:hover li a, .container > .title-bar > .controls:hover li div { color: @title_buttons_hover_color; background: @title_buttons_hover_background; font: @title_buttons_hover_font; text-decoration: @title_buttons_hover_decoration; }

.container > .content, .ui-dialog .ui-dialog-content, .ui-dialog .ui-dialog-buttonpane, .container.copy .clone { background: @content_background; border-width: @content_border_width; border-style: @content_border_style; border-color: @container_outer_border_color; border-top-width: 0px; padding: 0px; .rounded-corners(@content_border_radius); }

.content-box { background: @content_area_background; border: @content_area_border; .rounded-corners(@content_area_border_radius); color: @content_area_text_color; font: @content_area_text_font; }

.content-box a, .container a { color: @container_links_color; font: @content_area_links_font; text-decoration: @content_area_links_decoration; }

.container > .control-bar { background: @action_bar_background; border: @action_bar_border; border-top-width: 0px; border-bottom-width: 0px; border-radius: @action_bar_border_radius; margin-bottom: 0px; }

.container { margin-bottom: 10px; color: @container_text_color_1; }

.container abbr.time { color: lighten(@container_text_color_1, 15%); }

.container .note { color: lighten(@container_text_color_1, 15%); }

.container > .title-bar > .controls { float: right; }

.container > .control-bar > .controls { float: right; padding: 5px; color: #000000; }

.container > .content { overflow: 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(); background-color: @container_outer_border_color; background-color: hsla(hue(@container_outer_border_color), saturation(@container_outer_border_color), lightness(@container_outer_border_color), .5); }

.ui-dialog .ui-dialog-titlebar-close:hover span, .ui-dialog .ui-dialog-titlebar-close:focus span { background-image:url('http://images.proboards.com/v5/ui-icons.png'); background-position: -20px, 0px; }

.ui-dialog div.ui-dialog-buttonpane { text-align: left; margin-top: 10px; padding: 0 0 0 10px; border-width: 1px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }



.ui-dialog div.section { text-align: center; background-color: @container_background_color_1; border-width: 1px; border-style: solid; border-color: @container_inner_border_color; .rounded-corners(10px); }



.ui-search .search-input.filters-input { .rounded-corners(); }

.ui-search .search-input { line-height: 16px !important; padding: 2px; border-width: 1px; border-style: solid; border-color: darken(@container_inner_border_color, 20%); .rounded-corners(5px, 0, 0, 5px); }

.ui-search .search-filters-button { display: inline-block; width: auto; height: auto; margin-left: -2px; padding: 3px 4px 2px 4px; border-width: 1px 1px 1px 0px !important; border-style: solid; border-color: darken(@container_inner_border_color, 20%); .rounded-corners(0, 5px, 5px, 0); vertical-align: top; cursor: pointer; }

.ui-search .search-filters-button .icon { display: inline-block; width: auto; height: auto; }

.event_icon { cursor: pointer; }

.container.copy .clone { .rounded-corners(0px); border-collapse: inherit; border-bottom-width: 0px; }



/* Pagination Menus */

@pagination_micro_background_color: @pagination_background_color;

@pagination_micro_hover_color: @pagination_hover_color;

@pagination_micro_text_color: @pagination_text_color;

.ui-pagination { display: inline-block; overflow: hidden; }

.ui-pagination li { cursor: pointer; list-style: none; float: left; margin-right: 2px; }

.ui-pagination li:last-child { margin-right: 0px; }

.ui-pagination li > a, .ui-pagination li > div { .rounded-corners(3px); font-weight: bold; text-decoration: none; background-color: @pagination_background_color; border: 1px solid darken(@container_inner_border_color, 20%); color: @pagination_text_color; display: inline-block; padding: 4px 5px;  }

.ui-pagination li > a:hover, .ui-pagination li > div:hover { border-style: solid; text-decoration: none; background-color: @pagination_hover_color; color: @pagination_text_color; border-color: mix(@pagination_text_color, @pagination_background_color, 70%); }

.ui-pagination li.state-selected > a { border: 0px solid transparent; background-color: @pagination_text_color; color: @pagination_background_color; padding: 5px 6px; cursor: default; }

.ui-pagination li.state-disabled > a { cursor: default; padding: 4px 5px; border-width: 1px; border-style: solid; opacity: .5; filter: alpha(opacity=50); }

.ui-pagination li.state-disabled > a:hover { background-color: @pagination_background_color; border-color: mix(@pagination_text_color, @pagination_background_color, 40%); }

.ui-micro-pagination { overflow: hidden; font-size: 75%; margin-top: 3px; }

.ui-micro-pagination ul, .ui-micro-pagination ul li div { display: inline; }

.ui-micro-pagination ul li { list-style: none; display: inline; margin-right: 2px; }

.ui-micro-pagination ul li:last-child { margin-right: 0px; }

.ui-micro-pagination ul li > a { display: inline-block; text-decoration: none; padding: 0 3px; color: @pagination_micro_text_color; background-color: @pagination_micro_background_color; border: 1px solid mix(@pagination_text_color, @pagination_background_color, 40%); .rounded-corners(2px); }

.ui-micro-pagination ul li > a:hover { color: @pagination_micro_text_color; border: 1px solid mix(@pagination_text_color, @pagination_background_color, 70%); background-color: @pagination_micro_hover_color; }



/* Tabs */

@tabs_background: #ffffff left center  scroll;

@tabs_border: 1px solid #0b0f6d;

@tabs_border_radius: 5px 5px 5px 5px;

@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: #ffe9c9   scroll;

@tabs_hover_border: @tabs_unselected_border;

@tabs_hover_border_radius: @tabs_unselected_border_radius;

@tabs_hover_text_color: @tabs_unselected_text_color;

@tabs_hover_text_font: @tabs_unselected_text_font;

@tabs_hover_text_decoration: @tabs_unselected_text_decoration;

.ui-tabMenu ul { background: @tabs_background; border: @tabs_border; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; padding: 5px 5px 0 5px; }

.ui-tabMenu ul li { height: 26px; list-style: none; float: left; top: 1px; margin: 0 2px 1px 0; position: relative; background: @tabs_unselected_background; border: @tabs_unselected_border; .rounded-corners(@tabs_border_radius); }

.ui-tabMenu ul li a { color: @tabs_unselected_text_color; font: @tabs_unselected_text_font; text-decoration: @tabs_unselected_text_decoration; float: left; padding: 5px 14px; white-space: nowrap; }

.ui-tabMenu ul li:hover { background: @tabs_hover_background; border: @tabs_hover_border; .rounded-corners(@tabs_hover_border_radius); }

.ui-tabMenu ul li:hover a { color: @tabs_hover_text_color; font: @tabs_hover_text_font; text-decoration: @tabs_hover_text_decoration; }

.ui-tabMenu ul li.ui-active { background: @tabs_selected_background; border: @tabs_selected_border; .rounded-corners(@tabs_selected_border_radius); }

.ui-tabMenu ul li.ui-active a { color: @tabs_selected_text_color; font: @tabs_selected_text_font; text-decoration: @tabs_selected_text_decoration; border-bottom: 1px solid @tabs_selected_background; }



/* Tables / Lists */

@lists_inner_border_width: 1px;

@lists_inner_border_style: solid;

@lists_background: #ffffff   scroll;

@lists_text_color: #250223;

@lists_text_font: normal normal 100% Arial, Helvetica, sans-serif;

@lists_links_color: #003e73;

@lists_links_font: @empty;

@lists_links_decoration: none;

@lists_hover_background_image: url('http://storage.proboards.com/3625327/i/27dt83hcgDWH8kWFAKWv.jpg');

@lists_hover_background_attachment: @empty;

@lists_hover_background_repeat: @empty;

@lists_hover_background_position: @empty;

@lists_hover_text_color: #01060d;

@lists_hover_text_font: @lists_text_font;

@lists_hover_links_color: #003e73;

@lists_hover_links_font: @lists_links_font;

@lists_hover_links_decoration: underline;

@lists_selected_background: @container_highlight_color;

@lists_selected_text_color: #000306;

@lists_selected_text_font: @lists_text_font;

@lists_selected_links_color: #003e73;

@lists_selected_links_font: @lists_links_font;

@lists_selected_links_decoration: none;

table.list > thead > tr > th, table.list > tbody > tr > td { border-width: 0px @lists_inner_border_width @lists_inner_border_width 0px; border-style: @lists_inner_border_style; border-color: @container_inner_border_color; vertical-align: middle; padding: 10px; .box-sizing(); }

table.list { color: @lists_text_color; font: @lists_text_font; background: @lists_background; table-layout: fixed; font-size: 90%; width: 100%; .box-sizing(); }

.list a { color: @lists_links_color; font: @lists_links_font; decoration: @lists_links_decoration; }

.list .item.state-hover, .list .board.item:hover, #calendar-list .item:hover { color: @lists_hover_text_color; font: @lists_hover_text_font; background-color: @container_highlight_color; background-image: @lists_hover_background_image; background-attachment: @lists_hover_background_attachment; background-repeat: @lists_hover_background_repeat; background-position: @lists_hover_background_position; }

.list .item > .main.state-hover .link a, .list .item:hover > .main .link a { color: @lists_hover_links_color; font: @lists_hover_links_font; decoration: @lists_hover_links_decoration; }

.list .item.state-selected { color: @lists_selected_text_color; font: @lists_selected_text_font; background: @lists_selected_background; }

.list .item.state-selected a { color: @lists_selected_links_color; font: @lists_selected_links_font; decoration: @lists_selected_links_decoration; }

table.list > thead > tr > th { padding: 5px 10px; white-space: nowrap; }

table.list > thead > tr.last > td, table.list > tbody > tr.last > td { border-bottom-width: 0px; }

table.list > thead > tr > .last, table.list > tbody > tr > .last { border-right: none; }

table.list td.icon, table.list th.icon { width: 55px; text-align: center; }

table.list td.main, table.list th.main { padding: 10px 10px 10px 0px; }

table.list .checkbox { width: 25px; text-align: center; padding: 0px; border-right: none; }

table.list .checkbox-placeholder { border-right: none !important; }

.list .item > .main { cursor: pointer; overflow: hidden; }

.list .item .list-item-checkbox { visibility: hidden; }

.list .item.state-hover .list-item-checkbox, .list .item.state-selected .list-item-checkbox { visibility: visible; }

table.list abbr.time, table.list .last-edited { color: lighten(@container_text_color_1, 15%); }



/* New Icons */

@new_background: @title_buttons_background_color @all_gradients left center repeat-x;

@new_border: 1px solid darken(@title_buttons_background_color, 15%);

@new_border_radius: 5px 5px 5px 5px;

@new_text_color: @title_buttons_color;

@new_text_font: normal normal x-small Arial, Helvetica, sans-serif;

@new_text_transform: inherit;

@new_link_color: @title_buttons_color;

@new_link_font: @new_text_font;

@new_link_decoration: none;

@new_hover_background: @new_background;

@new_hover_border: 1px  #050d64;

@new_hover_border_radius: 8px 8px 8px 8px;

@new_hover_text_color: @new_text_color;

@new_hover_text_font: @new_text_font;

@new_hover_text_transform: @new_text_transform;

@new_hover_link_color: @new_hover_text_color;

@new_hover_link_font: @new_hover_text_font;

@new_hover_link_decoration: @new_link_decoration;

.new-icon { color: @new_text_color; font: @new_text_font; text-transform: @new_text_transform; text-align: center; background: @new_background; border: @new_border; .rounded-corners(@new_border_radius); display: none; height: 10px; float: left; margin: 3px 5px 3px 0px; padding: 0px 1px; line-height: 10px !important; word-wrap: normal; }

.new-icon a { color: @new_link_color; font: @new_link_font; text-decoration: @new_link_decoration; line-height: 10px !important; height: 10px; }

.new-icon:hover { color: @new_hover_text_color; font: @new_hover_text_font; text-transform: @new_hover_text_transform; background: @new_hover_background; border: @new_hover_border; .rounded-corners(@new_hover_border_radius); }

.new-icon:hover a { color: @new_hover_link_color; font: @new_hover_link_font; decoration: @new_hover_link_decoration; }



/* Footer */

@footer_text_color: #ffffff;

@footer_text_font: normal 400 80% Times New Roman;

@footer_text_decoration: none;

@footer_background: center top  scroll;

@footer_border: 1px solid #a0a0a0;

@footer_hover_color: @footer_text_color;

@footer_hover_font: @footer_text_font;

@footer_hover_decoration: @footer_text_decoration;

@footer_pipe_color: #ffffff;

@footer_copyright_color: #ffffff;

@footer_copyright_font: .8em @default_forum_text_font_family;

@footer_pb_link_color: #ffffff;

@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; padding: 0 7px; }

footer .footer-links a:hover { color: @footer_hover_color; text-decoration: @footer_hover_decoration; font: @footer_hover_font; }

footer .footer-text { text-align: center; color: @footer_copyright_color; margin: 5px 0 0 0; font: @footer_copyright_font; }

footer .footer-text a { color: @footer_pb_link_color; text-decoration: @footer_pb_link_decoration; font: @footer_pb_link_font; }





/**************************************************************************

*                                 Pages                                  *

**************************************************************************/



/* Search Page */

.search .content { padding: 10px 0px 0px 10px; }

.search .content form > div { padding: 10px; margin-right: 10px; margin-bottom: 10px; }

.search .header, #how { font-size: 14px; padding: 10px; }

.search .options-container { padding: 10px; width: 432px; font-size: 11px; margin-right: 10px; height: 200px; overflow: hidden; }

.search .options-container th { padding-bottom: 5px; font-size: 14px; text-align: left; font-weight: normal; }

.search .options-container td { padding: 5px 5px 5px 0; }

.search .footer { font-size: 14px; line-height: 20px !important; }

.search .footer input { float: right; }

.search .footer #transcription { width: 89%; font-size: 11px; }

.search .disabled { background-color: #DDDDDD; }

.search #where, .search #who { margin-right: 0px; }

.search #what input, .search #where input, .search #who input { width: 230px; }

.search #who select { width: 235px; }

.search #when input { width: 80px; }

.search input[id*="-placeholder"] { cursor: pointer; }

#where-board-subboard, #where-without, #where-category, #who-member-group { display: none; }



/* Calendar Page */

@cal_background: #101b3b center center no-repeat scroll;

@cal_border: 1px solid #04085f;

@cal_border_radius: 1px 1px 1px 1px;

@cal_inner_border: 1px solid #01487e;

@cal_link_alignment: justify;

@cal_title_color: #07b7fc;

@cal_title_font: normal bold 1em Times New Roman;

@cal_day_background: scroll url('//images.proboards.com/v5/gradients/shade.png');

@cal_day_link_color: #07b7fc;

@cal_day_link_font: @empty;

@cal_day_link_decoration: @empty;

@cal_cur_month_background: fixed;

@cal_cur_month_link_color: #ffffff;

@cal_cur_month_link_font: normal bolder;

@cal_cur_month_link_decoration: underline;

@cal_month_background: no-repeat scroll;

@cal_month_link_color: #b1a9a9;

@cal_month_link_font: @empty;

@cal_month_link_decoration: @empty;

@cal_list_title_border_radius: 10px 10px 0 0;

@cal_list_align_icon: center;

@cal_list_align_last: justify;

@cal_list_last_color: #07fdf3;

@cal_list_last_font: @empty;

.cal-box { background: @cal_background; border: @cal_border; .rounded-corners(@cal_border_radius); width: 100%; border-collapse: separate; }

.cal-box th { padding: 3px 0px; }

.cal-box th, .cal-current-panel .cal-box td, #calendar-list .cal-box td { border: @cal_inner_border; border-top-width: 0px; border-left-width: 0px; }

.cal-box th, .cal-box th * { color: @cal_title_color; font: @cal_title_font; }

.cal-box .current-day .head, .cal-box .today .head, .ui-datepicker td.ui-datepicker-today a { background: @cal_day_background; }

.cal-box .current-day .head a, .cal-box .today .head a, .ui-datepicker td.ui-datepicker-today a { color: @cal_day_link_color; font: @cal_day_link_font; text-decoration: @cal_day_link_decoration; }

.cal-box .head { background: @cal_cur_month_background; }

.cal-box a { color: @cal_cur_month_link_color; font: @cal_cur_month_link_font; text-decoration: @cal_cur_month_link_decoration; }

.cal-box .off .head a { color: @cal_month_link_color; font: @cal_month_link_font; text-decoration: @cal_month_link_decoration; }

.cal-current-panel { vertical-align: top; }

.cal-current-panel .cal-box .last { border-right: none; }

.cal-current-panel .cal-box .last td { border-bottom: none; }

.cal-current-panel .body { min-height: 74px; height: 74px; padding-bottom: 15px; padding: 3px; overflow: hidden; }

.cal-current-panel .body a { white-space: nowrap; }

.cal-current-panel .off .head { background: @cal_month_background; }

.cal-current-panel .head { text-align: @cal_link_alignment; cursor: pointer; padding-bottom: 3px; height: 16px; overflow: hidden; }

.cal-current-panel .head a { font-weight: bold; font-size: 12px; padding: 2px; overflow: hidden; }

.cal-preview-panel { width: 180px; padding-right: 10px; vertical-align: top; }

.cal-preview-panel .header th { border-right: none; }

.cal-preview-panel .header th a { color: @container_links_color; }

.cal-preview-panel td { padding: 2px 0px; }

.cal-preview-panel .weekdays td { padding-top: 5px; }

.cal-preview-panel .cal-box { table-layout: auto; width: 100%; text-align: center; padding-bottom: 10px; margin-bottom: 10px; }

.cal-preview-panel .cal-box .head { padding: 0px 1px 2px 0px; }

.cal-preview-panel .off .head { background-color: transparent; }

.cal-preview-panel a.has-events { font-weight: bold; }

#calendar-list { vertical-align: top; }

#calendar-list .new .new-icon { display: inline-block; }

#calendar-list table { table-layout: auto; }

#calendar-list table.cal-box td { border-width: 0px 0px 1px 0px; }

#calendar-list tr:last-child td { border-bottom: none; }

#calendar-list tr:first-child th { .rounded-corners(@cal_list_title_border_radius); }

#calendar-list th { padding: 5px 15px; text-align: left; border-right: none; }

#calendar-list td.icon { width: 60px; height: 60px; text-align: @cal_list_align_icon; border-width: 0px 1px 1px 0px; border-style: solid; border-color: @cal_inner_border; }

#calendar-list td.main { cursor: pointer; padding: 0 10px; }

#calendar-list td.last_post { color: @cal_list_last_color; font: @cal_list_last_font; text-align: @cal_list_align_last; width: 250px; padding-right: 10px; }

.calendar .content { padding: 10px; }

.calendar .content > table { width: 100%; vertical-align: top; }

.calendar .content > table > tr > td { vertical-align: top; }

.calendar .control-bar .calendar-jump .button { float: left; }

.calendar .control-bar .calendar_go_button { display: none; margin: 0 5px 0 10px; }

#to-date-container { display: none; }

.ui-datepicker { background-color: @container_outer_border_color; background-color: hsla(hue(@container_outer_border_color), saturation(@container_outer_border_color), lightness(@container_outer_border_color), .5); }

.ui-datepicker .ui-datepicker-header { background-color: @title_bar_background_color; background-image: @all_gradients; border-color: @container_outer_border_color; }

.ui-datepicker .ui-datepicker-title { color: @title_text_color; }

.ui-datepicker table { background-color: @container_background_color_1; border-color: @container_outer_border_color; }

.ie7 .calendar .control-bar .calendar_go_button { margin-left: 0; }

.ie7 .calendar .control-bar .controls .ui-selectMenu-box { margin-left: 0; margin-right: 10px; }



/* Members Page */

@members_background: #f8fbef   scroll;

@members_text_color: #250223;

@members_text_font: normal 400 small Times New Roman;

@members_text_align: left;

@members_align_name: left;

@members_align_username: left;

@members_align_rank: left;

@members_align_group: left;

@members_align_posts: left;

@members_align_date_registered: left;

@members_align_last_online: right;

.member { cursor: pointer; }

.members table.list { table-layout: fixed; }

.members thead { color: @members_text_color; font: @members_text_font; text-align: @members_text_align; background: @members_background; }

.members th.sortable { cursor: pointer; overflow: hidden; }

.members .name { width: 19%; text-align: @members_align_name; }

.members .username { width: 17%; text-align: @members_align_username; }

.members .rank { width: 16%; text-align: @members_align_rank; }

.members .group { width: 16%; text-align: @members_align_group; }

.members .posts { width: 8%; text-align: @members_align_posts; }

.members .date-registered { width: 18%; text-align: @members_align_date_registered; }

.members .last-online { width: 18%; text-align: @members_align_last_online; }

.members .last-online abbr.timestamp { font-size: 100%; }

.members .list-content td { word-wrap: break-word; overflow: hidden; padding: 3px 10px; .box-sizing(content-box); }

.members .list-content .checkbox { padding: 3px 0px 3px 7px; }



/* View Profile */

.show-user table { width: 100%; }

.show-user .controls > * { float: right; }

.show-user table.list { font-size: 100%; }

.show-user .heading th, .show-user .heading td { font-weight: bold; padding: 8px 0px; text-align: center; border-right: 0px; }

.show-user td.avatar, th.avatar { width: 75px; border-width: 1px 1px 0 0; padding: 3px; }

.show-user .list .main { border-right-width: 0; border-width: 1px 0 0 0;  padding: 2px 33px 2px 33px; }

.show-user .delete { width: 60px; padding: 5px 10px 5px 5px; border-width: 1px 1px 0 0; vertical-align: middle; text-align: right; }

.show-user .time-container { width: 22%; padding: 3px 10px 3px 3px; text-align: right; border-width: 1px 0 0 0; }

.show-user a.show-more { border-top: 1px solid @container_inner_border_color; display: block; font-weight: bold; padding: 8px 0px; text-align: center; }

.show-user .content-box { margin-bottom: 10px; overflow: hidden; }

.show-user .content-box:last-child { margin-bottom: 0px; }

.show-user .following { table-layout: auto; }

.show-user .center-col { padding: 10px; }

.show-user td.status-input input { width: 100%; }

.show-user td.status-submit { width: 120px; text-align: right; }

.show-user .headings { width: 175px; }

.show-user #center-column { vertical-align: top; }

.show-user #right-column { width: 173px; vertical-align: top; }

.show-user .right-col { width: 167px; margin-left: 10px; text-align: center; }

.show-user .social { width: 50%; float: left; }

.show-user .messengers span.label { width: 55px; display: inline-block; }

.show-user .mini-user { width: 75px; max-width: 75px; min-height: 90px; display: inline-block; overflow: hidden; padding: 4px 0px; vertical-align: top; text-align: center; }

.ie7 .show-user .mini-user { display: inline; margin-right: 10px; }

.show-user #status-bar { border-top: none !important; }

.show-user #status-bar td { border: none; }

.show-user #status-input-box input { width: 99%; }

.show-user .delete a { display: none; }

.show-user .notifications .main { padding: 10px 33px; }

.show-user .notifications .main .new-icon { display: inline-block; }

.show-user .friends-stats { float: right; }

.online-friends .mini-profile { margin-right: 10px; margin-bottom: 10px; vertical-align: top; display: inline-block; }

.offline-friends .micro-profile { float: left; text-align: left; margin-right: 10px; margin-bottom: 10px; }

.show-user .members-link-container { margin-bottom: 10px; }

.show-user .empty-result-message { text-align: center; padding-bottom: 25px; }

.show-user .groups td { border-width: 1px 1px 0px 0px; text-align: center; padding: 12px 0px; }

.show-user .groups td:first-child { text-align: left; padding-left: 20px; }

.show-user .groups td:last-child { border-right: 0px; }

.show-user .groups .group_desc { width: 40%; }

.show-user .groups .leaders { width: 25%; }

.show-user .groups .members { width: 10%; }

.show-user .groups .status { width: 15%; }

.show-user .groups .heading td { padding: 4px 0px; text-align: center; }

.show-user .badge-wish { text-align: center; height: 100px; margin-right: 10px; }

.show-user .badge-wish img { display: block; }

.show-user .visit-badge-store { text-align: center; width: 130px; }

.show-user .visit-badge-store .badge-store-text { width: 110px; height: 54px; margin: 10px auto 5px auto; }



.badge-thumbs { padding: 5px 100px 5px 5px !important; position: relative; min-height: 36px; }

.badge-thumbs .badge-thumb { margin: 5px; }

.badge-thumbs .button { position: absolute; top: 50%; right: 10px; margin-top: -13px; }



/* Edit Profile */

.big_username { font-size: 20pt; }



.edit-user .title { font-weight: bold; margin-bottom: 4px; }

.edit-user textarea { padding: 2px; margin: 0; }

.edit-user input, .edit-user select, .edit-user textarea { display: inline-block; zoom: 1; margin-top: 5px; }

.edit-user .content-box { margin: 10px; padding: 10px; }

.edit-user .content-box.options { position: relative; zoom: 1; }

.edit-user .content-box.options table { table-layout: auto; }

.edit-user .content-box.options td { padding: 9px 5px; }

.edit-user .content-box.options input[type="radio"] { margin-top: 0px; }

.edit-user .content-box.options input[type="submit"] { position: absolute; bottom: 10px; left: 10px; }

.edit-user .pad { padding: 10px; }

.edit-user .pad.info { padding-bottom: 0; clear: both; }

.edit-user .pad .username { font-size: 1em; font-weight: normal; margin-top: 14px; }

.edit-user .note { font-style: italic; font-size: 85%; }

.edit-user label { display: block; font-weight: 800; }

.edit-user .radio label, .edit-user .checkbox label { display: inline; font-weight: 400; }

.edit-user .avatar.content-box { padding: 10px 10px 0px 0px; }

.edit-user .avatar h4 { margin-bottom: 5px; }

.edit-user .user-search { padding-top: 3px; }

.edit-user .avatar { margin-bottom: 10px; }

.edit-user .notifications th, .edit-user .notifications td { padding: 0px 5px; }

.edit-user .notifications th.description { width: 760px; }

#user_block_list .user-search-selection .ui-selectlist-item { clear: both; margin-bottom: 15px; padding: 6px 0; }

#user_block_list .user-search-selection .ui-selectlist-item .block_list_options { display: inline; position: absolute; float: none; left: 240px; top: 4px; width: 430px; padding-bottom: 5px; }

#user_block_list .block_list_options input { margin-top: 0px; }

#user_block_list .block_list_options label { position: relative; top: -2px; }

.edit-user #avatar-options .content-box { position: relative; margin: 10px 0px 0px 10px; float: left; height: 246px; padding: 10px; text-align: center; width: 150px; }

.edit-user #avatar-options .content-box.options { width: 100%; min-width: 279px; max-width: 350px; text-align: left; }

#forum-avatars-wrapper img:hover { border-width: 3px; border-style: solid; border-color: @link_color; .rounded-corners(); margin: -3px; }

#image-avatar-editor-container .wrapper { padding: 10px 5px 5px 5px; margin-top: 15px; *width: 520px; }

#image-avatar-editor-container .wrapper.first { height: 80px; margin-top: 10px; }

#image-avatar-editor-container span.fileupload-buttonbar { display: inline-block; margin: 10px 0; }

#image-avatar-editor-container .files { margin: 0; }

#image-avatar-editor-container #link-image { height: 18px; }

#image-avatar-editor-container #link-image.button { cursor: pointer; }

#forum-avatar-editor-container { padding: 0; }

#forum-avatars-wrapper { width: 510px; margin: 0 auto; padding: 10px; }

#forum-avatars-wrapper .avatar-wrapper { float: left; margin: 10px; }

#forum-avatars-wrapper img { max-height: 150px; max-width: 150px; }



/* Badge Options Tab */

#badge-options h4 { margin-top: 10px; }

#badge-options .badges-have .badge-thumbs { width: 240px; }

#badge-options .badges-dont-have .badge-thumbs { width: 110px; }

#badge-options .badge-thumbs { float: left; padding: 5px !important; }

#badge-options .badge-thumbs .badge-thumb, #badge-options .badge-thumbs .badge-icons { float: left; }

#badge-options .badge-icons img { margin: 5px 0 5px 10px; vertical-align: middle; }

#badge-options .badge-thumbs .badge-icons img, #badge-options .badge-thumbs .badge-icons input { margin: 5px 0 0 10px; width: 16px; height: 16px; }

#badge-options .badge-thumbs .badge-icons input { margin-top: 8px; padding: 0; }

#badge-options .badge-thumbs .small { vertical-align: bottom; }

#badge-options .badges-dont-have .badge-icons img { margin-top: 16px; }

#badge-options .badge-gift, #badge-options .badge-use-action { color: @container_text_color_1; }



/* Board List */

@board_names_color: #250223;

@board_names_font: normal bold small Arial, Helvetica, sans-serif;

@board_desc_color: #6a526a;

@board_desc_font: normal normal small Arial, Helvetica, sans-serif;

@board_mod_color: #118191;

@board_mod_font: normal lighter x-small Tahoma, Geneva, sans-serif;

@board_sub_color: #250223;

@board_sub_font: 100% Arial;

@board_align_main: left;

@board_align_threads: center;

@board_align_posts: center;

@board_align_last_post: justify;

.boards .main { width: 59%; text-align: @board_align_main; }

.boards .threads { width: 9%; text-align: @board_align_threads; white-space: nowrap; }

.boards .posts { width: 8%; text-align: @board_align_posts; white-space: nowrap; }

.boards .latest { width: 20%; text-align: @board_align_last_post; }

.boards .main.redirect { border-right: 0px; }

.boards .main .link a { color: @board_names_color; font: @board_names_font; }

.boards .main .description { color: @board_desc_color; font: @board_desc_font; padding-left: 0px; padding-bottom: 3px; }

.boards .main .moderators { color: @board_mod_color; font: @board_mod_font; padding-bottom: 3px; }

.boards .main .sub-boards { color: @board_sub_color; font: @board_sub_font; }

.boards table.list { table-layout: auto; }

.boards table.list th.main { padding-left: 10px; }

.boards table.list > tbody > tr > td { padding: 5px 10px; }

/* Board Password Page */

#password-wrapper { margin: 10px 0px; }

#password-wrapper div { display: inline-block; margin-right: 5px; }

#password-wrapper input { padding: 1px 6px 3px 6px; }



/* Thread List */

@thread_align_subject: left;

@thread_align_created_by: left;

@thread_align_replies: left;

@thread_align_views: left;

@thread_align_last_post: left;

.threads .main { width: 41%; text-align: @thread_align_subject; }

.threads .created-by { width: 14%; text-align: @thread_align_created_by; }

.threads .replies { width: 9%; text-align: @thread_align_replies; }

.threads .views { width: 8%; text-align: @thread_align_views; }

.threads .latest { width: 20%; text-align: @thread_align_last_post; }

.threads .icons { white-space: nowrap; }

.threads .control-icons img { padding-right: 5px; }

.threads .control-icons .lock_icon, .threads .control-icons .falling_icon, .threads .control-icons .event_icon, #bookmarks.threads .bookmark_icon { width: 0; padding-right: 0; }

.threads .checkbox { width: 2%; }

.threads .checkbox-placeholder { width: 5px; }

.threads .main table { table-layout: auto; }

.threads table.list { table-layout: auto; }

.threads .item.new .new-icon { display: inline-block; }

.threads .item.announcement.last > td { border-width: 0px 1px 10px 0px; border-style: solid; }

.threads .item.announcement.last > td.checkbox, .threads .item.announcement.last > td.last { border-right: none; }



/* Conversation List */

@conversation_align_created_by: center;

@conversation_align_replies: center;

@conversation_align_last_reply: right;

.conversations table.list { table-layout: auto; }

.conversations .created-by { width: 17%; text-align: @conversation_align_created_by; }

.conversations .replies { width: 8%; text-align: @conversation_align_replies; }

.conversations .latest { width: 20%; text-align: @conversation_align_last_reply; padding-right: 10px; }

.conversations .checkbox { width: 24px; }

.conversations .item.new .new-icon { display: inline-block; }



/* Polls */

@polls_selection_border: 1px solid @container_inner_border_color;

@polls_selection_background: #9fbbda   scroll;

@polls_rank_default_background: #250223 left center repeat-x scroll url('http://images.proboards.com/v5/gradients/bar.png');

@polls_rank_default_border: 1px solid #000000;

@polls_rank_default_border_radius: 5px;

@polls_rank_default_rank_color: #FFFFFF;

@polls_rank_default_rank_background: #000000;

@polls_rank_default_rank_border: 5px;

@polls_rank_first_background_color: #58c5f0;

@polls_rank_second_background_color: #0b93a7;

@polls_rank_third_background_color: #4061ae;

.ui-poll .results td .select-box { width: 15px; height: 15px; border: @polls_selection_border; }

.ui-poll .results tr.ui-selected td .select-box { background-image: url('http://images.proboards.com/v5/icons/tick.png'); }

.ui-poll .results tr.ui-selected { background: @polls_selection_background; }

.ui-poll .poll-vote-bar .bar { background: @polls_rank_default_background; border: @polls_rank_default_border; border-right-width: 0px; .rounded-corners(@polls_rank_default_border_radius, 0, 0, @polls_rank_default_border_radius); float: left; height: 17px; min-width: 5px; }

.ui-poll .poll-vote-bar .rank { float: left; background: @polls_rank_default_background; border: @polls_rank_default_border; border-left-width: 0px;  height: 17px; padding-left: 2px; .rounded-corners(0, @polls_rank_default_border_radius, @polls_rank_default_border_radius, 0); }

.ui-poll .poll-vote-bar .rank div { margin-right: 1px; margin-top: 1px; color: @polls_rank_default_rank_color; font-size: 80%; background: @polls_rank_default_rank_background; opacity: .5; filter: alpha(opacity=50); padding: 1px 2px; .rounded-corners(@polls_rank_default_rank_border); }

.ui-poll .poll-vote-bar.rank-1 .rank, .ui-poll .poll-vote-bar.rank-1 .bar { background-color: @polls_rank_first_background_color; }

.ui-poll .poll-vote-bar.rank-2 .rank, .ui-poll .poll-vote-bar.rank-2 .bar { background-color: @polls_rank_second_background_color; }

.ui-poll .poll-vote-bar.rank-3 .rank, .ui-poll .poll-vote-bar.rank-3 .bar { background-color: @polls_rank_third_background_color; }

.ui-poll { padding: 10px; }

.ui-poll table { table-layout: fixed; width: auto; }

.ui-poll .icon-poll { margin-right: 5px; }

.ui-poll .results { margin-bottom: 5px; }

.ui-poll .results td { padding: 5px; }

.ui-poll .results tr.ui-hover { background-color: @container_highlight_color; cursor: default; }

.ui-poll .results td:first-child { padding-right: 0px; }

.ui-poll .results .stats { float: left; margin-left: 5px; line-height: 18px !important; }

.ui-poll .voted ul { list-style: disc; padding-left: 20px; }

.ui-poll .vote-input { margin-top: 5px; }

.ui-poll .vote-input-cooldown { margin-left: 5px; margin-top: 2px; }

.ui-poll .poll-vote-bar { float: left; overflow: hidden; min-width: 10px; }

.ui-poll .results tr td .select-box img { display: none; }

.ui-poll .results tr.ui-selected td .select-box img { display: inline; }



/* Posts */

@posts_odd_background_color: #e0ecf8;

@posts_odd_background_image: @empty;

@posts_odd_background_attachment: @empty;

@posts_odd_background_repeat: @empty;

@posts_odd_background_position: @empty;

@posts_odd_text_color: #250223;

@posts_even_background_color: #ffffff;

@posts_even_background_image: @empty;

@posts_even_background_attachment: @empty;

@posts_even_background_repeat: @empty;

@posts_even_background_position: @empty;

@posts_even_text_color: #250223;

@posts_separator_border: 10px solid #ffffff;

@posts_likes_color: #250223;

@posts_likes_font: normal normal 80% Arial, Helvetica, sans-serif;

@posts_header_border: 1px solid;

@posts_code_background: @container_background_color_1;

@posts_code_border: 1px solid @container_inner_border_color;

@posts_code_text_color: @container_text_color_1;

@posts_code_text_font: @empty;

@posts_edited_text_color: #6b536b;

@posts_edited_text_font: normal 40 xx-small Times New Roman;

@posts_signatures_border: 1px solid @container_inner_border_color;

@posts_signatures_text_color: @empty;

@posts_signatures_text_font: 80% @default_forum_text_font_family;

.posts .post, .post .quote div.quote div.quote_body, .post.even .quote div.quote_body { color: @posts_odd_text_color; background-color: @posts_odd_background_color; background-image: @posts_odd_background_image; background-attachment: @posts_odd_background_attachment; background-repeat: @posts_odd_background_repeat; background-position: @posts_odd_background_position; }

.posts .post.even, .post .quote div.quote_body, .post.even .quote div.quote div.quote_body { color: @posts_even_text_color; background-color: @posts_even_background_color; background-image: @posts_even_background_image; background-attachment: @posts_even_background_attachment; background-repeat: @posts_even_background_repeat; background-position: @posts_even_background_position; }

.post abbr.time, .post.even .quote abbr.time, .post .quote .quote abbr.time { color: @posts_odd_text_color; }

.post.even abbr.time, .post .quote abbr.time, .post.even .quote .quote abbr.time { color: @posts_even_text_color; }

.posts .post .post-method { font-size: .8em; }

.posts span.labels { border-width: 0px 1px 0 1px; border-style: solid; border-color: @container_inner_border_color; display: block; }

.posts span.labels .ui-label { padding: 5px 0 0 5px; display: inline-block; zoom: 1; }

.posts .poll { border-width: 0px 1px 10px 1px; border-style: solid; border-color: @container_inner_border_color; }

.posts .post table { width: 100%; }

.posts .post .left-panel { width: 172px; vertical-align: top; }

.posts .post .content { padding-left: 10px; vertical-align: top; }

.posts .post .content-head .info { float: left; margin-top: 3px; line-height: 20px !important; }

.posts .post .content-head .info .date, .posts .post .post-method { vertical-align: -7px; }

.posts .post.recent .content-head .info .date, .posts .post.recent .post-method { vertical-align: 0; }

.posts .post.recent .content-head .info { line-height: 13px !important; }

.posts .post .thread-link { display: none; }

.posts .post.recent .thread-link { display: block; }

.posts .post.recent .likes { vertical-align: 0px; }

.posts .post .content-head .controls { float: right; border-collapse: separate; }

.posts .post .content-head .controls > a { float: left; margin-left: 3px; padding-right: 5px; }

.posts .post .content-head .controls > a.likes-button { padding: 1px 6px 0px 6px; }

.posts .post .content-head .controls > a.likes-button img { margin-top: 2px; }

.posts .post .message { word-wrap: break-word; overflow-x: auto; overflow-y: hidden; }

.posts .post .message table { width: inherit; }

.posts .post .message table td { padding: 3px; }

.posts .post .message ul {margin-left: 31px; list-style-type: disc;}

.posts .post .message ol {margin-left: 31px; list-style-type: decimal;}

.posts.summary .post .content-head .info { float: none; }

.posts .post.blocked .unblocked { display: none; }

.posts .post .content .thread-link { max-width: 450px; overflow: hidden; }

.posts.item .ui-pagination { padding-left: 0px; }

.likes { vertical-align: -7px; }

.posts #labels { display: none; text-align: right; padding: 5px; }

.posts .post > td, .posts #labels { border: @posts_separator_border; border-top-width: 0px; }

.likes, .likes:hover { color: @posts_likes_color; font: @posts_likes_font; margin: 0 0 0 7px; }

.likes-button { padding: 4px 0px 0px 5px; display: none; }

.likes.likes-0 { display: none; }

.likes .likes-singular { display: none; }

.likes.likes-1 .likes-singular { display: inline; }

.likes.likes-1 .likes-plural { display: none; }

.liked.likes { display: inline; }

.posts .post .content-head { border: @posts_header_border; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; padding-bottom: 5px; margin-bottom: 10px; }

.posts .post .message code { display: block; border: @posts_code_border; padding: 5px; margin-left: 16px; margin-right: 16px; background: @posts_code_background; color: @posts_code_text_color; font: @posts_code_text_font; }

.posts .post .foot { height: 1px; vertical-align: bottom; padding-left: 10px; }

.posts .post .foot .edited_by { text-align: right; color: @posts_edited_text_color; font: @posts_edited_text_font; margin-top: 10px; }

.posts .post .foot .signature { color: @posts_signatures_text_color; font: @posts_signatures_text_font; vertical-align: bottom; border: @posts_signatures_border; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 10px; margin-top: 10px; }

.posts .bookmark_icon { padding-right: 5px; }



/* Message List */

@messages_odd_background: #f8fbef   scroll;

@messages_odd_text_color: #000000;

@messages_even_background: #e0ecf8   scroll;

@messages_even_text_color: #020002;

@messages_header_border: 1px solid @container_inner_border_color;

@messages_participants_border: 1px solid @container_inner_border_color;

@messages_code_background: @container_background_color_1;

@messages_code_border: 1px solid @container_inner_border_color;

@messages_code_text_color: @container_text_color_1;

@messages_code_text_font: @empty;

@messages_signatures_border: 1px solid @container_inner_border_color;

@messages_signatures_text_color: @empty;

@messages_signatures_text_font: 80% @default_forum_text_font_family;

.messages .item { color: @messages_odd_text_color; background: @messages_odd_background; }

.messages .item.even { color: @messages_even_text_color; background: @messages_even_background; }

.messages .item .quote div.quote div.quote_body { color: @messages_odd_text_color; background: @messages_odd_background; }

.messages .item.even .quote div.quote_body { color: @messages_odd_text_color; background: @messages_odd_background; }

.messages .item .quote div.quote_body { color: @messages_even_text_color; background: @messages_even_background; }

.messages .item.even .quote div.quote div.quote_body { color: @messages_even_text_color; background: @messages_even_background; }

.message abbr.time, .message.even .quote abbr.time, .message .quote .quote abbr.time { color: @messages_odd_text_color; } /* red */

.message.even abbr.time, .message .quote abbr.time, .message.even .quote .quote abbr.time { color: @messages_even_text_color; } /* green */

.messages .item .content-head { border: @messages_header_border; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; padding-bottom: 5px; margin-bottom: 10px; }

.messages .item table { width: 100%; }

.messages .item td { vertical-align: top; }

.messages .item > td { border-width: 0px 1px 1px 1px; border-style: solid; border-color: @container_inner_border_color; }

.messages .item .left-panel { width: 172px; }

.messages .item .content { padding-left: 10px; word-wrap: break-word; overflow-x: auto; overflow-y: hidden; }

.messages .item .content table { width: inherit; }

.messages .item .content ul {margin-left: 31px; list-style-type: disc;}

.messages .item .content ol {margin-left: 31px; list-style-type: decimal;}

.messages .item .content .message { overflow-x: auto; overflow-y: hidden; }

.messages .item .content .message table td { padding: 3px; }

.messages .item .content code { display: block; border: @messages_code_border; padding: 5px; margin-left: 16px; margin-right: 16px; background: @messages_code_background; color: @messages_code_text_color; font: @messages_code_text_font; }

.messages .item .content-head .info { float: left; margin-top: 3px; line-height: 20px !important; }

.messages .item .content-head .info .date { vertical-align: -7px; }

.messages .item .content-head .controls { float: right; }

.messages .item .content-head .controls > a { float: left; margin-left: 3px; padding-right: 5px; display: inline; }

.messages .item .foot { padding-left: 10px; vertical-align: bottom; }

.messages .item .foot .signature { text-align: left; color: @messages_signatures_text_color; font: @messages_signatures_text_font; vertical-align: bottom; border: @messages_signatures_border; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 10px; margin-top: 10px; }

.message .post-method { vertical-align: -7px; font-size: .8em; }

.messages .conversation-labels { float: right; margin-right: 5px; margin-top: 5px; }

.messages.summary .message .content-head .info { width: 100%; }

.messages .message .controls { min-width: 100px; }

.messages .participants { padding: 5px 10px; border: @messages_participants_border; border-top-width: 0px; }

.posting-options-list, .messaging-options-list { display: none; }



/* Custom Pages */

.pbcpe-widget-title { color: @default_forum_text_color; }





/**************************************************************************

*                                Objects                                 *

**************************************************************************/



/* Micro Profiles */

@micro_background: #f9f7f6   scroll;

@micro_border: 1px solid @container_inner_border_color;

@micro_border_radius: 5px;

@micro_text_color: @empty;

@micro_text_font: @empty;

@micro_link_color: #078cf9;

@micro_link_font: @empty;

@micro_link_decoration: @empty;

@micro_remove_background: @container_background_color_1;

@micro_remove_border: 1px solid @container_inner_border_color;

@micro_remove_border_radius: 0 5px 5px 0;

@micro_remove_text_color: @container_text_color_1;

@micro_remove_text_font: bold 80% @default_forum_text_font_family;

.micro-profile { color: @micro_text_color; font: @micro_text_font; position: relative; height: 50px; width: 200px; display: inline-block; padding: 5px; margin-bottom: 3px; border: @micro_border; background: @micro_background; .rounded-corners(@micro_border_radius); overflow: hidden; }

.grp_recipients_div li { color: @micro_text_color; font: @micro_text_font; position: relative; width: 240px; display: inline-block; margin: 3px; padding: 3px 22px 3px 5px; border: @micro_border; background: @micro_background; .rounded-corners(@micro_border_radius); overflow: hidden; float: left; }

.micro-profile a, .grp_recipients_div li a { color: @micro_link_color; font: @micro_link_font; text-decoration: @micro_link_decoration; }

.user-search-selection .ui-selectlist-item .close { color: @micro_remove_text_color; font: @micro_remove_text_font; background: micro_remove_background; border: @micro_remove_border; .rounded-corners(@micro_remove_border_radius); cursor: pointer; height: 35px; padding: 20px 3px 5px; position: absolute; right: 0px; }

.micro-profile .avatar { display: block; width: 50px; position: absolute; top: 5px; border-width: 0px; }

.micro-profile .info { width: 145px; overflow: hidden; position: absolute; top: 5px; left: 60px; }

.micro-profile .info input { width: 112px; }

.user-search-box { width: 200px; }

.user-search-selectlist { z-index: 99999; }

.user-search-selectlist .content { cursor: pointer; padding: 1px 0px; }

.user-search-selectlist .micro-profile .info { width: 200px; }

.user-search-selection .ui-selectlist-item { float: left; margin-right: 5px; }

.user-search-selection .ui-selectlist-item .micro-profile { .rounded-corners(5px, 0, 0, 5px); }

.user-search-displaybox { min-width: 250px; z-index: 99999; }

.user-search-displaybox .control-bar { border: none; }

.user-search-displaybox .control-bar .ui-pagination { padding: 5px; display: inherit; }

.user-search-selectlist .micro-profile { margin: 1px auto; display: inherit; }

.ie7 .user-search-pagination-note { margin: 5px 0; }

.ie7 .user-search-displaybox .control-bar { width: 350px; }

.ie7 .user-search-displaybox { min-width: 350px; }

.ie7 .user-search-selectlist .micro-profile { margin: 1px 68px 1px 67px; width: 198px; display: inline-block; }



/* Mini Profiles */

@mini_background: #ffffff   scroll url('http://images.proboards.com/v5/gradients/nav-tree-active.png');

@mini_border: 1px solid #dadada;

@mini_border_radius: 0 0 0 0;

@mini_text_align: center;

@mini_text_color: @container_text_color_1;

@mini_text_font: @empty;

@mini_links_color: @container_links_color;

@mini_links_font: @empty;

@mini_links_decoration: @empty;

@mini_avatar_align: center;

@mini_personal_text_color: #000003;

@mini_personal_text_font: 75% @default_forum_text_font_family;

@mini_personal_text_align: left;

@mini_info_text_color: #000008;

@mini_info_text_font: normal 400 75% Times New Roman;

@mini_info_text_align: center;

@mini_even_background: #f8fbef;

@mini_even_text_color: #000066;

@mini_even_personal_text_color: @container_text_color_2;

@mini_even_info_text_color: @container_text_color_2;

@mini_warning_background: #AAAAAA url("http://images.proboards.com/v5/gradients/bar.png") repeat-x scroll left center;

@mini_warning_border: 1px solid #000000;

@mini_warning_border_radius: 5px;

@mini_warning_text_align: right;

@mini_warning_number_background_color: #000000;

@mini_warning_number_border_radius: 5px;

@mini_warning_number_text_color: #FFFFFF;

@mini_warning_number_text_font: @empty;

@mini_warning_number_text_decoration: @empty;

@mini_warning_low_background_color: #FFCC22;

@mini_warning_medium_background_color: #FF6611;

@mini_warning_high_background_color: #FF0000;

.mini-profile { color: @mini_text_color; font: @mini_text_font; background: @mini_background; border: @mini_border; .rounded-corners(@mini_border_radius); text-align: @mini_text_align; overflow: hidden; padding: 13px 10px; width: 150px; }

.mini-profile .personal-text { color: @mini_personal_text_color; display: block; font: @mini_personal_text_font; text-align: @mini_personal_text_align; }

.mini-profile .info { color: @mini_info_text_color; font: @mini_info_text_font; text-align: @mini_info_text_align; font-size: 75%; }

.even .mini-profile { color: @mini_even_text_color; background: @mini_even_background; }

.even .mini-profile .personal-text { color: @mini_even_personal_text_color; }

.even .mini-profile .info { color: @mini_even_info_text_color; }

div.mini-profile a { color: @mini_links_color; font: @mini_links_font; text-decoration: @mini_links_decoration; }

.warning-bar { background: @mini_warning_background; border: @mini_warning_border; .rounded-corners(@mini_warning_border_radius); padding-bottom: 2px; height: 14px; line-height: 100%; text-align: @mini_warning_text_align; min-width: 40px !important; }

.warning-bar .number { color: @mini_warning_number_text_color; font: @mini_warning_number_text_font; text-decoration: @mini_warning_number_text_decoration; background-color: @mini_warning_number_background_color; .rounded-corners(@mini_warning_number_border_radius); opacity: 0.5; font-size: 0.6em; margin-right: 1px; padding: 0px 2px 1px 2px; }

.warning-low { background-color: @mini_warning_low_background_color; background-position: center; }

.warning-medium { background-color: @mini_warning_medium_background_color; background-position: center; }

.warning-high { background-color: @mini_warning_high_background_color; background-position: center; }

.mini-profile .avatar { max-width: 150px; max-height: 150px; overflow-x: hidden; overflow-y: hidden; margin: auto; border-width: 0px; vertical-align: middle; }

.avatar-wrapper { display: table-cell; text-align: @mini_avatar_align; vertical-align: middle; }

.avatar-wrapper > div, #avatar-preview.flash_present.image_present > div { position: relative; }

.avatar-wrapper div object, .flash-avatar object, #avatar-preview.flash_present.image_present div object, .avatar-wrapper > div > img { position: absolute; top: 0; left: 0; }

.avatar-wrapper * { vertical-align: middle; }

.avatar_size_default, .avatar_size_default embed, .avatar_size_default object, .avatar_size_default > div, .avatar-wrapper.avatar_size_default > div > div { height: 150px; width: 150px; }

.avatar-wrapper > div > div { display: table-cell; vertical-align: middle; }

.avatar_size_default img, .avatar_size_default default { max-height: 150px; max-width: 150px; }

.avatar_size_medium, .avatar_size_medium embed, .avatar_size_medium object, .avatar_size_medium > div, .avatar-wrapper.avatar_size_medium > div > div { height: 75px; width: 75px; }

.avatar_size_medium img, .avatar_size_medium default { max-height: 75px; max-width: 75px; }

.avatar_size_small, .avatar_size_small embed, .avatar_size_small object, .avatar_size_small > div, .avatar-wrapper.avatar_size_small > div > div { height: 50px; width: 50px; }

.avatar_size_small img, .avatar_size_small default { max-height: 50px; max-width: 50px; }

.avatar_size_quote, .avatar_size_quote embed, .avatar_size_quote object, .avatar_size_quote > div, .avatar-wrapper.avatar_size_quote > div > div { height: 30px; width: 30px; }

.avatar_size_quote img, .avatar_size_quote default { max-height: 30px; max-width: 30px; }

#flash-avatar-preview .flash-avatar object { position: relative; }

#avatar-preview.flash_present div object { position: inherit; }

#avatar-preview.flash_present > div { position: inherit; }

.mini-profile .avatar .avatar-wrapper, .micro-profile .avatar .avatar-wrapper { height: auto; }

.avatar_size_placeholder { height: 150px; width: 150px; }

.mini-profile .badges img { height: 16px; width: 16px; }



/* Buttons */

@buttons_background_image: url('http://images.proboards.com/v5/gradients/light.png');

@buttons_background_attachment: @empty;

@buttons_background_repeat: repeat-x;

@buttons_background_position: center center;

@buttons_border: 1px solid darken(@buttons_background_color, 20%);

@buttons_border_radius: 5px;

@buttons_text_font: 12px Verdana, Arial;

@buttons_text_decoration: none;

@buttons_hover_background: lighten(@buttons_background_color, 5%) url('http://images.proboards.com/v5/gradients/top-light-40-trans.png') center repeat-x;

@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; background-color: @buttons_background_color; background-image: @buttons_background_image; background-attachment: @buttons_background_attachment; background-repeat: @buttons_background_repeat; background-position: @buttons_background_position; border: @buttons_border; .rounded-corners(@buttons_border_radius); min-height: 20px; line-height: 20px !important; padding: 2px 0px; display: inline-block; vertical-align: middle; margin-left: 3px; cursor: pointer; white-space: nowrap; }

.button:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover { color: @buttons_hover_text_color; font: @buttons_text_font; text-decoration: @buttons_text_decoration; background: @buttons_hover_background; border: @buttons_hover_border; }

.button:active, input[type="submit"]:active, input[type="button"]:active, button:active, .shoutbox_refresh_button.active, .liked.likes-button, .button.state-selected { color: @buttons_active_text_color; font: @buttons_active_text_font; text-decoration: @buttons_active_text_decoration; background: @buttons_active_background; border: @buttons_active_border; }

a.button { padding: 2px 6px; }

.button .status { padding: 0 6px 0 1px; .rounded-corners(0); border-width: 0px 1px 0px 0px; border-style: solid; border-color: @buttons_text_color; float: left; overflow: hidden; word-wrap: break-word; white-space: nowrap; }

.button .status img { display: block; margin-top: 2px; }

.button .icon { padding: 1px 2px 1px 1px; border: 0; float: left; line-height: normal !important; }

input[type="submit"], input[type="button"], button { padding: 2px 6px; min-height: 26px; }

.button-x { position: absolute; top: 50%; right: 3px; margin-top: -8px; cursor: pointer; display: block; text-indent: -9999px; width: 16px; height: 16px; background: url('http://images.proboards.com/v5/icons-default.png') -16px -32px no-repeat; }

.button-x:hover { background: url('http://images.proboards.com/v5/icons-default.png') 0px -32px no-repeat; }

.button.post-options { padding: 2px 0 2px 0; }



/* Forms */

@forms_field_background: #ffffff   scroll;

@forms_field_border: @empty;

@forms_field_border_radius: @empty;

@forms_field_text_color: #250223;

@forms_field_text_font: @empty;

@forms_area_background: #f8fbef   scroll;

@forms_area_border: @empty;

@forms_area_border_radius: @empty;

@forms_area_text_color: #250223;

@forms_area_text_font: @empty;

@forms_select_background: @empty;

@forms_select_border: @empty;

@forms_select_border_radius: @empty;

@forms_select_text_color: #250223;

@forms_select_text_font: @empty;

input[type="text"], input[type="email"], input[type="password"] { color: @forms_field_text_color; font: @forms_field_text_font; background: @forms_field_background; border: @forms_field_border; .rounded-corners(@forms_field_border_radius); width: 300px; height: 20px; padding: 2px; }

textarea { color: @forms_area_text_color; font: @forms_area_text_font; background: @forms_area_background; border: @forms_area_border; .rounded-corners(@forms_area_border_radius); resize: none; }

select { color: @forms_select_text_color; font: @forms_select_text_font; background: @forms_select_background; border: @forms_select_border; .rounded-corners(@forms_select_border_radius); height: 26px; padding: 2px; }

input[type="text"].short { width: 50px; }

input[type="text"].search-input { width: inherit; }

input.date { width: 77px; }

input.time { width: 55px; }

.ui-form-error { display: none; position: absolute; z-index: 9000; border: 2px solid @status_text_failure_color; padding: 4px; font-size: 80%; background-color: lighten(@status_text_failure_color, 25%); }

input.ui-error { background-color: lighten(@status_text_failure_color, 25%); color: @status_text_failure_color; padding: 2px; }



/* Labels */

@labels_weight: bold;

@labels_size: 80%;

@labels_case: none;

@labels_caps: normal;

.ui-label { font-size: @labels_size; font-weight: @labels_weight; text-transform: @labels_case; font-variant: @labels_caps; position: relative; top: -1px; margin: 0 5px 0 0; display: inline; }

.label-row { height: 20px; line-height: 20px !important; margin: 10px 0; clear: left; }

.label-row * { float: left; }

.label-row .ui-label, .label-row span.label-delete-button { margin-bottom: -5px; margin-left: 5px; }

#manage-labels-container .style-wrapper .color_input { border: 1px solid #AAAAAA; }

#manage-labels-container .style-wrapper .color-picker { border: 1px solid #AAAAAA; background: #EEEEEE; .rounded-corners(0, 5px, 5px, 0); }

#manage-labels-container .style-wrapper .color-picker-preview { border: 1px solid #AAAAAA; border-right: none; }



/* Quotes */

@quotes_background: #ffffff   scroll;

@quotes_border: 2px double;

@quotes_border_radius: 10px;

@quotes_sub_background: @quotes_background;

@quotes_sub_border: @quotes_border;

@quotes_sub_border_radius: @quotes_border_radius;

.content .quote div.quote_body { background: @quotes_background; border: @quotes_border; .rounded-corners(@quotes_border_radius); margin-top: 7px; padding: 10px 10px; }

.content .quote div.quote div.quote_body { background: @quotes_sub_background; border: @quotes_sub_border; .rounded-corners(@quotes_sub_border_radius); }

.quote { margin: 0 10px; padding-top: 10px; position: relative; top: -10px; }

.quote div.quote_avatar_container { float: left; }

.quote div.no_avatar_placeholder { display: inline-block; height: 30px; width: 30px; position: absolute; top: 14px; left: 4px; }

.quote div.quote_header { display: block; margin: 7px 0px 16px 35px; }

.quote.no_header { padding-top: 10px; }



/* Info Centers */

@info_background: no-repeat scroll;

@info_inner_border: 1px solid;

@info_text_color: #020002;

@info_text_font: normal normal small Arial, Helvetica, sans-serif;

@info_links_color: #004a71;

@info_links_font: normal 400 small Arial, Helvetica, sans-serif;

@info_links_decoration: none;

@info_titles_color: #000fff;

@info_titles_font: normal normal small Arial, Helvetica, sans-serif;

.stats table { background: @info_background; width: 100%; }

.stats .content > table > tbody > tr > td { border: @info_inner_border; border-right-width: 0px; border-bottom-width: 0px; width: 43%; }

.stats .content { color: @info_text_color; font: @info_text_font; }

.stats .content a { color: @info_links_color; font: @info_links_font; text-decoration: @info_links_decoration; }

.stats th { color: @info_titles_color; font: @info_titles_font; text-align: left; }

.stats .icon { width: 70px; text-align: center; vertical-align: middle; }

.stats .info { padding: 10px 10px 10px 0px; }

.stats .content > table { width: 100%; table-layout: auto; }

.stats .content > table table table tr:last-child td a { white-space: nowrap; }

.stats .content > table > tbody > tr > td:first-child { border-left-width: 0px; width: 57%; }

.stats .content > table > tbody > tr:first-child > td { border-top-width: 0px; }



/* Shoutbox */

@shoutbox_message_background: #000000   scroll url('http://storage.proboards.com/3625327/i/EExiUadCcISJctC7ogUm.png');

@shoutbox_message_border: #250223;

@shoutbox_message_border_radius: 2px 2px 2px 2px;

@shoutbox_message_text_color: transparent;

@shoutbox_message_text_font: normal normal small Arial Black, Gadget, sans-serif;

@shoutbox_shouts_background: #f5fbef   scroll;

@shoutbox_shouts_border: 1px dotted #250223;

@shoutbox_shouts_border_radius: 5px 5px 5px 5px;

@shoutbox_shouts_text_color: #250223;

@shoutbox_shouts_text_font: normal normal small Arial, Helvetica, sans-serif;

@shoutbox_shouts_edit_color: #250223;

@shoutbox_shouts_edit_font: 85% @default_forum_text_font_family;

@shoutbox_shouts_edit_decoration: @empty;

@shoutbox_shouts_delete_background: @empty;

@shoutbox_shouts_delete_border: 1px solid @container_inner_border_color;

@shoutbox_shouts_delete_border_radius: 5px;

@shoutbox_shouts_delete_text_color: @container_text_color_1;

@shoutbox_shouts_delete_text_font: bold @default_forum_text_font_family;

@shoutbox_shouts_delete_text_decoration: none;

@shoutbox_shouts_selected_background: #e0ecf8   scroll;

@shoutbox_reply_background: #e0ecf8  no-repeat scroll url('http://storage.proboards.com/3625327/i/AfTT8kdu9Q9cxTOm6Vpg.jpg');

@shoutbox_reply_border: 1px solid @container_inner_border_color;

@shoutbox_reply_border_radius: 5px;

@shoutbox_reply_counter_color: #ffffff;

@shoutbox_reply_counter_font: normal bold medium Arial, Helvetica, sans-serif;

.shoutbox_welcome_message { color: @shoutbox_message_text_color; font: @shoutbox_message_text_font; background: @shoutbox_message_background; border: @shoutbox_message_border; .rounded-corners(@shoutbox_message_border_radius); margin-bottom: 10px; }

.shoutbox_messages .shoutbox-post { color: @shoutbox_shouts_text_color; font: @shoutbox_shouts_text_font; background: @shoutbox_shouts_background; border: @shoutbox_shouts_border; .rounded-corners(@shoutbox_shouts_border_radius); text-align: left; position: relative; overflow: hidden; margin-top: 10px; margin-right: 10px; padding: 5px 15px 5px 10px; }

.shoutbox_messages .shoutbox_edit_button { color: @shoutbox_shouts_edit_color; font: @shoutbox_shouts_edit_font; text-decoration: @shoutbox_shouts_edit_decoration; display: inline-block; width: 32px; margin-right: 5px; visibility: visible; }

.shoutbox_messages .shoutbox_edit_button.hidden { visibility: hidden; }

.shoutbox_messages .shoutbox_delete_button { color: @shoutbox_shouts_delete_text_color; font: @shoutbox_shouts_delete_text_font; text-decoration: @shoutbox_shouts_delete_text_decoration; background: @shoutbox_shouts_delete_background; border: @shoutbox_shouts_delete_border; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; position: absolute; right: -7px; top: 0; width: 15px; cursor: pointer; margin-left: 20px; margin-top: 0px; padding: 3px; height: 100%; display: inline-block; }

.shoutbox .state-selected { background: @shoutbox_shouts_selected_background; }

.shoutbox_form { background: @shoutbox_reply_background; border: @shoutbox_reply_border; .rounded-corners(@shoutbox_reply_border_radius); padding: 10px; height: 100px; }

.shoutbox_form .shoutbox_counter { color: @shoutbox_reply_counter_color; font: @shoutbox_reply_counter_font; float: right; margin-top: -5px; }

.shoutbox_form textarea.gray { color: #666666; }

.shoutbox_messages { overflow-y: scroll; text-align: center; position: relative; }

.shoutbox .content { padding: 10px; }

.shoutbox_messages .shoutbox-post:first-child { margin-top: 0px; }

.shoutbox_messages .message { padding-right: 10px; word-break: break-all; }

.shoutbox_messages .details { float: right; margin: 0px 15px 0px 10px; height: 16px; vertical-align: bottom; }

.shoutbox_form.reply-box-bottom { margin-top: 10px; }

.shoutbox_form.reply-box-top { margin-bottom: 10px; }

.shoutbox_form input[type="text"] { margin-top: 2px; margin-bottom: 4px; }

.shoutbox_form .button img { display: inline; padding: 2px 0 0; }

.shoutbox_form .shoutbox_refresh_button { float: right; padding: 2px 6px 0px 6px; }

.shoutbox_form ul.tools { white-space: nowrap; display: inline-block; }

.shoutbox_form ul.tools li { float: left; margin: 0; padding: 0; .rounded-corners(0px); border: 0; height: 22px; width: 26px; text-align: center; line-height: 18px !important; }

.shoutbox_form ul.tools li img { padding: 0; }

.shoutbox_form textarea { height: 38px; width: 100%; margin-right: 0px; margin-bottom: 5px; margin-top: 5px; position: inherit; .box-sizing(); }

.shoutbox_form .shoutbox_post_button { margin-left: 0px; }

.shoutbox_form .shoutbox_cancel_button { vertical-align: bottom; }

.shoutbox_error { color: @status_text_failure_color; }

.shoutbox_name { padding: 10px 0; height: 22px; }

.shoutbox_name input { height: 15px; width: 50%; min-width: 150px; }

.shoutbox_container { position: relative; }

.shoutbox_container > .shoutbox_form_container { position: absolute; width: 100%; }

.shoutbox_container.orientation-top { padding-top: 174px; }

.shoutbox_container.orientation-top.no-post { padding-top: 0; }

.shoutbox_container.orientation-top > .shoutbox_form_container { top: 0; }

.shoutbox_container.orientation-bottom { padding-bottom: 174px; }

.shoutbox_container.orientation-bottom.no-post { padding-bottom: 0; }

.shoutbox_container.orientation-bottom > .shoutbox_form_container { bottom: 0; }

#content .shoutbox.container .smiley-menu > li > a { border: none; padding: 6px; }



/* Legend */

.legend .content td { padding: 10px 5px; vertical-align: middle; color: @container_text_color_1; }

.legend .content td:first-child { padding-left: 15px; }

.legend .content td * { vertical-align: middle; }

.legend .new-icon { display: block; }



/* Quick Reply */

.quick-reply textarea { border-width: 1px; border-style: solid; border-color: @container_inner_border_color; height: 150px; padding: 5px; width: 100%; resize: none; .box-sizing(); }

.quick-reply .content { padding: 10px; }

.quick-reply .message { margin-bottom: 10px; }

.quick-reply .guest_name { padding: 0px 10px 10px 0px; vertical-align: middle; }

.quick-reply .guest_name label { display: inline; font-weight: 800; }

.quick-reply input[type="submit"] { margin-left: 0px; }



/* Posting Page */

.wysiwyg-area label { font-weight: 800; }

.wysiwyg-area .outline { padding: 10px; border-width: 1px; border-style: solid; border-color: @container_inner_border_color; .rounded-corners(); }

.wysiwyg-area .content { padding: 10px 10px 0px 10px; }

.wysiwyg-area .content > form > div { margin-bottom: 10px; }

.wysiwyg-area .subject_line .controls { float: right; }

.wysiwyg-area .subject_line .subject_input { overflow: hidden; padding-right: 13px; }

.wysiwyg-area .subject_line input { width: 100%; }

.wysiwyg-area .subject_line table { width: 100%; table-layout: auto; }

.wysiwyg-area .subject_line .subject_input { line-height: 28px !important; }

.wysiwyg-area .subject_line table .subject { width: 70px; }

.wysiwyg-area .end-date, .wysiwyg-area .attachment, .new-area .captcha { display: none; }

.wysiwyg-area .poll .poll-options { line-height: 30px !important; }

.wysiwyg-area .poll input { width: auto; }

.wysiwyg-area .poll table { width: 100%; table-layout: auto; }

.wysiwyg-area .poll td { vertical-align: top; padding: 5px 10px 5px 0px; line-height: 230%; }

.wysiwyg-area .poll th { text-align: left; padding-bottom: 5px; }

.wysiwyg-area .submit { height: 32px; vertical-align: middle; line-height: 28px !important; }

.ui-wysiwyg .button { border: none; margin: 0; padding: 0; .rounded-corners(0px); color: #000000; background: none; }

.ui-wysiwyg .button-fontName, .ui-wysiwyg .button-fontSize { background-color: transparent; }

.ui-wysiwyg .ui-selectMenu { line-height: normal; }

.ui-wysiwyg .ui-selectMenu-box { height: 20px; }

.ui-wysiwyg .ui-selectMenu-box .status { border: none; line-height: 20px !important; padding: 0; width: auto; }

.ui-wysiwyg .ui-selectMenu-box .icon { border: none; }

.ui-wysiwyg .ui-selectMenu-box .arrow { height: 20px; }

.ui-wysiwyg .editors .bbcode-editor textarea { color: @posts_odd_text_color; background-color: @posts_odd_background_color; padding-left: 5px !important; }

.new-area .user-search .content { padding: 0px 15px 0px 0px; }

.new-area .recipients h4 { display: block; margin-bottom: 3px; }

.new-area .guest_name input { width: 485px; }

.wysiwyg-area .edit_reason > label { float: left; line-height: 28px; width: 180px; }

.wysiwyg-area .edit_reason > div { margin-left: 180px; margin-right: 8px; }

.wysiwyg-area .edit_reason > div > input { width: 100%; }

.grp_recipients_div { display: none; }

.grp_recipients_div a { display: block; clear: both; padding-top: 10px; }

.loadingOverlay { background-image: url('http://images.proboards.com/v5/loader/processing.gif'); background-position: center center; background-repeat: no-repeat; position: absolute; }

#announcement-options { display: none; width: 500px; }



/* Wysiwyg Editor */

.ui-wysiwyg .editors .bbcode-editor textarea { color: @posts_odd_text_color; background-color: @posts_odd_background_color; padding-left: 5px; }

.wysiwyg-tabs li { float: left; position: relative; bottom: 1px; margin: 1px 2px 0 0; list-style: none; background: @tabs_unselected_background; border: 1px solid @container_inner_border_color; border-top-width: 0px; .rounded-corners(0, 0, 5px, 5px); }

.wysiwyg-tabs li:hover { background: @tabs_hover_background; border: @tabs_hover_border; }

.wysiwyg-tabs li a { color: @tabs_unselected_text_color; font: @tabs_unselected_text_font; text-decoration: @tabs_unselected_text_decoration; float: left; padding: 5px 15px; text-decoration: none; }

.wysiwyg-tabs li.ui-active { background-color: @posts_odd_background_color; background-image: @posts_odd_background_image; background-attachment: @posts_odd_background_attachment; background-repeat: @posts_odd_background_repeat; background-position: @posts_odd_background_position; border: @tabs_selected_border; margin-top: 0px; padding-top: 1px; }

.wysiwyg-tabs li.ui-active a { color: @tabs_selected_text_color; font: @tabs_selected_text_font; text-decoration: @tabs_selected_text_decoration; }

.wysiwyg-smiley-menu .state-disabled { display: none; }





/**************************************************************************

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

.ie7 .container > .control-bar { margin-bottom: 0px; }

.ie7 a.likes-button, .ie7 .messages .quote-button { margin-right: 3px; min-height: 23px; }

.ie7 .user-search-box input[type=text].search-input, .ie7 .filter input[type="text"].search-input { width: 112px; }

.ie7 .recent-threads-button { padding-right: 2px; }

.ie7 .subject_line .controls { margin-top: 1px; }

.ie7 .ui-poll .results td.answer { width: 175px; }

.ie7 .shoutbox_messages .shoutbox-post.content-box { padding-right: 16px; }

.ie7 footer ul { width: 530px; }

.ie7 .options_menu li.ui-menu-has-sub-menu > .arrow { display: inline; }

.ie7 .options_menu li { width: 190px; position: static; }

.ie7 .options_menu li .arrow { margin-top: -22px; top: auto; }

.ie7 .options_menu hr { display: none; }

.ie7 .quick-reply textarea { width: 99%; }

.ie7 .ui-poll table { table-layout: auto; }

.ie7 .ui-poll .results .stats { float: none; }

.ie7 .users { width: 100%; }

.ie7 .users .ui-pagination { margin: 0 auto; display: inline; float: none; }

.ie7 .name_and_group.float-right { float: none; }

.ie7 .shoutbox_form ul.tools li img { border: 1px solid transparent; }

.ie7 #banner { padding: 0px 0px; }

.ie7 a#logo { padding: 0px 20px; line-height: 100px !important; }

.ie7 .wysiwyg-area .subject_line .controls > div.post-options { display: inline !important; }

.ie7 .ui-menu li { background-image: none; }

.ie7 .ui-menu li:hover > a { background-image: none; }

.ie7 .attachment-button-text { padding: 0 5px 3px 5px; }

.ie7 .wysiwyg-area .edit_reason > div { height: 28px; margin-left: 0; margin-right: 8px; }

.ie7 .wysiwyg-area .submit { line-height: 1px !important; }

.ie7 .show-user .controls { margin-right: 10px; }

.ie7 #nav-tree > li { display: inline; }

.ie7 #navigation-tree, .ie7 #nav-tree, .ie7 #nav-tree > li { height: 21px; }

.ie7 .recent-threads-button { height: 15px; }

.ie7 #nav-tree .menu_arrow { top: -1px; border-width: 11px 1px 11px 11px; }

.ie7 #password-wrapper div { display: inline; }

.ie7 #password-wrapper div input[name="password"] { position: relative; top: 5px; }

.ie7 #banner { min-height: @banner_height; height: auto; }

.ie7 #nav-tree { position: relative; overflow: hidden; }

.ie7 .show-user table .center-col:first-child table { table-layout: auto; }

.ie7 .popup_html .ui-menu { position: relative; z-index: 99999999; }

.ie7 #navigation-menu > ul li a { min-width: 21px; }

.ie7 #welcome { min-width: 200px; }



/* IE8 */

.ie8 select {padding-top: 2px; padding-bottom: 2px; }

.ie8 .user-search-selection .ui-selectlist-item .close { right: 0px; }

.ie8 .avatar-wrapper { display: inherit; }

.ie8 .container.copy table.list { border-collapse: separate; }

.ie8 .boards .threads { padding-left: 8px; padding-right: 8px; }

.ie8 .options_menu { max-width: 190px; }

.ie8 input[type="text"] { line-height: 20px; }

.ie8 .recent-threads-button { line-height: 1.4em; }

.ie8 .shoutbox_messages .shoutbox-post.content-box { padding-right: 16px; }

.ie8 .user-search .user-search-box .user-search-input { width: 135px; }

.ie8 table.list td.icon, .ie8 table.list th.icon { width: 54px; }

.ie8 #nav-tree { display: inline-block; }

.ie8 #content #navigation-tree, .ie8 #nav-tree, .ie8 #nav-tree > li { height: 21px; }

.ie8 #content .recent-threads-button { height: 15px; }

.ie8 #nav-tree .menu_arrow { top: -1px; border-width: 11px 1px 11px 11px; }

.ie8 #nav-tree > li { padding-right: 1px; }

.ie8 .popup_html ul { max-width: 550px; }

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

}

.secondary_pagination { padding: 0 5px; margin-bottom: 10px; }

body { background-size: 100% 100%; }

/*start of display name size correction*/

.user-link {font-size: 15px !important;}

/*end of display name size correction*/







/*start of drop down menu colours for Love Everton theme*/



ul.sub-menu-ul { /* Entire Sub Menu */

   border: 1px solid #101b3b !important;

}

#navigation-menu > ul > li:hover a.sub-menu-link { /* Sub Menu List Items */

   background-color: #101b3b !important;

   color: #ffffff !important;

}

#navigation-menu > ul > li:hover li.sub-menu-li:hover > a.sub-menu-link { /* Sub Menu List Items On Hover */

   background-color: #00369c !important;

}

/*end of colours*/

.smiley-menu { width: 550px; }

[Brian]

You would add it to the bottom of the style sheet so that it overrides anything specified previously. There's nothing to delete.

[Barkley]

May 30, 2017 8:56:22 GMT -8 Brian said:

You would add it to the bottom of the style sheet so that it overrides anything specified previously. There's nothing to delete.

Thanks very much. I'll give it a go. Hope you had a good bank holiday btw.

[Barkley]

Brian

I've noticed that putting that in the style sheet has fixed all my other custom pages too.

Am I correct in saying I don't have to apply a fix to every page individually now as long as I do it for each theme?

Is so, OMG ....... You won't believe how much work I've just saved.

[Barkley]

Brian Brian, I discovered a problem.

The overflow:scroll; being in there twice, is giving me 2 grey bars at the bottom of the screen, like in this picture:



I changed them to hidden, which removed them, but then the page stopped scrolling.

I don't have the iphone with me, as daughter unavailable, so can't check any results on that appliance, so is there a guaranteed 'fix' to solve this please?

body {background-image:url('http://storage.proboards.com/3625327/i/uHXgvYV0fZrnXRfYMSvW.jpg');

background-repeat:no-repeat;

background-position: center center;

background-attachment: fixed;

height: 100%;

overflow: scroll;}

html {overflow: scroll; -webkit-overflow-scrolling: touch;}