Fix colors in a theme

[SMiFFER]

First off, move this anywhere you see better fit.

On a forum that I host on some free hoster, the display is a bit out of order and the hoster has said he has no idea how to fix the issue.

Now, some contrast on that forum makes things hard to read, sometimes unreadble at all.

Look at these two examples:





Now how can I fix this nonsense. I am really fed up with the complaints I get from users.
I got access to the css file, I attach it for you to help

What do I need to amend to solve this? Help much appreciated!

[Doug Heffernan]

First off, move this anywhere you see better fit.

You started 3 new topics about the same thing. Please refrain from doing so. One is more than enough.

What do I need to amend to solve this?

Looking at the screenshot you are using a custom theme. As per the rules, all third party mods/themes support questions should be asked on their own support topics/forums.

[SMiFFER]

I apologize, I have not done that deliberately.
I got a database error from SMF when trying to attach the css file and simply went "back"

Now, since I only know so much, your response did not address the issue. It may be "formally" correct, but does not help me.
I believe the author of this theme is even DEAD (believe it was Crip) so sending me there makes no sense.

I am trying to solve an issue here, mate :-))
So if anyone can jump in, would be really appreciated.


Now the css-file is attached, it worked with Firefox, Brave-Browser caused the error you criticized.

[Doug Heffernan]

I apologize, I have not done that deliberately.
I got a database error from SMF when trying to attach the css file and simply went "back"

No problem.

Now, since I only know so much, your response did not address the issue. It may be "formally" correct, but does not help me.
I believe the author of this theme is even DEAD (believe it was Crip) so sending me there makes no sense.

I was not aware of that.

Now the css-file is attached, it worked with Firefox, Brave-Browser caused the error you criticized.

I am a little confused as to what you mean by this. I didn't criticize any errors. All I did was point out the rules about requesting support related to third party stuff.

[SMiFFER]

I see your point though, which is why I propose to have this topic moved to

Graphics and Templates
Graphic and theme or template discussion go in here.

[Kindred]

So?
Use your browser inspector tool to review the css and see what you need to modify to make it look better.

Then make those modifications to the actual css file

[Sir Osis of Liver]

Doesn't look like one of Crip's css files.  Which theme is it?

Hmm, looks like some of Jeff's themes are still being supported here by others, some have been updated for 2.1.

[TwitchisMental]

Looks like it id the NameX theme by Diego. OP has not confirmed.

In which case it would be best to get help in the themes support topic here - https://www.simplemachines.org/community/index.php?topic=583206.0

[Diego Andrés]

Attached file doesn't look like it's mine, also no clue why it's a txt file instead of css extension.
Would be appreciated if the topic had the full details so we don't have to be guessing.

[SMiFFER]

Well ok it is of course no txt, but a css file - is that really such a big problem?

Screenshots show what the problem is. Is the css files the wrong file?

What more do you need?

[Kindred]

Tell us the theme name and SPECIFICALLY what you want...

Like I said,  YOU need to use the browser inspector tool to look at the css in the section and make tweaks yourself

[Diego Andrés]

Screenshots show what the problem is

Kinda.

Is the css files the wrong file?

Yes, probably.

What more do you need?

Theme info or forum URL.

[SMiFFER]

Alright, I will do that.

STYLE NAME

The STYLE name that you requested is "dark2", hence I attached the file "dark2.css" - with my mistake to have it attached with the extension .txt instead of .css but that should really be no biggie. I also apologize ahead when I mistakenly used the term "theme" instead of "style" - I cannot fix the older posts of this, the edit function does not allow me to edit all that anymore.
 
PROBLEM TO BE SOLVED

I posted two screenshots that indicate the problem. Often items are displayed with almost white text on almost white background, so the text is unreadable. What I would like to know is how to amend the colors so it becomes readable. See the two screenshots as examples of the calendar and the login screen. The text is so hard to read really!

MY QUESTION

Which lines in the attached dark2.css must be amended to fix the above described color issue and thereby improve readability and contrast?

[SMiFFER]

This is the content of the file dark2.css

Code Select Expand

:root {
 /*
For "advanced" users, changing the colors via the CSS variables
is the best and easier way to custimize colors and styles.
*/

/* Body */
/* Background */
--body-bg: linear-gradient(to bottom, hsl(var(--primary-color-hue), 25%, 15%) 0%, hsl(0, 0%, 5%) 100%);
/* Font */
--body-font-size: 95%;
--body-font-family: 'Nunito', 'Segoe UI', 'Helvetica', 'Arial';
/* Color */
--body-txt-color: hsl(0, 0%, 100%);

/* Inputs */
/* Background */
--input-bg: hsl(0, 0%, 10%);
--input-bg-disabled: hsl(0, 0%, 20%);
/* Border */
--input-border-width: 1px;
--input-border-style: solid;
--input-border-color: var(--secondary-color);
--input-border-radius: 3px;
/* Color */
--input-txt-color: hsl(0, 0%, 90%);
--input-accent-color: hsl(var(--primary-color-hue), 75%, 25%);

/* Primary color */
/* Hue */
--primary-color-hue: 200;
/* Saturation */
--primary-color-sat: 30%;
/* Lightness */
--primary-color-lum: 25%;
/* Color (Can replace with HEX, RGB) */
--primary-color: hsl(var(--primary-color-hue), var(--primary-color-sat), var(--primary-color-lum));
/* Color Accent */
--primary-color-acc: hsl(var(--primary-color-hue), var(--primary-color-sat), 35%);

/* Secondary color */
/* Hue */
--secondary-color-hue: var(--primary-color-hue);
/* Saturation */
--secondary-color-sat: 50%;
/* Lightness */
--secondary-color-lum: 35%;
/* Color (Can replace with HEX, RGB) */
--secondary-color: hsl(var(--secondary-color-hue), var(--secondary-color-sat), var(--secondary-color-lum));
/* Color Accent */
--secondary-color-acc: hsl(var(--secondary-color-hue), var(--secondary-color-sat), 35%);

/* Links */
/* Color */
--body-link-color: hsl(var(--primary-color-hue), 75%, 60%);
--body-link-color-hover: var(--secondary-color-acc);

/* Button */
/* Height */
--button-height: 30px;
/* Background */
--button-bg: var(--secondary-color);
--button-bg-hover: var(--secondary-color-acc);
/* Border */
--button-border-width: 1px;
--button-border-style: solid;
--button-border-color: var(--secondary-color);
--button-border-radius: 3px;
/* Color */
--button-txt-color: hsl(0, 0%, 95%);
--button-txt-color-hover: hsl(0, 0%, 100%);

/* New Button */
/* Background */
--newbutton-bg: var(--primary-color);
/* Color */
--newbutton-txt-color: hsl(0, 0%, 100%);

/* Main Content */
/* Background */
--main-content-bg: var(--body-bg);
/* Border */
--main-content-border-width: 0;
--main-content-border-style: solid;
--main-content-border-color: hsl(var(--primary-color-hue), 25%, 50%);
/* Shadow */
--main-content-shadow-box: 0px 2px 4px -1px rgba(0, 76, 117, 0.1);

/* Content Border */
/* Border */
--content-border-color: hsl(var(--primary-color-hue), 25%, 20%);

/* Boards Title */
/* Color */
--main-boards-title: hsl(var(--primary-color-hue), 65%, 50%);

/* Catbg */
/* Background */
--catbg-bg: hsl(var(--primary-color-hue), 35%, 8%);
/* Font */
--catbg-font-size: 1em;
/* Height */
--catbg-height: 50px;
--catbg-grid-height: 45px;
/* Color */
--catbg-txt-color-hue: var(--primary-color-hue);
--catbg-txt-color-sat: 15%;
--catbg-txt-color: hsl(var(--catbg-txt-color-hue), var(--catbg-txt-color-sat), 70%);
--catbg-txt-color-hover: hsl(var(--catbg-txt-color-hue), var(--catbg-txt-color-sat), 30%);
/* Border */
--catbg-border-width: 0 0 1px 0;
--catbg-border-style: solid;
--catbg-border-radius: 3px;
--catbg-border-color: var(--primary-color-acc);
/* Shadow */
--catbg-txt-shadow: 1px 1px 1px hsl(var(--catbg-txt-color-hue) var(--catbg-txt-color-sat) 0% / 0.2);
--catbg-box-shadow: none;

/* Titlebg */
/* Background */
--titlebg-bg: hsl(var(--primary-color-hue), 65%, 7%);
/* Font */
--titlebg-font-size: 1em;
/* Height */
--titlebg-height: 45px;
--titlebg-grid-height: 40px;
/* Color */
--titlebg-txt-color-hue: var(--secondary-color-hue);
--titlebg-txt-color-sat: 25%;
--titlebg-txt-color: hsl(var(--titlebg-txt-color-hue), var(--titlebg-txt-color-sat), 100%);
--titlebg-txt-color-hover: hsl(var(--titlebg-txt-color-hue), var(--titlebg-txt-color-sat), 35%);
/* Border */
--titlebg-border-width: 1px 0 0;
--titlebg-border-style: solid;
--titlebg-border-radius: 3px;
--titlebg-border-color: var(--secondary-color-acc);
/* Shadow */
--titlebg-txt-shadow: 1px 1px 1px hsl(var(--titlebg-txt-color-hue) var(--titlebg-txt-color-sat) 0% / 0.2);
--titlebg-box-shadow: none;

/* Windowbg */
/* Windowbg1*/
--windowbg-hue: var(--primary-color-hue);
--windowbg-sat: 65%;
--windowbg-lum: 15%;
/* Windowbg2 */
--windowbg2-hue: var(--secondary-color-hue);
--windowbg2-sat: var(--windowbg-sat);
--windowbg2-lum: 95%;
/* Background */
--windowbg-bg: linear-gradient(to bottom, hsl(var(--primary-color-hue), 25%, 15%) 25%, hsl(var(--primary-color-hue), 50%, 10%) 100%);
--windowbg2-bg: var(--windowbg-bg);
/* Color */
--windowbg-txt-color: var(--body-txt-color);
/* Border */
--windowbg-border-radius: 2px;

/* Roundframe */
--roundframe-hue: var(--secondary-color-hue);
--roundframe-sat: 40%;
--roundframe-lum: 10%;
/* Background */
--roundframe-bg: hsl(var(--roundframe-hue), var(--roundframe-sat), var(--roundframe-lum));
/* Border */
--roundframe-border-width: 1px;
--roundframe-border-style: solid;
--roundframe-border-color: hsl(var(--roundframe-hue), 75%, 25%);
--roundframe-border-radius: 2px;

/* Header */
/* Background */
--header-bg: hsl(var(--primary-color-hue), 25%, 10%);

/* Footer */
/* Background */
--footer-bg: hsl(var(--primary-color-hue), 25%, 10%);
/* Color */
--footer-txt-color: hsl(0, 0%, 100%);
/* Links */
--footer-links-color: var(--body-link-color);

/* Main Nav */
/* Background */
--nav-bg: hsl(var(--primary-color-hue), 25%, 8%);

/* Main Nav Items */
/* Background */
--nav--item-bg: transparent;
--nav--item-bg-hover: transparent;
--nav--item-bg-active: var(--primary-color-acc);
/* Color */
--nav-item-txt-color: hsl(0, 0%, 65%);
--nav-item-txt-color-hover: hsl(0, 0%, 50%);
--nav-item-txt-color-active: hsl(0, 0%, 80%);
/* Border */
--nav-item-border-radius: 3px;
/* Font */
--nav-item-font-weight: 700;
--nav-item-font-size: 0.9rem;

/* Main Nav Drodown */
/* Background */
--nav--dropdown-bg: var(--windowbg-bg);
/* Border */
--nav-dropdown-border-width: 1px;
--nav-dropdown-border-style: solid;
--nav-dropdown-border-color: var(--primary-color-acc);
--nav-dropdown-border-radius: 3px;

/* Main Nav Drodown Items */
/* Background */
--nav--dropdown-item-bg: transparent;
--nav--dropdown-item-bg-hover: var(--roundframe-bg);
/* Color */
--nav-dropdown-item-txt-color: hsl(0, 0%, 75%);
--nav-dropdown-item-txt-color-hover: hsl(var(--primary-color-hue), 75%, 30%);

/* Button List */
/* Background */
--buttonlist-bg: var(--roundframe-bg);
--buttonlist-bg-hover: var(--windowbg-bg);
--buttonlist-bg-active: var(--primary-color-acc);
/* Color */
--buttonlist-txt-color: hsl(0, 0%, 90%);
--buttonlist-txt-color-hover: hsl(0, 0%, 80%);
--buttonlist-txt-color-active: hsl(0, 0%, 100%);

/* Subnav Dropdown */
/* Border */
--subnav-dropdown-border-width: 1px;
--subnav-dropdown-border-color: var(--primary-color);
--subnav-dropdown-border-style: solid;
--subnav-dropdown-border-radius: 3px;

/* Profile Cover */
/* Top Height */
--profile-cover-image-height: 150px;
/* Bottom Height */
--profile-cover-details-height: 75px;

/* Poster */
/* Background */
--poster-bg: hsl(var(--primary-color-hue), 35%, 10%);

/* Status Colors */
/* Sticky */
--status-sticky-bg: hsl(var(--primary-color-hue), 35%, 75%);
--status-sticky-txt-color: var(--primary-color);
/* Locked */
--status-locked-bg: hsl(var(--primary-color-hue), 25%, 10%);
--status-locked-txt-color: var(--secondary-color-acc);
/* Approve */
--status-approve-bg: hsl(0, 25%, 50%);
--status-approve-txt-color: hsl(var(--primary-color-hue), 30%, 25%);
/* Approve Topic */
--status-approvet-bg: hsl(0, 70%, 65%);
}

/**** FontAwesome ****/
/* Mark Read */
.fa-markread::before,
.fa-markselectread::before {
content: "\f00c";
}
/* Not Read */
.fa-mark_unread::before {
content: "\f00d";
}
/* Read all */
.fa-readall::before {
content: "\f06e";
}
/* Send Topic */
.fa-send::before {
content: "\f1d8";
}
/* Notify */
.fa-notify::before {
content: "\f0f3";
}
/* New Poll */
.fa-post_poll::before,
.fa-add_poll::before {
content: "\f681";
}
/* Delete Poll */
.fa-remove_poll::before {
content: "\f2ed";
}
/* New Topic */
.fa-new_topic::before {
content: "\f15b";
}
/* Move Topic */
.fa-move::before {
content: "\f0b2";
}
/* Delete Topic */
.fa-delete::before {
content: "\f2ed";
}
/* Sticky Topic */
.fa-sticky::before {
content: "\f08d";
}
/* Merge Topic */
.fa-merge::before {
content: "\f248";
}
/* View All Members */
.fa-view_all_members::before {
content: "\f0c0";
}
/* Find Member */
.fa-mlist_search::before {
content: "\f4fc";
}
/* Calendar Menu */
.fa-calendar::before {
content: "\f073";
}
/* Register */
.fa-register::before {
content: "\f234";
}
/* Login */
.fa-login::before {
content: "\f2f6";
}
/* Community */
.menu_icon.fa-community::before {
content: "\f022";
}
.menu_icon.fa-forum::before {
content: "\f07c";
}
/* FA Nav */
.fa-help::before {
content: "\f128";
}
.fa-admin::before {
content: "\f085";
}
.fa-moderate::before {
content: "\f7d9";
}
.fa-profile::before {
content: "\f007";
}
.fa-pm::before {
content: "\f0e0";
}
.fa-mlist::before {
content: "\f0c0";
}
.fa-logout::before {
content: "\f2f5";
}
/* Topic Icons */
.fa-stickybg::before {
content: "\f08d";
}
.fa-lockedbg::before {
content: "\f023";
}
.fa-approvebg::before,
.fa-approvetbg::before {
content: "\f12a";
}
.fa-windowbg::before {
content: "\f4ad";
}
/**** FontAwesome *****/


/* Alerts */
.alert-bangTidy {
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: rgba(0, 0, 0, 0.80);
background: linear-gradient(top, rgba(0, 0, 0, 0.80) 0%,rgba(0, 0, 0, 0.88) 100%);
border: 1px solid #000;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.1);
border-radius: 4px;
overflow: hidden;
color: white;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
}

/**
* alert-blackgloss.css v1.0
* --
* Based off blackgloss growl theme.
* Copyright 2012 Nijiko Yonskai
* --
* Usage:
*  Set style to `blackgloss` and include this css.
*
* Note:
*  The gloss is only supported in webkit based browsers.
*  Chrome and Safari.
  */
@keyframes notification {
0% { transform: rotateY(-90deg); opacity: 0; }
70% { transform: rotateY(20deg); opacity: .8; }
90% { transform: rotateY(-10deg); opacity: 1; }
100% { transform: rotateY(-0deg); opacity: 1; }
}

/* Webkit Only */
.alert-blackgloss:before {
background: linear-gradient(linear, 0% -16.5%, 16.5% -100%, from(rgba(255,255,255,.0)), to(rgba(255,255,255,.6)), color-stop(.99,rgba(255,255,255,.2)),color-stop(.5,rgba(255,255,255,.0))) no-repeat;
mask-image: linear-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.5)), color-stop(.8,rgba(255,255,255,.0)));
position: absolute;
content: '.';
line-height: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
overflow: hidden;
text-indent: -99999px;
border-radius: 5px;
}
.alert-blackgloss {
animation: notification .75s linear;
background: rgba(0,0,0,1);
box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1);
border: 1px solid rgba(0,0,0,.95);
border-radius: 5px;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
color: #fff;
transform: rotateY(-0deg);
position: relative;
background-clip: padding-box;
}
.alert-blackgloss .close {
position: relative;
top: -3px;
right: -25px;
color: #fff;
content: 'x';
}
/* some alerts */
.alert-minimalist {
background-color: #fff;
border-color: #fff;
border-radius: 3px;
color: #cd201f;
padding: 10px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.24);
}
.alert-minimalist > [data-notify="icon"] {
height: auto;
min-height: 50px;
margin-right: 10px;
}
.alert-minimalist > [data-notify="title"] {
color: #cd201f;
display: block;
font-weight: bold;
margin-bottom: 0px;
text-transform: capitalize;
}
.alert-minimalist > [data-notify="message"] {
font-size: 80%;
}

/*xs class*/
.btn-group-xs > .btn, .btn-xs {
padding  : .25rem .4rem;
font-size  : .575rem;
line-height  : 1;
border-radius : .2rem;
margin-top: -5px;
}
/* Body */
body {
background-image: none;
background: var(--body-bg);
color: var(--body-txt-color);
font-size: var(--body-font-size);
font-family: var(--body-font-family);
padding: 0;
margin: 0;
}

body, td, th, tr {
    color: var(--body-txt-color);
}

.modal-content {
position:relative;
display:-ms-flexbox;
display:flex;
-ms-flex-direction:column;
flex-direction:column;
width:100%;
pointer-events:auto;
background-color:#000;
background-clip:padding-box;
border:1px solid rgba(0,0,0,.2);
border-radius:.3rem;
outline:0
}

.description, .description_board, .plainbox {
padding:.5em 1em;
font-size:.9em;
line-height:1.4em;
border:1px solid #bbb;
background:black;
margin:.2em 1px 1em 1px
}

h1, h2, h3, h4, h5, h6,
#smfFadeScroller {
color: var(--body-txt-color);
}
#preview_body, .windowbg {
color: revert;
}
.windowbg, .windowbg2 {
color: var(--windowbg-txt-color);
}

/* Normal, standard links. */
a:link, a:visited,
a.new_win:link, a.new_win:visited {
color: var(--body-link-color);
text-decoration: none;
font-weight: 400;
}
a:hover {
color: var(--body-link-color-hover);
text-decoration: underline;
cursor: pointer;
}
/* Inputs */
hr {
margin: 2px 0 10px;
}
pre {
display: grid;
}
button, input, select, textarea {
color: #444;
}
select, input, textarea {
padding: 6px 8px;
background: var(--input-bg);
color: var(--input-txt-color);
border-width: var(--input-border-width);
border-style: var(--input-border-style);
border-color: var(--input-border-color);
border-radius: var(--input-border-radius);
accent-color: var(--input-accent-color);
}
input[disabled], select[disabled], textarea[disbled] {
background: var(--input-bg-disabled) !important;
}
button,
input[type=button],
.button_submit,
input.button_submit,
a.button_submit {
background-image: none;
background: var(--button-bg);
padding: 0 10px;
border-radius: var(--button-border-radius);
border-style: var(--button-border-style);
border-width: var(--button-border-width);
border-color: var(--button-border-color);
height: auto;;
min-height: var(--button-height);
color: var(--button-txt-color);
font-size: 10pt;
transition-duration: 0.3s;
transition-delay: 25ms;
transition-timing-function: ease-in-out;
transition-property: background, color;
}
button:hover, button:focus, input[type=button]:focus, input[type=button]:hover,
.button_submit:focus, .button_submit:hover,
input.button_submit:focus, input.button_submit:hover {
background-image: none;
background: var(--button-bg-hover);
color: var(--button-txt-color-hover);
text-decoration: none;
transition-timing-function: linear;
transition-duration: 0.2s;
}
/*linktree*/
.linktree_back {
margin: 0;
padding: 1px 0;
}
.breadcrumb {
margin: 0;
background-color: transparent;
padding: 0;
align-items: center;
align-content: center;
gap: 5px;
font-size: 0.9rem;
}
.breadcrumb li {
display: flex;
width: auto;
height: auto;
min-height: 40px;
margin: 0;
padding: 0;
align-items: center;
gap: 3px;
}
.breadcrumb li a {
display: inline-block;
padding: 0;
}
.breadcrumb li a span.fa-home {
font-size: 14pt;
color: var(--primary-color-acc);
}

.breadcrumb li a:hover {
text-decoration: none;
}
.breadcrumb li:nth-child(2) a#breadcrumbDrop::after,
.breadcrumb li:nth-child(2) a#breadcrumbDrop_custom::after {
display: inline-block;
content: " ";
border-color: transparent;
border-style: solid;
border-width: 7px 5px 0px 5px;
border-top-color: #888;
margin: 10px 0 0 5px;
}
.breadcrumb li::after {
content: "";
display: inline-block;
border-style: solid;
border-color: #888;
border-width: 0 3px 3px 0;
width: 10px;
height: 10px;
transform: rotate(-45deg);
margin: 0 5px 0;
}
.breadcrumb li:first-child::after,
.breadcrumb li:last-child::after,
.breadcrumb li li::after {
display: none;
}
.breadcrumb li.active,
.breadcrumb li.active a {
color: var(--secondary-color-acc);
font-weight: bold;
}
.breadcrumb li.active span.extra {
font-size: 8pt;
}
.breadcrumb li .extra span strong {
display: inline;
}
.breadcrumb-dropdown {
background: var(--roundframe-bg);
border-width: 0;
border-radius: 0;
padding: 0;
margin: 0;
max-width: 320px;
min-height: 10px;
left: 0 !important;
top: 0 !important;
border-radius: var(--subnav-dropdown-border-radius);
border-width: var(--subnav-dropdown-border-width);
border-style: var(--subnav-dropdown-border-style);
border-color: var(--subnav-dropdown-border-color);
}
.breadcrumb-dropdown li {
padding: 2px 7px;
margin: 0;
font-size: 9pt;
float: none;
min-height: 25px;
line-height: 25px;
background: var(--roundframe-bg);
}
.breadcrumb-dropdown li:hover {
background: var(--windowbg-bg);
}
.breadcrumb-dropdown li:first-child {
border-bottom: none;
margin: 0;
}
.breadcrumb-dropdown li:last-child {
border-bottom: none;
margin: 0;
}
.breadcrumb-dropdown li span.extra {
padding: 0 3px;
font-size: 0.8em;
}
.breadcrumb-dropdown li a {
min-height: 10px;
line-height: 10px;
display: inline;
padding: 0;
}
.breadcrumb-dropdown li span.extra:first-child {
font-size: 10pt;
}
.breadcrumb-dropdown li.active span.extra {
padding-left: 5px;
font-size: 8pt;
}
/* Roundframe */
span.upperframe, span.lowerframe {
display: none;
}
.roundframe, .description {
background-image: none;
background: var(--roundframe-bg);
border-radius: var(--roundframe-border-radius);
border-style: var(--roundframe-border-style);
border-width: var(--roundframe-border-width);
border-color: var(--roundframe-border-color);
padding: 10px;
margin: 0;
}
/* Buttonlist */
.buttonlist ul li {
margin: 0 5px;
}
.buttonlist.floatright ul li:last-child {
margin-right: 0;
}
.buttonlist.floatleft ul li:first-child {
margin-left: 0;
}
.buttonlist ul li a,
.mlist-sort button {
border: none;
background-image: none;
margin: 0;
background: var(--buttonlist-bg);
color: var(--buttonlist-txt-color);
border-radius: 4px;
padding: 3px 10px;
}
.buttonlist ul li a:hover,
.mlist-sort button:hover {
background-image: none;
background: var(--buttonlist-bg-hover);
color:var(--buttonlist-txt-color-hover) ;
}
.buttonlist ul li a.active {
background-image: none;
background: var(--buttonlist-bg-active);
color: var(--buttonlist-txt-color-active)
}
.buttonlist ul li a.active:hover {
color: #eee;
}
/* Carousel */
.carousel-fade .carousel-item {
opacity: 0;
transition-duration: .6s;
transition-property: opacity;
}
.carousel-fade  .carousel-item.active,
.carousel-fade  .carousel-item-next.carousel-item-left,
.carousel-fade  .carousel-item-prev.carousel-item-right {
opacity: 1;
}
.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-right {
opacity: 0;
}
.carousel-fade  .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-prev {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
.carousel-item,
.carousel-container {
height: 300px;
}
.carousel-item {
background-position: center;
background-size: cover;
}
.carousel-container {
background-color: rgba(0, 0, 0, 0.4);
width: 100%;
}
.carousel-caption {
right: 20%;
left: 20%;
bottom: 30%;
padding-bottom: 25px;
}
.carousel-item h3, .carousel-item h3 a {
font-family: 'Verdana';
font-size: 26pt;
text-transform: uppercase;
font-weight: 700;
text-shadow: 1px 1px 1px rgba(0,0,0,.8);
color: #fff;
margin: 10px 0 5px;
}
.carousel-item h3 a:hover {
text-decoration: none;
}
.carousel-item p {
font-size: 12px;
color: #fff;
margin: 2px 0 15px;
}
/* Boards */
.table_list tbody.content td.info a.subject {
color: var(--main-boards-title);
}
p.board_description {
font-size: 1em;
}
table.table_list a.collapse {
margin: 5px 0 0 10px;
}
/* Catbg */
div.cat_bar,
div.roundframe div.cat_bar {
background-image: none;
background-color: transparent;
padding: 0;
height: auto;
min-height: var(--catbg-height);
border-radius: var(--catbg-border-radius);
margin: 1px 0;;
}
.catbg, .catbg2, h3.catbg, h4.catbg,
div.roundframe div.cat_bar h3.catbg,
tr.catbg td, tr.catbg th, tr.catbg2 td, tr.catbg2 th  {
background-image: none;
background: var(--catbg-bg);
border-width: var(--catbg-border-width);
border-style: var(--catbg-border-style);
border-color: var(--catbg-border-color);
height: auto;
min-height: var(--catbg-height);
line-height: var(--catbg-height); 
padding: 0 10px;
color:  var(--catbg-txt-color);
font-size: var(--catbg-font-size);
text-shadow: var(--catbg-txt-shadow);
box-shadow: var(--catbg-box-shadow);
font-weight: normal;
}
.table_list tbody.header td .catbg,
.catbg, h3.catbg a:visited, h3.catbg a,
tr.catbg th a:link, h3.catbg a:link {
color: var(--catbg-txt-color);
}
.table_list tbody.header td .catbg a:hover,
.catbg a:hover, h3.catbg a:hover,
tr.catbg th a:hover {
color: var(--catbg-txt-color-hover);
}
.table_grid tr.catbg,
.table_grid tr.catbg td,
.table_grid tr.catbg th {
height: auto;
min-height: var(--catbg-grid-height);
line-height: var(--catbg-grid-height);
}
tr.catbg th.last_th, tr.catbg th.first_th, tr.catbg th{
background: none;
}
h3.catbg img.icon {
float: left;
margin: 10px 10px 0 0;
}
/* Titlebg */
div.title_bar, div.title_barIC {
background-image: none;
background-color: transparent;
padding: 0;
height: auto;
min-height: var(--titlebg-height);
border-radius: var(--titlebg-border-radius);
margin: 0;
}
.titlebg, h3.titlebg, h4.titlebg,
div.title_barIC h4.titlebg,
div.roundframe div.cat_bar h4.titlebg,
tr.titlebg td, tr.titlebg th {
background-image: none;
background: var(--titlebg-bg);
border-width: var(--titlebg-border-width);
border-style: var(--titlebg-border-style);
border-color: var(--titlebg-border-color);
height: auto;
min-height: var(--titlebg-height);
line-height: var(--titlebg-height); 
padding: 0 10px;
color:  var(--titlebg-txt-color);
font-size: var(--titlebg-font-size);
text-shadow: var(--titlebg-txt-shadow);
box-shadow: var(--titlebg-box-shadow);
font-weight: normal;
}
.table_list tbody.header td .titlebg,
.titlebg, h3.titlebg a:visited, h4.titlebg a:visited,
tr.titlebg th a:link, h4.titlebg a {
color:  var(--titlebg-txt-color);
}
.table_list tbody.header td .titlebg a:hover,
.titlebg a:hover ,h4 .titlebg a:hover
tr.titlebg th a:hover {
color:  var(--titlebg-txt-color-hover);
}
.table_grid tr.titlebg,
.table_grid tr.titlebg td {
height: auto;
min-height: var(--titlebg-grid-height);
line-height: var(--titlebg-grid-height);
}
tr.titlebg th.last_th, tr.titlebg th.first_th, tr.titlebg th{
background: none;
}
h4.titlebg img.icon {
float: left;
margin: 10px 10px 0 0;
}
/* Preview */
#preview_body {
background-color: transparent;
padding: 0;
}
/* Wingowbg */
.windowbg, .windowbg2 {
background-image: none;
border-radius: var(--windowbg-border-radius);
}
.windowbg {
background: var(--windowbg-bg);
}
.windowbg2 {
background: var(--windowbg2-bg);
}
.windowbg2 span.topslice,
.windowbg2 span.botslice,
.windowbg2 span.topslice span,
.windowbg2 span.botslice span,
.windowbg span.topslice,
.windowbg span.botslice,
.windowbg span.topslice span,
.windowbg span.botslice span,
.approvebg2 span.topslice,
.approvebg2 span.botslice,
.approvebg2 span.topslice span,
.approvebg2 span.botslice span,
.approvebg span.topslice,
.approvebg span.botslice,
.approvebg span.topslice span,
.approvebg span.botslice span {
background: none;
padding: 0;
height: 0;
}
.approvebg, .approvebg2 {
background: var(--status-approve-bg);
}
.approvetbg {
background: var(--status-approvet-bg);
}
.lockedbg, .lockedbg2 {
background: var(--status-locked-bg);
}
.stickybg, .stickybg2 {
background: var(--status-sticky-bg);
}
/* Poster */
.post_wrapper {
float: none;
display: flex;
}
.poster {
float: none;
width: 200px;
background: var(--poster-bg);
}
.wrap_postarea {
width: 100%;
position: relative;
}
.wrap_postarea::before {
content: "";
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 25px;
border-style: solid;
border-width: 10px 20px 10px 0;
border-color: transparent var(--windowbg-bg) transparent transparent;
}
.postarea,
.moderatorbar {
width: 100%;
margin: 0;
}
.poster li.avatar img {
height: auto;
min-height: 50px;
min-width: 50px;
max-width: 100%;
max-height: 200px;
object-fit: contain;
}
.inner {
margin: 0 0.5em;
padding: 1em 1em 2px;
border-color: var(--primary-color-acc);
}
.postarea div.flow_hidden {
display: flex;
align-items: center;
padding: 10px 0 0;
}
.postarea .keyinfo {
width: 100%;
margin-left: 10px;
}
.postarea ul.quickbuttons {
width: 100%;
}
/* Manage Boards */
#manage_boards li {
border-width: 0 !important;
border-color: var(--content-border-color) !important;
padding: 15px 10px !important;
margin: 5px 0 !important;
}
#manage_boards li.windowbg {
background-color: #f5f5f5;
}
/* Dropmenu */
#adm_submenus {
margin: 10px 2px;
padding: 0;
}
#adm_submenus .dropmenu li {
float: none;
display: inline-block;
margin-right: 5px;
}
#adm_submenus .dropmenu li:last-child {
margin-right: 0;
}
#adm_submenus .dropmenu li a {
background: var(--buttonlist-bg);
color: var(--buttonlist-txt-color);
margin: 0;
padding: 5px 12px;
border-radius: 4px;
font-size: 0.9em;
}
#adm_submenus .dropmenu li a.active {
background: var(--buttonlist-bg-active);
color: var(--buttonlist-txt-color-active);
}
#adm_submenus .dropmenu li a:hover {
background: var(--buttonlist-bg-hover);
color: var(--buttonlist-txt-color-hover);
}
#adm_submenus .dropmenu li a.active,
#adm_submenus .dropmenu li a:hover {
background-image: none;
}
/* General */
.description {
margin: 3px 1px 0;
}
.information {
border-radius: 3px;
background-color: rgb(233, 245, 238);
}
#posting_icons {
display: inline-block;
float: none;
padding: 10px 0 0 2px;
margin: 3px 0;
}
.mark_read {
display: inline;
margin: 2px 0 5px;
}
.st_newbutton {
background: var(--newbutton-bg);
color: var(--newbutton-txt-color);
padding: 3px 5px;
font-size: .575rem;
line-height: 1;
border-radius: .2rem;
margin: 0;
text-decoration: none !important;
}
/* Profile */
#basicinfo img.avatar, #main_admsection #basicinfo img.avatar {
max-width: 100px;
}
/* Topics List */
table.table_grid td {
border-radius: 0;
  /* border: 3px solid #fff;
border-radius: 10px;*/
}
tr.titlebg td, tr.catbg td {
padding: 0 15px;
}
/* Admin */
#quick_search form, h3.catbg #quick_search form {
height: auto;
padding: 0 !important;
margin-top: 3px;
}
object#quick_search form select {
height: auto;
}
#quick_search form div.select {
display: inline-block;
height: auto;
}
#left_admsection {
width: 225px;
}
.left_admmenu li {
padding: 3px 0;
}
.left_admmenu li a img {
margin: -1px 0 0;
}
.left_admmenu li a {
width: 100%;
display: inline-block;
padding: 0 10px;
}
.left_admmenu li a:hover {
text-decoration: none;
}
.left_admmenu li a.active {
border-radius: 4px;
padding: 5px 10px;
}
/* Stats */
.statsbar div.bar {
background-image: none;
padding: 0;
}
.statsbar div.bar div {
background-image: none;
background: var(--secondary-color);
border-radius: 4px;
padding: 0;
}
.activity_stats li div.bar div {
background: var(--secondary-color);
border-radius: 4px 4px 0 0;
}
.profile_pie {
background: var(--secondary-color);
border-radius: 100%;
}

/* Signature */
.attachments, .signature {
width: 100%;
padding: 7px 10px;
}

/* Profile */
.profile-wrapper {
display: flex;
margin: 10px 0 10px;
gap: 10px;
}
.profile-wrapper .signature {
border: none;
}
.profile-wrapper .windowbg,
.profile-wrapper .windowbg2 {
margin: 0 0 1px;
}
.profile-cover {
flex-basis: 40%;
}
.profile-basics {
flex-basis: 60%;
}
.profile-cover .cover-image {
height: var(--profile-cover-image-height);
background-size: cover;
background-position: center;
background: var(--secondary-color);
position: relative;
}
.profile-cover .cover-image .cover-overlay {
background-color: rgba(0,0,0,0.5);
height: var(--profile-cover-image-height);
}
.profile-cover .cover-top {
display: flex;
height: 100%;
align-items: flex-end;
padding: 0 0 25px;
}
.profile-details {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: var(--profile-cover-details-height);
flex-wrap: wrap;
padding: 0 0 25px;
}
.profile-details .cover-bottom {
flex-basis: 100%;
display: flex;
align-items: flex-end;
height: auto;
min-height: var(--profile-cover-details-height);
padding:  0;
}
.cover-top .profile-row-item {
flex-basis: 100%;
text-align: center;
}
.cover-bottom .profile-row-item {
flex-basis: 100%;
align-self: flex-end;
}
.profile-row-item.buddy-row {
flex-basis: 100%;
margin: 25px 0 5px;
}
.cover-top .profile-row-item > img.avatar_dot {
width: 96px;
height: 96px;
position: relative;
top: calc(48px + 25px);
}
span.profile-title, span.profile-title a {
color: #fff !important;
}
h4.profile-name {
font-size: 12pt;
text-align: center;
margin: 0;
}
span.profile-button {
text-align: center;
color: #000;
}
span.profile-button a {
color: #777;
padding: 0 10px;
border: 1px solid var(--content-border-color);
border-radius: 8px;
display: inline-block;
height: auto;
min-height: 30px;
line-height: 30px;
}
span.profile-button a:hover {
text-decoration: none;
color: #333;
}
.profile-cover > .signature {
margin: 10px 0;
border-top: none;
padding: 10px;
width: 100%;
}
.profile-wrapper dl {
display: flex;
width: 100%;
flex-flow: row wrap;
}
.profile-wrapper dt {
flex-basis: 25%;
border-bottom: 1px solid var(--content-border-color);
padding: 10px 0;
}
.profile-wrapper dd {
flex-basis: 75%;
flex-grow: 1;
border-bottom: 1px solid var(--content-border-color);
margin: 0;
padding: 10px 0;
}
.profile-wrapper dt:last-of-type, .profile-wrapper dd:last-of-type {
border-bottom: none;
}
.profile-cover img.avatar_dot {
height: 120px;
width: 120px;
border-radius: 100%;
}
.profile-cf {
padding: 10px 0 15px;
}
.profile-cf ul {
margin: 0;
padding: 0;
text-align: center;
}
.profile-cf ul li {
display: inline-block;
margin: 1px 2px;
}
/* 3rd level */
.dropdown-submenu{
position:relative
}
.dropdown-submenu>.dropdown-menu{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
border-radius:0 6px 6px 6px
}
.dropdown-submenu:hover>.dropdown-menu{
display:block
}
.dropdown-submenu>a:after{
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color: var(--nav-dropdown-item-txt-color);
margin-top:5px;
margin-right:-10px
}
.dropdown-submenu:hover>a:after{
border-left-color: var(--nav-dropdown-item-txt-color-hover );
}
.dropdown-submenu.pull-left{
float:none
}
.dropdown-submenu.pull-left>.dropdown-menu{
left:-100%;margin-left:10px;
border-radius:6px 0 6px 6px
}
/* Quickbuttons */
ul.quickbuttons {
margin-right: 15px;
display: flex;
justify-content: flex-end;
align-items: center;
}
ul.quickbuttons li {
background-image: none !important;
margin: 1px 2px;
}
ul.quickbuttons li a {
padding: 5px 10px;
height: auto;
border-radius: 4px;
}
ul.quickbuttons li a:hover {
text-decoration: none;
}
ul.quickbuttons li a::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
display: inline-block;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
padding: 0 5px 0 0;
}
ul.quickbuttons li.quote_button a::before {
content: "\f10d";
}
ul.quickbuttons li.remove_button a::before {
content: "\f00d";
}
ul.quickbuttons li.modify_button a::before {
content: "\f044";
}
ul.quickbuttons li.approve_button a::before {
content: "\f00c";
}
ul.quickbuttons li.restore_button a::before {
content: "\f01e";
}
ul.quickbuttons li.split_button a::before {
content: "\f0db";
}
ul.quickbuttons li.reply_button a::before {
content: "\f3e5";
}
ul.quickbuttons li.reply_all_button a::before {
content: "\f122";
}
ul.quickbuttons li.notify_button a::before {
content: "\f0f3";
}

/* Avatar */
.avatar_dot {
border-radius: 100%;
width: 32px;
height: 32px;
margin: 0 5px;
}

/* BBC */
#bbcBox_message div {
margin: -3px 0 5px;
}

/* Member List */
#mlist {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
#mlist .no-members {
width: 100%;
margin: 0;
padding: 10px;
text-align: center;
flex-basis: 100%;
}
#mlist .mem-box {
flex-basis: 20%;
width: 20%;
padding: 10px;
text-align: center;
}
#mlist .mem-box img.avatar {
border-radius: 100%;
width: 48px;
height: 48px;
text-align: center;
margin: 0 auto 5px;
display: block;
}
#mlist .mem-box h2.memtitle {
font-size: 110%;
}
#mlist .mem-box span.group,
#mlist .mem-box span.register,
#mlist .mem-box span.posts {
display: block;
}
#mlist .mem-box div.icons {
margin: 0;
}
#mlist .mem-box div.icons span {
display: inline-block;
margin: 2px;
}
.mlist-sort {
z-index: 100;
}
.mlist-sort button {
text-decoration: none;
outline: none !important;
margin: 5px 0 0;
padding: 6px 10px;
text-transform: uppercase;
font-size: .8em;
}
.mlist-sort button::after {
display: none;
}
.mlist-sort ul.dropdown-menu {
right: 0;
left: auto;
}
.mlist-sort ul.dropdown-menu li i {
font-size: 0.8em;
}

/* Pagesection */
.pagesection {
height: auto;
min-height: 40px;
overflow: visible;
}

/* Nav */
.navbar-nav .nav-link {
outline: none !important;
}

/* Mod link */
a.moderation_link {
color: red;
}

/* Content Section */
#content_section {
background: none;
background: var(--main-content-bg);
padding: 10px 30px 25px;
border-width: var(--main-content-border-width);
border-style: var(--main-content-border-style);
border-color: var(--main-content-border-color);
box-shadow: var(--main-content-shadow-box);
margin: 0 0 25px;
}
/* Sidebar */
#boardindex_table {
margin-bottom: 10px;
}
.boardindex_section {
display: flex;
gap: 10px;
flex-direction: row;
}
.boardindex_section .index_boards {
flex-basis: 75%;
}
.boardindex_section .index_stats {
flex-basis: 25%;
}

/* Boards */
.boards-box a.collapse {
display: block;
float: right;
}
.board-info {
display: flex;
padding: 0;
align-content: center;
align-items: center;
margin: 0 0 1px;
/* gap: 3px; */
}
.board-info div {
margin: 0;
border-radius: 0;
align-self: stretch;
align-items: center;
align-content: center;
display: flex;
padding: 10px;
}
.board-info div.icon {
flex-basis: 6%;
text-align: center;
justify-content: center;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
margin: 0;
}
.board-info div.info {
flex-basis: 55%;
flex-grow: 3;
flex-wrap: wrap;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: 0;
padding-left: 0;
}
.board-info div.info > * {
flex-basis: 100%;
}
.board-info div.info h2.subject a {
color: var(--main-boards-title);
font-size: 1.1rem;
letter-spacing: 0.02em;
font-weight: 400;
}
a.moderation_link {
color: red !important;
}
.board-info div.info p {
padding: 0;
margin: 0;
}
.board-info div.info p.board_description {
margin-top: 1px;
font-weight: 300;
}
.board-info div.info div.children {
padding: 0;
margin: 2px 0 0;
}
.board-info div.info div.children a.dropdown-toggle {
border-radius: 5px;
padding: 1px 0;
text-decoration: none;
}
.board-info div.info div.children ul.dropdown-menu {
/* column-count: 2; */
/* column-gap: 10px; */
margin: 0;
padding: 0;
max-width: 400px;
width: auto;
}
.board-info div.info div.children ul.dropdown-menu li {
width: 100%;
display: block;
padding: 0;
font-size: 0.9rem;
margin: 0px;
}
.board-info div.info div.children ul.dropdown-menu li a {
text-decoration: none !important;
padding: 4px 7px;
display: block;
}
.board-info div.stats {
flex-basis: 14%;
justify-content: center;
flex-grow: 1;
}
.board-info div.stats span {
flex-basis: auto;
text-align: center;
font-size: 12pt;
flex-grow: 2;
display: block;
}
.board-info div.stats span > span.stat_type {
font-size: 0.7em;
}
.board-info div.lastpost {
flex-basis: 25%;
}
.board-info div.lastpost p {
margin: 0;
padding: 0;
flex-basis: 100%;
font-weight: 300;
font-size: 0.9em;
}
.board-info div.lastpost p > img.avatar_dot {
margin: 0 10px 0 0;
}

/* Forum stats */
.forum_statistic_block {
display: flex;
flex-direction: column;
padding: 10px 5px;
}
.forum_statistic_block span {
display: flex;
flex-direction: row;
margin: 0 0 1px;
}
.forum_statistic_block span > span {
flex-basis: 50%;
}
.forum_statistic_block span > span.stat_value {
justify-content: flex-end;
}

/* Header */
header {
padding: 15px 30px;
margin: 0;
background: var(--header-bg);
}
header div#header_wrapper {
height: auto;
min-height: 100px;
display: flex;
align-items: stretch;
}
header div#header_wrapper > * {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
}
#header_wrapper, #nav_wrapper, #footer_wrapper {
margin: 0 auto;
}
#upper_section {
margin: 0;
padding: 0;
}
#search_news {
flex-direction: column-reverse !important;
align-items: flex-end;
gap: 10px;
}
#search_news .news {
text-align: right;
}
#search_news p {
margin: 0;
}
h1.forumtitle {
margin: 0;
float: none;
}

/* Navbar */
.navbar {
gap: 20px;
justify-content: flex-start;
flex-flow: row-reverse nowrap;
}
.navbar-brand {
flex-grow: 1;
}
#main_navbar {
background: var(--nav-bg);
}
.navbar.bg-light {
background-color: transparent !important;
padding: 8px 30px;
}
.navbar-nav .nav-link {
padding: 0;
display: flex;
align-items: center;
height: auto;
min-height: 35px;
border-radius: var(--nav-item-border-radius);
font-size: var(--nav-item-font-size);
}
.navbar-nav .nav-item a.nav-link,
.left_admmenu li a {
background: var(--nav--item-bg);
color: var(--nav-item-txt-color) !important;
padding: 0 15px;
}
.navbar-nav .nav-item a.nav-link:hover,
.left_admmenu li a:hover {
background: var(--nav--item-bg-hover);
color: var(--nav-item-txt-color-hover) !important;
}
.navbar-nav .nav-item.active a.nav-link,
.left_admmenu li a.active {
background: var(--nav--item-bg-active);
color: var(--nav-item-txt-color-active) !important;
font-weight: var(--nav-item-font-weight);
}
.dropdown-menu {
padding: 1px 0;
margin: 0 0;
background: var(--nav--dropdown-bg);
border-radius: var(--nav-dropdown-border-radius);
border-width: var(--nav-dropdown-border-width);
border-style: var(--nav-dropdown-border-style);
border-color: var(--nav-dropdown-border-color);
}
.dropdown-menu li a.dropdown-item {
background: var(--nav--dropdown-item-bg);
color: var(--nav-dropdown-item-txt-color);
font-size: 0.9em;
}
.dropdown-menu .dropdown-item.active, .dropdown-item:active {
background: var(--nav--dropdown-item-bg);
color: inherit;
}
.dropdown-menu li a.dropdown-item:hover {
background: var(--nav--dropdown-item-bg-hover);
color: var(--nav-dropdown-item-txt-color-hover);
}
/* Subnav */

/* Subnav */
.submenu-toggle {
float: right;
}
.submenu-toggle:hover {
text-decoration: none
}
.bg-subnav {
background-color: transparent;
padding: 5px;
}
#subnavbar ul li ul {
min-width: 220px;
}
#subnavbar ul li li {
margin: 0;
}
#subnavbar ul li li a {
padding: 5px 20px 5px 10px;
}
#subnavbar ul li li a span {
width: 16px;
}
#subnavbar .navbar-nav {
gap: 10px;
}
#subnavbar ul li {
margin: 0;
}
#subnavbar ul li.nav-item a.nav-link {
font-size: 0.9rem;
background: var(--buttonlist-bg);
color: var(--buttonlist-txt-color);
height: auto;
min-height: 30px;
padding: 0 10px;
border-radius: 4px;
font-size: 1em;
}
#subnavbar ul li.nav-item a.nav-link:hover{
background: var(--buttonlist-bg-hover);
color: var(--buttonlist-txt-color-hover);
}
#subnavbar ul li.nav-item.active a.nav-link{
font-weight: bold;
background: var(--buttonlist-bg-active);
color: var(--buttonlist-txt-color-active);
}
#subnavbar ul li.nav-item ul.dropdown-menu {
margin-top: 3px;
border-radius: var(--subnav-dropdown-border-radius);
border-width: var(--subnav-dropdown-border-width);
border-style: var(--subnav-dropdown-border-style);
border-color: var(--subnav-dropdown-border-color);
}

/* Topic List */
#message_index_jump_to {
display: inline-block;
}
.whos_viewing {
padding: 10px 25px;
}
.topics-list {
margin: 10px 0 5px;
}
.tl-info {
display: flex;
width: 100%;
flex-direction: column;
flex-wrap: wrap;
}
.tl-buttons {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
margin: 10px 0 5px;
}
.tl-buttons div {
flex-grow: 0;
flex-basis: auto;
}
.tl-buttons .buttonlist ul {
margin: 0;
padding: 0;
}
#topics-sort {
margin: 0;
}
.topic-info {
display: flex;
align-content: center;
align-items: center;
margin: 0 0 1px;
gap: 0;
}
.topic-info div {
margin: 0;
align-self: stretch;
align-items: center;
align-content: center;
display: flex;
padding: 10px;
}
.topic-info div.icon {
flex-basis: 5%;
margin: 0;
text-align: center;
justify-content: center;
padding: 0;
color: var(--primary-color);
}
.topic-info div.icon.approvebg,
.topic-info div.icon.approvetbg {
color: var(--status-approve-txt-color);
}
.topic-info div.icon.lockedbg {
color: var(--status-locked-txt-color);
}
.topic-info div.icon.stickybg {
color: var(--status-sticky-txt-color);
}
.topic-info div.icon i.fa {
display: block;
min-width: 40px;
}
.topic-info div.subject {
flex-basis: 50%;
}
.topic-info div.subject div {
flex-basis: 100%;
flex-wrap: wrap;
padding: 0;
margin: 0;
}
.topic-info div.subject div > h2 img {
vertical-align: bottom;
height: 16px;
width: 16px;
}
.topic-info div.subject div > * {
flex-basis: 100%;
width: 100%;
}
.topic-info div.subject div > p {
margin: 3px 0 0;
padding: 0;
}
.topic-info div.stats {
flex-basis: 15%;
justify-content: center;
gap: 5px;
}
.topic-info div.stats span {
flex-basis: auto;
text-align: center;
font-size: 12pt;
color: white;
flex-grow: 2;
display: block;
}
.topic-info div.stats span > span.total {
color: #919bb0;
font-size: 0.7em;
}
.topic-info div.lastpost {
flex-basis: 30%;
margin-right: 0;
}
.topic-info div.lastpost p {
width: 100%;
margin: 0;
display: flex;
align-items: center;
}
.topic-info div.lastpost p > img.avatar_dot {
margin: 0 10px 0 0;
}
.topic-info div.lastpost p > span.message {
flex-basis: 100%;
}
.lastpost a > img {
padding: 0 0 3px;
float: none;
display: inline-block;
}
.topic-info div.lastpost p > span.quickmod {
text-align: right;
flex-basis: 18%;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 2px;
}
.topic-info div.lastpost p > span.quickmod input {
margin-right: 5px;
}
.pagelinks {
float: left;
}

/* Ads management mod */
.ads-block {
display: block;
margin: 15px auto;
text-align: center;
}

/* Code and Quoteh */
code.bbc_code {
scrollbar-width: thin;
scrollbar-color: #8b96ad #ffffff;
background-color: #eff3fb;
border-style: solid;
border-width: 0 5px;
border-color: #8b96ad;
color: #768094;
}
blockquote.bbc_alternate_quote,
blockquote.bbc_standard_quote {
padding: 15px 10px;
border-style: solid;
border-width: 0 0 3px;
border-color: #b5c4cc;
background-color: #e0eef6;
color: #768094;
}
blockquote.bbc_alternate_quote {
background-color: #c6dde6;
border-color: #a2bcc5;
}
/* Poll */
#poll_options dl.options {
border-color: #d5d5d5;
}
/* Attachments */
.attachments {
border-color: #d5d5d5;
}
#newsfader {
margin: 0 0 10px;
}
ul.newsfader-block {
padding: 15px 10px !important;
margin: 0 0 5px !important;
}

/* User Info */
#user_info .nav-link {
padding: 0;
color: var(--secondary-color-acc);
font-weight: 700;
outline: none;
}
span.mod_attention {
background: var(--secondary-color);
position: absolute;
top: -8px;
left: 24px;
height: 20px;
line-height: 20px;
min-width: 20px;
text-align: center;
border-radius: 50%;
font-size: 0.8em;
font-weight: 700;
color: hsl(0, 0%, 90%)
}

/* Recent Posts */
dl#ic_recentposts {
margin: 0;
line-height: 20px;
}
dl#ic_recentposts dd,
dl#ic_recentposts dt {
float: none;
width: 100%;
text-align: left;
}
dl#ic_recentposts dd {
margin-bottom: 10px;
}

/* Footer */
footer {
background: var(--footer-bg);
height: auto;
min-height: 50px;
padding: 40px 0 20px;
color: var(--footer-txt-color);
}
footer a {
color: var(--footer-links-color) !important;
}
#footer_wrapper {
display: flex;
align-items: flex-start;
gap: 10px;
}

#footer_wrapper  ul.forum_copy,
#footer_wrapper ul.smf_copy {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-basis: 100%;
flex-direction: column;
}
#footer_wrapper ul.forum_copy {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
}
ul.forum_copy li.forum_socials ul {
display: flex;
margin: 10px 0;
list-style: none;
padding: 0;
gap: 15px;
font-size: 1.5em;
}
li.forum_socials ul li a {
color: var(--primary-color-acc);
}
li.forum_socials ul li a:hover,
li.forum_socials ul li a:focus {
color: var(--secondary-color-acc);
text-decoration: none;
}

/* Post View */
.post {
font-size: 110%;
}

/* Modal Login */
/* .modal-backdrop {
z-index: 1;
} */

a#back-to-top {
background-color: var(--secondary-color);
color: var(--primary-color-acc);
width: 35px;
height: 35px;
line-height: 35px;
border-radius: 100%;
text-align: center;
margin: 11px auto 0;
position: fixed;
right: 1%;
bottom: 10px;
box-shadow: 0px -1px 4px 0px rgba(118, 143, 155, 0.1);
display: none;
}


[Kindred]

1- please learn to use code tags
2- are you ignoring my posts?  Really...  because I have literally told you TWICE what you need to do.

USE THE BROWSER INPECTOR TOOL TO LOOK AT THE CSS OF YOUR SITE!!

[SMiFFER]

I had only time to respond to the other post so far.
I have never worked with the Inspector before, so I must take a bit more time for where you are sending me.
And then, in addition, because of that: What am I even looking for there? Too big a step. Too much expected. Too much to learn for only few days.

What is happening here is like someone brings in his car into a car repair station and asks for help and all he gets is being yelled at for not parking properly and the brake must not be pulled and the window is not clean enough and he must fix his car himself.

[Doug Heffernan]

What is happening here is like someone brings in his car into a car repair station and asks for help and all he gets is being yelled at for not parking properly and the brake must not be pulled and the window is not clean enough and he must fix his car himself.

This analogy is not corect. No one is yelling at you. You have received a lot of attention, but you keep wasting everyone's time by being vague and now developing an attitude too. Please keep in mind that everyone here trying to help you out is a volunteer and we are doing so on our own time and dime.

I have never worked with the Inspector before, so I must take a bit more time for where you are sending me.
And then, in addition, because of that: What am I even looking for there? Too big a step. Too much expected. Too much to learn for only few days.

You have been given the solution. What you do with it is up to you. And if you don't know the most basic stuff, it's not our fault. If you are not willing to learn on how to do things for yourself, then you might consider hiring someone to do it for you.

P.s. You are acting all irritated as if you are trying to help us, and not the other way around. That's not a smart move when you are asking for support pal. Just saying!

[Steve]

Okay, let's all take a breath. @SMiFFER has been around awhile so knows how to ask for support. and all of us know how to provide it. Having said that, SMIFFER, you do need to acknowledge the help that's being given to you. For example, if you're using Firefox, put your cursor over the problematic area, right-click and press q. That will bring up the inspection tool.

That will tell you where the area you want to change is. Change it IN the inspection tool until you get what you like. Keep in mind that the inspection tool does NOT make actual changes to the file. Once you find the color, etc. that you like, then you will have to go to the actual file and make the change (back it up first as always).

Hope this helps.

[Kindred]

What is happening here is like someone brings in his car into a car repair station and asks for help and all he gets is being yelled at for not parking properly and the brake must not be pulled and the window is not clean enough and he must fix his car himself.

No. What is happening is that you came to the mechanic with dirty windows and old windshield wipers... but you came in with a car (forum) that has been customized beyond the normal specs. (A custom theme)

I told you that the best way to deal with it is to read the auto user manual,  find what wipers needs to be used and change then yourself.

[Diego Andrés]

You can find the name of the theme in Admin > forum config > themes and layout.

[Sir Osis of Liver]

If you look in the theme directory, there's a theme_info.xml file that contains theme name, version, and author's name.