@charset "UTF-8";

*{ padding: 0; margin: 0; border: 0; text-size-adjust: none; -webkit-text-size-adjust: none }
html, body{ height: 100%; background: #fff }
body{ display: grid; grid-template-columns: auto; grid-template-rows: minmax(min-content, max-content) auto minmax(min-content, max-content) }
p, h1, h2, li, code, a, label, figcaption{ font: 13px 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; color: #000 }
input[type=text], textarea{ font: 13px Courier, monospace; color: #000 }
p, h1, h2, li, label, figure{ margin: 10.4px 14.3px }
li{ margin-top: 5.2px; margin-bottom: 0; line-height: 18.2px }
figure{ display: inline-block }
figcaption{ display: block; text-align: center }
form{ margin-top: 12.8px }
ul{ list-style: disc outside none; margin-bottom: 25.6px; margin-left: 12.8px }
code{ font: 14px Courier, monospace }
a[href^="http"]::after{ content: "➚"; text-decoration: none } 
section h2{ margin-top: 26px; }

header{ display: grid; grid-template-columns: auto; grid-auto-rows: minmax(min-content, max-content) }
header h1, header p, header a{ letter-spacing: 0.325px; line-height: 20px }
header h1, header a{ font-weight: bold; }
header section{ width: 100% }
#menu{ background: /*#760000*/ #444 /*#760000*/ }
#menu p, #menu a{ color: #fff }
#menu a.plain, main#map a.plain{ text-decoration: none; font-weight: normal; }
#submenu{ background: /*#8b5050*/ #727272 /*#8B5050*/ }
#submenu p, #submenu a{ color: #fff }
#bar{ background: #9f9f9f }
#bar h1, #bar h1 a{ color: /*#760000*/ #000 /*#760000*/ }

main{ height: 100%; overflow: auto }
main h2{ font-weight: bold; margin-top: 27.3px; }
main p{ max-width: 580px; line-height: 18.2px; margin: 13px 14.3px }
main ul{ max-width: 580px }
main p#differentcode{ margin-left: 0; margin-top: 6px; text-decoration: underline; cursor: pointer }
main img.item-large{ margin-left: 13px; margin-bottom: 6.5px; border: 1px solid #ddd }
main img.item-large{ max-width: 580px; width: calc(100vw - 28px); height: auto }
main .articlelist a[href^="http"]{ text-decoration: none } 
main .articlelist a[href^="http"]::before{ content: '"' } 
main .articlelist a[href^="http"]::after{ content: '"➚' }
main .subscribe p{ margin-top: 0 }
main input[type=submit]{ padding: 4.55px 5.5px; border: 1px solid #9f9f9f; cursor: pointer }
#contact td, #order td, #subscribe td{ vertical-align: top }
#contact input[type=text], #contact textarea, #order input[type=text], #order textarea, #subscribe input[type=text]{ width: 180px; border: 1px solid #9f9f9f; margin-bottom: 6.5px; padding: 4.55px 5.5px }
#contact input[type=submit], #order input[type=submit], #subscribe input[type=submit]{ background: #d3d3d3; padding: 6.15px 7.15px; border: 1px solid #9f9f9f; cursor: pointer }
#contact input[type=submit]:hover, #order input[type=submit]:hover, #subscribe input[type=submit]:hover{ background: #ddd; color: #666; } 
#confirmation input[type=submit], #unsubscribe input[type=submit]{ margin-left: 14.3px }
#contact input.red, #contact textarea.red, #order input.red, #order textarea.red, #subscribe input.red{ border: 1px solid red }
#contact textarea{ height: 150px }
#order textarea{ height: 100px }
#contact #row3, #order #row3{ display: none }
#contact #row5 .privacylink, #order #row6 .privacylink, #subscribe #row5 .privacylink{ margin-left: 8px; color: #d3d3d3 }
#itembox, .itembox2{ display: flex; flex-wrap: wrap }
#itembox .item, .itembox2 .item{ position: relative }
#itembox .item img, .itembox2 .item img{ margin: 0 0 6.5px 13px; width: 200px; height: auto; border: 1px solid #ddd }
#itembox .item p, .itembox2 .item p{ margin: 0 0 13px 13px; padding: 0; text-align: center }
#itembox .item .counter, .itembox2 .item .counter{ position: absolute; left: 180px; top: 9px; background: #fff; object-fit: contain; border-radius: 50%; width: 23px; height: 23px; text-align: center; border: 1px solid #999; cursor: help }
#itembox .item .counter p, .itembox2 .item .counter p{ margin: 0; padding: 8px; padding-top: 2px; border: 0; color: #505050; text-align: center }
.itembox3 img{  }
/* img.archive{ -webkit-filter: grayscale(100%); filter: grayscale(100%); } */

main .itembox2 a[href^="http"]::after{ display: none } 
main img.max{ max-width: 580px; width: calc(100% - 2em); height: auto }
main .imagebox-outer{ max-width: calc(582px + 2em) }
main .imagebox-inner{ border: 1px solid #dddddd; margin: 1em }
main .imagebox-inner img{ display: block; width: 100%; max-width: 580px }
main img.typeface{ width: calc(100% - 28.6px); max-width: 580px; margin: 13px 14.3px; display: block; border: 1px solid #ddd }
main img.typeface-middle{ margin: 0 14.3px; width: calc(100% - 28.6px); max-width: 400px }
main img.typeface-small{ margin-left: 6%; width: 100%; max-width: 200px }

main#map{ width: 100%; height: 100% }
main#map li{ font-size: 85% }
main#map a{ color: #000; font-size: inherit; text-decoration: underline }
span.name{ display: none }
#options{ width: 100% }
#optionsbutton:hover{ color: #9f9f9f; cursor: pointer }
#clicktoshow{ display: inline }
#clicktohide{ display: none }
#clicktoshow .icon{ font-size: 90% }
#clicktohide .icon{ font-size: 80% }
#optionslist{ display: none }
main#map button, #map button:focus{ background-color: #9f9f9f }
main#map button:hover{ background-color: #d3d3d3 }
#popup{ position: absolute; width: 200px; margin-left: -110px; border-color: #fff; border-style: solid; border-width: 4px 8px 4px 8px; border-radius: 4px; padding: 0; box-shadow: 0 0 10px 1px #ddd }
#popup.upward{ bottom: 100%; left: 50%; margin-bottom: 15px }
#popup.downward{ top: 100%; left: 50%; margin-top: 15px }
#popup #description{ background-color: #fff; margin: 0; border: 0; padding: 0 }
#popup #description p, #popup #description h2, #popup #description a{ margin: 0; border: 0; padding: 0; font-size: 13px }
#popup #description p:first-child{ font-weight: bold; display: block; overflow: hidden; padding-top: 1px; padding-bottom: 2px }
#popup #description p:not([class]){ display: block; font-size: 11.375px }
#popup #description div{ position: relative; background-color: #fff; padding-top: 6px; padding-bottom: 4px }
#popup #description div div{ position: absolute; left: 166px; top: 15px; background-color: #fff; object-fit: contain; border-radius: 50%; width: 23px; height: 23px; text-align: center; border: 1px solid #999; padding: 0px }
#popup #description div div p{ font-weight: normal; display: block; margin: 0; margin-top: 1.30px; padding: 5px; border: 0; color: #505050; text-align: center; cursor: help }
#popup #description img, #popup #description .img-list{ display: block; background-color: #ddd }
#popup #description img, #popup #description .img-list img{ width: 200px; height: 133.6px }
#popup.upward #description::after{ top: 100%; content: ''; position: absolute; left: 50%; margin-left: -11px; border-width: 12px; border-style: solid; border-color: #fff transparent transparent transparent }
#popup.downward #description::before{ bottom: 100%; content: ''; position: absolute; left: 50%; margin-left: -11px; border-width: 12px; border-style: solid; border-color: transparent transparent #fff transparent }
#popup .img-option{ display: none }
#popup .img-selected{ display: block; cursor: pointer }
#popup .img-selected:hover{ opacity: 0.80 }
.button{ display: block; margin: 8px 0 15px 0; border: 1px solid #9f9f9f; width: 38px; padding: 6.15px 7.15px; cursor: pointer; background: #d3d3d3; text-align: center; text-decoration: none }
.button:hover{ background: #ddd; color: #666; } 

.alert{ color: red }
.nowrap{ display: inline-block; white-space: nowrap }
.grey-border{ border: 1px solid #ddd }
.grey{ color: #999 }
.hidden{ display: none }
.bw{ filter: grayscale(100%) }
.uppercase, .uppercase a{ text-transform: uppercase }
.lowercase, .lowercase a{ text-transform: lowercase }
.regular, .regular a{ font-weight: normal; letter-spacing: 0 }
.highlight{ font-weight: bold }
.underlining{ text-decoration: underline }

@media print{ #page p{ max-width: 100% } }
@media only screen and (max-width: 443px){
	#itembox .item img, .itembox2 .item img{ width: calc(50vw - 21.5px) }
	#itembox .item .counter, .itembox2 .item .counter{ left: calc(50vw - 42px) }
}