@font-face {font-family:'Droid Sans';font-display:swap;src:url('droid-sans.ttf') format('truetype'), url('droid-sans-bold.ttf') format('truetype');font-weight:normal;font-style:normal;}
@font-face {font-family:'Droid Sans';font-display:swap;src:url('droid-sans-bold.ttf') format('truetype');font-weight:bold;font-style:normal;}

body {margin:0;padding-top:30px;background-color:black;color:white;text-align:center;font-family:"Droid Sans",sans-serif;}
nav {position:fixed;z-index:1000;top:0;width:100%;}
header {padding:2px;padding-right:0;color:white;background:linear-gradient(to bottom, #9C9C9C, #878787);background-color:#9C9C9C;width:100%;text-align:left;font-weight:bold;text-shadow:0px 0px 11px black}
header a {color:white;text-decoration:none;}
header a:hover {color:#A4C639}

button {font-family:'Droid Sans',sans-serif;background:linear-gradient(to bottom, #F1F1F1, #B8B8B8);padding:9px;color:black;cursor:pointer;border:none;user-select:none;box-shadow:0 3px 6px #00000029, 0 3px 6px #0000003B;}
button:active {background:linear-gradient(to bottom,#FFD554,#E99D00);}
button:disabled {cursor:not-allowed;background:linear-gradient(to bottom, #535353, #636363);}

a {color:#A4C639}

div.browse div.box a {color:white;}
div.browse div.box:hover {border:solid 1px #E99D00}
div.browse div.box:hover header {color:#A4C639}
div.browse div.box:active {background:linear-gradient(to bottom, #FFD554, #E99D00);color:black}
div.browse div.box:active span.year, div.box a:active span.price, div.box a:active p {color:black}


div.box {margin:auto;box-sizing:border-box;margin-top:10px;margin-bottom:10px;border:solid 1px #4F4E4F;overflow:hidden}
div.product {margin:auto;box-sizing:border-box;height:100%;}
div.browse {user-select:none}
div.browse a {text-decoration:none}
div.browse div.box {color:white;font-weight:bold;width:95%;margin-bottom:10px;}
div.browse div.box div.contents {box-sizing:border-box;width:100%;height:100%;padding-bottom:10px;}
div.browse div.box p {margin-top:0;margin-bottom:5px;}
div.browse div.box img {width:100%;margin-bottom:10px;display:block}
div.browse div.box details {font-weight:normal;}
div.board {margin:auto}
div.board img {margin:auto;width:150px;margin:3px;margin-top:0px}
div.board img:hover {cursor:pointer}
div#prod {width:100%;display:none}
div#prod div.individual h2 {margin:10px}
div#prod div.individual p {margin-top:15px;margin-bottom:0}
div.individual img#prod-images {display:block}
div.individual {padding-top:10px}
div.individual div.box {width:95%;text-align:left;margin-top:0}
div.individual div.box#Gallery img {width:100%}
div.individual div.box#Gallery header {padding:10px;text-align:center}
div.individual div.box p {margin-left:9px;margin-right:9px;margin-bottom:5px;}
div.individual div.texts header {background:#191919;color:#BEBEBE;border-bottom:solid 1px #5e5e5e}
div.individual div.box#Extras header {margin-bottom:10px}
div.individual div.box#Extras img {width:150px}
div.box#Video video {width:100%;display:block}
div#Archives {padding:10px}
div#Archives p {margin:0 auto;padding-bottom:15px}

span.artist, span.year, .hide {color:grey}
span.price {color:#A4C639}

article {border:solid 1px grey;border-radius:5px;width:90%;text-align:center;margin:auto;background:linear-gradient(#414141,#202020);padding:5px;padding-right:0;padding-bottom:0;overflow:hidden;}
details {text-align:center;padding-top:0;padding-bottom:8px;font-style:italic}
details li {list-style-type:disc;list-style-position:inside;text-align:left}
summary {list-style-type:none;font-weight:bold;color:grey;cursor:pointer;user-select:none;}
figcaption {padding-top:10px;font-style:normal}
abbr {cursor:help}
hr {margin-left:5px;margin-right:5px;border-color:grey}
ul {list-style:none;padding-left:8px}
ul a {font-weight:bold}

img.emo {width:24px;height:24px;vertical-align:middle;margin:0 2px;}
img.i {background:linear-gradient(to bottom,#F1F1F1,#B8B8B8);padding:2px;}
img.i:hover {cursor:pointer}
img.i:active {background:linear-gradient(to bottom,#FFD554,#E99D00);}
img.d {background:linear-gradient(to bottom,#535353,#636363);padding:2px;cursor:not-allowed}

body.dir {background:black;color:white;font-family:"Droid Sans",sans-serif;text-align:left;padding-top:0;max-width:550px}
body.dir h1 {padding-left:15px}
body.dir li {justify-content:center;vertical-align:middle;border-top:solid 1px #5e5e5e;}
body.dir img {vertical-align:middle;width:30px}
body.dir a {text-decoration:none}

mark {color:#FFE600;background-color:#00000000;font-weight:bold}
mark.green {color:#A4C639}
mark.red {color:#DF2D2D}
::selection{background:#A5C639;color:white}

@media (min-width:769px)  {div.browse div.box {width:40%;display:inline-block;margin:1%;} div.individual div.box {width:60%} article {width:40%}}
@media (min-width:1200px) {div.browse div.box {width:25%;display:inline-block;margin:1%;} div.individual {box-sizing:border-box;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;width:80%;margin:auto;} div.individual div.box#Gallery {grid-column:1/2;width:100%;max-width:600px;} div.individual div.texts {grid-column:2/3;display:grid;flex-direction:column;gap:10px;width:90%;} div.individual div.box {width:100%;margin-bottom:0;margin-top:0;}}
@media (min-width:1700px) {div.browse div.box {width:20%;display:inline-block;margin:1%;} div.individual {width:60%}}