body { margin:0; font-family: Arial, sans-serif; background: rgb(255,255,255); }

a:visited,
a { color:rgb(0,0,255); text-decoration: none; }
a:hover { text-decoration: underline; }

main { margin:30px auto 100px auto; max-width:600px; width: 100%; }
pre { overflow: scroll; max-height:300px; }

h1 { font-size: 2.5rem; margin: 0 0 10px 0; }
h1.s { font-size: 1.5rem; }

table, tbody, thead, tr, td, div, h1, h2, h3, header, nav { box-sizing:border-box; }

ins { display: block; border-radius:6px; border:1px solid rgb(128,128,128); margin:0 auto 30px auto; width: 560px; padding:20px; text-decoration: none; font-style: italic; font-size:0.8rem; }
ins.err {  background:rgba(255,0,0,0.1); color:rgb(213,0,0); border-color:rgba(255,0,0,0.2); }
ins.suc { background:rgba(0,255,0,0.1); color:rgb(0,170,0); border-color:rgba(0,255,0,0.2); } 

header { margin-bottom: 30px; }
footer { padding:20px 0; text-align: center; color:rgb(170,170,170); font-size:0.7rem; line-height:150%;  }
footer a,
footer a:visited { color:rgb(150,150,213); }
footer div span:after { content:' \00B7 '; }
footer div span:last-of-type:after { content:''; }

#home { margin-top:40px; }

/*** ITEM ***/

h1.b { margin:0 0 2px 0; padding: 16px; width:100%; font-size: 1.5rem; line-height: 130%; color: rgb(43,21,11); background: rgb(255,240,230); text-align: center;  border-radius:10px; position: relative; }
h2.b { display: flex; gap:2px; justify-content:space-between; align-content:stretch; margin:0 0 2px 0; width:100%; font-size: 0.9rem; line-height: 130%; text-align: center; }
h2.b a:visited,
h2.b a { flex-grow: 1; color:rgb(170,128,43); padding:8px 16px; border-radius:6px; background:rgba(255,128,0,0.2); }
h2.b a.del { color:rgb(255,0,0); }
h2.b a.mod { color:rgb(255,128,0); }

section h3 { margin:0 0 2px 0; padding: 16px 10px; width:100%; font-size: 0.9rem; line-height: 100%; color: rgb(85,85,85); background: rgb(220,220,230);  border-radius:10px; position: relative; }
section caption { display: none; }

section table { display: flex; position:relative; overflow: hidden; margin-bottom:2px; width:100%; }

section thead,
section tbody { padding:0; display: inline-block; margin:0; position:relative; }
section thead { background: rgb(235,235,240);  border-radius:10px 0 0 10px; }

section tr { display: block; padding:10px; margin:0; position: relative; vertical-align: middle; border-top:2px solid rgb(255,255,255); }
section tr:first-of-type { border:0; }

section th,
section td { line-height: 22px; height:22px; overflow: hidden; display: block;  width:100%; padding:0; margin:0; text-align: left; font-weight: normal; }
section th { font-size:0.7rem; color: rgb(150,150,160); }
section td { font-size:0.9rem; }
section tbody tr {border-radius:0 10px 10px 0; background: rgb(245,245,250); }

section td div { display:inline-block; margin-right:4px; }

section td div a.aid { font-family:monospace; font-size:0.6rem; }

section.log tbody tr { background:rgb(230,230,255); }

section.clM h3 { color: rgb(85,100,100); background: rgb(240,230,220); }
section.clM thead { background:rgb(245,240,230); }
section.clM th { color: rgb(160,150,140); }
section.clM tbody tr { background:rgb(250,245,240); }
section.clM tbody tr a { color:rgb(170,100,85); }

section.cl8567899 h3 { color: rgb(85,100,100); background: rgb(220,230,235); }
section.cl8567899 thead { background:rgb(230,240,245); }
section.cl8567899 th { color: rgb(140,150,160); }
section.cl8567899 tbody tr { background:rgb(240,245,250); }
section.cl8567899 tbody tr a { color:rgb(0,128,255); }
a.prch b {}
a.prch i { font-style: normal; }
a.prch:hover b,
a.prch:hover i { text-decoration: underline; }

/* item pictures */
section.picget { text-align:center; padding: 10px 0; }
section.picget h3 { text-align:left; }
section.picget #picbig { padding:10px 10px 0 10px; }
section.picget #picbig img { max-height:300px; width:100%; object-fit: contain; }
section.picget .picgrp { padding:10px 10px 0 10px; display:inline-block; text-align:center; margin:0 auto; }
section.picget .picgrp .pic { border-radius:6px; overflow: hidden; border:2px solid rgb(255,255,255); display:inline-block; margin-right:4px; height:86px; width:86px; position:relative; }
section.picget .picgrp .pic img { height:86px; width:86px; object-fit: contain; }
section.picget .picgrp .pic.picon { border-color:rgb(255,213,192); }

/* search results with pics */
/*
section.pic h3 { margin-bottom:6px; }
section.pic { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap:1%; }
section.pic table { flex: 48%; margin:0 0 6px 0; height:auto; }
section.pic table tbody { height:auto; width:100%; }
section.pic table tbody tr { height:auto; border-radius:10px; padding:4px; width:100%; overflow: hidden;  }
section.pic td.pic { display: inline-block; height:80px; background:white; border-radius:8px;  margin-right:2%; overflow: hidden; }
section.pic td.txt { display: inline-block; height:auto; }
section.pic td.txt a { display: inline-block; max-height:66px; overflow:hidden; }
section.pic table img { height:100%; width:100%; object-fit: contain;  }*/

/* search results text only */
.srch section { display: block; width:100%; }
.srch section table,
.srch section table tbody,
.srch section table tbody tr,
.srch section table tbody tr td.txt { width:100%; }
.srch section table tbody tr { border-radius:10px; }

.srch section.pic table tbody tr { position:relative; height:44px; }
.srch section.pic table tbody tr td.pic { position:absolute; left:6px; right:0; height:32px; width:32px; background:white; margin-right:10px; border-radius:4px; }
.srch section.pic table tbody tr td.txt { position:absolute; left:48px; right:10px; top:10px; width:auto; overflow:hidden; }
.srch section.pic table tbody tr { padding:5px; }
td.pic img { height:100%; width:100%; object-fit: contain;  }


a.url { color:rgb(0,128,255);  font-size: 0.8rem; }
.num { font-family:monospace; font-size:0.7rem; color:rgb(128,128,128); } /* depriciated */
.num a { color:rgb(85,85,170); }

.vs { margin:0 auto; border-spacing:0; border:1px solid rgb(213,213,213); border-radius:8px; overflow:hidden; }
.vs th, .vs td { min-width:150px; max-width:250px; overflow:hidden; padding:6px; border-bottom:1px solid rgb(213,213,213); border-right:1px solid rgb(213,213,213); }
.vs tbody tr td:last-of-type { border-right:0; }
.vs tr:last-of-type td, .vs tr:last-of-type th { border-bottom:0; }
.vs thead th { text-align:left; background:rgb(230,230,230); padding:12px 6px; }
.vs tbody th { text-align:left; font-weight:normal; font-size:0.7rem; color:rgb(85,85,85); background:rgb(250,250,250); }
.vs tbody td { font-size:0.8rem; }
.vs tbody td.clss { background:rgb(240,240,240); padding:10px 6px; }
.vs tbody td.clss h3 { margin:0; font-size:0.8rem; color:rgb(128,128,128); }
.vs td div { height:22px; line-height:22px; overflow:hidden; }
.vs tr.img td { text-align:center; }
.vs td img { object-fit: contain; max-width:250px; max-height:200px; }

/* filter tags */
#onftr { margin-bottom:14px; border-radius:10px; }
#onftr .f { display:inline-block; padding:8px 12px; border-radius:4px; color:rgb(85,85,85); background:rgba(255,128,0,0.2); margin:0 6px 6px 0; font-size:0.8rem; font-weight:bold; }
#onftr .f a { color:rgb(128,85,0); }
#onftr .f .x { color:rgb(170,0,0); margin-left:4px; }
#onftr a.f.c { color:rgb(213,100,0); }
#onftr a.f.f { color:rgb(213,100,0); }
#onftr a.f.a { color:rgb(0,170,0); background:rgba(0,213,0,0.2); }

/* filter prev/next */
h3.prenex { text-align:center; }
h3.prenex span { color:rgb(128,128,128); }
#prev1,
#prev2 { float:left; }
#next1,
#next2 { float:right; }
a.na { cursor:text !important; color:rgb(128,128,128) !important; text-decoration:none !important; }
a.na:hover { text-decoration:none !important; }

/*** POPUP ***/

#popWrap { display:none; position: fixed; z-index:9; background:rgba(0,0,0,0.7); backdrop-filter: blur(1px); top:0; right:0; bottom:0; left:0; width:100%; }
.popBox { margin:100px auto 0 auto; max-width:620px; width:92%; border-radius:10px; overflow:hidden; }
.popTop { background:rgb(85,43,0); color:white; padding:20px; position: relative; }
.popX { display:block; background:rgb(128,85,0); color:white; padding:20px 30px; position:absolute; top:0; right:0; }

.popMain { background:rgb(255,255,250); overflow:hidden; }
.popMain form,
.popMain section { border:0; margin:0; }
.popMain section thead { border-radius:0; }
.popMain section tr { padding:12px; border-radius:0; }
.popMain section th, 
.popMain section td  { height:auto; }
.popMain input.str,
.popMain select { width:100%; box-sizing:border-box; }
.popMain input[type=number] { width:100px; }

.popMain option {}
.popMain option.new { color:rgb(0,128,0); }
.popMain option.mor { color:rgb(0,0,128); }

/* popup filter */
.popMain section.ftr { padding:2px; display:block; margin:0; max-height:500px; overflow:auto; }
.popMain section.ftr div, 
.popMain section.ftr a {display:block; font-size:0.9rem; line-height: auto; height:auto; padding:10px; border-radius:6px; margin-bottom:2px; }
.popMain section.ftr div { font-weight:bold; background:rgb(245,230,210); color:rgb(85,43,21); }
.popMain section.ftr a { color:rgb(213,128,85); background:rgb(255,245,240); }
.popMain section.ftr a.bck { color:rgb(192,150,100); background:rgb(245,245,240); }
/*.popMain section.ftr a:last-of-type { margin-bottom:200px; }*/

.popMain div.lod { padding:120px 0; text-align:center; color:rgb(192,192,192); font-size:1rem; line-height:1rem; }
.popMain div.lod:after { content:'Loading...'; }

.popMain section.ff { padding:20px; display:block; margin:0; max-height:500px; overflow:auto; line-height:100%; font-size:1rem; }
.popMain .radgrp { width:100%; margin-bottom:14px; }
.popMain .radgrp .rad { display: inline-block; width:46%; margin:0 1% 6px 0; background:rgba(255,128,0,0.1); border-radius:6px; padding:6px 1%; }
.popMain .radgrp label {vertical-align: text-top; }
.popMain .radgrp input { margin-left:0; }
.popMain .radgrp input[type=number] { font-size:1.2rem; width:200px; }

.popMain .oprgrp { width:100%; margin-bottom:20px; }
.popMain .oprgrp .opr { display: inline; margin-right: 6px;}
.popMain .oprgrp label {vertical-align: text-top; }

.popMain .fopt { width:100%; margin-bottom:6px; }
.popMain .fopt a { display:inline-block; line-height: 100%; font-size:0.7rem; padding:4px 8px; border-radius:4px; background:rgb(255,230,213); color:rgb(128,85,0); margin-right:2px; }
.popMain .fopt a.on { font-weight:bold; }



/*** MOD ***/
.html { font-size:0.7rem; font-family: monospace; }
.html f { color:rgb(170,170,170); }
.html r { border-bottom: 1px solid rgb(170,170,170); }
.html lnk,
.html url { color:rgb(0,170,255); }
.html lex { color:rgB(128,0,0); text-transform: uppercase; font-family: monospace; font-size: 0.9rem; }

header { height:40px; border-box; z-index:2; position:relative; background:rgb(255, 240,240); border-bottom:1px solid rgb(230, 213,213); }
header a { color:rgb(128,0,0); }
header a:visited { color:rgb(128,0,0); }

nav { height:20px; line-height:20px; padding:10px 0; }
nav span { font-size:0.8rem; }
nav span:after { content:' \00B7 '; }
nav span:last-of-type:after { content:''; }

nav.top { margin:0 auto; max-width:600px; }
nav.usr { z-index:3; position: absolute; top:0; left:20px; display: inline-block; }
nav.usr a { color:rgb(128,0,0); }

table.mod { width:100%; border:1px solid rgb(230,230,230); border-radius:6px; overflow:hidden; padding:0; margin:0 0 20px 0; border-spacing:0; font-size:0.9rem; position:relative; }
table.mod tr { margin:0; padding:0; }
table.mod td, table.mod th { padding:10px 1%;  margin:0; border-bottom:1px solid rgb(230,230,230); }
table.mod th { text-align:left; color:rgb(85,85,85); }

table.mod tr:last-of-type td,
table.mod tr:last-of-type th { border:0; }

.opt { text-align:right; font-size:0.7rem; font-family: monospace; text-transform:uppercase; }
.opt.abs { position:absolute; top:2px; right:2px; width:auto; }
.opt a { margin-left:4px; color:rgb(213,128,85); }
a.opt { color:rgb(213,128,85); }
table.mod td.aid { font-size:0.7rem; color:rgb(128,128,128); width:70px; }
table.mod td.qnt { font-size:0.7rem; color:rgb(128,128,128); width:50px; }
table.mod form { margin:0; }

table.mod thead tr { background:rgb(240,240,240); }
table.mod thead tr.sub { font-size:0.7rem; background:rgb(247,247,247); border-bottom:1px solid rgb(230,230,230); }
table.mod thead tr.sub a { margin-right:4px; color:rgb(100,100,255); }
table.mod thead a.cls { float:right; color:rgb(170,85,0); font-family:monospace; padding:12px; position:absolute; top:-4px; right:-4px; border-radius:10px; height:20px; width:20px; text-align: center; background:rgb(255,213,170); }


/* tablet and desktop */
@media only screen and (min-width: 601px) {
	section.dat thead { width:30%; }
	section.dat tbody { width:70%; }
	.popMain form thead { width:30%; }
	.popMain form tbody { width:70%; }

	/*
	section.pic table { flex: 48.5%; }
	section.pic td.pic { width:40%; }
	section.pic td.txt { width:58%; }
	*/
}


/* mobile only */
@media only screen and (max-width: 600px) {
	main { margin-top:0; }

	#home { margin-top:30px; }
	#home h1 { font-size: 3rem !important; }
	
	section { margin:0; border-width:1px 0; border-radius: 0; }
	section.dat thead { width:35%; }
	section.dat tbody { width:65%; }
	section h3 { padding:16px 10px; }
	section tr { padding:10px; }

	.picgrp .pic,
	.picgrp .pic img { height:56px; width:56px; }

/*
	section.pic { gap:0; }
	section.pic table { flex: 100%; }
	section.pic td.pic { width:28%; }
	section.pic td.txt { width:70%; }*/
}