:root {
	--head-height: 6ch;
	--head-height: 3lh;
}

#pgFrame { max-width:1000px;min-width:400px; padding:0 1em; margin:0 auto; position:relative; color:black; }
#pgHead { position:absolute;color:white;top:0;left:0;width:100%;height:var(--head-height); }
body { color:white;min-width:400px; }
#pgBody { }

#hdButHome { text-align:left; left:1em; }
#hdButInterface { text-align:center; left:21%; transform:translate(-50%, -50%); }
#hdButCH { text-align:center; left: 21.5%;width:120px;transform:translate(-50%, -50%); }
#hdButShop { text-align:right; right:57%; color:cyan; }
#hdButFound { text-align:center; left:55%;width:130px;width:min-content; }
#hdButArtifacts { text-align:center; left:80%; transform:translate(-50%, -50%); }
#hdButProfile { text-align:center; right:2%;  }
#hdButLogin { text-align:center; right:2%;  }
#hdButPStatus { text-align:right; right:57%; }
#hdButLogo { left:50%;top:0.2em; transform:translateX(-50%); width:4.5em; z-index:100;position:relative; }
	svg.headlogopega { position:relative; width:100%; vertical-align:top; overflow:visible; filter:drop-shadow(0px 0px 0.3em #88F);transition:scale 0.3s, transform 0.3s; }
	svg.headlogopega g { transition:fill 0.3s; }
	.headlogopega:hover g { fill:#FFA; }
	svg.headlogopega:hover { scale:1.1;transform:rotate(-60deg); }
#pgHead .divBadgePW { position:absolute; left:50%;top:0.12em; margin-left:-0.55em; width:1.1em;height:1.1em; font-size:3em!important;line-height:1.1em; z-index:100;text-align:center; display:inline-block;background:white;border-radius:100%;color:black; }

#pgBodyBorder1 { transform:translateY(var(--head-height));margin:0 1em var(--head-height);padding:0.2em; }
#pgBodyBorder1:before { 
 	--notchSize: 1.4em;
	--bordThick: 4px;
	--bordHalf: 2px;
	z-index:-1;
	content: "";
	position: absolute;
	inset: 0;
	background: #FFF; 
	clip-path: polygon(0 var(--notchSize),var(--notchSize) 0,calc(100% - var(--notchSize)) 0,100% var(--notchSize),100% calc(100% - var(--notchSize)),calc(100% - var(--notchSize)) 100%,var(--notchSize) 100%,0 calc(100% - var(--notchSize)),0 var(--notchSize),
				var(--bordThick) calc(var(--notchSize) + var(--bordHalf)),var(--bordThick) calc(100% - var(--notchSize) - var(--bordHalf)),calc(var(--notchSize) + var(--bordHalf)) calc(100% - var(--bordThick)),calc(100% - var(--notchSize) - var(--bordHalf)) calc(100% - var(--bordThick)),calc(100% - var(--bordThick)) calc(100% - var(--notchSize) - var(--bordHalf)),calc(100% - var(--bordThick)) calc(var(--notchSize) + var(--bordHalf)),calc(100% - var(--notchSize) - var(--bordHalf)) var(--bordThick),calc(var(--notchSize) + var(--bordHalf)) var(--bordThick),var(--bordThick) calc(var(--notchSize) + var(--bordHalf)));
}
#pgBodyBorder1.clhqmain:before { background:#FFF; }
#pgBodyBorder1.clhqorders:before { background:#F99; }
.pgFrameWide #pgBodyBorder1.clhqmain:before, .pgFrameFull #pgBodyBorder1.clhqmain:before { border-color:#FFF; }
.pgFrameWide #pgBodyBorder1.clhqorders:before, .pgFrameFull #pgBodyBorder1.clhqorders:before { border-color:#F99; }

#pgBodyBorder2 { margin:0.2em 0.2em 2em; overflow:visible; }
#pgBodyBorder2:before { 
	--notchSize: 1.2em;
 	margin:8px;
	z-index:-1;
	content: "";
	position: absolute;
	inset: 0;
	background: #FFF;
	clip-path: polygon( 0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)) );
}
#pgBody { margin:0.7em;color:black; }


#pgFoot { font-size:80%; color:rgba(255,255,255,0.4);font-size:0.8em; display:flex;justify-content:space-evenly;align-items:flex-start;flex-wrap:wrap;padding-bottom:3em; }
#footCol1,#footCol2 { flex-grow:1;max-width:48%;text-align:center; white-space:nowrap; }
#footCol1 a,#footCol2 a { line-height:inherit; }
#footCol1 { text-align:center; }
#footRow2 { flex-grow:1;width:100%;text-align:center; color:rgba(255,255,255,0.5);margin:1em 0; }
#pgFoot a { color:rgba(255,255,255,0.4);text-decoration:none;font-weight:bold; text-transform:uppercase; display:inline-block; padding:0 0.5em; }
#pgFoot a:hover { text-decoration:underline;color:#FFA; }


#pgFrame #pgHead { left:50%;transform:translateX(-50%);z-index:1; }
#pgFrame #pgFoot { position:relative;left:50%;transform:translateX(-50%);z-index:1; }

#pgFrame.pgFrameWide { max-width:none;padding:0; }
.pgFrameWide #pgHead { max-width:1000px; }
.pgFrameWide #pgBody { max-width:1000px;padding-left:3.1em;padding-right:3.1em; }
.pgFrameWide #pgFoot { max-width:1000px; }

#pgFrame.pgFrameFull { max-width:none;padding:0;min-width:auto; }
.pgFrameFull #pgHead { max-width:1000px; }
.pgFrameFull #pgBody { max-width:none; }
.pgFrameFull #pgFoot { max-width:none; }

.pgFrameWide #pgBody, .pgFrameFull #pgBody { margin-left:auto;margin-right:auto; }
.pgFrameWide #pgBodyBorder1, .pgFrameFull #pgBodyBorder1 { margin-left:0; margin-right:0; }
.pgFrameWide #pgBodyBorder1:before, .pgFrameFull #pgBodyBorder1:before { 
	clip-path:none;
	border:solid 0 #000;
	border-width:0.2em 0;
	background:none;
	--bordThick: 0.2em;
	--bordHalf: 0.1em;
}
.pgFrameWide #pgBodyBorder2:before, .pgFrameFull #pgBodyBorder2:before { 
	margin: 0.4em 0;
	clip-path: none;
}
#pgPlaceholder {
	display:block;visibility:hidden;overflow:hidden;width:0;height:0;
}

.headremovepad { margin-top:-0.8em;overflow:auto; }
#pgFrame .headremovepad h1 { margin:0.5em auto 0; }
@media screen and (max-width: 699px) {
	.headremovepad { margin-top: -1.2em; }
	#pgBody { padding-left:0; padding-right:0;padding-top: 0 !important; }
}

/* dropdown icon */
.headbutrow1 { color:white;text-decoration:none;font-weight:normal; display:inline-block; position:absolute; }
a.headbutrow1 { line-height:1.1em; padding:0.2em 0.5em; border-radius:1em; font-weight:bold; border:solid 1px rgba(255,255,255,0); cursor:cell; top:50%;transform:translateY(-50%); white-space: normal;}
a.headbutrow1:hover { text-decoration:none; background:rgba(255,255,255,0.2)!important;color:#FFA;border-color:rgba(255,255,160,0.4);box-shadow:none; }
a.headbutrow1:active, a.headbutrow1:focus { transform: translateY(-50%);box-shadow:none; }
a.headbutrow1link { cursor:pointer; }
#pgHead a.button.headbutrow1 { padding-right:1.4em;background-color: inherit;margin:auto; box-shadow:none; }
#pgHead a.button.headbutrow1:after {
	font-family:FontAwesome;
	content:"";
	position:absolute;
	top:100%;left:100%;
	width:1.2em;line-height:1.3em;
	transform:translate(-1.6em, -1.5em);
	text-align:right;
}

.ddLeft,.ddRight { z-index:50; position:absolute; top:3em; width:42%;max-width:42%; color:white;font-size:0.9em;line-height:1.2em;padding:0 1em; opacity:0; display:none;xtransition:opacity 0.2s; }
.ddLeft,.ddRight { overflow:hidden;padding:0; }
.ddLeft:before,.ddRight:before { 
 	--notchSize: 0.5em;
	z-index:-1;
	content: "";
	position: absolute;
	inset: 0;
	background: #CCF;
	border-bottom:solid 3px black;
	clip-path: polygon( 0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)) );
}
.innerdd, .innerddtop, .innerddlow, .innerddmid { overflow:hidden;display:flex;position:relative;margin:2px;padding:0 0.5em;align-items: stretch; }
.innerddlow, .innerdd { margin-bottom:5px; }
.innerdd:before { 
 	--notchSize: calc(0.45em);
	z-index:-1;
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	clip-path: polygon( 0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)) );
}
.innerddtop:before { 
 	--notchSize: calc(0.45em);
	z-index:-1;
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	clip-path: polygon( 0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% 100%, 0% 100% );
}
.innerddmid:before { 
	z-index:-1;
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
}
.innerddlow:before { 
 	--notchSize: calc(0.45em);
	z-index:-1;
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	clip-path: polygon( 0% 0%, 100% 0%, 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)) );
}

.ddLeft { left:1em; }
.ddRight { right:1em; }
.ddLeft a,.ddRight a { color:white; text-decoration:none; font-weight:bold; text-transform:uppercase; display:flex; font-size:95%; text-align:center; flex-grow:1;justify-content:center;align-items:flex-start;flex-wrap:nowrap;flex-basis:33%; padding:0.7em 0;align-items:center; }
.ddLeft a:hover,.ddRight a:hover { text-decoration:underline;text-shadow:#CCF 0 0 0.3em;background:rgba(255,255,255,0.2);color:#FFA; }
.ddLeft .ddLabel, .ddRight .ddLabel { display:none; }

@media screen and (min-width: 700px) {
	.pgFrameWide #pgHead { max-width:1000px; }
	.pgFrameWide #pgBody { max-width:1000px; }
	.pgFrameWide #pgFoot { max-width:1000px; }
}

@media screen and (max-width: 699px) {
	#pgHead .divBadgePW { position:absolute; left:0.48em; top:0.2em; position:absolute; transform:translate(-50%, -50%); margin:0;  }

	/* force mobile to pgFrameFull settings */
	#pgBodyBorder1.clhqmain:before { border-color:#FFF; }
	#pgBodyBorder1.clhqorders:before { border-color:#F99; }
	#pgFrame { max-width:none;padding:0; }
	#pgHead { max-width:1000px; }
	#pgFoot { max-width:none; }
	#pgBody { max-width:none; margin-left:auto;margin-right:auto;padding-left:0.5em;padding-right:0.5em; margin-top: 0; padding-top: 1em!important;}
	#pgBodyBorder1 { margin-left:0; margin-right:0;padding:0 0 0.2em; }
	#pgBodyBorder1:before { 
		clip-path:none;
		border:solid 0 #000;
		border-width:0.2em 0;
		background:transparent!important;
		--bordThick: 0.2em;
		--bordHalf: 0.1em;
	}
	#pgBodyBorder2 {	margin-left:0;margin-right:0; }
	#pgBodyBorder2:before { 
		margin: 0.4em 0;
		clip-path: none;
	}

	#pgFrame #pgHead { height: 4.5em; }
	.pgFrameWide #pgHead { min-width:300px; }
	.pgFrameWide #pgBody { min-width:300px;padding-left:0.5em;padding-right:0.5em; }
	.pgFrameWide #pgFoot { max-width:300px; }
	#pgBodyBorder1 { transform: translateY(8ch); margin-bottom:8ch; }
	#hdButLogo { left:50px; top:50%; position:absolute; transform:translate(-50%, -50%); }
	#hdButHome { text-align:left;  top:0em;	left:6em; transform:none; }
	#hdButCH { text-align:left; top:1.5em;left: 6em;transform:none;width:140px; }
	#hdButArtifacts { text-align:left;	top:1.5em;	left:6em;	transform:none; }
	#hdButInterface { text-align:left;	top:3em;	left:6em; 	transform:none; right:auto;}
	#hdButLogin { text-align:center;	top:0em;	left:auto;	right:1em;	transform:none; }
	#hdButProfile { text-align:right;  top:0em;		left:auto; 	right:1em;	transform:none; }
	#hdButShop { text-align:right;		top:1.5em;	left:auto; 	right:1em;	transform:none; }
	#hdButFound { text-align:right;		white-space:nowrap; top:3em;	left:auto;	right:1em;	transform:none;	margin-left: 11.6em;    position: absolute; }
	#footCol1, #footCol2 { max-width:none; }
	#footCol1 { margin-bottom: 1em; }
	.ddLeft, .ddRight { top:100% !important; }
	a.button.headbutrow1:after {
		transform:translate(-1.6em, -1.4em)!important;
	}
	.headertitle { font-size:clamp(1em, 4vw, 1.8em) !important; }
	
	.ddLeft, .ddRight {
		left: 50%;
		margin: 0;
		width: 90%;
		max-width: 400px;
		transform: translateX(-50%);
		width: calc(100% - 1em);
	}
	.ddLeft .ddLabel, .ddRight .ddLabel {
		display:block;
		color: black;
		text-align: center;
		font-weight: bold;
		line-height: 2em;
		background: orange;
		border-radius: 1em 1em 0 0;
		margin: 3px;
		border: solid 3px black;
	}
}

/* --- Formatting --- */

#pgFrame h1 { display:block; font-weight:bold; font-size:1.6em;line-height:100%; border-bottom:solid 3px black; width:100%; margin:0.5em auto;padding:0.2em 0; text-align:center;color:#008;font-variant:small-caps; }
#pgFrame h2, div.headhook { font-size:1.2em; line-height:100%; position:relative; font-weight:bold; text-align:left; padding:0 1em 0.3em; text-transform: uppercase; margin:0.5em 0; }
#pgFrame h2:before, div.headhook:before { 
 	--notchSize: 0.5em;
	--bordThick: 3px;
	--bordHalf: 1px;
	content: "";
	position: absolute;
	inset: 0;
	background: #008; /*bordercolor*/
	clip-path: polygon(100% calc(100% - var(--bordThick)),100% 100%,var(--notchSize) 100%,0 calc(100% - var(--notchSize)),0 0, 
				var(--bordThick) 0,var(--bordThick) calc(100% - var(--notchSize) - var(--bordHalf)),calc(var(--notchSize) + var(--bordHalf)) calc(100% - var(--bordThick)));
}
#pgFrame h2, div.headhook { 
 	--notchSize: 0.5em;
	--bordThick: 3px;
	--bordHalf: 1px;
	position:relative;
	inset: 0;
	clip-path: polygon(100% 0,100% 100%,var(--notchSize) 100%,0 calc(100% - var(--notchSize)),0 0,100% 0);
}
#pgFrame h2 { padding-top:0.2em; }
#pgFrame h3 { border-bottom:solid 2px #008; font-size:1.2em;line-height:120%; font-weight:bold; text-align:left; padding:0.2em 0.5em; margin:1em 0.5em; }
#pgFrame h4 { border-bottom:solid 1px #008; font-size:1em;line-height:100%; font-weight:bold; text-align:left; padding:0.2em 0.5em; margin:1em 0.5em; }
#pgFrame h5 { border-bottom:0; font-size:1em;line-height:100%; font-weight:bold; text-align:center; padding:0.2em 0.5em; margin:1em 0.5em; }
#pgFrame h2, #pgFrame h3, #pgFrame h4, #pgFrame h5 { color:#008;background:#EEF; }
#pgFrame h2.redhead:before { background:red; }
#pgFrame h2.redhead { color:red;background:#FEE;padding-top:0.1em; }

#pgFrame .headercover { position:relative;overflow:hidden; }
#pgFrame .headercover h2 { margin-top:0;padding-top:0.5em;padding-bottom:0.5em; }
#pgFrame .headercover img { width:100%;border-radius:1em 1em 0 0;display:block;border:solid 2px #008; }
#pgFrame .headercover .headertitle { position:absolute;top:0;left:0; font-size:1.8em;line-height:130%;width:100%; text-align:left; font-weight:bold; border-bottom:0!important;margin:1em 0 0;padding:0 0 0 1em; background:rgba(0,0,0,0.5);color:white; }

.imprintthumbframe { float:right;margin:0 1em 1em 1em;line-height:100%; }
.imprintthumb { border-radius:1em;width:7em;height:7em;margin-bottom:0.5em;max-width:150px;max-height:150px;min-width:50px;min-height:50px;background-size: contain;background-position: top center;background-repeat: no-repeat;filter: drop-shadow(5px 5px 5px #222222); float:left; }
.imprintthumbcap { font-size:70%;text-align:center;clear:both; }

.imgthumbframe { float:right;margin:0 1em 1em 1em;line-height:100%;border-radius:1em; }
.imgthumbframe.addborder { padding:0.5em; border:solid 1px #888;margin:0 0em 1em 1em; }
.imgthumbframe.fullwid { float:none; text-align:center;width:100%;margin:0; }
.imgthumb { border-radius:1em;width:7em;aspect-ratio:1/1;margin-bottom:0.5em;max-width:150px;max-height:150px;min-width:50px;min-height:50px;background-size: contain;background-position: top center;background-repeat: no-repeat; float:left; position:relative; }
.imgthumbframe.addborder .imgthumb { margin:0; }
.imgthumbframe.addborder .imgthumb.addshadow { margin:0 0.2em 0.2em 0; }
.imgthumb.addshadow { filter: drop-shadow(5px 5px 5px #222222); }
.imgthumbframe.fullwid .imgthumb { float:none;margin:0 auto; }
.imgthumbcap { font-size:70%;text-align:center;clear:both; }
.imgthumbframe.fullwid.multithumb {	display:flex;flex-direction:row; }
.imgthumbframe.multithumb .imgthumb {  max-height:300px;height:100%:flex-justify:space-between; }

.imgthumb.addcaption .imgcaption { position:absolute;top:100%;font-size:0.8em;line-height:1.1em;height:1.1em;text-align:center;width:100%; }
.imgthumb.addcaption { margin-bottom:0.6em!important; }