*, *:before, *:after {
  margin: 0;
  box-sizing: border-box;
}

::selection {
  background: wheat;
}

body {
  background: url(../background.avif) no-repeat center center fixed;
  background-size: cover;
  min-width: 360px; 
}

@font-face {
  font-family: "Lombardic";
  src: 
	local('Lombardic'),
	url(../../Lombardic.woff2) format("woff2");
}

main {
  position: relative;
  container-type: inline-size; 
  visibility: visible;  
  height: auto; 
  margin: 0 auto;
  width: 100%;
  max-width: 1600px;
  font-size: 18px;     /* controls font size scalable base between 1280px and 1600px width */  
}
	
#wrapper {
  display: flex;
  flex-flow: row wrap; 
}

#contain {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 70%;
  height: auto;
  margin: 0 auto;
  padding: 4em 2em 2em 6em;
  float: left;
}

#contain.containFull {
  width: 100%;
}

#containwide {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 85%;
  height: auto;
  /* margin: 0 auto; */
  padding: 4em 2em 2em 6em;
  /* float: left; */
}

.subcontain {
  width: 82%;
}

	#navup {
	  position: absolute;
	  display: flex;
	  top: 5em;
	  height: 4cqh;
	  right: 9%;
	  z-index: 1;
	  align-items: center;
	}

	#navarrow {
	  height: 2.3em;
	  padding: 1cqh 1cqw 0 0;
	}
	
	#navarrow img {
	  width: 2em;
	}

	#navtext {
	  height: 2.6em;
	  padding: 1cqh 2cqw 0 .4cqw;
	}

	#navtext a {
	  font-family: 'Lombardic', Arial; 
	  font-weight: 700;
  	  font-size: 130%;
	  text-decoration: none;
	}
	
	#navtext a:hover {
	  color: yellow;
	 -webkit-text-stroke-width: 0px;
	  animation: animation-index .65s ease-in-out infinite alternate;
	}	

	#navmain {
	  padding: .4cqh 0 0 0;
	}		
	
	#navmain a {
	  font-family: 'Lombardic', Arial; 
	  color: #6b4721;
	  text-decoration: none;
	 -webkit-text-stroke-width: .2px;
	 -webkit-text-stroke-color: black;		
	  font-size: 250%;
	  font-weight: 300;	   
	}
	
	#navmain a:hover {
	  color: yellow;
	  text-shadow: 
		0px 0px 4px #FFFFFF,
		2px 2px 9px #DDD6C3; 
	  animation: animation-index .65s ease-in-out infinite alternate;
	}	

	#mode {
	  padding-left: 2cqw;
	}
	
	#mode img {
	  width: 1.5em;
	  filter: drop-shadow(1px 1px 5px white);
	}
	
	#mode img:hover {	
      filter: drop-shadow(5px 5px 5px white)
		drop-shadow(-5px 5px 5px white)
		drop-shadow(5px -5px 5px white)
		drop-shadow(-5px -5px 5px white);
	}	
	
/* #content */

	.itemTitle {
	  font-family: Merriweather Sans, Arial, sans-serif;	
	  font-size: 170%;
	  line-height: 2em;
	  margin-bottom: 6px;		
	  font-style: italic;
	  text-align: left;
	  word-spacing: .2em;
	  color: #6a4621;

	  animation: glow 2s linear 1s;	
	  animation-delay: .5s;
	  animation-duration: 2s;
	  animation-fill-mode: backwards;
	  animation-timing-function: ease-in-out;
	  
	  text-shadow: 
		  1px 3px 5px rgba(0,0,0,0.3), 
          0px -2px 10px rgba(255,255,255,0.3),
		  0px 0px 4px #FFFFFF,
		  18px -8px 30px #ca9052,
		 -18px 8px 30px #b67938,
		 -14px 3px 30px #ca9052,
		  14px -3px 30px #ca9052,
		  16px 8px 30px #8e5e2c, 
		 -18px -8px 30px #6b4721,
		 -16px -4px 30px #ca9052;		 
	}
	
	@keyframes glow {
		0% {
			color: #fead00;
			text-shadow: 0 0 2px #fead00, 0 0 5px #fead00, 0 0 10px #fead00, 0 0 20px #fead00, 0 0 40px #fead00;
		}
		20% {
			text-shadow: 0 0 2px #f39209, 0 0 5px #f39209, 0 0 10px #f39209, 0 0 20px #f39209, 0 0 40px #f39209;
		}			
		50% {
			color: #904d1c;
			text-shadow: 0 0 2px #f0680e, 0 0 5px #f0680e, 0 0 10px #f0680e, 0 0 20px #f0680e, 0 0 40px #f0680e;
		}		
		100% {
			text-shadow: 
		  1px 3px 5px rgba(0,0,0,0.3), 
          0px -2px 10px rgba(255,255,255,0.3),
		  0px 0px 4px #FFFFFF,
		  18px -8px 30px #ca9052,
		 -18px 8px 30px #b67938,
		 -14px 3px 30px #ca9052,
		  14px -3px 30px #ca9052,
		  16px 8px 30px #8e5e2c, 
		 -18px -8px 30px #6b4721,
		 -16px -4px 30px #ca9052;
		}
	}
	
	
	

	.fadein {
		display: inline-block;
		opacity: 0;
		filter: blur(4px);
		animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
	}

	@keyframes fade-in {
		100% {
		  opacity: 1;
		  filter: blur(0);
		}
	}	
	
	.itemTitleCode {
	  font-size: 75%;
	  word-spacing: 0em;
	  padding-left: 30px;
	  opacity: .7;
	  text-shadow: 0px 0px 1px #000;
	}	  

	p {
	  line-height: 1.5em;
	  margin-top: .75em;
	  text-align: left;
	  font-size: 100%;
	}

	.opaque {
	  opacity: .5;
	  font-size: 95%;
	  padding-left: .3cqw;	  
	}
	
	.credit {
	  opacity: .7;
	  font-style: italic;
	  font-size: 95%;
	  padding-left: .3cqw;	  
	}

	.credit a {
	  font-weight: 300;
	}	
	
	.printTitle {
	  font-size: 110%;
	  font-weight: bold;
	  font-style: italic;
	  font-family: Italianno, serif;	
	 }

	.indent {
	  margin: 1em 0 .3em 0;
	  padding-left: 2em;
	}

	.indent p {
	  font-size: 100%;
	  font-weight: bold;
	  margin: .15em 0 .15em 0;
	}

	.indentprint {
	  margin: 1em 0 0 0;
	  padding-left: 4em;
	  text-indent: -2em;
	}
	
	.indentprint p {
	  font-size: 100%;
	  margin: .13em 0 1em 0;
	}
	
	.indentprint p::before {
	  content: "\25CF";
	  margin-right: .8cqw;
	}
	
	.indentprint {
	  margin: 1em 0 0 0;
	  padding-left: 4em;
	  text-indent: -2em;
	}
	
	.indentprint p {
	  font-size: 100%;
	  margin: .13em 0 1em 0;
	}
	
	.indentprint p::before {
	  content: "\25CF";
	  margin-right: .8cqw;
	}	
	
	.indentprint2 {
	  margin: 1em 0 0 0;
	  padding-left: 2em;
	  text-indent: -2em;
	}
	
	.indentprint2 p {
	  font-size: 100%;
	  margin: .13em 0 1em 0;
	}
	
	.indentprint2 p::before {
	  content: "\25CF";
	  margin-right: .8cqw;
	}
	
	.subbullet {
	  margin: 1em 0 0 0;
	  padding-left: 2em;
	  text-indent: -2em;
	}
	
	.subbullet p {
	  font-size: 100%;
	  margin: .13em 0 1em 0;
	}
	
	.subbullet p::before {
	  content: "\25E6";
	  margin-right: .8cqw;
	}	
	
	.bullet {
		margin: -10px 10px 22px 26px;
		line-height: 1.5em;
	}
	
	.bullet::before {
	  content: "\2B29";
	  margin-right: 10px;		
	}
		
	.section  {
	  font-family: 'Lombardic', Arial; 
	  font-weight: 700;	
	  font-size: 150%;
	  padding: 0.75em 0 0.75em 0;
	  color: #000;
	}

	#expdesc {
	  padding: 1.2em 0 .6em 0;
	}

	#expdesc a {
	  font-family: 'Lombardic', Arial; 
	  font-weight: 700;		
	  font-size: 150%;
	  text-decoration: none;
	}
	
	#expdesc a:hover {
	  color: yellow;
	 -webkit-text-stroke-width: 0px;
	  animation: animation-index .65s ease-in-out infinite alternate;
	}		
			
	img.divider {
		width: 90%;
		margin: 1em 0;
		content: url(./sectiondivider.png);
	}

#scans {
  position: relative; 
  width: 30%;
  height: auto;
  margin: 0 auto 2em auto;
  padding: 9.5em 7.5em 2em 1em;
}

#scans.scansHidden {
  width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#scanswide {
  margin-right: 6em;
  overflow: hidden;
}

#scansplacehold {
  position: relative; 
  width: 15%;
  height: auto;
  margin: 0 auto 2em auto;
  padding: 9.5em 7.5em 2em 1em;
}

	.scanSubtitle {
	  opacity: .7;
	}

	mark.search-highlight {
	  background: rgba(254,173,0,0.35);
	  color: inherit;
	  padding: 0 2px;
	  border-radius: 2px;
	}

	.foreignScanSubtitle {
	  opacity: .7;
	  font-size: 14px;
	  display: block;
	  text-align: center;
	  margin-top: 8px;
	  margin-bottom: 15px;
	}

	#scanwide, .scanwide {
	  width: 20%; 
	  float: left; 
	  margin: 1.5em 0 .5em 0;
	}
	
	#scanwide img, .scanwide img {
	  height: 15cqw;
	  margin: 0 auto .7em auto;
	}	

	#scans p {
	  font-size: 84%;	
	  line-height: 1.4em;
	  margin-top: 0; 
	}
	
	#scanwide p, .scanwide p {
	  font-size: 84%;	
	  line-height: 1.4em;
	  text-align: center;
	  margin-top: 0; 
	}	
	
	.scan {
	  width: auto;
	  margin-bottom: 14px;
	}
	
	.scan2nd {
	  width: auto;
	  margin: 34px 0 14px 0;
	}	
	
	.fancybox {
	  display: flex;
	  flex-direction: column;
	  min-width: 100px !important;
	  max-width: 200px !important;
	  margin: 0 auto;
    }


@media screen and (max-width: 580px) {
	
	#scanwide, .scanwide {
	  width: 50%; 
	}
	
	#scanwide img, .scanwide img {
	  height: auto;
	  width: 80%;
	}		
}


a {
	font-weight: 700;
	text-decoration: none;
}

	a:visited {
		text-decoration: none;
	}
	

.table {
	width: 100%;
	margin-top: 2.5em;
}	
	
table {
	border: 0;
	border-collapse: collapse;
	margin: 0 auto;
	padding: 0;
	table-layout: fixed;
	min-width: 100%;
}

img.tabledivider {
	width: 70%;
	margin: .2em 0;
	content: url(./tabledivider.png);
	float: right;
	padding-bottom: 5px;
}

th {
	padding-bottom: 5px;
	font-family: Bilbo Swash Caps, cursive; 
	font-weight: 700;
	font-size: 130%;
}

td {
	padding-bottom: 5px;
	font-family: Bilbo Swash Caps, cursive;
	font-weight: 700;	
	font-size: 130%;
	text-align: center;
}

td:first-child {
	text-align: left;
	font-family: Italianno, serif;
	font-style: italic;
	font-size: 105%;
}	

table .mobile-head {
	display:none;
}

.dollar {
	font-size: 80%; 
	opacity: .5;	
}

/* disable parchment background on Firefox (it's slow) -- now seems to be fixed?
@supports (-moz-appearance:none) {
	#parchment {
		display: none;
	}

	#wrapper {
		box-shadow: 2px 3px 20px black, 0 0 80px #8a4d0f inset;
		margin: 3cqw 1cqw 1cqw 2cqw;
		width: 95%;	
		padding: 0em 0em 3em 0em;
	}	
}
*/

/* shift to single-column layout */
@media screen and (max-width: 800px) {
	#contain, #containwide {
      width: 100%;
	  padding: 4em 5em 4em 6em;
	}

	#scans {
	  width: 100%;
	  padding: 0;
	}
	
	.subcontain {
	  width: 100%;
	}

	#scansplacehold {
	  width: 100%;
	  padding: 0 1em 2em 1em;
	}	
}

/* shift to mobile device layout */
@media screen and (max-width: 580px) {

	main {
	  font-size: 14px;    
	}

	#wrapper {
	  display: flex;
	  flex-flow: row wrap; 
	  margin: 2cqw;
	}

	#navup {
	  top: 1.5em;
	}
	
	
	#navarrow img {
	  width: 1.5em;
	}	
	
	#navtext a  {
	  font-size: 85%;
	}	
	
	#navmain a  {
	  font-size: 220%;
	}	

	
	#contain, #containwide {
	  padding: 2em 1.5em 2em 1.5em;  
	}	
	
	.itemTitle {
	  line-height: 1em;
	  font-size: 120%; 
	}
	
	.itemTitleCode {
	  white-space: pre; 
	  position: relative;
	  top: .3em;
	}
	
	.itemTitleCode::before {
	  content: "\a \9";
	}	
	
	.opaque {
	  padding-left: .8cqw;
	  white-space: pre;	  
	}	
	
	.opaque:before {
	  content: '\A';	  
	}		
	
	.section {
	  font-size: 120%;
	}
	
	#expdesc a {
	  font-size: 120%;
	}
	
	.indent {
	  padding-left: 1em;
	  text-indent: -1em;
	}	

	.indentprint {
	  padding-left: 1em;
	  text-indent: -1em;
	}
	
	.indentprint p::before {
	  all: unset;
	}
	
	.table {
		margin-top: 1.5em;
	}

	table {
		margin: 0 auto;
		padding: 0px;
		table-layout: fixed;
		min-width: 100%;
	}
	
	td {
		padding: 4px;
		width: 100%;
		font-family: Tinos;		
		font-size: 80%;
		text-align: center;
	}
	
	tr {
		display: block;
		margin: 4px;
		text-align: center;
	}
	
	td:not(:first-child){
		font-weight: normal;
		background-color: none;
	}	
	
	tr:first-child {
		display: none;
	}
	
	td:first-child {
		padding: 4px 8px 4px 0;
		font-size: 90%;
	}	
	
	table .mobile-head {
		font-size: 80%;
		font-weight: bold;		
		display: block;
		text-align: center;
	}
	
	tr td:nth-child(n+2) span:first-child  {
		visibility: hidden;
		position: relative;
	}	
	
	tr td:nth-child(n+2) span:first-child:after {
		visibility: visible;
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 115%;
	}	
	
	tr td:nth-child(2) span:first-child:after {
		content: "FR";
	}

	tr td:nth-child(3) span:first-child:after {
		content: "GD";
	}

	tr td:nth-child(4) span:first-child:after {
		content: "VG";
	}

	tr td:nth-child(5) span:first-child:after {
		content: "FN";
	}

	tr td:nth-child(6) span:first-child:after {
		content: "VF";
	}	

	tr td:nth-child(7) span:first-child:after {
		content: "NM";
	}		
	
	.dollar {
		font-size: 115%; 
	}	
}

/* Firefox fixes */
@supports (-moz-appearance:none) {
	
	#navup {
	  right: 10%;
	}
	
	/*
	#scans {
		padding: 7.5em 5.5em 2em 1em;
	}
	*/
}