div.info {
 margin: 10px 10px 0 10px;
 padding: 20px;
 text-align: left;
 border: solid 1px #b6b4b6;
 background: linear-gradient(hsla(49, 100%, 90%, 0.6), hsla(49, 100%, 87%, 0.8));
 border-radius: 5px;
 color: #815400;
}
div.info div.dt {
 font-weight: bold;
}
div.info div.dd {
 margin-left: 10px;
 font-size: 10.5pt;
}
div.info div.dd + div.dt {
 padding-top: 10px;
}
center {
 padding-bottom: 8pt;
 font-size: 16pt;
 line-height: 16pt;
 opacity: .6;
}
span.note {
 position: relative;
 display: inline-block;
 margin: 20px 10px 10px 10px;
 padding: 0 20px;
 text-align: center;
 font-size: 12pt;
 line-height: 24pt;
 font-weight: bold;
 border-radius: 20pt;
 border: solid 1px #b6b4b6;
 background-color: #f2f2f2;
 color: #000000;
}
span.note:nth-last-child(2) {
 margin: 10px;
}
span.note2 {
 margin-top: 20px;
}
div.grid {
 position: relative;
 display: inline-block;
 margin: 10px;
 padding: 2px;
 text-align: left;
 border: solid 1px #b6b4b6;
 background: rgba(241, 241, 241, 0.5);
 border-radius: 5px;
 color: #815400;
 backdrop-filter: blur(2px);
}
div.item {
 transition: border 300ms;
 float: left;
 position: relative;
 display: inline-block;
 margin: 2px;
 width: calc((100%/3) - 6px);
 height: 100px;
 text-align: left;
 border-radius: 3px;
 border: solid 1px #c9c9c9;
 overflow: hidden;
 background-color: #f2f2f2;
}
img.photo {
 float: left;
 position: relative;
 display: inline-block;
 margin: 2px;
 border-radius: 3px;
 width: 150px;
 height: 96px;
 border: 0;
}
span.title {
 float: left;
 position: relative;
 display: inline;
 margin: 5px;
 font-size: 8.5pt;
 font-weight: bold;
 width: calc(100% - 164px);
 color: #5d5340;
}
span.price {
 float: left;
 position: relative;
 display: inline;
 margin: 5px;
 font-size: 8.5pt;
 font-weight: bold;
 width: calc(100% - 110px);
 color: #04c351;
}
a.lnk2 {
 outline: transparent;
 color: inherit;
}
a.lnk2:hover > div.item {
 transition: border 200ms;
 border: solid 1px #d3a529;
 background: linear-gradient(#f1f1f1, #e6e6e6);
}
a.lnk2:active > div.item {
 transition: border 50ms;
 border: solid 1px #e8ce41;
 background: linear-gradient(#e9e9e9, #e1e1e1);
}
div.page {
 position: relative;
 display: inline-block;
 margin: 10px;
 width: calc(100% - 22px);
 text-align: left;
 border: solid 1px #b6b4b6;
 background: rgba(241, 241, 241, 0.5);
 border-radius: 5px;
}
table.list {
 position: relative;
 margin: 4px;
 width: calc(100% - 8px);
 text-align: left;
 border: solid 1px #b6b4b6;
 overflow: hidden;
 border-radius: 3px;
 background: #c9c9c9;
}
table.list tr {
 text-align: left;
 line-height: 12pt;
 font-size: 11pt;
 overflow: hidden;
 border: solid 1px #c9c9c9;
 background-color: #f2f2f2;
}
table.list tr.tags {
 color: #888888;
}
table.list tr.rows {
 height: 100px;
 padding: 10px;
 font-size: 12pt;
}
table.list th {
 padding: 10px;
 background-color: #f2f2f2;
}
form.sort:hover input {
 text-decoration: underline;
}
form.sort, form.sort input {
 margin: 0;
 padding: 0;
 display: inline-block;
 border: none;
 background: none;
 font: inherit;
 color: inherit;
 cursor: pointer;
}
table.list td {
 background-color: #f2f2f2;
}
table.list tr td:nth-child(1) {
 width: 100px;
}
table.list tr td:nth-child(2) {
 width: 100px;
}
table.list tr td:nth-child(3) {
 width: 70pt;
 table-layout: fixed;
 color: #319031;
 padding: 0 10px;
}
table.list tr td:nth-child(4) {
 color: #000000;
 padding: 0 10px;
}
table.list tr td:nth-child(5) {
 width: 52px;
 table-layout: fixed;
}
img.photo2 {
 background: url(../resources/unknown.png) center center/cover no-repeat scroll padding-box content-box;
 float: left;
 margin: 2px;
 border-radius: 3px;
 width: 130px;
 height: 100px;
 cursor: pointer;
}
form.func {
 position: relative;
 top: 0;
 right: 0;
 margin: 0;
}
input.feat:hover {
 transition: 70ms;
 font-size: 20pt;
}
input.feat:active {
 transition: 10ms;
 font-size: 15pt;
}
input.feat {
 transition: 300ms;
 margin: 2px;
 padding: 0px;
 width: 48px;
 height: 48px;
 line-height: 37pt; 
 font-size: 18pt;
 background-color: transparent;
 border: none;
 cursor: pointer;
}
span.top, form.top {
 margin: 10px 0 20px 0;
 padding: 0;
 float: left;
 text-align: center;
 left: calc((100% - (90% - 297px)) / 2);
 width: calc(90% - 297px);
 position: relative;
}
input.deal:hover {
 transition: 100ms;
 background-color: #39c428;
 border: solid 1px #4b8b43;
}
input.deal:active {
 transition: 20ms;
 background-color: #3bd628;
 border: solid 1px #9cff90;
}
input.deal {
 transition: 200ms;
 position: relative;
 display: inline-block;
 margin: 10px;
 padding: 0 30px;
 text-align: center;
 font-size: 14pt;
 line-height: 38pt;
 font-weight: bold;
 border-radius: 5px;
 border: solid 1px #206017;
 background-color: #3aa72c;
 color: #ffffff;
 cursor: pointer;
}
span.pnum:hover {
 transition: 70ms;
 border: solid 1px #5a5a5a;
 background-color: #cccccc;
}
span.pnum:active {
 transition: 10ms;
 border: solid 1px #272727;
 background-color: #e0e0e0;
}
span.pnum {
 transition: 300ms;
 position: relative;
 display: inline-block;
 margin: 0 5px 10px 5px;
 padding: 0;
 text-align: center;
 font-size: 11pt;
 line-height: 24pt;
 font-weight: bold;
 border-radius: 3pt;
 border: solid 1px #777777;
 background-color: #f0f0f0;
 color: #222222;
}
span.pact {
 pointer-events: none;
 border: solid 1px #202d2f;
 background: linear-gradient(#1b2327, #374045);
 color: #ffffff;
}
a.lnk3 {
 outline: transparent;
 position: relative;
 width: 24pt;
 height: 24pt;
 padding: 8pt;
 text-align: center;
 line-height: 24pt;
 color: inherit;
}
#viewBack, #soldBack {
 z-index: 10;
 visibility: hidden;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(255, 255, 255, 0.8);
 text-align: center;
}
#soldBack {
 visibility: visible;
 background: rgba(255, 255, 255, 0.8) url(../resources/cartSold.png) center center/70% no-repeat scroll padding-box content-box;
}
#viewMenu, #soldMenu {
 margin: 1vh;
 padding: 0;
 top: 0;
 left: 0;
 width: calc(100% - 2vh);
 float: left;
}
#viewCtrl, #soldCtrl {
 margin: 0;
 border: 0;
 right: 1vh;
 float: right;
}
#viewForm, #soldForm {
 margin: 0 1vh 1vh 1vh;
 border: 0;
 top: 0;
 left: 0;
 float: left;
 width: calc(100% - 2vh);
 height: calc(100% - 9vh);
 background-position: center;
 background-size: contain;
 background-repeat: no-repeat;
}
img.viewMode, img.soldMode {
 transition: 70ms;
 height: 6vh;
 margin-left: 1vh;
 cursor: pointer;
 float: left;
 -webkit-transform: perspective(100) translateZ(-10px);
 -ms-transform: perspective(100) translateZ(-10px);
 transform: perspective(100) translateZ(-10px);
}
img.viewMode:hover, img.soldMode:hover {
 transition: 10ms;
 opacity: .8;
 -webkit-transform: perspective(100) translateZ(0px);
 -ms-transform: perspective(100) translateZ(0px);
 transform: perspective(100) translateZ(0px);
}
img.viewMode:active, img.soldMode:active {
 transition: 300ms;
 opacity: .4;
 -webkit-transform: perspective(100) translateZ(-30px);
 -ms-transform: perspective(100) translateZ(-30px);
 transform: perspective(100) translateZ(-30px);
}