/* Base Start */
/* Nunito - latin */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: normal;
	src: url('/res/fonts/nunito/nunito-v14-latin_cyrillic-regular.eot');
	/* IE9 Compat Modes */
	src: local(''),
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-regular.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-regular.woff') format('woff'),
		/* Modern Browsers */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-regular.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-regular.svg#Nunito') format('svg');
	/* Legacy iOS */
}

@font-face {
	font-family: 'Nunito';
	font-style: italic;
	font-weight: normal;
	src: url('/res/fonts/nunito/nunito-v14-latin_cyrillic-italic.eot');
	/* IE9 Compat Modes */
	src: local(''),
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-italic.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-italic.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-italic.woff') format('woff'),
		/* Modern Browsers */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-italic.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-italic.svg#Nunito') format('svg');
	/* Legacy iOS */
}

@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: bold;
	src: url('/res/fonts/nunito/nunito-v14-latin_cyrillic-700.eot');
	/* IE9 Compat Modes */
	src: local(''),
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-700.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-700.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-700.woff') format('woff'),
		/* Modern Browsers */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-700.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-700.svg#Nunito') format('svg');
	/* Legacy iOS */
}

@font-face {
	font-family: 'Nunito';
	font-style: italic;
	font-weight: bold;
	src: url('/res/fonts/nunito/nunito-v14-latin_cyrillic-700italic.eot');
	/* IE9 Compat Modes */
	src: local(''),
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-700italic.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-700italic.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-700italic.woff') format('woff'),
		/* Modern Browsers */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-700italic.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('/res/fonts/nunito/nunito-v14-latin_cyrillic-700italic.svg#Nunito') format('svg');
	/* Legacy iOS */
}

/* darker-grotesque-regular - latin */
@font-face {
	font-family: 'Darker Grotesque';
	font-style: normal;
	font-weight: normal;
	src: url('/res/fonts/grotesque/darker-grotesque-v2-latin-regular.eot');
	/* IE9 Compat Modes */
	src: local(''),
		url('/res/fonts/grotesque/darker-grotesque-v2-latin-regular.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('/res/fonts/grotesque/darker-grotesque-v2-latin-regular.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('/res/fonts/grotesque/darker-grotesque-v2-latin-regular.woff') format('woff'),
		/* Modern Browsers */
		url('/res/fonts/grotesque/darker-grotesque-v2-latin-regular.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('/res/fonts/grotesque/darker-grotesque-v2-latin-regular.svg#DarkerGrotesque') format('svg');
	/* Legacy iOS */
}

/* darker-grotesque-900 - latin */
@font-face {
	font-family: 'Darker Grotesque';
	font-style: normal;
	font-weight: bold;
	src: url('/res/fonts/grotesque/darker-grotesque-v2-latin-800.eot');
	/* IE9 Compat Modes */
	src: local(''),
		url('/res/fonts/grotesque/darker-grotesque-v2-latin-800.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('/res/fonts/grotesque/darker-grotesque-v2-latin-800.woff2') format('woff2'),
		/* Super Modern Browsers */
		url('/res/fonts/grotesque/darker-grotesque-v2-latin-800.woff') format('woff'),
		/* Modern Browsers */
		url('/res/fonts/grotesque/darker-grotesque-v2-latin-800.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('/res/fonts/grotesque/darker-grotesque-v2-latin-800.svg#DarkerGrotesque') format('svg');
	/* Legacy iOS */
}



:root {
	--bodyText: 'Nunito', Helvetica, sans-serif;
}

* {
	box-sizing: border-box
}

@media (prefers-color-scheme: light) {
	:root {
		--back: #ffffff;
		--text: #000;

		--back1: #ddd;
		--back2: #eee;
		--hl: #F0FFCF;
		--acc: #7F0000;
		--vis: #550077;
		--dark: #888;
		--prem: #dddcff;
		--red: #f00;
		--blue: #00f;
		--navy: #00007f;
		--green: #007f00;
		--lblue: #9df;
		--lgre: #9fb;
		--lyel: #ff9;
		--dgray: #444;
		--lgray: #666;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--back: #222;
		--text: #fff;

		--back1: #444;
		--back2: #666;
		--hl: #2b5b0a;
		--acc: #f29f9f;
		--vis: #d67afb;
		--dark: #888;
		--prem: #000c38;
		--red: #900;
		--blue: #008;
		--navy: #000062;
		--green: #004300;
		--lblue: #07a;
		--lgre: #7b8;
		--lyel: #995;
		--dgray: #ddd;
		--lgray: #bbb;
	}
}

@media (min-width:441px) {
	:root {
		--fulw: 55em;
	}
}

@media (max-width:440px) {
	:root {
		--fulw: 100%;
	}
}

html {
	font-family: var(--bodyText);
	font-size: 11pt;
}

body {
	height: 100%;
	margin: auto;
	background-color: var(--back);
	color: var(--text);
	line-height: 155%;
}

table {
	border-collapse: collapse;
}

a {
	color: var(--text);
	border-radius: .2em;
}

a:visited {
	color: var(--vis);
}

a:hover,
a:visited:hover,
.hl a:hover,
.hl a:visited:hover {
	color: var(--back);
	background-color: var(--vis);
}

a:active,
a:visited:active {
	display: inline-block;
	color: var(--hl);
	background-color: var(--vis);
	box-shadow: 0 0 .4em var(--dark);
	font-size: 102%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: .3em;
	font-weight: bold;
	color: var(--acc);
	font-family: var(--headersText);
	line-height: 130%;
}

h1,
h2 {
	text-align: center;
}

h1 {
	font-size: 3.117rem;
}

h2 {
	font-size: 2.617rem
}

h3 {
	font-size: 2.117rem
}

h4 {
	font-size: 1.618rem;
}

.udiscl,
.ddiscl,
.ipen,
.ilist,
.igar,
.idnld,
.iplus,
.icomm,
.iview,
.istat,
.ibook,
.igear,
.ilogo,
.ilogi,
.ievn,
.alef,
.aup,
.tup,
.tdwn,
.adwn,
.udot,
.rdot,
.flgd,
.flg {
	display: inline-block;
	background-repeat: no-repeat;
	height: 1.75em;
	width: 1.75em;
	background-position: .25em .25em;
	background-size: 1.25em 1.25em;
	vertical-align: text-bottom;
	margin: 4px;
	text-decoration: none;
}

.tup,
.tdwn {
	height: 1.5em;
	width: 1.5em;
	background-position: .25em .5em;
	background-size: 1em 1em;
}

.ibook {
	height: 2em;
	width: 2em;
	background-position: .25em .65em;
	background-size: 1.5em 1.5em;
}

.hv {
	display: inline-block;
	width: 1.1em;
	background-color: var(--back1);
	color: var(--text);
	border-radius: 1.2em;
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 90%;
	padding-top: 0.3em
}

/* Base End */

blockquote {
	padding: .3em;
	box-shadow: 0 0 .2em var(--dark);
	font-size: .95em;
	background-color: var(--back1);
	margin-left: 1em;
	margin-right: 1em;
	border-radius: .3em;
	font-style: italic;
}

blockquote blockquote {
	border-left: 2px var(--dark) solid;
	padding-left: .5em;
	background-color: var(--back2);
}

.ssf {
	font-family: var(--bodyText);
}

.sf {
	font-family: var(--altText);
}

.mono {
	font-family: var(--mono);
}

#ptitle,
#sug-head {
	line-height: 130%;
}

#sug-title,
#wizard .header {
	font-size: 1.5em
}

#smhead,
#sug-auth,
.section,
#side-table .next,
#side-table .curr,
#side-table .done,
.body,
.quick {
	font-size: 1.05em
}

#sugdesc,
.navig .left,
.navig .right,
.navig .cent {
	font-size: 1.08em
}

.c5,
.c6,
.c7,
.cn,
.help {
	font-size: 1.1em
}

.date {
	white-space: nowrap;
}

.ib {
	display: inline-block;
}

.db {
	display: block;
}

#alphabar a:visited {
	background: none;
	padding-right: 0px
}

#alphabar a:visited:hover,
{
background: teal
}

#lib-table a:visited {
	background: none;
	padding-right: 0px
}

#lib-table a:visited:hover {
	background: teal
}

#tlink {
	color: white;
	font-size: 3px !important;
	background-color: var(--back)
}

.error {
	color: var(--text);
	background-color: var(--hl);
	width: 450px;
	margin: auto;
	text-align: center;
	font-weight: bold;
	font-size: 1.1em
}

/* -- General Tables */
/* -- tiny table at top of listings */
#head-t {
	width: 100%;
	max-width: var(--fulw);
	margin-left: auto;
	margin-right: auto
}

#head-t .left {
	width: 50%;
	text-align: left;
	font-size: .9em;
}

#head-t .right {
	width: 50%;
	text-align: right font-size:.9em;
}

/* listings table */
.list {
	width: 100%;
	border: var(--back1) 1px solid;
	background-color: var(--back);
	border-radius: .3em .3em;
	margin: auto auto 6px auto;
	border-collapse: collapse;
}

.list th,
.list td {
	padding: 5px
}

table#alphabar {
	width: var(--fulw);
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	border: none;
	border-collapse: collapse
}

table.navig {
	//width:var(--fulw);
	margin-left: auto;
	margin-right: auto;
	border: none
}

.navig .r {
	text-align: right;
	width: 10%
}

.navig .l {
	text-align: left;
	width: 10%
}

.navig .c {
	text-align: center;
	width: 79%
}

#alphabar .c4 {
	padding: 1px;
	border-left: var(--back2) 1px solid;
	border-top: var(--back2) 1px solid;
	border-right: var(--back2) 1px solid;
	border-bottom: none;
	background-color: var(--back)
}

#alphabar .c5 {
	padding: 1px;
	border-left: var(--back2) 1px solid;
	border-top: var(--back2) 1px solid;
	border-right: var(--back2) 1px solid;
	border-bottom: none;
	background-color: var(--hl)
}

.fnav {
	margin-bottom: 0px
}

.num {
	width: 3em;
	text-align: center;
	vertical-align: top;
	border: var(--back2) 1px solid
}

.ynum {
	width: 3em;
	border: var(--back2) 1px solid;
	text-align: center;
	vertical-align: top;
	background-color: var(--back)
}

th.lc1 {
	width: 1em;
	border: var(--back2) 1px solid;
	text-align: center;
	vertical-align: top
}

th.lc2 {
	width: 10em;
	border: var(--back2) 1px solid;
	text-align: center;
	vertical-align: top
}

th.lc3 {
	width: 10em;
	border: var(--back2) 1px solid;
	text-align: center;
	vertical-align: top
}

th.lc4 {
	border: var(--back2) 1px solid;
	text-align: center;
	vertical-align: top
}

td.lc1 {
	width: 1em;
	border-color: var(--back2);
	border-width: 1px 1px 0px 1px;
	border-style: solid;
	text-align: center;
	vertical-align: top;
	font-weight: bold
}

td.lc1p {
	width: 1em;
	border-color: var(--back2);
	border-width: 1px 1px 0px 1px;
	border-style: solid;
	text-align: right;
	vertical-align: top;
	background-color: var(--back);
}

td.lc2 {
	width: 10em;
	border-color: var(--back2);
	border-width: 1px 1px 0px 1px;
	border-style: solid;
	text-align: left;
	vertical-align: top;
	font-weight: bold
}

td.lc3 {
	width: 10em;
	border-color: var(--back2);
	border-width: 1px 1px 0px 1px;
	border-style: solid;
	text-align: left;
	vertical-align: top
}

td.lc4 {
	border-color: var(--back2);
	border-width: 1px 1px 0px 1px;
	border-style: solid;
	text-align: left;
	vertical-align: top
}

.bu {
	border: none;
	width: 100%;
	border-spacing: 3px
}

.buc {
	padding: 2px;
	border-right: var(--back2) 1px solid;
	border-bottom: var(--back2) 1px solid;
	border-left: var(--back2) 1px solid;
	border-top: none
}

.t1 {
	margin: 10px auto 30px auto;
	background-color: var(--back);
	width: 100%;
	max-width: 35em;
	border: var(--dark) 1px solid;
	border-radius: .3em;
}

.t2 {
	margin: auto;
	background-color: var(--back);
	border: var(--dark) 1px solid;
	border-radius: .3em;
	padding: 10px
}

.t3 {
	margin-left: auto;
	margin-right: auto;
	width: var(--fulw)
}

.t4 {
	margin: auto auto 30px auto;
	background-color: var(--back);
	max-width: 30em;
	border: var(--dark) 1px solid;
	padding: 10px;
	border-radius: .6em
}

.t5 {
	margin: auto;
	background-color: var(--back);
	max-width: var(--fulw);
	box-shadow: 0px 0px .2em var(--dark);
	padding: 10px
}

.cwb {
	margin: auto;
	background-color: var(--back);
	box-shadow: 0px 0px .3em var(--dark);
	padding: 10px;
	border-radius: 0.2em
}

.tlc {
	border-top-left-radius: .2em
}

.trc {
	border-top-right-radius: .2em
}

.blc {
	border-bottom-left-radius: .2em
}

.brc {
	border-bottom-right-radius: .2em
}

.c1 {
	text-align: center;
	background-color: var(--back)
}

.cc {
	text-align: center;
	vertical-align: top
}

.cr {
	text-align: right;
	vertical-align: top
}

.cl {
	text-align: left;
	vertical-align: top
}

.ccb {
	text-align: center;
	border: var(--back2) 1px solid;
	vertical-align: top
}

.crb {
	text-align: right;
	border: var(--back2) 1px solid;
	vertical-align: top
}

.clb {
	text-align: left;
	border: var(--back2) 1px solid;
	vertical-align: top
}

/* End general tables */
.textriv {
	max-width: var(--fulw);
	background-color: var(--back);
	padding: 8px;
	font-size: 1.2em;
	margin: auto;
	border-color: var(--dark);
	border-style: solid;
	border-width: 0 1px 1px 1px;
	border-bottom-left-radius: .4em;
	border-bottom-right-radius: .4em;
}

#nav {
	padding: 3px;
	background-color: var(--back);
	box-shadow: 0 0 .3em var(--dark);
}

.dim {
	color: var(--back2)
}

#logo {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 10px
}

.help {
	background-color: var(--hl);
	padding: 2px;
	display: inline-block;
	border-radius: .3em;
}

#headdiv {
	text-align: left;
	margin: 5px auto auto auto;
	padding: .8em;
	border-radius: .3em;
	background-color: var(--back1);
}

#headdiv h1 {
	text-align: left;
	margin: .3em
}

#headdiv h4 {
	text-align: left;
	margin: .3em;
	font-weight: normal
}

span#ptitle {
	color: var(--text);
	font-weight: 400
}

span#smhead {
	color: var(--text);
	font-weight: 300
}

table#search {
	width: 40em;
	margin-left: auto;
	margin-right: auto;
	border: var(--dark) 1px solid;
	background-color: var(--back)
}

.sl {
	width: 10em;
	text-align: right;
	vertical-align: middle
}

#search .catlab {
	width: 50%;
	text-align: right;
	vertical-align: middle
}

.rev-scores {
	padding: 6px;
	text-align: right;
	color: var(--text);
	font-size: 1.1em;
	background-color: var(--hl);
	border-bottom: var(--back2);
	border-width: 0 0 1px 0;
	border-style: none none dotted none;
	margin: auto auto auto 0pt;
	width: 90%
}

.info {
	width: 90%;
	border-top: 2px var(--back2) dotted;
	border-bottom: 2px var(--back2) dotted;
	padding: 3px;
	font-size: 0.8em;
	margin: auto;
	text-align: center
}

.review-table {
	width: 90%;
	border-color: var(--back2);
	border-width: 1px;
	border-style: solid;
	margin: auto;
	background-color: var(--back)
}

.prog {
	background-color: var(--hl);
	border: 1px solid var(--back2);
	text-align: center;
	border-radius: .3em;
	padding: .1em .3em;
}

.hl {
	background-color: var(--hl)
}

.hl:hover,
.hl:hover a {
	color: var(--back);
	background-color: var(--vis);
}

.light {
	background-color: var(--back2)
}

.tdesc {
	font-size: 1.2em;
	background-color: var(--back1);
	padding: 3px;
	border-bottom: 1px solid var(--dark);
	font-weight: bold;
}

.tdesc a {
	text-decoration: none
}

img {
	border: 0px
}

/* -- Start Series Descriptors */
.ser-box {
	width: var(--fulw);
	margin-left: auto;
	margin-right: auto
}

.ser-name {
	width: 100%;
	background-color: var(--acc);
	padding: 2px;
	margin-bottom: 0px;
	color: var(--back);
	font-size: 2.0em;
	font-weight: bold;
	text-indent: 10px;
	text-align: left
}

.ser-name a {
	color: var(--back);
}

.sub-table-head {
	width: 100%;
	background-color: var(--acc);
	padding: 2px;
	margin-bottom: 0px;
	margin-top: 6px;
	color: var(--lblue);
	font-size: 1.3em;
	font-weight: normal;
	text-align: left
}

.ser-desc {
	width: 100%;
	text-align: left;
	background-color: var(--back);
	margin-top: 3px;
	margin-bottom: 3px;
	padding: 10px 2px 6px 2px
}

.ser-table {
	width: 100%;
	border: var(--dark) 1px solid;
	background-color: var(--back)
}

/* -- End Series Descriptors */
/* -- Start Management Tables */
.list-item {
	margin-left: auto;
	margin-right: auto;
	background-color: var(--back);
	width: 500px;
	border-color: var(--dark);
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-spacing: 0px
}

.but-cell {
	border: var(--back2) 1px solid;
	width: 20px
}

.list-item th {
	width: 9em
}

#bloglist {
	width: 100%;
	margin-bottom: 5px
}

#bloglist th {
	width: 9em
}

.ab {
	background-color: var(--hl);
	font-style: italic;
	padding: .2em .3em;
	border-radius: .2em;
}

/* Start Bookmark Management Form Styles */
#b-man-div {
	text-align: center;
	border: var(--dark) dotted 1px;
	background-color: var(--lyel);
	width: 385px;
	margin: 5px auto 5px auto
}

#b-man-div2 {
	width: 365px;
	margin: 5px auto 5px auto;
	border: var(--dark) 1px solid;
	background-color: var(--back);
	text-align: center;
	font-size: small;
	padding: 2px;
	font-weight: bold
}

.b-man-form {
	margin: 1px
}

/* End Bookmark Management Form Styles */
a#active-main {
	color: var(--text);
	padding: 3px;
	margin: 0px;
	font-weight: bold;
	font-size: 1.1em
}

a#active-main:hover {
	background-color: var(--acc);
	color: var(--back)
}

a.inactive-main {
	padding: 3px;
	margin: 0px;
	font-weight: bold
}

#ac-links {
	margin-top: 8px;
	padding: 4px;
	border-radius: 0.2em;
	clear: both
}

.gb {
	margin-bottom: 5px;
	background-color: var(--lgre);
	font-size: 1.1em
}

.wb {
	margin-bottom: 5px;
	background-color: var(--back);
	font-size: 1.1em
}

#result-body {
	width: 80%;
	margin: 0px auto 0px auto;
	background-color: var(--back);
	padding: 10px
}

.res-item {
	margin-top: 12px;
	padding: 2px;
	font-size: 1.2em
}

.res-excerpt {
	font-size: smaller;
	margin-left: 3em
}

.typediv {
	padding: 1px;
	margin-top: 9px;
	color: var(--text);
	font-weight: normal
}

.atitle,
.aAuth {
	margin: 2px
}

.dnldbu,
.book {
	text-decoration: none;
	font-weight: bold;
	display: inline-block;
	text-align: center;
	border: var(--dark) 1px solid;
	border-radius: .3em;
	width: auto;
	font-size: 86%;
	padding: .2em .3em;
	margin: 5px;
	background-color: var(--back2);
}

.dnldbu:visited,
.book:visited {
	color: var(--text);
	background-color: var(--lblue);
}

.notice {
	background-color: var(--back);
	padding: 5px;
	border: 1px dotted var(--back2);
	border-radius: .4em;
	margin-bottom: 5px;
	color: var(--lblue);
}

.dlinks a,
.bspan {
	color: white;
	padding: 3px 7px 3px 7px;
	text-decoration: none;
	border-radius: .3em;
	margin: 2px 4px 2px 4px;
	font-weight: bold;
	background-color: green;
	font-size: 80%;
	white-space: nowrap;
}

.bor {
	border: var(--back1) 1px solid;
}

td.bor,
th.bor {
	border: var(--back1) 1px solid;
	padding: 4px;
}

.fl {
	display: inline-block;
	float: left;
}

.fr {
	display: inline-block;
	float: right;
}

.t {
	vertical-align: top;
}

.m {
	vertical-align: middle;
}

.ba {
	vertical-align: bottom;
}

.bg {
	background-color: var(--lgre);
}

.bw {
	background-color: var(--back);
}

.by {
	background-color: var(--lyel);
}

.pyb {
	background-color: var(--hl);
}

.pyc {
	background-color: var(--lblue);
}

.pyg {
	background-color: var(--back2)
}

.dbutt {
	color: var(--back);
	padding: 3px 14px 3px 14px;
	text-decoration: none;
	border-radius: .5em .5em;
	margin: 2px 5px 2px 9px;
	font-weight: bold;
	background-color: var(--acc);
	font-size: 80%;
	white-space: nowrap
}

.ful {
	width: 95%
}

.pt {
	margin: 10px 0px 10px 0px
}

.abar {
	text-align: center;
	margin: auto;
	max-width: var(--fulw);
}

.abar a {
	display: inline-block;
	padding: .4em;
	text-align: center;
	background-color: var(--back1);
	margin: .3em .07em;
	text-decoration: none;
	font-size: 1.1em;
}

.abar a:active {
	padding: .5em;
	margin-left: -.05em;
}

.abar a.alac {
	border: var(--back1) 1px solid;
	background-color: var(--back)
}

.pklet {
	font-size: 2em;
}

.nobor {
	border-collapse: collapse
}

.nblo,
a.nbl {
	display: inline-block;
	min-width: 2em;
	padding: 4px;
	text-align: center;
	color: var(--text);
	text-decoration: none;
	border-radius: 0.3em;
	margin: 4px;
	border: var(--dark) 1px solid;
	font-family: var(--bodyText);
}

.nblo {
	min-width: 3em;
	max-width: 3em;
	background-color: var(--back1);
	font-family: var(--bodyText);
}

a.nbl {
	background-color: var(--back);
	color: var(--text);
}

a.nbl:visited {
	background-color: var(--back);
	color: var(--vis);
}

.pad {
	padding: .5em
}

.spad {
	padding: .25em
}

.bpad {
	padding: 1em;
}

.npad {
	padding: 0;
}

.nmar {
	margin: 0;
}

.formDiv {
	border-bottom: 1px solid var(--dark);
	padding: 8px
}

a .formDiv:hover {
	background-color: teal
}

.premier {
	background-color: var(--prem);
}

.asc-sort-arr {
	display: inline-block;
	vertical-align: middle;
	width: 13px;
	height: 7px;
	background-image: var(--icons);
	background-repeat: no-repeat
}

.desc-sort-arr {
	display: inline-block;
	vertical-align: middle;
	width: 1em;
	height: .6em;
	background-image: var(--icons);
	background-repeat: no-repeat;
}

.dot {
	display: inline-block;
	width: 1em;
	height: 1em;
	text-decoration: none;
	margin: 4px
}

.gd,
.fd,
.dn {
	display: inline-block;
	width: 15px;
	height: 15px;
	background-size: 15px 15px;
	text-decoration: none;
	margin: 2px;
	background-repeat: no-repeat
}

.cf,
.gf {
	display: inline-block;
	width: 16px;
	height: 22px;
	background-size: 15px 22px;
	text-decoration: none;
	margin: 0px;
	background-repeat: no-repeat
}

.gd {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFLqJJw+TL////G3EiugAAAAN0Uk5T//8A18oNQQAAAD1JREFUeNpiYAICRkYGMGBkBPEYQCIMcMAIEUISAYsxoIqAxBjQRIBi2IToD4hzFxYPYfM2tsBBD0KAAAMASXoAbVcq3vIAAAAASUVORK5CYII=)
}

.fd {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF0tLSMzMz////R7klegAAAAN0Uk5T//8A18oNQQAAAEhJREFUeNqM0FsKACAIBMC1+x+6dMUi7bEfgUOYBrQtSDLsRGAW0lLCQBGNG8lKPYJMzCZ5e7neKnrlF4u5quk/1358GLoAAwAn+QHFipUqwQAAAABJRU5ErkJggg==)
}

.cf {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAtCAMAAACDHlvUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEhQTFRF/8wzzJkzmWYzzMwzZmZm/8xmZjMz/5kzzGYzZmYzZjMA/5lm//9mMzMzAAAAmZlmzMzM////mZmZzMxmZmYAmZkzMzMA////Z1UPegAAABh0Uk5T//////////////////////////////8AzRMu6gAAAQtJREFUeNp00u12wyAIAFA/IKnpVLTreP83HVOz1ITwk3sQUA1zzcTXMLzY56aIIYcGQQWjgxyFi3YUM6RNreCcgoWig7FL0cGsrU8hmiAbCQdE8f2dyxmMdc57b0M5oNomRvLevLo0IHvkEbENIlBTnuDrBR0oxSmP+K43gIE6/JzyuIYO2w64g6sNwqngua7QAKL1U8EaSIBTLuCmgkfmDrJMaLthL5AVd2AK9r/A9T04xr/LKSCR5aGlgD9hBDgZSQOuy6MOgDQ9aok0IM/AtENN+r+S1W8h68AJbmCe9wNO8x6Qle4NKFUdtO4dlO4dIBUdlCYdlCYD4DLwgOt1DbjOtQOdx/oVYADqf0kKAkZGVAAAAABJRU5ErkJggg==)
}

.gf {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAtCAMAAACDHlvUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAxQTFRFzMzM////zMz/////wDFJ9AAAAAR0Uk5T////AEAqqfQAAACdSURBVHjanNJBEsMgDANAyfr/nxsgNJBI7bS+cNhBgA0kknoWhKOMgA3wC8QoqYCy0MKKAZ5pb+iyPKnDoGJbJy0wiwmGOOhiobZb3bZ4OCQAIjABOpTfcQyLdIer3Y4Jdhnv0Bj56O08eIGz6mrJDi3zbKK4/x4mEC/w/+oPUAYEqATukM+gDAhgsr6AycIcDz0wwTML63DWegkwADPVCFmEYQgQAAAAAElFTkSuQmCC)
}

.dn {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRFYryN6PbuAJJFQK100OvdEJlRsN3F////dqrZdgAAAAh0Uk5T/////////wDeg71ZAAAAmUlEQVR42uzSyw7FIAgE0JFH+f8/vo2KQK8uuyurxjlJDSMsT4MqWjlCyZXu0XYEoD44Ah6AP/AWEDBfT3AxQwYQ9YYS6L2pdMCrwwCILzMiFwvAzwogOFg55V/shtMldzMveRQqvqi96Pnc5E6M3Ff9L2a+ungKz6OsKlae2swi8lx3iJSX9+Ai5/XBDFHyCkzuXrjk9hNgAHSdE6MXtCdlAAAAAElFTkSuQmCC)
}

img {
	max-width: 100%;
	height: auto;
}

@media (prefers-color-scheme: light) {
	.squ {
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////9/f3nW2m7gAAADdJREFUeNrs1iEKAAAIBEH9/6ftgsEozlZhwiUjWtna3gEAwF3AaAAAYMomAID/wGgAwHugBBgAFA8IASbRJb4AAAAASUVORK5CYII=);
		background-size: 32px 32px;
	}
}

@media (prefers-color-scheme: dark) {
	.squ {
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsBAAALAQE2cE9bAAAA7UlEQVR4nO3aMU7DQBhE4XHkBpfQps79z0PNGaCCpeAIf6RPYuf163l6VgpHe6y1MuQxPP+R5FPt3yaH/wMNoAU0DaAFNA2gBTQNoAU0DaAFNA2gBTTbBziTXHD/hvdzrLWm3/Pvg7NXkjvc70+gAbSApgG0gKYBtICmAbSApgG0gKYBtIBm+wDnE54x+Z6/8vcSftB+jt4P2JwG0AKaBtACmgbQApoG0AKaBtACmgbQAprtA5xJ3vD+a5IXKTAN8Iz7AZM/NXo/YEIDaAFNA2gBTQNoAU0DaAFNA2gBTQNoAc32Ac4kX3D/G+/nF6ZSFhOvidEyAAAAAElFTkSuQmCC);
		background-size: 32px 32px;
	}
}

.center,
.c {
	text-align: center
}

.right,
.r {
	text-align: right
}

.left,
.l {
	text-align: left
}

.s,
.sm {
	font-size: 80%
}

.lsm {
	font-size: 90%;
}

.big {
	font-size: 110%;
}

.mbig {
	font-size: 120%;
}

.i {
	font-style: italic
}

.b {
	font-weight: bold
}

.red {
	color: var(--red);
}

.lblue {
	color: var(--lblue);
}

.blue {
	color: var(--navy);
}

.green {
	color: var(--green);
}

.lb {
	background-color: var(--lblue);
}

.lg {
	background-color: var(--lgree);
}

.storyList,
.navig,
.sorter,
.ser-box,
.ma {
	margin: auto
}

.entry {
	border-radius: 0.2em;
	background-color: var(--back);
	margin-bottom: 5px;
	margin-top: 2px;
	box-shadow: 0em 0em .2em var(--dark)
}

.wrap {
	padding: 5px;
	border-top: 1px #eee solid
}

.sname {
	font-weight: bold;
	font-size: 1.1em;
	float: left;
	margin-top: 5px;
	margin-bottom: 5px
}

.aname {
	font-size: 1.2em;
	margin-top: 2px;
	margin-bottom: 2px
}

.sdesc {
	clear: both;
	border-bottom: 1px silver solid;
	padding-bottom: 5px;
}

.misc {
	font-size: .95em;
	margin-top: 5px
}

.gd,
.fd,
.gf,
.cf {
	margin: 8px
}

.sorter {
	text-align: right
}

.hcb {
	background-color: var(--back);
}

.lcb {
	background-color: var(--back1);
}

.mcb {
	background-color: var(--back2);
}

.hct {
	color: var(--text);
}

.lct {
	color: var(--dgray);
}

.hc {
	background-color: var(--back);
	color: var(--text);
}

.mc {
	background-color: var(--back2);
	color: var(--dgray);
}

.lc {
	background-color: var(--back2);
	color: var(--lgray);
}

.mchb {
	background-color: var(--back);
	color: var(--dgray);
}

.mclb {
	background-color: var(--back2);
	color: var(--text);
}

.shad {
	box-shadow: 0 0 .2em var(--dark)
}

.bshad {
	box-shadow: 0 .1em .1em var(--dark)
}

.dimm {
	background-color: var(--back1);
	background-image: none;
}

.nd {
	text-decoration: none;
}

.nd:hover {
	text-decoration: underline;
	background-color: teal;
}

.fw {
	width: 98%;
	max-width: 80em;
}

.ttw {
	width: 60%;
	max-width: 45em;
}

.mb0 {
	margin-bottom: 0
}

.mb5 {
	margin-bottom: 5px
}

.mb10 {
	margin-bottom: 10px
}

.mt0 {
	margin-top: 0
}

.mt5 {
	margin-top: 5px
}

.mt10 {
	margin-top: 10px
}

.cb {
	margin-left: auto;
	margin-right: auto;
}

.ind1 {
	text-indent: 1em;
}

.ind2 {
	text-indent: 2em;
}

.clear {
	clear: both
}

.bbor {
	border-bottom: 1px solid var(--dark);
}

.tbor {
	border-top: 1px solid var(--dark)
}

.bbrad {
	border-radius: .7em
}

.mbrad {
	border-radius: .5em
}

.sbrad {
	border-radius: .3em
}

.nbr {
	white-space: nowrap;
}

.aicon {
	text-decoration: none;
	display: inline-block;
	padding: 5px;
	border-radius: .3em;
}

div.pane {
	position: relative;
	float: left;
	margin-left: 1%;
	width: 37%
}

div#left-pane {
	margin-left: 1%;
	max-width: 15em
}

div.pane-head {
	margin-top: 8px
}

span.pane-head-text {
	background-color: var(--back1);
	color: var(--text);
	padding: 3px 3px 1px 3px;
	font-weight: bold;
	font-size: 110%;
	border-radius: .3em;
}

div.pane-body {
	background-color: var(--back);
	border: var(--dark) 1px solid;
	padding: 3px;
	margin-top: 1px;
	box-shadow: .1em .1em .2em var(--dark);
	border-radius: .2em;
}

div.pane-body ul {
	list-style: none;
	margin-left: 0px;
	padding-left: 1.4em;
	text-indent: -1em
}

div.pane-body ul li {
	line-height: 1em;
	margin-top: .6em;
	font-size: 1em;
}

div.quick {
	text-align: center
}

#sug-title {
	font-weight: bold
}

#sug-auth {
	font-weight: bold
}

#sugdesc {
	color: var(--text);
	text-align: left;
	vertical-align: top;
	padding: 3px;
	background-color: var(-lblue)
}

#ref-link {
	font-size: 89%;
	font-weight: bold;
	padding: 1px;
	margin: 1px;
	background-color: var(--back)
}

.nlabel,
.ulabel,
.blabel,
.nilabel,
.aslabel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top-left-radius: 0.1em;
	border-top-right-radius: 0.1em;
	font-size: 1em;
	color: var(--text);
	margin: 0.5px auto 0.5px auto;
	padding: 2px 2px 2px 12px;
	border-bottom: 1px var(--dark) inset;
	background-color: var(--back2);
}

.dnld {
	padding: 5px
}

.vh {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
	clip-path: inset(0px 0px 99.9% 99.9%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	padding: 0;
	border: 0
}

#wrapper {
	margin: auto;
	padding: 5px;
}

.timestamp {
	padding: 3px;
	border-radius: .3em;
}

.post-text,
.post-text p {
	font-size: 1.05em;
	word-break: break-word;
	line-height: 140%
}

#doverc {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--back);
	z-index: 1000;
	display: block;
	padding: 2px;
	overflow: scroll
}

#myTagsDiv {
	padding: 2px
}

#myTagsDiv a,
#stTagsDiv span {
	text-decoration: none;
	color: var(--text);
	background-color: var(--back2);
	padding: 1px 5px 1px 5px;
	border-radius: .6em .6em;
	border: 1px solid var(--back1);
	margin-left: 5px;
	white-space: nowrap;
	line-height: 2em
}

#myTagsDiv a:hover {
	background-color: var(--acc);
}

#stTagsDiv span {
	background-color: var(--back2);
	border-color: var(--back1);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
}

input[type=text],
input[type=number],
textarea {
	border: 1px solid var(--dark);
	background-color: var(--back);
	color: var(--text);
	border-radius: .2em;
	padding: .3em;
	font-size: 1em;
	box-shadow: 0 0 .3em var(--dark);
	margin: 3px;
	width: 98%;
	font-family: var(--mono);
	vertical-align: middle;
}

button,
.ed_button,
input[type=submit],
input[type=reset],
.fkbutt {
	display: inline-block;
	border-radius: .4em;
	font-size: 1em;
	border: none;
	box-shadow: 0 0 .2em var(--dark);
	background-color: var(--back);
	color: var(--text);
	margin: 4px;
	padding: 4px;
	cursor: pointer;
	text-decoration: none;
}

button:hover,
ed_button:hover,
input[type=submit]:hover,
input[type=reset]:hover,
.fkbutt:hover {
	background-color: var(--dark);
	color: var(--back);
}

button:active,
ed_button:active,
input[type=submit]:active,
input[type=reset]:active,
.fkbutt:active {
	background-color: var(--hl);
	color: var(--text);
}

input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--dark);
	border-radius: .2em;
	outline: none;
	cursor: pointer;
	background-color: var(--back1);
	position: relative;
	vertical-align: text-bottom;
}

/* Styling for the checked state */
input[type="checkbox"]:checked {
	background-color: var(--blue);
	border-color: var(--blue);
}

/* Optional: Add a checkmark indicator using a pseudo-element */
input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: .16rem;
	top: -.1rem;
	width: .25rem;
	height: .6rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Hamburger menu styling */
.hmb-menu {
	position: relative;
	display: inline-block;
	margin-right: 1em;
}
.dnld-menu {
	position: relative;
	display: inline-block;
}

.hmb-icn {
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;
	padding: 4px;
	user-select: none;
	border-bottom: 3px var(--dark) solid;
	text-align: left;
}

.hmb-icn:hover {
	background-color: var(--dark);
	color: var(--back);
}

.hmb-drp-cont {
	display: none;
	position: absolute;
	background-color: var(--back);
	min-width: 10em;
	max-width: 12em;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	z-index: 1;
	border-radius: 4px;
	padding: 0;
	text-align: left;
}

.hmb-drp-cont ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hmb-drp-cont li {
	position: relative;
	text-align: left;
}

.hmb-drp-cont ul li a {
	color: var(--text);
	padding: 5px 5px;
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
}

.hmb-drp-cont a:hover {
	background-color: var(--back1);
	color: var(--text);
}

/* Sub-menu styling */
.hmb-drp-cont ul ul {
	display: none;
	position: absolute;
	left: 100%;
	top: 0;
	background-color: var(--back);
	min-width: 10em;
	max-width: 12em;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}

.hmb-drp-cont li:hover>ul {
	display: block;
	z-index: 1;
}

.hmb-drp-cont.show {
	display: block;
}

/* Chevron styling (only for direct <a> child of .hmb-sub) */
.hmb-sub>a::after {
	content: '\203A';
	/* Right single angle quote (›) */
	margin-left: 18px;
	font-size: 24px;
	vertical-align: text-bottom;
}

/* Mobile adjustments */
@media (max-width: 600px) {
	.hmb-drp-cont {
		min-width: 100%;
	}

	.hmb-drp-cont ul ul {
		position: static;
		box-shadow: none;
		padding-left: 20px;
	}

	.hmb-drp-cont li:hover>ul {
		display: none;
	}

	.hmb-drp-cont li.submenu-active>ul {
		display: block;
	}
}

/* reflowable grid, instead of table */
.rfl-grd {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	/* Default: 5 columns for desktop */
}

.rfl-grd li {
	display: flex;
	align-items: center;
	padding: 4px;
	/* From original td padding */
}

.rfl-grd input[type="checkbox"] {
	margin-right: 8px;
}

.rfl-grd label {
	cursor: pointer;
	white-space: nowrap;
	/* Prevent label wrapping if possible */
}

#points {
	font-size: 1.5em;
	font-weight: bold;
	list-style: none;
}
#points li {
	padding:6px;
}
#expl {
	display: block;
	font-size: 2.5em;
	padding:.4em;
	text-align: center;
	border:1px #888 dashed;
	font-weight: bold;
	margin:.6em .2em;
	border-radius: .5em;
	box-shadow: 0 0 .3em #888;
}
#inv{
	background-color: white;
	border: 3px solid black;
	border-radius: 1.5em 1.5em 0 1.5em;
	padding: 5px
}

.item {
	background-color: #ddd;
	padding: 7px;
	margin-bottom: 4px;
	border-radius: .3em .3em;
	cursor: pointer;
	font-weight: bold;
	text-align: left;
	font-size:1.5em;
}

.item a {
	text-decoration: none;
}

.ch {
	color: #492;
	font-size: 1.2em
}

#ttitle { font-size: 1.6em; padding: 0; margin: 0}
	#host {width:300px; height:auto;}

/* Responsive reflow */
@media (max-width: 1024px) {
	.rfl-grd {
		grid-template-columns: repeat(3, 1fr);
		/* 3 columns for tablets/medium screens */
	}
	#inv {font-size:2.4em }
}

@media (max-width: 820px) {
	.rfl-grd {
		grid-template-columns: repeat(2, 1fr);
		/* 2 columns for mobile */
	}
	#host {width:250px; height:auto;}
	#ttitle { font-size: 1.2em; }
	.item {
		padding: 5px;
		margin-bottom: 3px;
		font-size:1.2em;
	}
}
@media (max-width: 440px) {
	#host {width:180px; height:auto;}
	#inv {font-size: 2em; }
	#points { font-size: 1.2em; }
	#expl {font-size: 1.6em ;}
}
@media (max-width: 400px) {
	.rfl-grd {
		grid-template-columns: 1fr;
		/* 1 column for very small screens */
	}
	#host {display: none;}
	#ttitle { font-size: 1.2em; }
	#inv { font-size: 1.8em}
	.item {
		padding: 5px;
		margin-bottom: 3px;
		font-size:1.2em;
	}
}

/* end reflowable grid */
/* flex columns */
.frow {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
}

.f1 {
	flex: 1;
}

.f2 {
	flex: 2;
}

.f3 {
	flex: 3;
}

.f4 {
	flex: 4;
}

.f5 {
	flex: 5;
}

/* end flex columns */