Forum Darkkmode

johnraff · 2024-03-20 08:30:18

Marens' latest Hydrogen-invert style is now available on the server.

And I'm pushing slow tweaks to Hydrogen-Dark to get it looking more like Crunchbang.

Last edited by johnraff (2024-03-20 09:54:14)

marens · 2024-03-20 12:34:34

johnraff wrote:

Marens' latest Hydrogen-invert style is now available on the server.
And I'm pushing slow tweaks to Hydrogen-Dark to get it looking more like Crunchbang.

Thanks.
I'm testing now and as far as I can see everything is working as expected.
Same as in my local css.

Good luck with the Hydrogen_Dark style.

marens · 2024-03-20 13:38:51

@johnraff

You can make a new Crunchbang-mobile style.
If you add this code to the end of the original Crunchbang.css, it will set the content to 90% zoom:

  body {
    zoom: 0.9 !important;
    -moz-transform: scale(0.9);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.9);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.9);
    -webkit-transform-origin: 0 0;
    transform: scale(0.9);
    transform-origin: 0 0;
  }

Maybe it will give a more usable 'Crunchbang-style' smartphone display?
Or zoom 95% (0.95)?

Last edited by marens (2024-03-20 14:09:16)

johnraff · 2024-03-25 05:55:07

I think the Hydrogen-Dark style is usable now.

Please check it out - I think it looks nice on both desktops and cellphones (and in between) and might be a good candidate for the default style.

It took longer to make than I expected. At first I thought it would be a simple search-replace on the Hydrogen colours, using those in Crunchbang, but there were many tricky subtle layout issues too. Especially, at intermediate sizes between a small cellphone and a full desktop, there were points where things looked a bit unbalanced, eg whether to display the logo, and at what size. Some other items are best not displayed on small screens.

Another nasty trap I discovered was with the Crunchbang style on a phone, the forum menu where Profile can be chosen to change the display theme, disappeared! That meant you were trapped in Crunchbang and the only way out was to enter the url in the browser top bar. So I fixed that in Crunchbang too (Bronto had already dealt with it in Crunchrex).

I think it now looks pretty much identical to Crunchbang in most situations, with what I thought were a couple of small improvements added.

One question remains: most themes use small icons here and there to mark various items, but Crunchbang's were still pointing to the CrunchBang website and no longer worked. Hydrogen-Dark is using icons from the SimpleXBlue style, but if people thought it looked better without any icons - as Crunchbang now is - that could be easily done too. I like it either way.

Döbbie03 · 2024-03-25 06:12:42

Looks pretty good.

Jimbo_G · 2024-03-25 08:46:41

I only really notice the icons next to "Email" and "Website" below the user's avatar; to be honest I prefer no icons but not really a big deal either way.

In Hydrogen-Dark in the Profile menu, the heading "Profile menu" and the username are in a serif font, it looks a bit weird...?

marens · 2024-03-25 13:38:59

Great job @johnraff, as expected of you.
It looks very nice.

johnraff wrote:

At first I thought it would be a simple search-replace on the Hydrogen colours, using those in Crunchbang.

I thought the same thing, and then I realized how difficult it is if you want a good result.

I'm currently testing a new style Hydrogen-night.
I love the Hydrogen style and try to keep the original color scheme but make it similar to the Crunchbang.

hhh · 2024-03-25 16:37:56

@marens, awesome, love the logo color!

marens · 2024-03-25 17:30:30

^ Thanks.
The logo looks a little different in reality.
I have a different approach for dark mode and use filters.
I created several logos to get the final look of the BL Forums page.

P.S.
I know you will easily make the same logo if needed.

marens · 2024-03-26 00:23:16

Testing is complete.
Now we have another new style, Hydrogen-night, which tries to preserve the basics of the Hydrogen style, but also looks a bit like Crunchbang.
Hydrogen-invert style is slightly improved.

I don't expect anything to change on this site and these are the finished versions.
I believe @johnraff will make them available on the server in a few days (when he has time).
I will try to make his job easier and give the complete files.

Hydrogen-invert.css:

/*
  Hydrogen.css + dark mode plugin (Hydrogen-invert.css)
*/
/*****************************************************************
1. INITIAL SETTINGS
*****************************************************************/

/* Limited Reset
----------------------------------------------------------------*/

html, body, .pun table, .pun div, .pun form, .pun p, .pun h1, .pun h2, .pun h3, .pun h4, .pun h5, .pun pre, .pun blockquote,
.pun ul, .pun ol, .pun li, .pun dl, .pun dt, .pun dd, .pun th, .pun td, .pun fieldset, .pun legend .pun img,
.pun abbr, .pun cite {
	border: 0;
	font-style: normal;
	font-weight: normal;
	margin: 0;
	padding: 0;
  text-rendering: optimizeLegibility;
}

.pun ul, .pun ol {
	list-style: none;
}

.pun select {
	padding-bottom: 1px;
	padding-top: 1px;
	padding-right: 1px;
}

/* Content Defaults
----------------------------------------------------------------*/

.pun {
	font: 81.25%/1.462em 'Open Sans', sans-serif;
}

.pun table, .pun td, .pun th, .pun input, .pun select, .pun optgroup, .pun legend {
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
}

.pun textarea {
  font-family: "Ubuntu Mono", monospace;
  font-size: 2em;
}

.pun pre, .pun code {
	font-family: "Ubuntu Mono", monospace;
	font-size: 1em;
}

.pun pre code {
	font-size: 1em;
}

.pun table {
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
	empty-cells: show;
	width: 100%;
}

.pun h1 {
	font:2.154em/1em 'Ubuntu';
	padding: 7px 0;
}

.pun h2, .pun .hd h2 {
	font: 1.462em/1em 'Ubuntu';
	padding: 7px 0;
}

.pun h3 {
	font-size: 1.154em;
	line-height: 1.267em;
	padding: 7px 0;
}

.pun h4 {
	font-size: 1.077em;
	font-weight: bold;
	padding: 7px 0;
}

.pun h5, .pun h6 {
	font-size: 1em;
	font-weight: bold;
	padding: 7px 0;
}

.pun p, .pun ul, .pun ol, .pun dl, .pun th, .pun td, .pun legend {
	padding: 7px 0;
}

.pun strong, .pun th, .pun span.warntext, .pun p.warntext {
	font-weight: 600;
}

.pun em {
	font-style: italic;
}

.pun a, .pun a:link, .pun a:visited {
	text-decoration: none;
}

.pun a:hover, .pun a:active, .pun a:focus {
	text-decoration: underline;
}

.pun .actions span {
	padding-left: 16px;
	padding-right: 8px;
	background: url(Air/img/bull.png) center left no-repeat;
	display: inline-block;
	line-height: normal;
}

/* Hidden Elements
----------------------------------------------------------------*/

#brdfooter h2, #brdstats h2, #debug h2, #brdstats .conl dt, #brdstats .conr dt, #modcontrols dt,
#searchlinks dt, div.postright h3, .pun .subscribelink span, #announce .hd, #reportform h2, #punmoderate #vf h2,
#punviewforum #vf h2, .pun .required strong span, .pun .icon div {
	display: block;
	overflow: hidden;
	position: absolute;
	text-indent: -9999em;
	width: 0;
}

/* Generic Float Clear
----------------------------------------------------------------*/

.pun .inbox, .pun #brdmain, .pun .crumbs, .pun .pagepost, .pun .block2col {
	min-height: 1px;
}

* html .pun .inbox, * html .pun #brdmain, * html .pun .infldset, * html .pun .crumbs, * html .pun .pagepost, * html .pun .block2col {
	display: inline-block;
}

* html .pun .inbox, * html .pun #bdrdmain, * html .pun .infldset, * html .pun .crumbs, * html .pun .pagepost, * html .pun .block2col {
	display: block;
}

.pun .inbox:after, .pun #brdmain:after, .pun .crumbs:after, .pun .pagepost:after, .pun .block2col:after {
	content: " ";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

.pun .block2col .inbox:after {
	content: none;
	clear: none;
}

.clearl {
	clear: left;
}


/*****************************************************************
2. COMMON STYLES
*****************************************************************/

/* Page Layout
----------------------------------------------------------------*/

.pun {
	max-width: 1070px;
	margin: 0 auto;
	padding: 30px 40px;
}

#punredirect, #punmaint {
	padding: 60px 20% 12px 20%;
}

#puninstall, #pundb_update {
	padding: 20px 10%;
}

.pun .punwrap {
	border: 1px solid;
	padding: 18px;
}

#punredirect h2, #punmaint h2 {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	margin-bottom: 3px;
}

* {
	scrollbar-width: thin;
	scrollbar-color: #2365B0 hsla(0,0%,100%,.1);
}

/* Section Spacing and Borders
----------------------------------------------------------------*/

#brdmain {
	border-style: solid none;
	border-width: 0px 0;
  border-color: #cad7e1;
	margin-bottom: 12px;
	padding: 0px 0;
}

#punindex #brdmain {
	padding-top: 0;
}

#punredirect #brdmain, #punmaint #brdmain {
	border: 0;
	margin: 0;
	padding: 0;
}

#brdstats {
	border-style: solid none none none;
	border-width: 0px 0 0 0;
  border-color: #cad7e1;
	margin-top: 0px;
	padding-top: 0px;
}

#quickpost {
	margin-top: 12px;
	padding-top: 12px;
}

#announce {
	border-style: solid none none none;
	border-width: 2px 0 0 0;
	padding-top: 3px;
}

/*****************************************************************
3. COMMON BOARD ELEMENTS
*****************************************************************/

/* Logo, Description and Main Menu
----------------------------------------------------------------*/

#brdtitle h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

#brddesc {
	border-top-style: dotted;
	border-top-width: 1px;
	padding: 10px 0;
}

#brddesc p {
	padding: 0;
}

#brdmenu ul {
	padding: 0;
  text-align:center;
}

#brdmenu li {
  display: inline-block;
  color: #000;
}

#brdmenu a:link, #brdmenu a:visited {
	border-right-style: solid;
	border-width: 1px;
	display: block;
	min-width: 60px;
	padding: 12px 16px 12px 8px;
	white-space: nowrap;
  text-align: center;
  font-weight: 300;
}

#brdmenu a:hover, #brmenu a:active, #brdmenu a:focus {
	text-decoration: underline;
  background: inherit;
}

img.logo {
  height:72px;
  padding:0;
  margin:0;
}

#brdtitle {
  text-align:center;
}

/* Welcome Box
----------------------------------------------------------------*/

#brdwelcome {
	padding: 6px 0;
}

#brdwelcome .conl, #brdwelcome .conr, #brdwelcome p, #brdwelcome li {
	display: inline;
	padding: 0;
}

#brdwelcome .conl {
  float: left;
}

#brdwelcome .conr {
  float: right;
}

#brdwelcome li span {
	background: url(Air/img/bull.png) center left no-repeat;
	padding-left: 18px;
	margin-right: 3px;
	display: inline-block;
	line-height: normal;
	white-space: nowrap;
}

#brdwelcome .conl li:first-child span {
	padding-left: 0;
	background: none;
}

/* Stats
----------------------------------------------------------------*/

#brdstats .conl {
	float: left;
}

#brdstats .conr {
	float: right;
	text-align: right;
}

#brdstats #onlinelist {
	border-top-style: dotted;
	border-top-width: 1px;
	clear: both;
}

#brdstats #onlinelist dt, #brdstats #onlinelist dd {
	display: inline;
}

/* Footer
----------------------------------------------------------------*/

.pun #modcontrols {
	border-style: none none dotted none;
	border-width: 0 0 1px 0;
	margin-bottom: 4px;
	text-align: center;
	width: 100%;
}

.pun #modcontrols dd {
	display: inline;
}

.pun #brdfooter #modcontrols dd span {
	background: url(Air/img/bull.png) center left no-repeat;
	display: inline-block;
	line-height: normal;
	padding-left: 18px;
	white-space: nowrap;
}

.pun #brdfooter .conl {
	float: left;
}

.pun #brdfooter .conr {
	text-align: right;
	float: right;
}

.pun #brdfooter #poweredby a {
	font-size: 1.077em;
	font-weight: bold;
}

.pun #brdfooter p#poweredby {
  line-height: 1.5;
}

.pun #brdfooter #qjump {
	padding-top: 5px;
}

.pun #brdfooter #qjump * {
	white-space: nowrap;
}

.pun #brdfooter #searchlinks dd span {
	background: url(Air/img/bull.png) center left no-repeat;
	display: inline-block;
	line-height: normal;
	padding-left: 18px;
	white-space: nowrap;
}

.pun #brdfooter #feedlinks {
	padding-bottom: 0;
}

.pun #brdfooter #feedlinks span {
	background: url(Air/img/feed.png) center left no-repeat;
	display: inline-block;
	padding-left: 18px;
	white-space: nowrap;
}

.pun #debugtime {
	border-style: dotted none none none;
	border-width: 1px 0 0 0;
	margin-top: 7px;
	text-align: center;
}

/* Breadcrumbs, Postlink, Pagination
----------------------------------------------------------------*/

.pun .linkst .inbox, .pun .linksb .inbox, .pun .postlinksb .inbox {
	overflow: hidden;
}

.pun .linksb, .pun .postlinksb, .pun .linkst, .pun .crumbs {
	clear: both;
	position: relative;
}

.pun .linkst .crumbs {
	font-family: "Ubuntu", sans-serif;
	font-size: 1.462em;
	line-height: 1.211em;
	padding: 6px 0;
  border-top: 1px solid rgb(202, 215, 225);
  border-bottom: 1px solid rgb(202, 215, 225);
}

.pun .linksb .crumbs, .pun .postlinksb .crumbs {
	font-family: "Ubuntu", sans-serif;
	font-size: 1.154em;
}

.pun .linkst .crumbsplus .pagepost {
	border-top-style: dotted;
	border-top-width: 0px;
}

.pun .linksb .crumbsplus .pagepost, .pun .postlinksb .crumbsplus .pagepost {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
}

.pun .postlinksb .crumbs {
	margin-right: 11em;
}

.pun .crumbs li {
	float: left;
	padding-right: 0.4em;
	white-space: nowrap;
}

.pun .crumbs li strong {
	font-weight: normal;
}

.pun .pagelink {
	float: left;
	white-space: nowrap;
}

.pun .pagelink strong, .pun .pagelink a, .pun .pagelink span.spacer {
	border-style: none none none solid;
	border-width: 0 0 0 1px;
	display: inline-block;
	padding: 0 12px 0 10px;
	margin-right: -6px;
}

.pun .pagelink .item1 {
	border: 0;
}

.pun .pagelink .pages-label {
	display: inline-block;
}

.pun .postlink {
	float: right;
	font-weight: 600;
	text-align: right;
}

.pun .modbuttons {
	float: right;
	padding: 5px 0 3px 0;
}

.pun .modbuttons input {
	margin-left: 8px;
}

.pun .subscribelink {
	position: absolute;
	right: 0;
	text-align: right;
	top: 33px;
}

#punindex .subscribelink {
	top: 0px;
}

#punindex .linksb {
	height: 12px;
	margin-bottom:12px;
}

/*****************************************************************
4. MAIN TABLES
*****************************************************************/

.pun #brdmain .blocktable {
	position: relative;
}

#punindex #brdmain .blocktable h2, #punsearch #vf h2 {
	font: 1em/1.462em "Open Sans", sans-serif;
	font-weight: bold;
	margin: 1px 1px 0 1px;
	padding-left: 8px;
	position: absolute;
	left: 0;
	white-space: nowrap;
	z-index: 100;
}

#punindex .blocktable th.tcl, #punsearch #vf th.tcl {
	font-size: 0;
	text-indent: -9999em;
}

.pun .blocktable .box {
	border-style: solid;
	border-width: 1px;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
}

* html .pun .blocktable .box {
	display: inline-block;
}

.pun .blocktable table {
	table-layout: fixed;
	margin-bottom: -1px;
}

.pun .blocktable th {
	padding: 7px 8px;
	border-style: none none solid none;
	border-width: 1px;
	text-align: left;
}

.pun .blocktable td {
	padding: 7px 8px;
	line-height: 1.3077em;
	border-style: none none solid none;
	border-width: 1px;
	text-align: left;
}

.pun .blocktable h3 {
	font-size: 1.077em;
	font-weight: 600;
	padding: 0;
}

.pun .blocktable p {
	padding: 0;
}

.pun .blocktable .tcl p {
	padding: 5px 0 0 0;
}

.pun .blocktable .tcl {
	width: auto;
}

.pun .blocktable .tc2, .pun .blocktable .tc3, .pun .blocktable .tcmod {
	padding-left: 0;
	padding-right: 0;
	text-align: center;
	width: 11%;
}

.pun .blocktable .tcr {
	width: 30%;
}

.pun .blocktable td .newtext, .pun .blocktable td .pagestext, .pun .blocktable td .byuser {
	white-space: nowrap;
}

.pun .blocktable .tcl h3 span.newtext {
	font-size: 0.929em;
	font-weight: normal;
}

.pun #vf td.tcl span.stickytext, .pun #vf td.tcl span.closedtext {
	font-size: 1em;
	font-weight: bold;
}

#punsearch #vf .tc2 {
	padding-left: 8px;
	padding-right: 8px;
	text-align: left;
	width: 18%;
}

#users1 .tcr {
	width: 25%;
}

#users1 .tc2 {
	padding-left: 8px;
	padding-right: 8px;
	text-align: left;
	width: 25%;
}

#debug {
	margin-top: 12px;
}

#debug .tcl {
	width: 10%;
}

#punredirect #debug .tcl, #punmaint #debug .tcl {
	width: 20%;
}

#debug .tcr {
	width: 90%;
	white-space: normal
}

#punindex .tcr .byuser {
	display: block
}

#punindex td.tc2, #punindex td.tc3, #punindex td.tcr, .pun #vf td.tc2, .pun #vf td.tc3,
.pun #vf td.tcr, #punindex td.tcl div.forumdesc, .pun #vf td.tcl span {
	font-size: 0.923em;
}

.pun #vf td.tcl a {
	font-weight: bold;
}

.pun #vf td.tcl span a {
	font-weight: normal;
}

.pun .blocktable .tclcon {
	min-height: 1px;
	overflow: hidden;
	padding: 0 11px 0 12px;
	position: relative;
}

.pun .blocktable .tclcon div {
	width: 100%;
	overflow: hidden;
}

.pun .icon {
	float: left;
  font-weight: 600;
  font-size: 1.077em;
}

div.icon::before {
  content: "■";
}

.pun .iposted .ipost {
	font-weight: bold;
	left: 0;
	padding-left: 4px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 8px;
}

/*****************************************************************
MAIN POSTS
*****************************************************************/

/* Structure
----------------------------------------------------------------*/

.pun .blockpost {
	border-style: solid;
	border-width: 1px;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
}

* html .pun .blockpost {
	display: inline-block;
}

.pun .blockpost h2 {
	font: 1em/1.462em "Open Sans", sans-serif;
	white-space: nowrap;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	height: 1.462em;
	padding: 0.538em 8px 0.538em 236px;
	font-weight: normal;
}

#punsearch .blockpost h2 {
	height: auto;
	padding-left: 36px;
	white-space: normal;
}

#punsearch .blockpost h2 span span {
	white-space: nowrap;
	display: inline-block;
	font: 1.077em "Trebuchet MS", "Open Sans", sans-serif;
}

#punsearch .blockpost .icon {
	position: absolute;
	top: 0;
	margin-top: -2.154em;
}

.pun .blockpost h2 .conr {
	float: right;
	text-align: right;
}

.pun .blockpost .inbox {
	float: right;
	position: relative;
	width: 100%;
}

.pun .blockpost .postbody, .pun .blockpost .postfoot {
	border-left-style: solid;
	border-left-width: 1px;
	float: right;
	margin-right: -218px;
	position: relative;
	text-align: left;
	width: 100%;
}

.pun .blockpost .postleft, .pun .blockpost .postfootleft {
	width: 194px;
	padding: 7px 12px 7px 12px;
	float: left;
	margin-left: -218px;
	position: relative;
}

.pun .blockpost .postleft dl {
	padding: 0;
}

#punviewtopic .blockpost dt, #punmoderate .blockpost dt {
	display: block;
	position: absolute;
	padding: 0.538em 0 0.538em 12px;
	height: 1.462em;
	top: -2.615em;
	left: 0;
	overflow: hidden;
	width: 206px;
}

.pun .blockpost dt strong {
	font-size: 1.231em;
	font-weight: bold;
}

.pun .blockpost .postleft dd {
	font-size: 0.923em;
}

.pun .blockpost .postleft .usertitle {
	padding: 4px 0 6px 0;
	font-size: 1em;
}

.pun .blockpost .postleft .postavatar {
	display: block;
	margin: 0 0 4px 0;
}

.pun .blockpost .postright {
	position: relative;
	padding: 4px 230px 7px 18px;
}

.pun .postmsg {
	width:100%;
	overflow: hidden;
	word-wrap: break-word;
}

.pun .blockpost .postfootright {
	position: relative;
	padding: 7px 230px 7px 18px;
	text-align: right;
}

.pun .postfoot p, .pun .postfoot ul {
	padding: 0;
}

.pun .blockpost .postfootright li {
	display: inline;
}

.pun .blockpost .postfootright li span {
	display: inline-block;
	padding-left: 16px;
	margin-left: 8px;
	line-height: normal;
	background: url(Air/img/bull.png) center left no-repeat;
  font-weight: 300;
}

.pun .blockpost .usercontacts {
	padding: 7px 0;
}

.pun .blockpost .usercontacts .email {
	background: url(Air/img/email.png) left 65% no-repeat;
	margin-right: 5px;
	padding-left: 21px;
	display: inline-block;
	line-height: normal;
}

.pun .blockpost .usercontacts .website {
	background: url(Air/img/ext.png) left 65% no-repeat;
	padding-left: 18px;
	display: inline-block;
	line-height: normal;
}

.pun .postsignature hr {
	border:none;
	height: 1px;
	margin-left: 0px;
	text-align: left;
}

/* Content (includes other user content)
----------------------------------------------------------------*/

.pun .usercontent {
	padding: 7px 0;
}

.pun .postmsg p, .pun .postmsg li, #punhelp p samp {
	font-family: "Open Sans", sans-serif;
}

.pun .usercontent h1, .pun .usercontent h2, .pun .usercontent h3,
.pun .usercontent h4, .pun .usercontent h5, .pun .usercontent h6 {
	padding: 7px 0 0 0;
}

#rules-block .usercontent h3
{
  padding: 7px 0 7px 0;
  font-weight: 600;
}

.pun .postmsg h5, #punhelp h5 {
	font-size: 1.231em;
	font-weight: bold;
	padding: 7px 0;
}

.pun .usercontent ul, .pun .postmsg ul {
	list-style: disc;
	padding: 4px 13px 4px 30px;
}

.pun .usercontent ol, .pun .postmsg ol {
	list-style: decimal;
	padding: 4px 13px 4px 30px;
}

.pun .usercontent ol.alpha, .pun .postmsg ol.alpha {
	list-style: lower-alpha;
}

.pun .usercontent li, .pun .postmsg li {
	padding: 0 3px;
}

.pun .usercontent li p, .pun .postmsg li p {
	padding: 0;
}

.pun span.bbu {
	text-decoration: underline;
}

.pun span.bbs, .pun del {
	text-decoration: line-through;
}

.pun .postmsg ins, #punhelp samp ins {
	text-decoration: none;
}

.pun .blockpost .postmsg .postedit {
	font-size: 0.857em;
}

.pun .blockform .postsignature, .pun .blockpost .postsignature {
	font-size: 0.923em;
}

.pun .codebox {
	border-style: solid;
	border-width: 1px;
  border-color: #b9c5ce;
	margin: 0.75em 1em;
	padding: 0;
}

.pun .quotebox {
	border-style: solid;
	border-width: 1px 1px 1px 3px;
	margin: 0.75em 1em;
	padding: 0 0.75em;
}

.pun .quotebox cite {
	display: block;
	padding: 0.75em 0 0 0;
	font-weight: bold;
	line-height: 1.462em;
}

.pun .quotebox blockquote {
	overflow: hidden;
	width: 100%;
}

.pun .codebox pre {
	overflow: auto;
	width: 100%;
	direction: ltr;
	text-align: left;
}

* html .pun .codebox pre {
	padding-bottom: 10px;
}

*:first-child+html .pun .codebox pre {
	padding-bottom: 10px;
}

.pun .codebox pre code {
	padding: 0.5em;
	white-space: pre;
}

.pun div[class*=codebox] pre code {
	display: inline-block;
}

* html .pun .codebox pre code {
	display: block;
}

.pun .codebox pre.vscroll {
	height: 32em;
	overflow: auto;
	overflow-y: auto
}

.pun .postmsg img, #punhelp samp img {
	vertical-align: text-top;
}

.pun .postmsg .postimg img {
	max-width: 98%;
	vertical-align: middle;
	margin: 7px 0.5em 7px 0;
	border: 1px solid #787878;
}

.pun .postmsg .postimg a:link img, .pun .postmsg .postimg a:visited img {
	border-style: solid;
	border-width: 2px;
}

/*****************************************************************
MAIN FORMS
*****************************************************************/

#punedit .blockform h2, #punpost .blockform h2, #postpreview h2, #posterror h2,
.pun #quickpost h2, .pun #reportform h2, #pundelete .blockform h2 {
	font: 1em/1.462em "Open Sans", sans-serif;
	font-weight: bold;
	white-space: nowrap;
	padding: 10px 19px 4px 37px;
	border: 0;
}

#punpost .blockform h2, #punedit .blockform h2,.pun #quickpost h2,
#pundelete .blockform h2 {
	margin: 1px 1px 0 1px;
	width: 25em;
	position: absolute;
	z-index: 100;
}

.pun #quickpost legend, #punpost legend, #punedit legend {
	width: 25em;
	overflow: hidden;
	white-space: nowrap;
}

.pun .blockform .box {
	border-style: solid;
	border-width: 1px;
	padding-bottom: 12px;
}

.pun #posterror {
	border-style: solid;
	border-width: 1px;
}

.pun #posterror .box {
	padding: 0 18px 12px 18px;
}

* html .pun .blockform .box, * html .pun #posterror {
	display: inline-block;
}

.pun .blockform .forminfo, .pun .error-info {
	padding: 12px 18px;
	border-style: solid;
	border-width: 1px;
	position: relative;
}

.pun .blockform .forminfo {
	margin-top: 12px;
}

#pundelete .blockform .forminfo {
	margin-top: 33px;
}

.pun .forminfo h3 {
	padding-bottom: 0;
}

.pun .error-list li {
	padding-left: 24px;
	background: url(Air/img/exclaim.png) center left no-repeat;
}

.pun .inform {
	padding: 0 18px;
}

.pun legend {
	font-weight: bold;
	padding: 10px 19px 4px 19px;
}

* html .pun legend {
	margin-left: -7px;
}

*:first-child+html .pun legend {
	margin-left: -7px;
}

.pun .infldset {
	border-style: solid;
	border-width: 1px;
	padding: 12px 18px;
}

#punregister #rules .infldset {
	padding: 5px 18px;
}

.pun fieldset p {
	padding: 0 0 7px 0;
	width: 100%;
}

.pun fieldset .usercontent p {
	padding: 7px 0;
}

.pun fieldset label {
	display: block;
	padding: 0 0 7px 0;
}

.pun label em {
	font-weight: normal;
	font-style: normal;
}

.pun .required strong {
	background: url(Air/img/asterisk.png) center right no-repeat;
	font-weight: normal;
	padding-right: 14px;
	white-space: pre;
	display: inline-block;
	line-height: normal;
}

.pun label input, .pun label select, .pun label textarea {
	margin-top: 2px;
}

.pun label.conl {
	display: inline-block;
	padding-right: 12px;
}

.pun form .buttons {
	padding: 8px 19px 8px 34px;
	margin-bottom: -12px;
}

.pun .blockform .buttons input {
	margin-right: 12px;
}

.pun .rbox {
	padding: 3px 0;
}

.pun .rbox label {
	padding: 3px 0 3px 1.75em;
	position: relative;
	min-height: 1px;
}

* html .pun .rbox label {
	text-indent: -3px;
	height: 1%;
}

.pun .rbox input {
	margin: 3px 0.75em 3px -1.75em;
	float: left;
	position: relative;
	vertical-align: middle;
	padding: 0;
	height: 1em;
	width: 1em;
}

.pun input[type=text], .pun select, .pun textarea {
	font-family: "Open Sans", sans-serif;
  font-size: 1em;
}

.pun textarea {
  font-family: "Ubuntu Mono", monospace;
  font-size: 1.3em;
}

.pun .txtarea textarea, .pun input.longinput {
	width: 98%;
}

.pun textarea {
	resize: vertical;
}

.pun #quickpost .txtarea {
	padding-right: 12px;
	position: relative;
}

.pun .blockform .bblinks {
	padding-top: 0;
}

.pun .blockform .bblinks li {
	display: inline;
}

.pun .blockform .bblinks li span {
	background: url(Air/img/help.png) center left no-repeat;
	margin-right: 8px;
	padding-left: 20px;
	display: inline-block;
}

.pun #quickpost .bblinks {
	padding-top: 0;
}

.pun #quickpost .bblinks li {
	display: inline;
}

.pun #login p.clearb {
	border-top-style: dotted;
	border-top-width: 1px;
	font-size: 0;
	height: 0;
	line-height: 0;
	margin-top: 7px;
	overflow: hidden;
	padding-bottom: 3px;
	padding-top: 7px;
	text-indent: -9999em;
	width: 100%;
}

.pun #postreview {
	padding-top: 12px;
}

.pun #postpreview, .pun #posterror {
	margin-bottom: 12px;
}

.pun #postpreview .postright {
	padding: 0;
}

.pun #postpreview .postbody {
	border-style: solid;
	border-width: 1px;
	float: none;
	margin: 0 18px 12px 18px;
	padding: 0;
	padding: 4px 18px 4px 18px;
	width: auto;
}

.pun span.email {
	background: url(Air/img/email.png) left 65% no-repeat;
	margin-right: 5px;
	padding-left: 21px;
	display: inline-block;
	line-height: normal;
}

.pun span.website {
	background: url(Air/img/ext.png) left 65% no-repeat;
	padding-left: 18px;
	display: inline-block;
	line-height: normal;
}

#punmisc #rules .box {
	border-style: solid;
	border-width: 1px;
	padding: 5px 18px;
}


#punhelp .box {
	border-style: solid;
	border-width: 1px;
	padding: 7px 12px;
}

.pun .multiselect {
	float: left;
	padding-bottom: 7px;
}

.pun .checklist {
	border-width: 1px;
	border-style: solid;
	max-height: 9em;
	width: 20em;
	overflow: auto;
	padding: 0.25em 0.5em;
	margin: 0.25em 16px 0 0.15em;
}

.pun .checklist legend {
	padding: 0;
}

.pun .checklist legend span {
	width: auto;
	max-width: 25em;
}

/*****************************************************************
PROFILES (+ ADMIN MENU)
*****************************************************************/

/* Profile / Admin
----------------------------------------------------------------*/

.pun .blockmenu {
	width: 13em;
	float: left;
	padding-bottom: 12px;
}

.pun .block2col .blockform, .pun .block2col .block {
	margin-left: 15em;
}

.pun .blockmenu .block2 {
	padding-top: 19px;
}

.pun .blockmenu ul {
	border-top-style: dotted;
	border-top-width: 1px;
	padding: 0;
}

.pun .blockmenu li {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	font-weight: bold;
	padding: 0;
}

.pun .blockmenu a:link, .pun .blockmenu a:visited {
	display: block;
	padding: 9px 6px 3px 6px;
	min-height: 1px;
	text-decoration: none;
}

* html .pun .blockmenu a:link,  * html .pun .blockmenu a:visited {
	height: 1%;
}

.pun .blockmenu a:hover, .pun .blockmenu a:active, .pun .blockmenu a:focus {
	text-decoration: none;
}

#viewprofile .box {
	border-style: solid;
	border-width: 1px;
	padding-bottom: 18px;
}

#viewprofile dt, #adstats dt {
	padding: 7px 0;
	position: absolute;
	width: 13em;
	left: 0;
}

#viewprofile dl {
	border-style: solid none none none;
	border-width: 1px;
	margin: 7px 0;
	padding: 0;
	width: 100%;
	position: relative;
}

#adintro, #adstats, #adalerts {
	border-style: solid;
	border-width: 1px;
	padding: 18px;
}

#adintro li span {
	display: inline-block;
	padding-left: 16px;
	margin-left: 8px;
	line-height: normal;
	background: url(Air/img/bull.png) center left no-repeat;
}

#adstats .inbox, #adintro .inbox, #adalerts p {
	border-style: solid;
	border-width: 1px;
	padding: 18px;
}

#adstats dl {
	margin: 0;
	padding: 0;
	width: 100%;
	position: relative;
}

#viewprofile dd, #adstats dd {
	border-style: none none solid none;
	border-width: 1px;
	padding: 7px 0 7px 13em;
}

/*****************************************************************
COLOUR SCHEME
*****************************************************************/

/* Basic defaults and Common Items
----------------------------------------------------------------*/

html, body, .pun {
	background: #f6f9fc;
	color: #4d4d4d;
}

.pun .punwrap {
	background: #fff;
	border-color: #cad7e1;
	color: #566579;
}

#brdtitle #brddesc, .pun .pagepost, #brdstats #onlinelist, #brdfooter #searchlinks, #brdfooter #modcontrols,
#punmaint h2, #punredirect h2, #adminconsole .submittop, .pun #debugtime, .pun .pagelink a, .pun .pagelink * {
	border-color: #b9c5ce;
}

.pun a, .pun a:link, .pun a:visited {
	color: #2365B0;
}

.pun a:hover, .pun a:active, .pun a:focus {
	color: #b50000;
}

.pun .postmsg .postimg a:link img, .pun .postmsg .postimg a:visited img {
	border-color: #22538a;
}

.pun .postmsg .postimg a:hover img, .pun .postmsg .postimg a:active img, .pun .postmsg .postimg a:focus img {
	border-color: #b50000;
}

/* Primary Navigation
----------------------------------------------------------------*/

#brdmenu {
	background: #fff;
}

#brdmenu a, #brdmenu a:link, #brdmenu a:visited {
	background: #fff;
	border-color: #fff;
	color: #4d4d4d;
}

#brdmenu a:hover, #brdmenu a:active, #brdmenu a:focus {
	border-color: #fff;
	color: #000;
}

/* Main Tables
----------------------------------------------------------------*/

.pun .blocktable .box {
	background: #fcfdfe;
	border-color: #b9c5ce #d9e1e7;
}

#punindex .blocktable h2, .pun #vf h2 {
	color: #357082;
}

#adminconsole fieldset th, #adminconsole fieldset td {
	background: #f6f9fc;
	border-color: #dfe6ee;
}

.pun #users1 h2 {
	background: #fff;
}

.pun .blocktable td {
	border-color: #dfe6ee;
}

.pun .blocktable th {
	background: #ebf1f5;
	border-color: #cad7e1;
	color: #357082;
}

.pun .blocktable td.tcl span.stickytext {
	color: #3399CC;
}

/* Main Posts
----------------------------------------------------------------*/

.pun .blockpost {
	background: #f6f9fc;
	border-color: #b9c5ce #d9e1e7;
}

.pun .blockpost h2 {
	background: #ebf1f5;
	border-color: #cad7e1;
	color: #357082;
}

.pun .blockpost .postbody, .pun .blockpost .postfoot {
	background: #fcfdfe;
	border-color: #dfe6ee;
}

.pun .blockpost .postfootright li {
	color: #fcfdfe;
}

.pun .postmsg, #punhelp code, #punhelp samp {
	color: #4d4d4d;
}

.pun .postsignature, .pun .postmsg .postedit {
	color: #566579;
}

.pun .quotebox {
	background: #f8f9f0;
	border-color: #7aadbd;
	color: #566579;
}

.pun .quotebox cite {
	color: #357082;
}

.pun .codebox, #punhelp .codebox code {
	background: #ebf1f5;
	color: #4d4d4d;
}

.pun .postmsg hr {
	background: #b9c5ce;
}

.pun .postmsg ins, #punhelp samp ins {
	background-color: #ff0;
}

/* Main Forms + Profile
----------------------------------------------------------------*/

.pun .blockform .box, #adstats, #adintro, #adalerts, #postpreview, #posterror {
	border-color: #b9c5ce #d9e1e7;
	background: #ebf1f5;
}

#punmisc #rules .box, #punhelp .box {
	border-color: #b9c5ce #d9e1e7;
	background: #f6f9fc;
}

.pun #quickpost h2, #punpost .blockform h2, #punedit .blockform h2, #posterror h2,
#pundelete .blockform h2 {
	background: #ebf1f5;
	color: #357082;
}

.pun .forminfo {
	background: #fff;
	border-color: #dfe6ee;
}

#puninstall form#install .forminfo {
	background: #44699c;
	color: #fff;
}

.pun #posterror .error-info, .pun #adalerts p {
	background: #ffffe1;
	border-color: #dfe6ee;
}

#puninstall form#install .error-info {
	background: #ffffe1;
	border-color: #dfe6ee;
	color: #4d4d4d;
}

.pun .infldset, #adintro .inbox, #adstats .inbox {
	background: #f6f9fc;
	border-color: #dfe6ee;
}

.pun label, .pun legend, #adminconsole fieldset th {
	color: #357082;
}

.pun fieldset p {
	border-color: #b9c5ce;
}

.pun .blockmenu ul, .pun .blockmenu li {
	border-color: #b9c5ce;
}

.pun .blockmenu a:hover, .pun .blockmenu a:active, .pun .blockmenu a:focus {
	background: #ffffe6;
}

.pun .blockmenu .isactive a:link, .pun .blockmenu .isactive a:visited {
	color: #4d4d4d;
	background: #f6f9fc;
	}

.pun #viewprofile .box {
	border-color: #b9c5ce #d9e1e7;
	background: #ebf1f5;
}

.pun #viewprofile dt, #adstats dt {
	color: #357082;
}

.pun #viewprofile dl, .pun #viewprofile dd, #adstats dl, #adstats dd {
	border-color: #dfe6ee;
}

#adminconsole fieldset td.nodefault {
	background: #d59b9b;
}

.pun .multiselect {
	color: #357082;
}

.pun .checklist {
	background: white;
	border-color: #ccc;
}

/* Status Indicators
----------------------------------------------------------------*/

.pun .icon {
	border-color: #e8ecf1 #d4d9dd #dfe3e8 #e8ecf1;
  color: #d4d4d4;
}

.pun .iredirect .icon {
	border-color: #b9c5ce;
	border-width: 1px;
	padding: 7px;
}

.pun .inew .icon {
	border-color: #91b3d9 #87a8d1 #6c85bb #7292c3;
  color: #b30000;
}

.modlist {
  display:none;
}

div.forumdesc {
  margin: 2px 0 0 0;
}

div#announce-block {
  background-color: rgba(224,255,186,.4);
  padding: 0px 20px;
  margin: 5px 0px 10px 0px;
  border: 1px solid #00aa00;
}	

#announce {
  border: none;
}

@media all and (max-width:799px)
{
	.pun .blockmenu {
		width: 100%;
		float:none;
		display:block;
		padding-bottom: 0;
	}

	.pun .block2col .blockform, .pun .block2col .block {
		margin-left: 0em;
	}

	.punwrap #brdmain .blocktable .box .inbox table tbody tr td:nth-child(2),
	.punwrap #brdmain .blocktable .box .inbox table thead tr th:nth-child(2),
	.punwrap #brdmain .blocktable .box .inbox table tbody tr td:nth-child(3),
	.punwrap #brdmain .blocktable .box .inbox table thead tr th:nth-child(3),
	.punwrap #brdmain .blocktable .box .inbox table thead tr th:nth-child(3),
	.pun .postlinksb .crumbs,
	.punwrap .byuser, .punwrap #brdmain .byuser,
	#poweredby, #feedlinks,
	#qjump,
	.postfootleft,
	img.logo { display:none; }
	.pun { max-width:none; padding:0; }
	.pun .punwrap { padding:9px; }
	.pun .blockpost { background-color:#ebf1f5;}
	.pun .blockpost .postleft { width:0; padding:0; margin-left:0px; float:0; }
	.pun .blockpost .postleft dd, .postleft img  { display:none; }
	.pun .blockpost .postbody { border-left:none; float:right; margin-right:0px; }
	.pun .blockpost h2 .conr { display:none; }
	.pun .blockpost h2 { float:right; border-bottom:0;}
	.pun .blockpost .postright { padding:9px; margin-right:0px; }
	.pun .blockpost .postmsg p:first-child { padding-top:0; margin-top:0px;}
	.pun .blockpost .postbody { border-top: 1px solid #cad7e1; }
	.pun .blockpost .codebox { margin:0; }
	.pun .blockpost .quotebox { margin:5px; }
	.pun .blockpost .quotebox blockquote { margin-top:0.75em; }
	.pun .blockpost .postfoot { float:left; border:none; }
	.pun .blockpost .postfootright { padding:0; margin: 0 9px 9px 0;}
	.pun .blockpost .postfootright ul li span { padding:0; background:none; }
	.pun .inform { padding:0;}
	.pun #quickpost > h2 { display:none;}
	.pun .inform > fieldset > legend { display:none; }
	.pun #quickpost .txtarea { padding:5px; }
	.pun #quickpost .txtarea textarea { width:100%;border-radius:0px;}
	#ezbbctoolbar , .bblinks{ display:none ; }
	.pun .linkst .crumbs { font-size: inherit; }
	#brdmenu a:link { padding:0; min-width:0; }
	#brdmenu ul li { padding-right:5px;}
	#brdmenu ul li:last-child { border-right: none; }
	#brdwelcome > .conl { display:none; }
	#brdwelcome > .conr { float:left; }
	#brdwelcome li span { background:none; padding-left:0; }
	#brdstats .box .inbox dl:not(:last-child) { display:none; }
	.pun .postlinksb .crumbs { padding-bottom:5px;}
}

/****  Marens - BunsenLabs Forums Dark Mode for Hydrogen style  ****/

    /* Hydrogen-invert.css */
    
    html body {
      filter: invert(1) hue-rotate(195deg);
    }
    
    img, .usercontacts, .crumbs,
    #punindex td.tcr,
    .pun #vf td.tcr,
    .pun .blocktable .tclcon,
    tr.rowodd td.tc2 a,
    tr.roweven td.tc2 a,
    p.actions span a,
    li.postreport span a,
    li.postedit span a,
    li.postquote span a,
    .pagepost p.postlink.conr a,
    p.subscribelink.clearb a,
    li span a,
    form#edit p.buttons a,
    .pagepost p.pagelink.conl a,
    .pagepost p.pagelink a,
    .inbox dl#onlinelist.clearb dd a,
    .inbox dl.conl dd span a,
    .infldset p a,
    .infldset p.actions a,
    form#post p.buttons a,
    #brdmain > *.linkst > *.inbox p.pagelink a,
    #brdmain > *.linksb > *.inbox p.pagelink a,
    #users1.blocktable > *.box > *.inbox table tbody tr td.tcl a,
    #msg.block > *.box > *.inbox p a,
    #profile.block2col > *.blockmenu > *.box > *.inbox ul li a,
    #brdwelcome.inbox ul.conr li span a,
    #feedlinks, #poweredby a,
    
    /* Forum Rules/Register Page */
    .pun .usercontent ol,
    *[style*="color:red;"],
    *[style*="color:green;"],
    
    /* BBCode Page */
    samp ins,
    .inbox p samp a,
    *[style*="color: #ff0000"],
    *[style*="color: blue"] {
      filter: invert(1) hue-rotate(165deg);
    }
    
    /* Page Number */
    .pun .pagelink a, .pun .pagelink *,
    .pagepost p.pagelink a {
      border-color: transparent;
    }
    
    /* Path */
    .inbox.crumbsplus ol.crumbs,
    #punpost.pun > *.punwrap > *#brdmain > *.linkst > *.inbox ol.crumbs,
    #punedit.pun > *.punwrap > *#brdmain > *.linkst > *.inbox ol.crumbs,
    #punmisc.pun > *.punwrap > *#brdmain > *.linkst > *.inbox ol.crumbs {
      border-top: 1px solid #202020;
      border-bottom: 1px solid #202020;
    }
    
    /* More Pleasing to the Eyes */
    #punindex #brdmain .blocktable h2,
    #punsearch #vf h2,
    .pun #vf td.tcl span.stickytext,
    .pun #vf td.tcl a,
    .pun .blocktable h3,
    .inbox table thead tr {
      opacity: 0.9;
    }
        
    /* User Box */
    h2 span a:hover, h2 span a:active, h2 span a:focus,
    .blockpost .postsignature > * a:link {
      filter: invert(1) hue-rotate(165deg);
    }
    
    h2 span a:not(:hover, :focus, :active) {
      opacity: 0.8;
    }
    
    /* Profile Page */
    #profile.block2col > *.blockmenu > *.box > *.inbox ul li a,
    #profile.block2col > *.blockmenu > *.box > *.inbox ul li.isactive a {
      background: transparent;
    }
    
    #profile.block2col > *.blockmenu > *.box > *.inbox ul li.isactive a {
      color: #adadad;
    }    
    

    /* Keyboard Scroll Shortcuts Ctrl+PageUp/Down - Fix White Flash */
    /* Login Page - Fix the Bottom Part */
    
    html {
      background: #05060a;
    }
    
    /* LATEST */
    
    .icon.icon-new {
      filter: invert(1) hue-rotate(165deg);
    }
    
    .pun .postmsg .postimg img {
      opacity: 0.85;
    }
    
    .pun .quotebox {
      background: white;  /* Inverted White is Black */
    }

Hydrogen-night.css:

/*
  Hydrogen.css + dark mode plugin (Hydrogen-night.css)
*/
/*****************************************************************
1. INITIAL SETTINGS
*****************************************************************/

/* Limited Reset
----------------------------------------------------------------*/

html, body, .pun table, .pun div, .pun form, .pun p, .pun h1, .pun h2, .pun h3, .pun h4, .pun h5, .pun pre, .pun blockquote,
.pun ul, .pun ol, .pun li, .pun dl, .pun dt, .pun dd, .pun th, .pun td, .pun fieldset, .pun legend .pun img,
.pun abbr, .pun cite {
	border: 0;
	font-style: normal;
	font-weight: normal;
	margin: 0;
	padding: 0;
  text-rendering: optimizeLegibility;
}

.pun ul, .pun ol {
	list-style: none;
}

.pun select {
	padding-bottom: 1px;
	padding-top: 1px;
	padding-right: 1px;
}

/* Content Defaults
----------------------------------------------------------------*/

.pun {
	font: 81.25%/1.462em 'Open Sans', sans-serif;
}

.pun table, .pun td, .pun th, .pun input, .pun select, .pun optgroup, .pun legend {
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
}

.pun textarea {
  font-family: "Ubuntu Mono", monospace;
  font-size: 2em;
}

.pun pre, .pun code {
	font-family: "Ubuntu Mono", monospace;
	font-size: 1em;
}

.pun pre code {
	font-size: 1em;
}

.pun table {
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
	empty-cells: show;
	width: 100%;
}

.pun h1 {
	font:2.154em/1em 'Ubuntu';
	padding: 7px 0;
}

.pun h2, .pun .hd h2 {
	font: 1.462em/1em 'Ubuntu';
	padding: 7px 0;
}

.pun h3 {
	font-size: 1.154em;
	line-height: 1.267em;
	padding: 7px 0;
}

.pun h4 {
	font-size: 1.077em;
	font-weight: bold;
	padding: 7px 0;
}

.pun h5, .pun h6 {
	font-size: 1em;
	font-weight: bold;
	padding: 7px 0;
}

.pun p, .pun ul, .pun ol, .pun dl, .pun th, .pun td, .pun legend {
	padding: 7px 0;
}

.pun strong, .pun th, .pun span.warntext, .pun p.warntext {
	font-weight: 600;
}

.pun em {
	font-style: italic;
}

.pun a, .pun a:link, .pun a:visited {
	text-decoration: none;
}

.pun a:hover, .pun a:active, .pun a:focus {
	text-decoration: underline;
}

.pun .actions span {
	padding-left: 16px;
	padding-right: 8px;
	background: url(Air/img/bull.png) center left no-repeat;
	display: inline-block;
	line-height: normal;
}

/* Hidden Elements
----------------------------------------------------------------*/

#brdfooter h2, #brdstats h2, #debug h2, #brdstats .conl dt, #brdstats .conr dt, #modcontrols dt,
#searchlinks dt, div.postright h3, .pun .subscribelink span, #announce .hd, #reportform h2, #punmoderate #vf h2,
#punviewforum #vf h2, .pun .required strong span, .pun .icon div {
	display: block;
	overflow: hidden;
	position: absolute;
	text-indent: -9999em;
	width: 0;
}

/* Generic Float Clear
----------------------------------------------------------------*/

.pun .inbox, .pun #brdmain, .pun .crumbs, .pun .pagepost, .pun .block2col {
	min-height: 1px;
}

* html .pun .inbox, * html .pun #brdmain, * html .pun .infldset, * html .pun .crumbs, * html .pun .pagepost, * html .pun .block2col {
	display: inline-block;
}

* html .pun .inbox, * html .pun #bdrdmain, * html .pun .infldset, * html .pun .crumbs, * html .pun .pagepost, * html .pun .block2col {
	display: block;
}

.pun .inbox:after, .pun #brdmain:after, .pun .crumbs:after, .pun .pagepost:after, .pun .block2col:after {
	content: " ";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

.pun .block2col .inbox:after {
	content: none;
	clear: none;
}

.clearl {
	clear: left;
}


/*****************************************************************
2. COMMON STYLES
*****************************************************************/

/* Page Layout
----------------------------------------------------------------*/

.pun {
	max-width: 1070px;
	margin: 0 auto;
	padding: 30px 40px;
}

#punredirect, #punmaint {
	padding: 60px 20% 12px 20%;
}

#puninstall, #pundb_update {
	padding: 20px 10%;
}

.pun .punwrap {
	border: 1px solid;
	padding: 18px;
}

#punredirect h2, #punmaint h2 {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	margin-bottom: 3px;
}

* {
	scrollbar-width: thin;
	scrollbar-color: #2365B0 hsla(0,0%,100%,.1);
}

/* Section Spacing and Borders
----------------------------------------------------------------*/

#brdmain {
	border-style: solid none;
	border-width: 0px 0;
  border-color: #cad7e1;
	margin-bottom: 12px;
	padding: 0px 0;
}

#punindex #brdmain {
	padding-top: 0;
}

#punredirect #brdmain, #punmaint #brdmain {
	border: 0;
	margin: 0;
	padding: 0;
}

#brdstats {
	border-style: solid none none none;
	border-width: 0px 0 0 0;
  border-color: #cad7e1;
	margin-top: 0px;
	padding-top: 0px;
}

#quickpost {
	margin-top: 12px;
	padding-top: 12px;
}

#announce {
	border-style: solid none none none;
	border-width: 2px 0 0 0;
	padding-top: 3px;
}

/*****************************************************************
3. COMMON BOARD ELEMENTS
*****************************************************************/

/* Logo, Description and Main Menu
----------------------------------------------------------------*/

#brdtitle h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

#brddesc {
	border-top-style: dotted;
	border-top-width: 1px;
	padding: 10px 0;
}

#brddesc p {
	padding: 0;
}

#brdmenu ul {
	padding: 0;
  text-align:center;
}

#brdmenu li {
  display: inline-block;
  color: #000;
}

#brdmenu a:link, #brdmenu a:visited {
	border-right-style: solid;
	border-width: 1px;
	display: block;
	min-width: 60px;
	padding: 12px 16px 12px 8px;
	white-space: nowrap;
  text-align: center;
  font-weight: 300;
}

#brdmenu a:hover, #brmenu a:active, #brdmenu a:focus {
	text-decoration: underline;
  background: inherit;
}

img.logo {
  height:72px;
  padding:0;
  margin:0;
}

#brdtitle {
  text-align:center;
}

/* Welcome Box
----------------------------------------------------------------*/

#brdwelcome {
	padding: 6px 0;
}

#brdwelcome .conl, #brdwelcome .conr, #brdwelcome p, #brdwelcome li {
	display: inline;
	padding: 0;
}

#brdwelcome .conl {
  float: left;
}

#brdwelcome .conr {
  float: right;
}

#brdwelcome li span {
	background: url(Air/img/bull.png) center left no-repeat;
	padding-left: 18px;
	margin-right: 3px;
	display: inline-block;
	line-height: normal;
	white-space: nowrap;
}

#brdwelcome .conl li:first-child span {
	padding-left: 0;
	background: none;
}

/* Stats
----------------------------------------------------------------*/

#brdstats .conl {
	float: left;
}

#brdstats .conr {
	float: right;
	text-align: right;
}

#brdstats #onlinelist {
	border-top-style: dotted;
	border-top-width: 1px;
	clear: both;
}

#brdstats #onlinelist dt, #brdstats #onlinelist dd {
	display: inline;
}

/* Footer
----------------------------------------------------------------*/

.pun #modcontrols {
	border-style: none none dotted none;
	border-width: 0 0 1px 0;
	margin-bottom: 4px;
	text-align: center;
	width: 100%;
}

.pun #modcontrols dd {
	display: inline;
}

.pun #brdfooter #modcontrols dd span {
	background: url(Air/img/bull.png) center left no-repeat;
	display: inline-block;
	line-height: normal;
	padding-left: 18px;
	white-space: nowrap;
}

.pun #brdfooter .conl {
	float: left;
}

.pun #brdfooter .conr {
	text-align: right;
	float: right;
}

.pun #brdfooter #poweredby a {
	font-size: 1.077em;
	font-weight: bold;
}

.pun #brdfooter p#poweredby {
  line-height: 1.5;
}

.pun #brdfooter #qjump {
	padding-top: 5px;
}

.pun #brdfooter #qjump * {
	white-space: nowrap;
}

.pun #brdfooter #searchlinks dd span {
	background: url(Air/img/bull.png) center left no-repeat;
	display: inline-block;
	line-height: normal;
	padding-left: 18px;
	white-space: nowrap;
}

.pun #brdfooter #feedlinks {
	padding-bottom: 0;
}

.pun #brdfooter #feedlinks span {
	background: url(Air/img/feed.png) center left no-repeat;
	display: inline-block;
	padding-left: 18px;
	white-space: nowrap;
}

.pun #debugtime {
	border-style: dotted none none none;
	border-width: 1px 0 0 0;
	margin-top: 7px;
	text-align: center;
}

/* Breadcrumbs, Postlink, Pagination
----------------------------------------------------------------*/

.pun .linkst .inbox, .pun .linksb .inbox, .pun .postlinksb .inbox {
	overflow: hidden;
}

.pun .linksb, .pun .postlinksb, .pun .linkst, .pun .crumbs {
	clear: both;
	position: relative;
}

.pun .linkst .crumbs {
	font-family: "Ubuntu", sans-serif;
	font-size: 1.462em;
	line-height: 1.211em;
	padding: 6px 0;
  border-top: 1px solid rgb(202, 215, 225);
  border-bottom: 1px solid rgb(202, 215, 225);
}

.pun .linksb .crumbs, .pun .postlinksb .crumbs {
	font-family: "Ubuntu", sans-serif;
	font-size: 1.154em;
}

.pun .linkst .crumbsplus .pagepost {
	border-top-style: dotted;
	border-top-width: 0px;
}

.pun .linksb .crumbsplus .pagepost, .pun .postlinksb .crumbsplus .pagepost {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
}

.pun .postlinksb .crumbs {
	margin-right: 11em;
}

.pun .crumbs li {
	float: left;
	padding-right: 0.4em;
	white-space: nowrap;
}

.pun .crumbs li strong {
	font-weight: normal;
}

.pun .pagelink {
	float: left;
	white-space: nowrap;
}

.pun .pagelink strong, .pun .pagelink a, .pun .pagelink span.spacer {
	border-style: none none none solid;
	border-width: 0 0 0 1px;
	display: inline-block;
	padding: 0 12px 0 10px;
	margin-right: -6px;
}

.pun .pagelink .item1 {
	border: 0;
}

.pun .pagelink .pages-label {
	display: inline-block;
}

.pun .postlink {
	float: right;
	font-weight: 600;
	text-align: right;
}

.pun .modbuttons {
	float: right;
	padding: 5px 0 3px 0;
}

.pun .modbuttons input {
	margin-left: 8px;
}

.pun .subscribelink {
	position: absolute;
	right: 0;
	text-align: right;
	top: 33px;
}

#punindex .subscribelink {
	top: 0px;
}

#punindex .linksb {
	height: 12px;
	margin-bottom:12px;
}

/*****************************************************************
4. MAIN TABLES
*****************************************************************/

.pun #brdmain .blocktable {
	position: relative;
}

#punindex #brdmain .blocktable h2, #punsearch #vf h2 {
	font: 1em/1.462em "Open Sans", sans-serif;
	font-weight: bold;
	margin: 1px 1px 0 1px;
	padding-left: 8px;
	position: absolute;
	left: 0;
	white-space: nowrap;
	z-index: 100;
}

#punindex .blocktable th.tcl, #punsearch #vf th.tcl {
	font-size: 0;
	text-indent: -9999em;
}

.pun .blocktable .box {
	border-style: solid;
	border-width: 1px;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
}

* html .pun .blocktable .box {
	display: inline-block;
}

.pun .blocktable table {
	table-layout: fixed;
	margin-bottom: -1px;
}

.pun .blocktable th {
	padding: 7px 8px;
	border-style: none none solid none;
	border-width: 1px;
	text-align: left;
}

.pun .blocktable td {
	padding: 7px 8px;
	line-height: 1.3077em;
	border-style: none none solid none;
	border-width: 1px;
	text-align: left;
}

.pun .blocktable h3 {
	font-size: 1.077em;
	font-weight: 600;
	padding: 0;
}

.pun .blocktable p {
	padding: 0;
}

.pun .blocktable .tcl p {
	padding: 5px 0 0 0;
}

.pun .blocktable .tcl {
	width: auto;
}

.pun .blocktable .tc2, .pun .blocktable .tc3, .pun .blocktable .tcmod {
	padding-left: 0;
	padding-right: 0;
	text-align: center;
	width: 11%;
}

.pun .blocktable .tcr {
	width: 30%;
}

.pun .blocktable td .newtext, .pun .blocktable td .pagestext, .pun .blocktable td .byuser {
	white-space: nowrap;
}

.pun .blocktable .tcl h3 span.newtext {
	font-size: 0.929em;
	font-weight: normal;
}

.pun #vf td.tcl span.stickytext, .pun #vf td.tcl span.closedtext {
	font-size: 1em;
	font-weight: bold;
}

#punsearch #vf .tc2 {
	padding-left: 8px;
	padding-right: 8px;
	text-align: left;
	width: 18%;
}

#users1 .tcr {
	width: 25%;
}

#users1 .tc2 {
	padding-left: 8px;
	padding-right: 8px;
	text-align: left;
	width: 25%;
}

#debug {
	margin-top: 12px;
}

#debug .tcl {
	width: 10%;
}

#punredirect #debug .tcl, #punmaint #debug .tcl {
	width: 20%;
}

#debug .tcr {
	width: 90%;
	white-space: normal
}

#punindex .tcr .byuser {
	display: block
}

#punindex td.tc2, #punindex td.tc3, #punindex td.tcr, .pun #vf td.tc2, .pun #vf td.tc3,
.pun #vf td.tcr, #punindex td.tcl div.forumdesc, .pun #vf td.tcl span {
	font-size: 0.923em;
}

.pun #vf td.tcl a {
	font-weight: bold;
}

.pun #vf td.tcl span a {
	font-weight: normal;
}

.pun .blocktable .tclcon {
	min-height: 1px;
	overflow: hidden;
	padding: 0 11px 0 12px;
	position: relative;
}

.pun .blocktable .tclcon div {
	width: 100%;
	overflow: hidden;
}

.pun .icon {
	float: left;
  font-weight: 600;
  font-size: 1.077em;
}

div.icon::before {
  content: "■";
}

.pun .iposted .ipost {
	font-weight: bold;
	left: 0;
	padding-left: 4px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 8px;
}

/*****************************************************************
MAIN POSTS
*****************************************************************/

/* Structure
----------------------------------------------------------------*/

.pun .blockpost {
	border-style: solid;
	border-width: 1px;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
}

* html .pun .blockpost {
	display: inline-block;
}

.pun .blockpost h2 {
	font: 1em/1.462em "Open Sans", sans-serif;
	white-space: nowrap;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	height: 1.462em;
	padding: 0.538em 8px 0.538em 236px;
	font-weight: normal;
}

#punsearch .blockpost h2 {
	height: auto;
	padding-left: 36px;
	white-space: normal;
}

#punsearch .blockpost h2 span span {
	white-space: nowrap;
	display: inline-block;
	font: 1.077em "Trebuchet MS", "Open Sans", sans-serif;
}

#punsearch .blockpost .icon {
	position: absolute;
	top: 0;
	margin-top: -2.154em;
}

.pun .blockpost h2 .conr {
	float: right;
	text-align: right;
}

.pun .blockpost .inbox {
	float: right;
	position: relative;
	width: 100%;
}

.pun .blockpost .postbody, .pun .blockpost .postfoot {
	border-left-style: solid;
	border-left-width: 1px;
	float: right;
	margin-right: -218px;
	position: relative;
	text-align: left;
	width: 100%;
}

.pun .blockpost .postleft, .pun .blockpost .postfootleft {
	width: 194px;
	padding: 7px 12px 7px 12px;
	float: left;
	margin-left: -218px;
	position: relative;
}

.pun .blockpost .postleft dl {
	padding: 0;
}

#punviewtopic .blockpost dt, #punmoderate .blockpost dt {
	display: block;
	position: absolute;
	padding: 0.538em 0 0.538em 12px;
	height: 1.462em;
	top: -2.615em;
	left: 0;
	overflow: hidden;
	width: 206px;
}

.pun .blockpost dt strong {
	font-size: 1.231em;
	font-weight: bold;
}

.pun .blockpost .postleft dd {
	font-size: 0.923em;
}

.pun .blockpost .postleft .usertitle {
	padding: 4px 0 6px 0;
	font-size: 1em;
}

.pun .blockpost .postleft .postavatar {
	display: block;
	margin: 0 0 4px 0;
}

.pun .blockpost .postright {
	position: relative;
	padding: 4px 230px 7px 18px;
}

.pun .postmsg {
	width:100%;
	overflow: hidden;
	word-wrap: break-word;
}

.pun .blockpost .postfootright {
	position: relative;
	padding: 7px 230px 7px 18px;
	text-align: right;
}

.pun .postfoot p, .pun .postfoot ul {
	padding: 0;
}

.pun .blockpost .postfootright li {
	display: inline;
}

.pun .blockpost .postfootright li span {
	display: inline-block;
	padding-left: 16px;
	margin-left: 8px;
	line-height: normal;
	background: url(Air/img/bull.png) center left no-repeat;
  font-weight: 300;
}

.pun .blockpost .usercontacts {
	padding: 7px 0;
}

.pun .blockpost .usercontacts .email {
	background: url(Air/img/email.png) left 65% no-repeat;
	margin-right: 5px;
	padding-left: 21px;
	display: inline-block;
	line-height: normal;
}

.pun .blockpost .usercontacts .website {
	background: url(Air/img/ext.png) left 65% no-repeat;
	padding-left: 18px;
	display: inline-block;
	line-height: normal;
}

.pun .postsignature hr {
	border:none;
	height: 1px;
	margin-left: 0px;
	text-align: left;
}

/* Content (includes other user content)
----------------------------------------------------------------*/

.pun .usercontent {
	padding: 7px 0;
}

.pun .postmsg p, .pun .postmsg li, #punhelp p samp {
	font-family: "Open Sans", sans-serif;
}

.pun .usercontent h1, .pun .usercontent h2, .pun .usercontent h3,
.pun .usercontent h4, .pun .usercontent h5, .pun .usercontent h6 {
	padding: 7px 0 0 0;
}

#rules-block .usercontent h3
{
  padding: 7px 0 7px 0;
  font-weight: 600;
}

.pun .postmsg h5, #punhelp h5 {
	font-size: 1.231em;
	font-weight: bold;
	padding: 7px 0;
}

.pun .usercontent ul, .pun .postmsg ul {
	list-style: disc;
	padding: 4px 13px 4px 30px;
}

.pun .usercontent ol, .pun .postmsg ol {
	list-style: decimal;
	padding: 4px 13px 4px 30px;
}

.pun .usercontent ol.alpha, .pun .postmsg ol.alpha {
	list-style: lower-alpha;
}

.pun .usercontent li, .pun .postmsg li {
	padding: 0 3px;
}

.pun .usercontent li p, .pun .postmsg li p {
	padding: 0;
}

.pun span.bbu {
	text-decoration: underline;
}

.pun span.bbs, .pun del {
	text-decoration: line-through;
}

.pun .postmsg ins, #punhelp samp ins {
	text-decoration: none;
}

.pun .blockpost .postmsg .postedit {
	font-size: 0.857em;
}

.pun .blockform .postsignature, .pun .blockpost .postsignature {
	font-size: 0.923em;
}

.pun .codebox {
	border-style: solid;
	border-width: 1px;
  border-color: #b9c5ce;
	margin: 0.75em 1em;
	padding: 0;
}

.pun .quotebox {
	border-style: solid;
	border-width: 1px 1px 1px 3px;
	margin: 0.75em 1em;
	padding: 0 0.75em;
}

.pun .quotebox cite {
	display: block;
	padding: 0.75em 0 0 0;
	font-weight: bold;
	line-height: 1.462em;
}

.pun .quotebox blockquote {
	overflow: hidden;
	width: 100%;
}

.pun .codebox pre {
	overflow: auto;
	width: 100%;
	direction: ltr;
	text-align: left;
}

* html .pun .codebox pre {
	padding-bottom: 10px;
}

*:first-child+html .pun .codebox pre {
	padding-bottom: 10px;
}

.pun .codebox pre code {
	padding: 0.5em;
	white-space: pre;
}

.pun div[class*=codebox] pre code {
	display: inline-block;
}

* html .pun .codebox pre code {
	display: block;
}

.pun .codebox pre.vscroll {
	height: 32em;
	overflow: auto;
	overflow-y: auto
}

.pun .postmsg img, #punhelp samp img {
	vertical-align: text-top;
}

.pun .postmsg .postimg img {
	max-width: 98%;
	vertical-align: middle;
	margin: 7px 0.5em 7px 0;
	border: 1px solid #787878;
}

.pun .postmsg .postimg a:link img, .pun .postmsg .postimg a:visited img {
	border-style: solid;
	border-width: 2px;
}

/*****************************************************************
MAIN FORMS
*****************************************************************/

#punedit .blockform h2, #punpost .blockform h2, #postpreview h2, #posterror h2,
.pun #quickpost h2, .pun #reportform h2, #pundelete .blockform h2 {
	font: 1em/1.462em "Open Sans", sans-serif;
	font-weight: bold;
	white-space: nowrap;
	padding: 10px 19px 4px 37px;
	border: 0;
}

#punpost .blockform h2, #punedit .blockform h2,.pun #quickpost h2,
#pundelete .blockform h2 {
	margin: 1px 1px 0 1px;
	width: 25em;
	position: absolute;
	z-index: 100;
}

.pun #quickpost legend, #punpost legend, #punedit legend {
	width: 25em;
	overflow: hidden;
	white-space: nowrap;
}

.pun .blockform .box {
	border-style: solid;
	border-width: 1px;
	padding-bottom: 12px;
}

.pun #posterror {
	border-style: solid;
	border-width: 1px;
}

.pun #posterror .box {
	padding: 0 18px 12px 18px;
}

* html .pun .blockform .box, * html .pun #posterror {
	display: inline-block;
}

.pun .blockform .forminfo, .pun .error-info {
	padding: 12px 18px;
	border-style: solid;
	border-width: 1px;
	position: relative;
}

.pun .blockform .forminfo {
	margin-top: 12px;
}

#pundelete .blockform .forminfo {
	margin-top: 33px;
}

.pun .forminfo h3 {
	padding-bottom: 0;
}

.pun .error-list li {
	padding-left: 24px;
	background: url(Air/img/exclaim.png) center left no-repeat;
}

.pun .inform {
	padding: 0 18px;
}

.pun legend {
	font-weight: bold;
	padding: 10px 19px 4px 19px;
}

* html .pun legend {
	margin-left: -7px;
}

*:first-child+html .pun legend {
	margin-left: -7px;
}

.pun .infldset {
	border-style: solid;
	border-width: 1px;
	padding: 12px 18px;
}

#punregister #rules .infldset {
	padding: 5px 18px;
}

.pun fieldset p {
	padding: 0 0 7px 0;
	width: 100%;
}

.pun fieldset .usercontent p {
	padding: 7px 0;
}

.pun fieldset label {
	display: block;
	padding: 0 0 7px 0;
}

.pun label em {
	font-weight: normal;
	font-style: normal;
}

.pun .required strong {
	background: url(Air/img/asterisk.png) center right no-repeat;
	font-weight: normal;
	padding-right: 14px;
	white-space: pre;
	display: inline-block;
	line-height: normal;
}

.pun label input, .pun label select, .pun label textarea {
	margin-top: 2px;
}

.pun label.conl {
	display: inline-block;
	padding-right: 12px;
}

.pun form .buttons {
	padding: 8px 19px 8px 34px;
	margin-bottom: -12px;
}

.pun .blockform .buttons input {
	margin-right: 12px;
}

.pun .rbox {
	padding: 3px 0;
}

.pun .rbox label {
	padding: 3px 0 3px 1.75em;
	position: relative;
	min-height: 1px;
}

* html .pun .rbox label {
	text-indent: -3px;
	height: 1%;
}

.pun .rbox input {
	margin: 3px 0.75em 3px -1.75em;
	float: left;
	position: relative;
	vertical-align: middle;
	padding: 0;
	height: 1em;
	width: 1em;
}

.pun input[type=text], .pun select, .pun textarea {
	font-family: "Open Sans", sans-serif;
  font-size: 1em;
}

.pun textarea {
  font-family: "Ubuntu Mono", monospace;
  font-size: 1.3em;
}

.pun .txtarea textarea, .pun input.longinput {
	width: 98%;
}

.pun textarea {
	resize: vertical;
}

.pun #quickpost .txtarea {
	padding-right: 12px;
	position: relative;
}

.pun .blockform .bblinks {
	padding-top: 0;
}

.pun .blockform .bblinks li {
	display: inline;
}

.pun .blockform .bblinks li span {
	background: url(Air/img/help.png) center left no-repeat;
	margin-right: 8px;
	padding-left: 20px;
	display: inline-block;
}

.pun #quickpost .bblinks {
	padding-top: 0;
}

.pun #quickpost .bblinks li {
	display: inline;
}

.pun #login p.clearb {
	border-top-style: dotted;
	border-top-width: 1px;
	font-size: 0;
	height: 0;
	line-height: 0;
	margin-top: 7px;
	overflow: hidden;
	padding-bottom: 3px;
	padding-top: 7px;
	text-indent: -9999em;
	width: 100%;
}

.pun #postreview {
	padding-top: 12px;
}

.pun #postpreview, .pun #posterror {
	margin-bottom: 12px;
}

.pun #postpreview .postright {
	padding: 0;
}

.pun #postpreview .postbody {
	border-style: solid;
	border-width: 1px;
	float: none;
	margin: 0 18px 12px 18px;
	padding: 0;
	padding: 4px 18px 4px 18px;
	width: auto;
}

.pun span.email {
	background: url(Air/img/email.png) left 65% no-repeat;
	margin-right: 5px;
	padding-left: 21px;
	display: inline-block;
	line-height: normal;
}

.pun span.website {
	background: url(Air/img/ext.png) left 65% no-repeat;
	padding-left: 18px;
	display: inline-block;
	line-height: normal;
}

#punmisc #rules .box {
	border-style: solid;
	border-width: 1px;
	padding: 5px 18px;
}


#punhelp .box {
	border-style: solid;
	border-width: 1px;
	padding: 7px 12px;
}

.pun .multiselect {
	float: left;
	padding-bottom: 7px;
}

.pun .checklist {
	border-width: 1px;
	border-style: solid;
	max-height: 9em;
	width: 20em;
	overflow: auto;
	padding: 0.25em 0.5em;
	margin: 0.25em 16px 0 0.15em;
}

.pun .checklist legend {
	padding: 0;
}

.pun .checklist legend span {
	width: auto;
	max-width: 25em;
}

/*****************************************************************
PROFILES (+ ADMIN MENU)
*****************************************************************/

/* Profile / Admin
----------------------------------------------------------------*/

.pun .blockmenu {
	width: 13em;
	float: left;
	padding-bottom: 12px;
}

.pun .block2col .blockform, .pun .block2col .block {
	margin-left: 15em;
}

.pun .blockmenu .block2 {
	padding-top: 19px;
}

.pun .blockmenu ul {
	border-top-style: dotted;
	border-top-width: 1px;
	padding: 0;
}

.pun .blockmenu li {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	font-weight: bold;
	padding: 0;
}

.pun .blockmenu a:link, .pun .blockmenu a:visited {
	display: block;
	padding: 9px 6px 3px 6px;
	min-height: 1px;
	text-decoration: none;
}

* html .pun .blockmenu a:link,  * html .pun .blockmenu a:visited {
	height: 1%;
}

.pun .blockmenu a:hover, .pun .blockmenu a:active, .pun .blockmenu a:focus {
	text-decoration: none;
}

#viewprofile .box {
	border-style: solid;
	border-width: 1px;
	padding-bottom: 18px;
}

#viewprofile dt, #adstats dt {
	padding: 7px 0;
	position: absolute;
	width: 13em;
	left: 0;
}

#viewprofile dl {
	border-style: solid none none none;
	border-width: 1px;
	margin: 7px 0;
	padding: 0;
	width: 100%;
	position: relative;
}

#adintro, #adstats, #adalerts {
	border-style: solid;
	border-width: 1px;
	padding: 18px;
}

#adintro li span {
	display: inline-block;
	padding-left: 16px;
	margin-left: 8px;
	line-height: normal;
	background: url(Air/img/bull.png) center left no-repeat;
}

#adstats .inbox, #adintro .inbox, #adalerts p {
	border-style: solid;
	border-width: 1px;
	padding: 18px;
}

#adstats dl {
	margin: 0;
	padding: 0;
	width: 100%;
	position: relative;
}

#viewprofile dd, #adstats dd {
	border-style: none none solid none;
	border-width: 1px;
	padding: 7px 0 7px 13em;
}

/*****************************************************************
COLOUR SCHEME
*****************************************************************/

/* Basic defaults and Common Items
----------------------------------------------------------------*/

html, body, .pun {
	background: #f6f9fc;
	color: #4d4d4d;
}

.pun .punwrap {
	background: #fff;
	border-color: #cad7e1;
	color: #566579;
}

#brdtitle #brddesc, .pun .pagepost, #brdstats #onlinelist, #brdfooter #searchlinks, #brdfooter #modcontrols,
#punmaint h2, #punredirect h2, #adminconsole .submittop, .pun #debugtime, .pun .pagelink a, .pun .pagelink * {
	border-color: #b9c5ce;
}

.pun a, .pun a:link, .pun a:visited {
	color: #2365B0;
}

.pun a:hover, .pun a:active, .pun a:focus {
	color: #b50000;
}

.pun .postmsg .postimg a:link img, .pun .postmsg .postimg a:visited img {
	border-color: #22538a;
}

.pun .postmsg .postimg a:hover img, .pun .postmsg .postimg a:active img, .pun .postmsg .postimg a:focus img {
	border-color: #b50000;
}

/* Primary Navigation
----------------------------------------------------------------*/

#brdmenu {
	background: #fff;
}

#brdmenu a, #brdmenu a:link, #brdmenu a:visited {
	background: #fff;
	border-color: #fff;
	color: #4d4d4d;
}

#brdmenu a:hover, #brdmenu a:active, #brdmenu a:focus {
	border-color: #fff;
	color: #000;
}

/* Main Tables
----------------------------------------------------------------*/

.pun .blocktable .box {
	background: #fcfdfe;
	border-color: #b9c5ce #d9e1e7;
}

#punindex .blocktable h2, .pun #vf h2 {
	color: #357082;
}

#adminconsole fieldset th, #adminconsole fieldset td {
	background: #f6f9fc;
	border-color: #dfe6ee;
}

.pun #users1 h2 {
	background: #fff;
}

.pun .blocktable td {
	border-color: #dfe6ee;
}

.pun .blocktable th {
	background: #ebf1f5;
	border-color: #cad7e1;
	color: #357082;
}

.pun .blocktable td.tcl span.stickytext {
	color: #3399CC;
}

/* Main Posts
----------------------------------------------------------------*/

.pun .blockpost {
	background: #f6f9fc;
	border-color: #b9c5ce #d9e1e7;
}

.pun .blockpost h2 {
	background: #ebf1f5;
	border-color: #cad7e1;
	color: #357082;
}

.pun .blockpost .postbody, .pun .blockpost .postfoot {
	background: #fcfdfe;
	border-color: #dfe6ee;
}

.pun .blockpost .postfootright li {
	color: #fcfdfe;
}

.pun .postmsg, #punhelp code, #punhelp samp {
	color: #4d4d4d;
}

.pun .postsignature, .pun .postmsg .postedit {
	color: #566579;
}

.pun .quotebox {
	background: #f8f9f0;
	border-color: #7aadbd;
	color: #566579;
}

.pun .quotebox cite {
	color: #357082;
}

.pun .codebox, #punhelp .codebox code {
	background: #ebf1f5;
	color: #4d4d4d;
}

.pun .postmsg hr {
	background: #b9c5ce;
}

.pun .postmsg ins, #punhelp samp ins {
	background-color: #ff0;
}

/* Main Forms + Profile
----------------------------------------------------------------*/

.pun .blockform .box, #adstats, #adintro, #adalerts, #postpreview, #posterror {
	border-color: #b9c5ce #d9e1e7;
	background: #ebf1f5;
}

#punmisc #rules .box, #punhelp .box {
	border-color: #b9c5ce #d9e1e7;
	background: #f6f9fc;
}

.pun #quickpost h2, #punpost .blockform h2, #punedit .blockform h2, #posterror h2,
#pundelete .blockform h2 {
	background: #ebf1f5;
	color: #357082;
}

.pun .forminfo {
	background: #fff;
	border-color: #dfe6ee;
}

#puninstall form#install .forminfo {
	background: #44699c;
	color: #fff;
}

.pun #posterror .error-info, .pun #adalerts p {
	background: #ffffe1;
	border-color: #dfe6ee;
}

#puninstall form#install .error-info {
	background: #ffffe1;
	border-color: #dfe6ee;
	color: #4d4d4d;
}

.pun .infldset, #adintro .inbox, #adstats .inbox {
	background: #f6f9fc;
	border-color: #dfe6ee;
}

.pun label, .pun legend, #adminconsole fieldset th {
	color: #357082;
}

.pun fieldset p {
	border-color: #b9c5ce;
}

.pun .blockmenu ul, .pun .blockmenu li {
	border-color: #b9c5ce;
}

.pun .blockmenu a:hover, .pun .blockmenu a:active, .pun .blockmenu a:focus {
	background: #ffffe6;
}

.pun .blockmenu .isactive a:link, .pun .blockmenu .isactive a:visited {
	color: #4d4d4d;
	background: #f6f9fc;
	}

.pun #viewprofile .box {
	border-color: #b9c5ce #d9e1e7;
	background: #ebf1f5;
}

.pun #viewprofile dt, #adstats dt {
	color: #357082;
}

.pun #viewprofile dl, .pun #viewprofile dd, #adstats dl, #adstats dd {
	border-color: #dfe6ee;
}

#adminconsole fieldset td.nodefault {
	background: #d59b9b;
}

.pun .multiselect {
	color: #357082;
}

.pun .checklist {
	background: white;
	border-color: #ccc;
}

/* Status Indicators
----------------------------------------------------------------*/

.pun .icon {
	border-color: #e8ecf1 #d4d9dd #dfe3e8 #e8ecf1;
  color: #d4d4d4;
}

.pun .iredirect .icon {
	border-color: #b9c5ce;
	border-width: 1px;
	padding: 7px;
}

.pun .inew .icon {
	border-color: #91b3d9 #87a8d1 #6c85bb #7292c3;
  color: #b30000;
}

.modlist {
  display:none;
}

div.forumdesc {
  margin: 2px 0 0 0;
}

div#announce-block {
  background-color: rgba(224,255,186,.4);
  padding: 0px 20px;
  margin: 5px 0px 10px 0px;
  border: 1px solid #00aa00;
}	

#announce {
  border: none;
}

@media all and (max-width:799px)
{
	.pun .blockmenu {
		width: 100%;
		float:none;
		display:block;
		padding-bottom: 0;
	}

	.pun .block2col .blockform, .pun .block2col .block {
		margin-left: 0em;
	}

	.punwrap #brdmain .blocktable .box .inbox table tbody tr td:nth-child(2),
	.punwrap #brdmain .blocktable .box .inbox table thead tr th:nth-child(2),
	.punwrap #brdmain .blocktable .box .inbox table tbody tr td:nth-child(3),
	.punwrap #brdmain .blocktable .box .inbox table thead tr th:nth-child(3),
	.punwrap #brdmain .blocktable .box .inbox table thead tr th:nth-child(3),
	.pun .postlinksb .crumbs,
	.punwrap .byuser, .punwrap #brdmain .byuser,
	#poweredby, #feedlinks,
	#qjump,
	.postfootleft,
	img.logo { display:none; }
	.pun { max-width:none; padding:0; }
	.pun .punwrap { padding:9px; }
	.pun .blockpost { background-color:#ebf1f5;}
	.pun .blockpost .postleft { width:0; padding:0; margin-left:0px; float:0; }
	.pun .blockpost .postleft dd, .postleft img  { display:none; }
	.pun .blockpost .postbody { border-left:none; float:right; margin-right:0px; }
	.pun .blockpost h2 .conr { display:none; }
	.pun .blockpost h2 { float:right; border-bottom:0;}
	.pun .blockpost .postright { padding:9px; margin-right:0px; }
	.pun .blockpost .postmsg p:first-child { padding-top:0; margin-top:0px;}
	.pun .blockpost .postbody { border-top: 1px solid #cad7e1; }
	.pun .blockpost .codebox { margin:0; }
	.pun .blockpost .quotebox { margin:5px; }
	.pun .blockpost .quotebox blockquote { margin-top:0.75em; }
	.pun .blockpost .postfoot { float:left; border:none; }
	.pun .blockpost .postfootright { padding:0; margin: 0 9px 9px 0;}
	.pun .blockpost .postfootright ul li span { padding:0; background:none; }
	.pun .inform { padding:0;}
	.pun #quickpost > h2 { display:none;}
	.pun .inform > fieldset > legend { display:none; }
	.pun #quickpost .txtarea { padding:5px; }
	.pun #quickpost .txtarea textarea { width:100%;border-radius:0px;}
	#ezbbctoolbar , .bblinks{ display:none ; }
	.pun .linkst .crumbs { font-size: inherit; }
	#brdmenu a:link { padding:0; min-width:0; }
	#brdmenu ul li { padding-right:5px;}
	#brdmenu ul li:last-child { border-right: none; }
	#brdwelcome > .conl { display:none; }
	#brdwelcome > .conr { float:left; }
	#brdwelcome li span { background:none; padding-left:0; }
	#brdstats .box .inbox dl:not(:last-child) { display:none; }
	.pun .postlinksb .crumbs { padding-bottom:5px;}
}

/****  Marens - BunsenLabs Forums Dark Mode for Hydrogen style  ****/
    
    /** Hydrogen-night.css **/
    
    html body {
      filter: invert(1) hue-rotate(195deg) contrast(80%) brightness(120%);
    }
    
    img, .usercontacts, .crumbs,
    #punindex td.tcr,
    .pun #vf td.tcr,
    .pun .blocktable .tclcon,
    tr.rowodd td.tc2 a,
    tr.roweven td.tc2 a,
    p.actions span a,
    li.postreport span a,
    li.postedit span a,
    li.postquote span a,
    .pagepost p.postlink.conr a,
    p.subscribelink.clearb a,
    li span a,
    form#edit p.buttons a,
    .pagepost p.pagelink.conl a,
    .pagepost p.pagelink a,
    .inbox dl#onlinelist.clearb dd a,
    .inbox dl.conl dd span a,
    .infldset p a,
    .infldset p.actions a,
    form#post p.buttons a,
    #brdmain > *.linkst > *.inbox p.pagelink a,
    #brdmain > *.linksb > *.inbox p.pagelink a,
    #users1.blocktable > *.box > *.inbox table tbody tr td.tcl a,
    #msg.block > *.box > *.inbox p a,
    #profile.block2col > *.blockmenu > *.box > *.inbox ul li a,
    #brdwelcome.inbox ul.conr li span a,
    #feedlinks, #poweredby a,
    
    /* Forum Rules/Register Page */
    .pun .usercontent ol,
    *[style*="color:red;"],
    *[style*="color:green;"],
    
    /* BBCode Page */
    samp ins,
    .inbox p samp a,
    *[style*="color: #ff0000"],
    *[style*="color: blue"] {
      filter: invert(1) hue-rotate(165deg);
    }
    
    /* Page Number */
    .pun .pagelink a, .pun .pagelink *,
    .pagepost p.pagelink a {
      border-color: transparent;
    }
    
    /* Path */
    .inbox.crumbsplus ol.crumbs,
    #punpost.pun > *.punwrap > *#brdmain > *.linkst > *.inbox ol.crumbs,
    #punedit.pun > *.punwrap > *#brdmain > *.linkst > *.inbox ol.crumbs,
    #punmisc.pun > *.punwrap > *#brdmain > *.linkst > *.inbox ol.crumbs {
      border-top: 1px solid #202020;
      border-bottom: 1px solid #202020;
    }
    
    /* More Pleasing to the Eyes */
    #punindex #brdmain .blocktable h2,
    #punsearch #vf h2,
    .pun #vf td.tcl span.stickytext,
    .pun #vf td.tcl a,
    .pun .blocktable h3,
    .inbox table thead tr {
      opacity: 0.9;
    }
        
    /* User Box */
    h2 span a:hover, h2 span a:active, h2 span a:focus,
    .blockpost .postsignature > * a:link {
      filter: invert(1) hue-rotate(165deg);
    }
    
    h2 span a:not(:hover, :focus, :active) {
      opacity: 0.8;
    }
    
    /* Profile Page */
    #profile.block2col > *.blockmenu > *.box > *.inbox ul li a,
    #profile.block2col > *.blockmenu > *.box > *.inbox ul li.isactive a {
      background: transparent;
    }
    
    #profile.block2col > *.blockmenu > *.box > *.inbox ul li.isactive a {
      color: #adadad;
    }    
    

    /* Keyboard Scroll Shortcuts Ctrl+PageUp/Down - Fix White Flash */
    /* Login Page - Fix the Bottom Part */
    
    html {
      background: #232329;
    }
    
    /* LATEST */
    
    .icon.icon-new {
      filter: invert(1) hue-rotate(165deg);
    }
    
    .pun .postmsg .postimg img {
      opacity: 0.85;
    }
    
    .pun .quotebox {
      background: white;  /* Inverted White is Black */
    }

johnraff · 2024-03-26 03:34:11

@marens thanks for the new work. I'll upload those files later today.

---

Jimbo_G wrote:

I only really notice the icons next to "Email" and "Website" below the user's avatar; to be honest I prefer no icons but not really a big deal either way.

I feel the same. I like it both with and without icons. Let's see if we get any more opinions...

---

In Hydrogen-Dark in the Profile menu, the heading "Profile menu" and the username are in a serif font, it looks a bit weird...?

Thanks for catching this. I don't see it on my computer because Firefox is set to use my choice of font and ignore the web page's setting. I haven't really looked at the existing fonts in the css file, but right now that html element <h2> has a font setting of:

font: 1.462em/1em 'Ubuntu';

Other places have a weird mixture of font settings like:

font: 90%/1.462em "PT Sans", Arial, Helvetica,'Open Sans', sans-serif;

or:

font: 1.077em "Trebuchet MS", "Open Sans", Helvetica, sans-serif

and:

font-family: 'Noto Sans', "PT Sans", 'Open Sans', Arial, Helvetica, sans-serif;

Ignoring the size, maybe it would be better to set the same list everywhere in the file, and not try to use different fonts for different places. Also including the default BL fonts (Noto Sans at least), which are pretty sure to be available, might be a good idea.

Or just setting the generic 'sans-serif' everywhere, relying on the user's setting in ~/.config/fontconfig/fonts.conf might work?

Last edited by johnraff (2024-03-26 04:22:15)

johnraff · 2024-03-26 11:27:36

Marens' Hydrogen-invert and Hydrogen-night styles are now available. Please check them out.

johnraff · 2024-03-26 11:35:58

New discovery for me: css Custom Properties. These behave like variables that you can set once at the top of the file and they'll be reused right through. It saves a lot of work if you want to eg switch the icons from one directory to another, or just switch them off. Should also be good for setting fonts.

html {
    --bg-bull: url(SimpleXBlue/img/bull.png);
    --bg-email: url(SimpleXBlue/img/email.png);
    --bg-feed: url(SimpleXBlue/img/feed.png);
    --bg-ext: url(SimpleXBlue/img/ext.png);
    --bg-exclaim: url(SimpleXBlue/img/exclaim.png);
    --bg-asterisk: url(SimpleXBlue/img/asterisk.png);
    --bg-help: url(SimpleXBlue/img/help.png);
}

and later:

.pun .actions span {
    padding-left: 16px;
    padding-right: 8px;
    background: var(--bg-bull) center left no-repeat;
    display: inline-block;
    line-height: normal;
}

See: https://css-tricks.com/a-complete-guide … roperties/

johnraff · 2024-03-27 08:20:28

Jimbo_G wrote:

In Hydrogen-Dark in the Profile menu, the heading "Profile menu" and the username are in a serif font, it looks a bit weird...?

I've tried to rationalize the fonts a bit - could you check if that serif font has gone now?

(On my Firefox I spent so long forcing it to use the fonts I wanted, and now I can't figure out how to get it to display the fonts set by the website. )

brontosaurusrex · 2024-03-27 08:22:46

@John, Could we rename this new themes with some sort of 'prefix', like 'new' or '2024' or something, so they are easier to find?

johnraff · 2024-03-27 08:34:05

So, I was forgetting that you guys (quite rightly ) don't have access to the server, so you can't read the current Hydrogen-Dark.css, except by using the Inspector in Firefox. Anyway, just for reference:
(The fonts lists are pretty random, so suggestions for improvement are welcome.)

/*
  Hydrogen-Dark.css
*/
/*****************************************************************
1. INITIAL SETTINGS
*****************************************************************/

/* Limited Reset
----------------------------------------------------------------*/
html {
    --bg-bull: url(SimpleXBlue/img/bull.png);
    --bg-email: url(SimpleXBlue/img/email.png);
    --bg-feed: url(SimpleXBlue/img/feed.png);
    --bg-ext: url(SimpleXBlue/img/ext.png);
    --bg-exclaim: url(SimpleXBlue/img/exclaim.png);
    --bg-asterisk: url(SimpleXBlue/img/asterisk.png);
    --bg-help: url(SimpleXBlue/img/help.png);
    --fonts-sans: 'Noto Sans', 'Liberation Sans', 'PT Sans', Freesans, 'Open Sans', Geneva, Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --fonts-serif: 'Noto serif', 'Liberation Serif', FreeSerif, 'Times New Roman', serif;
    --fonts-mono: 'Noto Mono', Hack, Inconsolata,'Liberation Mono', monospace;
}

html, body, .pun table, .pun div, .pun form, .pun p, .pun h1, .pun h2, .pun h3, .pun h4, .pun h5, .pun pre, .pun blockquote,
.pun ul, .pun ol, .pun li, .pun dl, .pun dt, .pun dd, .pun th, .pun td, .pun fieldset, .pun legend .pun img,
.pun abbr, .pun cite {
    border: 0;
    font-style: normal;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
}

.pun ul, .pun ol {
    list-style: none;
}

.pun select {
    padding-bottom: 1px;
    padding-top: 1px;
    padding-right: 1px;
}

/* Content Defaults
----------------------------------------------------------------*/

.pun {
    font: 90%/1.462em var(--fonts-sans, sans-serif);
}

.pun table, .pun td, .pun th, .pun input, .pun select, .pun optgroup, .pun legend {
    font-family: var(--fonts-sans, sans-serif));
    font-size: 1em;
}

/*
.pun textarea {
  font-family: "Ubuntu Mono", monospace;
  font-size: 2em;
}
*/

.pun pre, .pun code {
    font-family: var(--fonts-mono, monospace);
    font-size: 1em;
}

.pun pre code {
    font-size: 1em;
}

.pun table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
    empty-cells: show;
    width: 100%;
}

.pun h1 {
    font:2.154em/1em var(--fonts-sans, sans-serif);
    padding: 7px 0;
}

.pun h2, .pun .hd h2 {
    font: 1.462em/1em var(--fonts-sans, sans-serif);
    padding: 7px 0;
}

.pun h3 {
    font-size: 1.154em;
    line-height: 1.267em;
    padding: 7px 0;
}

.pun h4 {
    font-size: 1.077em;
    font-weight: bold;
    padding: 7px 0;
}

.pun h5, .pun h6 {
    font-size: 1em;
    font-weight: bold;
    padding: 7px 0;
}

.pun p, .pun ul, .pun ol, .pun dl, .pun th, .pun td, .pun legend {
    padding: 7px 0;
}

.pun strong, .pun th, .pun span.warntext, .pun p.warntext {
    font-weight: 600;
}

.pun em {
    font-style: italic;
}

.pun a, .pun a:link, .pun a:visited {
    text-decoration: none;
}

.pun a:hover, .pun a:active, .pun a:focus {
    text-decoration: underline;
}

.pun .actions span {
    padding-left: 16px;
    padding-right: 8px;
    background: var(--bg-bull) center left no-repeat;
    display: inline-block;
    line-height: normal;
}

/* Hidden Elements
----------------------------------------------------------------*/

#brdfooter h2, #brdstats h2, #debug h2, #brdstats .conl dt, #brdstats .conr dt, #modcontrols dt,
#searchlinks dt, div.postright h3, .pun .subscribelink span, #announce .hd, #reportform h2, #punmoderate #vf h2,
#punviewforum #vf h2, .pun .required strong span, .pun .icon div {
    display: block;
    overflow: hidden;
    position: absolute;
    text-indent: -9999em;
    width: 0;
}

/* Generic Float Clear
----------------------------------------------------------------*/

.pun .inbox, .pun #brdmain, .pun .crumbs, .pun .pagepost, .pun .block2col {
    min-height: 1px;
}

* html .pun .inbox, * html .pun #brdmain, * html .pun .infldset, * html .pun .crumbs, * html .pun .pagepost, * html .pun .block2col {
    display: inline-block;
}

* html .pun .inbox, * html .pun #bdrdmain, * html .pun .infldset, * html .pun .crumbs, * html .pun .pagepost, * html .pun .block2col {
    display: block;
}

.pun .inbox:after, .pun #brdmain:after, .pun .crumbs:after, .pun .pagepost:after, .pun .block2col:after {
    content: " ";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

.pun .block2col .inbox:after {
    content: none;
    clear: none;
}

.clearl {
    clear: left;
}


/*****************************************************************
2. COMMON STYLES
*****************************************************************/

/* Page Layout
----------------------------------------------------------------*/

.pun {
    max-width: 1070px;
    margin: 0 auto;
}

#punredirect, #punmaint {
    padding: 60px 20% 12px 20%;
}

#puninstall, #pundb_update {
    padding: 20px 10%;
}

#punredirect h2, #punmaint h2 {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    margin-bottom: 3px;
}


/* Section Spacing and Borders
----------------------------------------------------------------*/

#brdmain {
    border-style: solid none;
    border-width: 2px 0;
  /* border-color: #cad7e1; */
    margin-bottom: 12px;
    padding: 12px 0;
}

#punindex #brdmain {
    padding-top: 0;
}

#punredirect #brdmain, #punmaint #brdmain {
    border: 0;
    margin: 0;
    padding: 0;
}

#brdstats {
    border-style: solid none none none;
    border-width: 2px 0 0 0;
  /* border-color: #cad7e1; */
    margin-top: 24px;
    padding-top: 12px;
}

#quickpost {
    border-style: solid none none none;
    border-width: 2px 0 0 0;
    margin-top: 12px;
    padding-top: 12px;
}

#announce {
    border-style: solid none none none;
    border-width: 2px 0 0 0;
    padding-top: 3px;
}

/*****************************************************************
3. COMMON BOARD ELEMENTS
*****************************************************************/

/* Logo, Description and Main Menu
----------------------------------------------------------------*/

#brdtitle h1 {
  font-family: var(--fonts-sans, sans-serif);
  font-weight: 400;
}

#brddesc {
    border-top-style: dotted;
    border-top-width: 1px;
    padding: 10px 0;
}

#brddesc p {
    padding: 0;
}

#brdmenu {
    background: #191C1E;
    -webkit-box-shadow: 0px 2px 4px #151617;
    -moz-box-shadow: 0px 2px 4px #151617;
    box-shadow: 0px 2px 4px #151617;
}

#brdmenu ul {
    padding: 0;
  text-align:center;
}

#brdmenu li {
 /* display: inline-block;*/
 /* color: #000; */
}

#brdmenu a:link, #brdmenu a:visited {
    border-top-style: solid;
    border-width: 1px;
    display: block;
    min-width: 60px;
    padding: 10px 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    text-align: center;
    font-weight: 400;
}

#brdmenu a:hover, #brdmenu a:active, #brdmenu a:focus {
    text-decoration: underline;
  background: inherit;
}

img.logo {
  width:150px;
  padding:0;
  margin: 0 0 5px 0;
}

#brdtitle {
  text-align:center;
}

/* Welcome Box
----------------------------------------------------------------*/

#brdwelcome {
    padding: 20px 0;
}

#brdwelcome .conl, #brdwelcome .conr, #brdwelcome p, #brdwelcome li {
    display: inline;
    padding: 0;
}

#brdwelcome .conl {
  float: left;
}

#brdwelcome .conr {
  float: right;
}

#brdwelcome li span {

    background: var(--bg-bull) center left no-repeat;

    padding-left: 18px;
    margin-right: 3px;
    display: inline-block;
    line-height: normal;
    white-space: nowrap;
}

#brdwelcome .conl li:first-child span {
    padding-left: 0;
    background: none;
}

/* Stats
----------------------------------------------------------------*/

#brdstats .conl {
    float: left;
}

#brdstats .conr {
    float: right;
    text-align: right;
}

#brdstats #onlinelist {
    border-top-style: dotted;
    border-top-width: 1px;
    clear: both;
}

#brdstats #onlinelist dt, #brdstats #onlinelist dd {
    display: inline;
}

/* Footer
----------------------------------------------------------------*/

.pun #modcontrols {
    border-style: none none dotted none;
    border-width: 0 0 1px 0;
    margin-bottom: 4px;
    text-align: center;
    width: 100%;
}

.pun #modcontrols dd {
    display: inline;
}

.pun #brdfooter #modcontrols dd span {
    background: var(--bg-bull) center left no-repeat;
    display: inline-block;
    line-height: normal;
    padding-left: 12px;
    margin-right: 18px;
    white-space: nowrap;
}

.pun #brdfooter .conl {
    float: left;
}

.pun #brdfooter .conr {
    text-align: right;
    float: right;
}

.pun #brdfooter #poweredby a {
    font-size: 1.077em;
    font-weight: bold;
}

.pun #brdfooter p#poweredby {
  line-height: 1.5;
}

.pun #brdfooter #qjump {
    padding-top: 5px;
}

.pun #brdfooter #qjump * {
    white-space: nowrap;
}

.pun #brdfooter #searchlinks dd span {
    background: var(--bg-bull) center left no-repeat;
    display: inline-block;
    line-height: normal;
    padding-left: 18px;
    white-space: nowrap;
}

.pun #brdfooter #feedlinks {
    padding-bottom: 0;
}

.pun #brdfooter #feedlinks span {
    background: var(--bg-feed) center left no-repeat;
    display: inline-block;
    padding-left: 18px;
    white-space: nowrap;
}

.pun #debugtime {
    border-style: dotted none none none;
    border-width: 1px 0 0 0;
    margin-top: 7px;
    text-align: center;
}

/* Breadcrumbs, Postlink, Pagination
----------------------------------------------------------------*/

.pun .linkst .inbox, .pun .linksb .inbox, .pun .postlinksb .inbox {
    overflow: hidden;
}

.pun .linksb, .pun .postlinksb, .pun .linkst, .pun .crumbs {
    clear: both;
    position: relative;
}

.pun .linkst .crumbs {
    font-family: var(--fonts-sans, sans-serif);
    font-size: 1.462em;
    line-height: 1.211em;
    padding: 6px 0;
/*
    border-top: 1px solid rgb(202, 215, 225);
    border-bottom: 1px solid rgb(202, 215, 225);
*/
}

.pun .linksb .crumbs, .pun .postlinksb .crumbs {
    font-family: var(--fonts-sans, sans-serif);
    font-size: 1.154em;
}

.pun .linkst .crumbsplus .pagepost {
    border-top-style: dotted;
    border-top-width: 0px;
}

.pun .linksb .crumbsplus .pagepost, .pun .postlinksb .crumbsplus .pagepost {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

.pun .postlinksb .crumbs {
    margin-right: 11em;
}

.pun .crumbs li {
    float: left;
    padding-right: 0.4em;
    white-space: nowrap;
}

.pun .crumbs li strong {
    font-weight: normal;
}

.pun .pagelink {
    float: left;
    white-space: nowrap;
}

.pun .pagelink strong, .pun .pagelink a, .pun .pagelink span.spacer {
    border-style: none none none solid;
    border-width: 0 0 0 1px;
    display: inline-block;
    padding: 0 12px 0 10px;
    margin-right: -6px;
}

.pun .pagelink .item1 {
    border: 0;
}

.pun .pagelink .pages-label {
    display: inline-block;
}

.pun .postlink {
    float: right;
    font-weight: 600;
    text-align: right;
}

.pun .modbuttons {
    float: right;
    padding: 5px 0 3px 0;
}

.pun .modbuttons input {
    margin-left: 8px;
}

.pun .subscribelink {
    position: absolute;
    right: 0;
    text-align: right;
    top: 33px;
}

#punindex .subscribelink {
    top: 0px;
}

#punindex .linksb {
    height: 12px;
    margin-bottom:12px;
}

/*****************************************************************
4. MAIN TABLES
*****************************************************************/

.pun #brdmain .blocktable {
    position: relative;
}

#punindex #brdmain .blocktable h2, #punsearch #vf h2 {
    font: 1em/1.462em var(--fonts-sans, sans-serif);
    font-weight: bold;
    margin: 1px 1px 0 1px;
    padding-left: 8px;
    position: absolute;
    left: 0;
    white-space: nowrap;
    z-index: 100;
}

#punindex .blocktable th.tcl, #punsearch #vf th.tcl {
    font-size: 0;
    text-indent: -9999em;
}

.pun .blocktable .box {
    border-style: solid;
    border-width: 1px;
    margin-bottom: -1px;
    overflow: hidden;
    position: relative;
}

* html .pun .blocktable .box {
    display: inline-block;
}

.pun .blocktable table {
    table-layout: fixed;
    margin-bottom: -1px;
}

.pun .blocktable th {
    padding: 7px 8px;
    border-style: none none solid none;
    border-width: 1px;
    text-align: left;
}

.pun .blocktable td {
    padding: 7px 8px;
    line-height: 1.3077em;
    border-style: none none solid none;
    border-width: 1px;
    text-align: left;
}

.pun .blocktable h3 {
    font-size: 1.077em;
    font-weight: 600;
    padding: 0;
}

.pun .blocktable p {
    padding: 0;
}

.pun .blocktable .tcl p {
    padding: 5px 0 0 0;
}

.pun .blocktable .tcl {
    width: auto;
}

.pun .blocktable .tc2, .pun .blocktable .tc3, .pun .blocktable .tcmod {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    width: 11%;
}

.pun .blocktable .tcr {
    width: 30%;
}

.pun .blocktable td .newtext, .pun .blocktable td .pagestext, .pun .blocktable td .byuser {
    white-space: nowrap;
}

.pun .blocktable .tcl h3 span.newtext {
    font-size: 0.929em;
    font-weight: normal;
}

.pun #vf td.tcl span.stickytext, .pun #vf td.tcl span.closedtext {
    font-size: 1em;
    font-weight: bold;
}

#punsearch #vf .tc2 {
    padding-left: 8px;
    padding-right: 8px;
    text-align: left;
    width: 18%;
}

#users1 .tcr {
    width: 25%;
}

#users1 .tc2 {
    padding-left: 8px;
    padding-right: 8px;
    text-align: left;
    width: 25%;
}

#debug {
    margin-top: 12px;
}

#debug .tcl {
    width: 10%;
}

#punredirect #debug .tcl, #punmaint #debug .tcl {
    width: 20%;
}

#debug .tcr {
    width: 90%;
    white-space: normal;
}

#punindex .tcr .byuser {
    display: block;
}

#punindex td.tc2, #punindex td.tc3, #punindex td.tcr, .pun #vf td.tc2, .pun #vf td.tc3,
.pun #vf td.tcr, #punindex td.tcl div.forumdesc, .pun #vf td.tcl span {
    font-size: 0.923em;
}

.pun #vf td.tcl a {
    font-weight: bold;
}

.pun #vf td.tcl span a {
    font-weight: normal;
}

.pun .blocktable .tclcon {
    min-height: 1px;
    overflow: hidden;
    padding: 0 11px 0 12px;
    position: relative;
}

.pun .blocktable .tclcon div {
    width: 100%;
    overflow: hidden;
}

.pun .icon {
    float: left;
    border-style: solid;
    border-width: 8px;
    height: 0;
    overflow: hidden;
    width: 0;
}

.pun .iposted .ipost {
    font-weight: bold;
    left: 0;
    padding-left: 4px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 8px;
}

/*****************************************************************
MAIN POSTS
*****************************************************************/

/* Structure
----------------------------------------------------------------*/

.pun .blockpost {
    border-style: solid;
    border-width: 1px;
    margin-bottom: -1px;
    overflow: hidden;
    position: relative;
}

* html .pun .blockpost {
    display: inline-block;
}

.pun .blockpost h2 {
    font: 1em/1.462em var(--fonts-sans, sans-serif);
    white-space: nowrap;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    height: 1.462em;
    padding: 0.538em 8px 0.538em 8px;
    font-weight: normal;
    text-align: right;
}

#punsearch .blockpost h2 {
    height: auto;
    padding-left: 36px;
    white-space: normal;
}

#punsearch .blockpost h2 span span {
    white-space: nowrap;
    display: inline-block;
    font: 1.077em var(--fonts-sans, sans-serif);
}

#punsearch .blockpost .icon {
    position: absolute;
    top: 0;
    margin-top: -2.154em;
}

.pun .blockpost h2 .conr {
    float: right;
    text-align: right;
}

.pun .blockpost .inbox {
    float: right;
    position: relative;
    width: 100%;
}

.pun .blockpost .postbody, .pun .blockpost .postfoot {
    border-left-style: solid;
    border-left-width: 1px;
    float: right;
    margin-right: -218px;
    position: relative;
    text-align: left;
    width: 100%;
}

.pun .blockpost .postleft, .pun .blockpost .postfootleft {
    width: 194px;
    padding: 7px 12px 7px 12px;
    float: left;
    margin-left: -218px;
    position: relative;
}

.pun .blockpost .postleft dl {
    padding: 0;
}

#punviewtopic .blockpost dt, #punmoderate .blockpost dt {
    display: block;
    position: absolute;
    padding: 0.538em 0 0.538em 12px;
    height: 1.462em;
    top: -2.615em;
    left: 0;
    overflow: hidden;
    width: 206px;
}

.pun .blockpost dt strong {
    font-size: 1.231em;
    font-weight: bold;
}

.pun .blockpost .postleft dd {
    font-size: 0.923em;
}

.pun .blockpost .postleft .usertitle {
    padding: 4px 0 6px 0;
    font-size: 1em;
}

.pun .blockpost .postleft .postavatar {
    display: block;
    margin: 0 0 4px 0;
}

.pun .blockpost .postright {
    position: relative;
    padding: 4px 230px 7px 18px;
}

.pun .postmsg {
    width:100%;
    overflow: hidden;
    word-wrap: break-word;
}

.pun .blockpost .postfootright {
    position: relative;
    padding: 7px 230px 7px 18px;
    text-align: right;
}

.pun .postfoot p, .pun .postfoot ul {
    padding: 0;
}

.pun .blockpost .postfootright li {
    display: inline;
}

.pun .blockpost .postfootright li span {
    display: inline-block;
    padding-left: 16px;
    margin-left: 8px;
    line-height: normal;
    background: var(--bg-bull) center left no-repeat;
  font-weight: 300;
}

.pun .blockpost .usercontacts {
    padding: 7px 0;
}

.pun .blockpost .usercontacts .email {
    background: var(--bg-email) left 65% no-repeat;
    padding-right: 10px;
    padding-left: 18px;
    display: inline-block;
    line-height: normal;
    vertical-align: top;
}

.pun .blockpost .usercontacts .website {
    background: var(--bg-ext) left 65% no-repeat;
    padding-right: 10px;
    padding-left: 18px;
    display: inline-block;
    line-height: normal;
    vertical-align: top;
}

.pun .postsignature hr {
    border:none;
    height: 1px;
    margin-left: 0px;
    text-align: left;
}

/* Content (includes other user content)
----------------------------------------------------------------*/

.pun .usercontent {
    padding: 7px 0;
}

.pun .postmsg p, .pun .postmsg li, #punhelp p samp {
    font-family: var(--fonts-sans, sans-serif);
}

.pun .usercontent h1, .pun .usercontent h2, .pun .usercontent h3,
.pun .usercontent h4, .pun .usercontent h5, .pun .usercontent h6 {
    padding: 7px 0 0 0;
}

#rules-block .usercontent h3
{
  padding: 7px 0 7px 0;
  font-weight: 600;
}

.pun .postmsg h5, #punhelp h5 {
    font-size: 1.231em;
    font-weight: bold;
    padding: 7px 0;
}

.pun .usercontent ul, .pun .postmsg ul {
    list-style: disc;
    padding: 4px 13px 4px 30px;
}

.pun .usercontent ol, .pun .postmsg ol {
    list-style: decimal;
    padding: 4px 13px 4px 30px;
}

.pun .usercontent ol.alpha, .pun .postmsg ol.alpha {
    list-style: lower-alpha;
}

.pun .usercontent li, .pun .postmsg li {
    padding: 0 3px;
}

.pun .usercontent li p, .pun .postmsg li p {
    padding: 0;
}

.pun span.bbu {
    text-decoration: underline;
}

.pun span.bbs, .pun del {
    text-decoration: line-through;
}

.pun .postmsg ins, #punhelp samp ins {
    text-decoration: none;
}

.pun .blockpost .postmsg .postedit {
    font-size: 0.857em;
}

.pun .blockform .postsignature, .pun .blockpost .postsignature {
    font-size: 0.923em;
}

.pun .codebox {
    border-style: solid;
    border-width: 1px;
  /* border-color: #b9c5ce; */
    margin: 0.75em 1em;
    padding: 0;
}

.pun .quotebox {
    border-style: solid;
    border-width: 1px 1px 1px 3px;
    margin: 0.75em 1em;
    padding: 0 0.75em;
}

.pun .quotebox cite {
    display: block;
    padding: 0.75em 0 0 0;
    font-weight: bold;
    line-height: 1.462em;
}

.pun .quotebox blockquote {
    overflow: hidden;
    width: 100%;
}

.pun .codebox pre {
    overflow: auto;
    width: 100%;
    direction: ltr;
    text-align: left;
}

* html .pun .codebox pre {
    padding-bottom: 10px;
}

*:first-child+html .pun .codebox pre {
    padding-bottom: 10px;
}

.pun .codebox pre code {
    padding: 0.5em;
    white-space: pre;
}

.pun div[class*=codebox] pre code {
    display: inline-block;
}

* html .pun .codebox pre code {
    display: block;
}

.pun .codebox pre.vscroll {
    height: 32em;
    overflow: auto;
    overflow-y: auto;
}

.pun .postmsg img, #punhelp samp img {
    vertical-align: text-top;
}

.pun .postmsg .postimg img {
    max-width: 98%;
    vertical-align: middle;
    margin: 7px 0.5em 7px 0;
    /* border: 1px solid #787878; */
}

.pun .postmsg .postimg a:link img, .pun .postmsg .postimg a:visited img {
    border-style: solid;
    border-width: 2px;
}

/*****************************************************************
MAIN FORMS
*****************************************************************/

#punedit .blockform h2, #punpost .blockform h2, #postpreview h2, #posterror h2,
.pun #quickpost h2, .pun #reportform h2, #pundelete .blockform h2 {
    font: 1em/1.462em var(--fonts-sans, sans-serif);
    font-weight: bold;
    white-space: nowrap;
    padding: 10px 19px 4px 37px;
    border: 0;
}

#punpost .blockform h2, #punedit .blockform h2,.pun #quickpost h2,
#pundelete .blockform h2 {
    margin: 1px 1px 0 1px;
    width: 25em;
    position: absolute;
    z-index: 100;
}

.pun #quickpost legend, #punpost legend, #punedit legend {
    width: 25em;
    overflow: hidden;
    white-space: nowrap;
}

.pun .blockform .box {
    border-style: solid;
    border-width: 1px;
    padding-bottom: 12px;
}

.pun #posterror {
    border-style: solid;
    border-width: 1px;
}

.pun #posterror .box {
    padding: 0 18px 12px 18px;
}

* html .pun .blockform .box, * html .pun #posterror {
    display: inline-block;
}

.pun .blockform .forminfo, .pun .error-info {
    padding: 12px 18px;
    border-style: solid;
    border-width: 1px;
    position: relative;
}

.pun .blockform .forminfo {
    margin-top: 12px;
}

#pundelete .blockform .forminfo {
    margin-top: 33px;
}

.pun .forminfo h3 {
    padding-bottom: 0;
}

.pun .error-list li {
    padding-left: 24px;
    background: var(--bg-exclaim) center left no-repeat;
}

.pun .inform {
    padding: 0 18px;
}

.pun legend {
    font-weight: bold;
    padding: 10px 19px 4px 19px;
}

* html .pun legend {
    margin-left: -7px;
}

*:first-child+html .pun legend {
    margin-left: -7px;
}

.pun .infldset {
    border-style: solid;
    border-width: 1px;
    padding: 12px 18px;
}

#punregister #rules .infldset {
    padding: 5px 18px;
}

.pun fieldset p {
    padding: 0 0 7px 0;
    width: 100%;
}

.pun fieldset .usercontent p {
    padding: 7px 0;
}

.pun fieldset label {
    display: block;
    padding: 0 0 7px 0;
}

.pun label em {
    font-weight: normal;
    font-style: normal;
}

.pun .required strong {
    background: var(--bg-asterisk) center right no-repeat;
    font-weight: normal;
    padding-right: 14px;
    white-space: pre;
    display: inline-block;
    line-height: normal;
}

.pun label input, .pun label select, .pun label textarea {
    margin-top: 2px;
}

.pun label.conl {
    display: inline-block;
    padding-right: 12px;
}

.pun form .buttons {
    padding: 8px 19px 8px 34px;
    margin-bottom: -12px;
}

.pun .blockform .buttons input {
    margin-right: 12px;
}

.pun .rbox {
    padding: 3px 0;
}

.pun .rbox label {
    padding: 3px 0 3px 1.75em;
    position: relative;
    min-height: 1px;
}

* html .pun .rbox label {
    text-indent: -3px;
    height: 1%;
}

.pun .rbox input {
    margin: 3px 0.75em 3px -1.75em;
    float: left;
    position: relative;
    vertical-align: middle;
    padding: 0;
    height: 1em;
    width: 1em;
}

.pun input[type=text], .pun select, .pun textarea {
    font-family: var(--fonts-sans, sans-serif);
    font-size: 1em;
}

.pun textarea, input[type="text"] {
  background-color: #272822;
  color: #F8F8F2;
  border: 1px solid #76715e;
}

.pun .txtarea textarea, .pun input.longinput {
    width: 98%;
}

.pun textarea {
    resize: vertical;
}

.pun #quickpost .txtarea {
    padding-right: 12px;
    position: relative;
}

.pun .blockform .bblinks {
    padding-top: 0;
}

.pun .blockform .bblinks li {
    display: inline;
}

.pun .blockform .bblinks li span {
    background: var(--bg-help) center left no-repeat;
    padding-right: 10px;
    padding-left: 20px;
    display: inline-block;
}

.pun #quickpost .bblinks {
    padding-top: 0;
}

.pun #quickpost .bblinks li {
    display: inline;
}

.pun #login p.clearb {
    border-top-style: dotted;
    border-top-width: 1px;
    font-size: 0;
    height: 0;
    line-height: 0;
    margin-top: 7px;
    overflow: hidden;
    padding-bottom: 3px;
    padding-top: 7px;
    text-indent: -9999em;
    width: 100%;
}

.pun #postreview {
    padding-top: 12px;
}

.pun #postpreview, .pun #posterror {
    margin-bottom: 12px;
}

.pun #postpreview .postright {
    padding: 0;
}

.pun #postpreview .postbody {
    border-style: solid;
    border-width: 1px;
    float: none;
    margin: 0 18px 12px 18px;
    padding: 0;
    padding: 4px 18px 4px 18px;
    width: auto;
}

#punmisc #rules .box {
    border-style: solid;
    border-width: 1px;
    padding: 5px 18px;
}


#punhelp .box {
    border-style: solid;
    border-width: 1px;
    padding: 7px 12px;
}

.pun .multiselect {
    float: left;
    padding-bottom: 7px;
}

.pun .checklist {
    border-width: 1px;
    border-style: solid;
    max-height: 9em;
    width: 20em;
    overflow: auto;
    padding: 0.25em 0.5em;
    margin: 0.25em 16px 0 0.15em;
}

.pun .checklist legend {
    padding: 0;
}

.pun .checklist legend span {
    width: auto;
    max-width: 25em;
}

/*****************************************************************
PROFILES (+ ADMIN MENU)
*****************************************************************/

/* Profile / Admin
----------------------------------------------------------------*/

.pun .blockmenu {
    width: 13em;
    float: left;
    padding-bottom: 12px;
}

.pun .block2col .blockform, .pun .block2col .block {
    margin-left: 15em;
}

.pun .blockmenu .block2 {
    padding-top: 19px;
}

.pun .blockmenu ul {
    border-top-style: dotted;
    border-top-width: 1px;
    padding: 0;
}

.pun .blockmenu li {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    font-weight: bold;
    padding: 0;
}

.pun .blockmenu a:link, .pun .blockmenu a:visited {
    display: block;
    padding: 9px 6px 3px 6px;
    min-height: 1px;
    text-decoration: none;
}

* html .pun .blockmenu a:link,  * html .pun .blockmenu a:visited {
    height: 1%;
}

.pun .blockmenu a:hover, .pun .blockmenu a:active, .pun .blockmenu a:focus {
    text-decoration: none;
}

#viewprofile .box {
    border-style: solid;
    border-width: 1px;
    padding-bottom: 18px;
}

#viewprofile dt, #adstats dt {
    padding: 7px 0;
    position: absolute;
    width: 13em;
    left: 0;
}

#viewprofile dl {
    border-style: solid none none none;
    border-width: 1px;
    margin: 7px 0;
    padding: 0;
    width: 100%;
    position: relative;
}

#adintro, #adstats, #adalerts {
    border-style: solid;
    border-width: 1px;
    padding: 18px;
}

#adintro li span {
    display: inline-block;
    padding-left: 16px;
    margin-left: 8px;
    line-height: normal;
    background: var(--bg-bull) center left no-repeat;
}

#adstats .inbox, #adintro .inbox, #adalerts p {
    border-style: solid;
    border-width: 1px;
    padding: 18px;
}

#adstats dl {
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
}

#viewprofile dd, #adstats dd {
    border-style: none none solid none;
    border-width: 1px;
    padding: 7px 0 7px 13em;
}

/*****************************************************************
COLOUR SCHEME
*****************************************************************/

/* Basic defaults and Common Items
----------------------------------------------------------------*/

html, body, .pun {
    background: #2E3436;
    color: #bfbfbf;
}

.pun .punwrap {
    background: #2E3436;
    border-color: #3B4245;
    color: #bfbfbf;
}

#announce, #brdmain, #quickpost, #brdstats, #brdtitle #brddesc, .pun .pagepost, #brdstats #onlinelist, #brdfooter #searchlinks, #brdfooter #modcontrols,
#punmaint h2, #punredirect h2, #adminconsole .submittop, .pun #debugtime, .pun .pagelink a, .pun .pagelink * {
    border-color: #3B4245;
}

.pun a, .pun a:link, .pun a:visited {
    color: #FFF;
}

.pun a:hover, .pun a:active, .pun a:focus {
    color: #FFF;
}

.pun .postmsg .postimg a:link img, .pun .postmsg .postimg a:visited img {
    border-color: #3B4245;
}

.pun .postmsg .postimg a:hover img, .pun .postmsg .postimg a:active img, .pun .postmsg .postimg a:focus img {
    border-color: #3B4245;
}

/* Primary Navigation
----------------------------------------------------------------*/

#brdmenu a, #brdmenu a:link, #brdmenu a:visited {
    background: #191C1E;
    border-color: #2E3436;
    color: #bfbfbf;
}

#brdmenu a:hover, #brdmenu a:active, #brdmenu a:focus {
    background: #000;
    border-color: #2E3436;
    color: #fff;
}

/* Main Tables
----------------------------------------------------------------*/

.pun .blocktable .box {
    background: #2E3436;
    border-color: #3B4245 #3B4245;
}

#punindex .blocktable h2, .pun #vf h2 {
    color: #bfbfbf;
}

#adminconsole fieldset th, #adminconsole fieldset td {
    background: #2E3436;
    border-color: #3B4245;
}

.pun #users1 h2 {
    background: #2E3436;
}

.pun .blocktable td {
    border-color: #3B4245;
}

.pun .blocktable th {
    background: #292F30;
    border-color: #3B4245;
    color: #bfbfbf;
}

.pun .blocktable td.tcl span.stickytext {
    color: #bfbfbf;
}

/* Main Posts
----------------------------------------------------------------*/

.pun .blockpost {
    background: #32383B;
    border-color: #3B4245 #3B4245;
}

.pun .blockpost h2 {
    background: #292F30;
    border-color: #3B4245;
    color: #bfbfbf;
}

.pun .blockpost .postbody, .pun .blockpost .postfoot {
    background: #2E3436;
    border-color: #3B4245;
}

.pun .blockpost .postfootright li {
    color: #bfbfbf;
}

.pun .postmsg, #punhelp code, #punhelp samp {
    color: #bfbfbf;
}

.pun .postsignature, .pun .postmsg .postedit {
    color: #bfbfbf;
}

.pun .quotebox {
    background: #32383B;
    border-color: #3B4245;
    color: #bfbfbf;
    border-left: 2px solid #bfbfbf;
}

.pun .quotebox cite {
    color: #bfbfbf;
}

.pun .codebox, #punhelp .codebox code {
    background: #32383B;
    color: #DBDBDB;
    border-color: #bfbfbf;
}

.pun .postmsg hr {
    background: #3B4245;
}

.pun .postmsg ins, #punhelp samp ins {
    background-color: #bfbfbf;
    color:#2E3436;
}

/* Main Forms + Profile
----------------------------------------------------------------*/

.pun .blockform .box, #adstats, #adintro, #adalerts, #postpreview, #posterror {
    border-color: #3B4245 #3B4245;
    background: #292F30;
}

#punmisc #rules .box, #punhelp .box {
    border-color: #3B4245 #3B4245;
    background: #2E3436;
}

.pun #quickpost h2, #punpost .blockform h2, #punedit .blockform h2, #posterror h2,
#pundelete .blockform h2 {
    background: #292F30;
    color: #bfbfbf;
}

.pun .forminfo {
    background: #292F30;
    border-color: #292F30;
}

#puninstall form#install .forminfo {
    background: #44699c;
    color: #fff;
}

.pun #posterror .error-info, .pun #adalerts p {
    background: #2E3436;
    border-color: #3B4245;
}

#puninstall form#install .error-info {
    background: #2E3436;
    border-color: #3B4245;
    color: #333;
}

.pun .infldset, #adintro .inbox, #adstats .inbox {
    background: #2E3436;
    border-color: #3B4245;
}

.pun label, .pun legend, #adminconsole fieldset th {
    color: #bfbfbf;
}

.pun fieldset p {
    border-color: #3B4245;
}

.pun .blockmenu ul, .pun .blockmenu li {
    border-color: #3B4245;
}

.pun .blockmenu a:hover, .pun .blockmenu a:active, .pun .blockmenu a:focus {
    background: #292F30;
}

.pun .blockmenu .isactive a:link, .pun .blockmenu .isactive a:visited {
    color: #fff;
    background: #292F30;
    }

.pun #viewprofile .box {
    border-color: #3B4245 #3B4245;
    background: #292F30;
}

.pun #viewprofile dt, #adstats dt {
    color: #bfbfbf;
}

.pun #viewprofile dl, .pun #viewprofile dd, #adstats dl, #adstats dd {
    border-color: #3B4245;
}

#adminconsole fieldset td.nodefault {
    background: #d59b9b;
}

.pun .multiselect {
    color: #bfbfbf;
}

.pun .checklist {
    background: #292F30;
    border-color: #3B4245;
}

/* Status Indicators
----------------------------------------------------------------*/

.pun .icon {
    border-color: #3B4245 #3B4245 #3B4245 #3B4245;
}

.pun .iredirect .icon {
    border-color: #b9c5ce;
    border-width: 1px;
    padding: 7px;
}

.pun .inew .icon {
    border-color: #bfbfbf #bfbfbf #bfbfbf #bfbfbf;
}

.modlist {
  display:none;
}

div.forumdesc {
  margin: 2px 0 0 0;
}

div#announce-block {
  background-color: rgba(224,255,186,.4);
  padding: 0px 20px;
  margin: 5px 0px 10px 0px;
  border: 1px solid #00aa00;
}

#announce {
  border: none;
}

::selection {
    background:#191C1E;
    color:#bfbfbf;
}
::-moz-selection {
    background:#191C1E;
    color:#bfbfbf;
}


@media all and (max-width:767px)
{
    .pun .blockmenu {
        width: 100%;
        float:none;
        display:block;
        padding-bottom: 0;
    }

    .pun .block2col .blockform, .pun .block2col .block {
        margin-left: 0em;
    }

    .pun .subscribelink {
        position: static;
        padding: 0;
    }

    .pun .linksb .crumbs, .pun .postlinksb .crumbs {
        font-size: 0.9em;
    }

    .punwrap #brdmain .blocktable .box .inbox table tbody tr td:nth-child(2),
    .punwrap #brdmain .blocktable .box .inbox table thead tr th:nth-child(2),
    .punwrap #brdmain .blocktable .box .inbox table tbody tr td:nth-child(3),
    .punwrap #brdmain .blocktable .box .inbox table thead tr th:nth-child(3),
    .punwrap #brdmain .blocktable .box .inbox table thead tr th:nth-child(3),
    .punwrap #brdmain .blocktable .box .inbox table tbody tr td:nth-child(4),
    .punwrap #brdmain .blocktable .box .inbox table thead tr th:nth-child(4),
    .punwrap #brdmain .blocktable .box .inbox table thead tr th:nth-child(4),
    .pun .postlinksb .crumbs,
    /*.punwrap .byuser, .punwrap #brdmain .byuser,*/
    #poweredby, #feedlinks,
    #qjump,
    .postfootleft,
    /*img.logo*/ { display:none; }
    .pun { max-width:none; padding:0; }
    .pun .punwrap { padding:9px; }
    /*.pun .blockpost { background-color:#ebf1f5;}*/
    .pun .blockpost .postleft { width:0; padding:0; margin-left:0px; float:none; }
    .pun .blockpost .postleft dd, .postleft img  { display:none; }
    .pun .blockpost .postbody { border-left:none; float:right; margin-right:0px; }
    .pun .blockpost h2 .conr { display:none; }
    /*.pun .blockpost h2 { float:right; border-bottom:0;}*/
    .pun .blockpost .postright { padding:9px; margin-right:0px; }
    .pun .blockpost .postmsg p:first-child { padding-top:0; margin-top:0px;}
    .pun .blockpost .postbody { border-top: 1px solid #cad7e1; }
    .pun .blockpost .codebox { margin:0; }
    .pun .blockpost .quotebox { margin:5px; }
    .pun .blockpost .quotebox blockquote { margin-top:0.75em; }
    .pun .blockpost .postfoot { float:left; border:none; }
    .pun .blockpost .postfootright { padding:0; margin: 0 9px 9px 0;}
    .pun .blockpost .postfootright ul li span { padding:0; background:none; }
    .pun .inform { padding:0;}
    .pun #quickpost > h2 { display:none;}
    .pun .inform > fieldset > legend { display:none; }
    .pun #quickpost .txtarea { padding:5px; }
    .pun #quickpost .txtarea textarea { width:100%;border-radius:0px;}
    #ezbbctoolbar , .bblinks{ display:none ; }
    .pun .linkst .crumbs { font-size: inherit; }
    #brdmenu a:link { padding:0; min-width:0; }
    #brdmenu ul li { padding-right:5px;}
    #brdmenu ul li:last-child { border-right: none; }
    #brdwelcome > .conl { display:none; }
    #brdwelcome > .conr { float:left; }
    #brdwelcome li span { background:none; padding-left:0; }
    #brdstats .box .inbox dl:not(:last-child) { display:none; }
    .pun .postlinksb .crumbs { padding-bottom:5px;}
}

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */
    .pun {
        position:relative;
        width:470px;
    }
    img.logo {
        width:200px;
        padding:0;
        margin:10px 0 10px 0;
    }

    .tcr{display: table-cell;}
}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
    .pun  {
        position:relative;
        width:760px;
    }
    img.logo {
        width:300px;
        padding:0;
        margin:20px 0 10px 0;
    }
    #brddesc p {
        padding: 0;
    }

    #brdmenu ul {
        padding: 0;display:block;
    }

    #brdmenu li {
        float: left;
        display: inline-block;
    }

    #brdmenu a:link, #brdmenu a:visited {
        border-top: 0;
        border-right-style: solid;
        border-width: 1px;
        display: block;
        min-width: 60px;
        padding: 12px 16px 7px 8px;
        white-space: nowrap;
        text-align: left;
        letter-spacing: 0;
        text-transform: none;
    }

    #brdmenu a:hover, #brmenu a:active, #brdmenu a:focus {
        text-decoration: none;
    }
    #brdmenu {
        background: #191C1E;
        -webkit-box-shadow: 0px 2px 4px #151617;
        -moz-box-shadow: 0px 2px 4px #151617;
        box-shadow: 0px 2px 4px #151617;
    }

    #brdmenu a, #brdmenu a:link, #brdmenu a:visited {
        background: #191C1E;
        border-color: #2E3436;
        color: #bfbfbf;
    }

    #brdmenu a:hover, #brdmenu a:active, #brdmenu a:focus {
        background: #000;
        border-color: #2E3436;
        color: #fff;
    }

    #brdwelcome .conr {float:right;}
    .tc2,.tc3 {display: table-cell;}
    .pun .blocktable .tcr {
        width: 20%;
    }
    /*p.modlist {display:inline;}*/
    .pun .blockpost .postright {padding:4px 230px 7px 18px;}
    .pun .blockpost .postleft,
    .pun .blockpost .postfootleft {width:194px;margin-left:-218px;}
    .pun .blockpost .postbody, .pun .blockpost .postfoot {margin-right:-218px;}
    .pun .blockpost .postfootright {padding:7px 270px 7px 18px;}
    .pun .blockpost .postleft dd {display:block;}
    .pun .blockpost .postleft dd.postavatar {display:block;}

    .pun .blockpost h2 {
        text-align: left;
    }

    .pun .blockpost h2 .conr {
        display:block;
        float: right;
        text-align: right;
    }

    .pun .blockpost h2 span {
        margin-left: 236px;
    }

    .pun .crumbs li {
        white-space: nowrap;
        font-size: 90%;
    }

    .pun .foot {
        margin-top:20px;
        margin-bottom: 0px;
    }
    .pun .foot.additional{
        margin-top:0px;
        margin-bottom: 14px;
        border-top: 1px solid #3B4245;
    }

}

@media only screen and (min-width: 920px) {
  /* Style adjustments for viewports 920px and over go here */
    .pun  {
        position:relative;
        width:920px;
    }

}

johnraff · 2024-03-27 08:47:56

brontosaurusrex wrote:

@John, Could we rename this new themes with some sort of 'prefix', like 'new' or '2024' or something, so they are easier to find?

There are four new ones:
Hydrogen-Dark
Hydrogen-invert
Hydrogen-night
and your
Crunchrex

Do they need renaming?

But actually, there are some rather useless styles in there, and we ought to have a cleanout. Air for example has a huge logo which was fixed in Air2. (I tweaked Crunchbang last week for some small thing.)

root@fluxbb:/srv/fluxbb/style# ls -lt
-rw-r--r-- 1 root root 38813 Mar 27 07:26 Hydrogen-Dark.css
-rw-r--r-- 1 root root 35556 Mar 26 07:19 Hydrogen-night.css
-rw-r--r-- 1 root root 35521 Mar 26 07:17 Hydrogen-invert.css
-rw-r--r-- 1 root root 41903 Mar 22 08:30 Crunchbang.css
-rw-r--r-- 1 root root 42291 Mar 14 05:33 Crunchrex.css
-rw-r--r-- 1 root root 32389 May 10  2023 Hydrogen.css
-rw-r--r-- 1 root root 19197 Aug 20  2022 Sulfur.css
-rw-r--r-- 1 root root 22829 Aug 20  2022 Technetium.css
-rw-r--r-- 1 root root 19994 Aug 20  2022 Tungsten.css
-rw-r--r-- 1 root root 29174 Aug 20  2022 Fire.css
-rw-r--r-- 1 root root 32255 Aug 20  2022 Helium.css
-rw-r--r-- 1 root root 32255 Aug 20  2022 Hydrogen-dev.css
-rw-r--r-- 1 root root 19196 Aug 20  2022 Lithium.css
-rw-r--r-- 1 root root 19572 Aug 20  2022 Mercury.css
-rw-r--r-- 1 root root 19209 Aug 20  2022 Oxygen.css
-rw-r--r-- 1 root root 19224 Aug 20  2022 Radium.css
-rw-r--r-- 1 root root 30746 Aug 20  2022 SimpleXBlue.css
-rw-r--r-- 1 root root 32166 Aug 20  2022 Air2.css
-rw-r--r-- 1 root root 19994 Aug 20  2022 Antimon.css
-rw-r--r-- 1 root root 29888 Aug 20  2022 BlueBook.css
-rw-r--r-- 1 root root 19224 Aug 20  2022 Cobalt.css
-rw-r--r-- 1 root root 31321 Aug 20  2022 DarkGrey.css
-rw-r--r-- 1 root root 29224 Aug 20  2022 Earth.css
-rw-r--r-- 1 root root 28319 Jul  9  2022 Air.css

brontosaurusrex · 2024-03-27 09:40:38

Or maybe just sorting like that ^, newer on top.

johnraff · 2024-03-27 09:50:56

^in the selector box? I'm not sure how easy that would be.

We're talking about making life easier for users? I think the best thing we could do there is cut down the number of themes to about half.

And yes, once all the new stuff is finished (it almost is) then some meaningful renaming perhaps?

Last edited by johnraff (2024-03-27 09:51:54)

brontosaurusrex · 2024-03-27 10:41:38

johnraff wrote:

I think the best thing we could do there is cut down the number of themes to about half.

Yeah, to make it user friendly, removing some themes sounds good.

#41 2024-03-20 08:30:18

Re: Forum Darkkmode

#42 2024-03-20 12:34:34

Re: Forum Darkkmode

#43 2024-03-20 13:38:51

Re: Forum Darkkmode

#44 2024-03-25 05:55:07

Re: Forum Darkkmode

#45 2024-03-25 06:12:42

Re: Forum Darkkmode

#46 2024-03-25 08:46:41

Re: Forum Darkkmode

#47 2024-03-25 13:38:59

Re: Forum Darkkmode

#48 2024-03-25 16:37:56

Re: Forum Darkkmode

#49 2024-03-25 17:30:30

Re: Forum Darkkmode

#50 2024-03-26 00:23:16

Re: Forum Darkkmode

#51 2024-03-26 03:34:11

Re: Forum Darkkmode

#52 2024-03-26 11:27:36

Re: Forum Darkkmode

#53 2024-03-26 11:35:58

Re: Forum Darkkmode

#54 2024-03-27 08:20:28

Re: Forum Darkkmode

#55 2024-03-27 08:22:46

Re: Forum Darkkmode

#56 2024-03-27 08:34:05

Re: Forum Darkkmode

#57 2024-03-27 08:47:56

Re: Forum Darkkmode

#58 2024-03-27 09:40:38

Re: Forum Darkkmode

#59 2024-03-27 09:50:56

Re: Forum Darkkmode

#60 2024-03-27 10:41:38

Re: Forum Darkkmode

Board footer