@font-face {
	font-family: champ;
	src: url('images/style/font-champ-bold.ttf') format('truetype');
	font-display: swap;
}





:root {
  

--txtClr: #333;
--bgClr: hsl(0, 0%, 100%);
--bg: linear-gradient(to right, hsl(214, 100%, 90%) 0%, hsl(214, 100%, 98%) 20%, hsl(214, 100%, 98%) 50%, hsl(214, 100%, 98%) 80%, hsl(214, 100%, 90%) 100%);

--a0Clr: hsl(60, 100%, 97%);       
--a1Clr: hsl(50, 100%, 95%);       
--a2Clr: hsl(50, 100%, 85%);     
--a3Clr: hsl(45, 100%, 77%);     
--a4Clr: hsl(50, 100%, 28%);    

--b0Clr: hsl(213, 100%, 96%);    
--b1Clr: hsl(214, 100%, 93%);    
--b2Clr: hsl(214, 100%, 84%);    
--b3Clr: hsl(214, 65%, 43%);    
--b4Clr: hsl(214, 100%, 25%);   

--o1Clr:  hsl(30, 100%, 33%);   

--r1Clr: hsl(0, 100%, 40%);    

--hdrImg: url(images/hdr/hdr-main-lite.svg);
--hdrAdvImg: url(images/hdr/hdr-adv-lite.svg);
--h1Shadow2: 2px 2px 2px hsl(0, 0%, 100%), inset 1px 1px 1px hsl(24, 100%, 100%);
--h1Shadow: 1px 1px 1px hsl(0, 0%, 100%), -1px -1px 1px hsl(0, 0%, 100%);

--trans: all linear 0.5s; 

--boldWt: bold;
--boldPct: 100%;
}

:root[theme='dark'] {
--txtClr: hsl(0, 0%, 90%);
--bgClr: hsla(214, 20%, 10%, 100%);
--bg: linear-gradient(to right, hsl(214, 50%, 10%) 0%, hsl(214, 20%, 9%) 20%, hsl(214, 20%, 9%) 50%, hsl(214, 20%, 9%) 80%, hsl(214, 50%, 10%) 100%);

--a0Clr: hsl(220, 50%, 20%);       
--a1Clr: hsl(220, 65%, 26%);         
--a2Clr: hsl(220, 50%, 30%);     
--a3Clr: hsl(50, 90%, 85%);     
--a4Clr: hsl(50, 100%, 90%);    

--b0Clr: hsl(210, 80%, 9%);    
--b1Clr: hsl(210, 80%, 12%);     
--b2Clr: hsl(210, 100%, 25%);     

--b3Clr: hsl(214, 100%, 84%);   
--b4Clr: hsl(214, 100%, 94%);   

--o1Clr: hsl(50, 100%, 50%);    
--r1Clr: hsl(0, 100%, 65%);    

--hdrImg: url(images/hdr/hdr-main-dark.svg);
--hdrAdvImg: url(images/hdr/hdr-adv-dark.svg);
--h1Shadow: 2px 2px 1px var(--bgClr), -2px 2px 1px var(--bgClr), -2px -2px 1px var(--bgClr), 2px -2px 1px var(--bgClr);

--trans: all linear 0.5s; 

--boldWt: 900;
--boldPct: 106%;
}

.img, .imgBg { border: 3px solid aqua; border-radius: 3px; background-color: aqua; }



.fit {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}


b { font-weight: var(--boldWt); font-size: var(--boldPct); }


	.bg {background-color:var(--bgClr);}
	.bga1 {background-color:var(--a1Clr);}
	.bga2 {background-color:var(--a2Clr);}
	.bgb1 {background-color:var(--b1Clr);}
	.bgb2 {background-color:var(--b2Clr);}
	.fga3 {color:var(--a3Clr);}
	.fga4 {color:var(--a4Clr);}
	.fgb3 {color:var(--b3Clr);}
	.fgb4 {color:var(--b4Clr);}
	.fgo1 {color:var(--o1Clr);}
	.fgr1 {color:var(--r1Clr);}



@media all {
	body { margin: 0; padding: 0; background:var(--bg); color:var(--txtClr); }
	html { font-size: 16px; font-family: Verdana, Arial, Tahoma, sans-serif;  line-height:1.52; }
	.mid { max-width: 800px;  margin:auto; background: none; }

	img { max-width: 100%; min-width: 8px; height:auto; }

	
	article { margin-left:2px; }  
	
	
	h1 { margin: 0 0 1.3rem 0; font: normal 2.6rem/3rem champ, Verdana, Arial; text-align: center; color: var(--b3Clr); text-shadow: var(--h1Shadow); }
	h2 { margin: 3.5rem 0 0.8rem 0; font: 2rem champ, Verdana; color: var(--r1Clr); }
	h3 { margin: 2.1rem 0 0.6rem 0; font-size: 1.3rem; font-weight: normal; color: var(--b3Clr); }
	h4 { margin: 1.4rem 0 0.6rem 0; font-size: 1.2rem; font-weight: normal; color: var(--o1Clr); font-variant: small-caps; }
	
	
	h1 + h2 {margin-top: 2rem;}  
	h1 + h3 {margin-top: 1rem;}  
	h2 + h3 {margin-top: 1rem;}

	textarea {color: var(--b3Clr); background-color:  var(--b1Clr); padding:5px; border-radius:10px; font-size: 1.1rem; font-family: Verdana, Arial, Tahoma, sans-serif;}


	.tiny { font-size: 0.8rem; color: var(--b3Clr); }
	.small { font-size: 0.9rem; color: var(--b3Clr); }
	.large { font-size: 1.1rem; color: var(--b3Clr); }
	.larger { font-size: 1.2rem; color: var(--o1Clr); transition: var(--trans);}
	.largest { font-size: 1.6rem; color: var(--a4Clr); }
  .huge { font-size: 1.6rem; font-weight: bold; color: var(--b3Clr);}

	.min {min-width:170px; overflow: auto;}
	.gap {height: 16px;}


	p { min-width:10ch; max-width: 68ch; padding: 0.25rem 0; overflow: auto; }  


	p a {
		display: inline-block; padding: 0.1rem 0.3rem; border: 1px solid var(--b2Clr);
		border-radius: 0.6rem; background-color: var(--a0Clr);
	}
	p a:hover {
		border: 1px solid var(--a3Clr); background-color: var(--a2Clr); cursor: pointer;
	}

	a:link { color: var(--b4Clr); }
	a:visited { color: var(--b3Clr); }	
	
	.nobr	{ white-space:nowrap; }

	.center, .centerfull {
		margin-left: auto; margin-right: auto; text-align: center;
	}
	.full {
		overflow-x: scroll; overflow-y: hidden; width: 96vw;
		margin-left: -48vw; margin-right: -48vw; position: relative;
		left: 50%; right: 50%; box-shadow: 0 0 3px 2px var(--b2Clr);
	}
	.left {text-align: left;}
	.right {text-align: right;}

	
	.example {
		margin: 0.3rem 0.6rem 1.5rem 3rem; padding: 0.3rem 0.6rem 0.6rem 0.6rem;
		background-color: var(--b1Clr); border: 2px solid var(--bgClr); border-radius: 0.6rem;
		box-shadow: 0.2rem 0.2rem 0.3rem hsl(214, 100%, 20%); overflow: hidden;
	}
	.example h3, .example .h3 {
		font-size: 1.1rem; margin: 0.1rem -0.1rem 0.1rem -0.1rem; padding: 0.1rem 0.3rem;
		background: var(--a1Clr); border-radius: 0.5rem; color: var(--b4Clr);
	}
	
	.center80 {
		max-width: 66ch; margin: 1.3rem auto 0.8rem auto; border: 0.15rem solid var(--b2Clr); border-radius: 1.9rem; padding: 0.5rem;
		background: linear-gradient(170deg, var(--b0Clr) 0%, var(--b1Clr) 90px, var(--b1Clr) calc(100% - 90px), var(--b2Clr) 100%);
	}
	.center80 h3 { margin: 0.3rem 0 1.3rem 0.6rem; color: var(--b3Clr); }
	.center80 p { margin: 0.6rem 0 0.5rem 0; }
	
	.indent50px { margin-left: 2rem; }
	
	.mono { font-family: "Courier New", Courier, monospace; font-size: 20px; line-height: 24px; }
	
	.times { font: bold 135% "Times New Roman", serif; }
	
	.head {
		margin: 0.2rem 0 0.6rem 0; border: 2px solid var(--a2Clr); border-radius: 25px; padding: 0.5rem;
		font: bold 1.1rem Verdana; text-align: center;
		color: var(--fgClr); background: var(--a1Clr) 0%;
	}		
	
  p+ul {  margin-top: -1rem;}
	li { color: var(--b4Clr); list-style-type: disc;  padding-top: 0.5rem;}
	li:hover { color: var(--b3Clr); }


	
	
	ul ul {   
		margin-left: -9px;
	}
	
	ul p {
		text-indent: 0;
	}



ul.large { margin-top: 3px;  margin-left: -10px; }
ul.large > li {
	width: fit-content; margin-top: 9px; border-radius: 10px; padding: 2px 12px 4px 9px; 
	font-size: 1rem; background-color: var(--b1Clr); 
	color: var(--b4Clr); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
	overflow: hidden; list-style-type: none; }
ul.large > li:hover { background-color: var(--a1Clr); }

ul.larger { margin-top: 3px; }
ul.larger > li {
	margin-top: 10px; border-radius: 10px; padding: 10px; 
	font-size: 1rem; background-color: var(--b1Clr); 
	color: var(--b4Clr); 
	list-style-image: url('images/style/disc.svg'); }
ul.larger > li:hover { background-color: var(--b2Clr); }

ul.none { text-indent: 1.5rem; }
ul.none li { list-style: none; }


ul.disc { text-indent: -1.5rem; }
ul.disc li { list-style: none; }
ul.disc li::before {
	margin-right: 9px; line-height: 100%; 
	font-size: 140%; 
	color: var(--b2Clr); 
	content: "\25CF"  !important; 
}

ul.dart { text-indent: -1.5rem; }
ul.dart li { list-style: none; }
ul.dart li::before {
	margin-right: 9px; line-height: 90%; 
	font-size: 110%; 
	color: var(--a4Clr); 
	content: "\27A4"  !important; 
}

ul.star { text-indent: -1.5rem; }
ul.star li { list-style: none; }
ul.star li::before {
	margin-right: 9px; line-height: 120%; 
	font-size: 160%; 
	color: var(--a3Clr); 
	content: "\273A"  !important; 
}


ul.gear { text-indent: -1.5rem; }
ul.gear li { list-style: none; }
ul.gear li::before {
	margin-right: 9px; line-height: 100%; 
	font-size: 130%; 
	color: var(--a3Clr); 
	content: "\2699"  !important; 
}

ul.deco { list-style-type: none; padding: 0; margin: 0; }
ul.deco li {
  margin: 0 0 0.6rem 2rem; padding: 0.3rem 0.6rem 0.3rem 1.1rem; color: var(--b4Clr);
  background: linear-gradient(-5deg, var(--a0Clr) 0%, var(--a1Clr) 100%); font-size: 1rem;
  border: 2px solid var(--a2Clr); border-radius: 25px;
  border-left: 9px solid var(--b2Clr); display: flex; align-items: center;
}
ul.deco li p { font-size: 1rem; margin: 0; }
ul.deco li h3 { margin-top: 1rem; }

	


	
	.so { background: url(images/style/so.svg) no-repeat 2.5rem 25%; padding: 0 0 0.6rem 6.1rem; color: var(--b3Clr); font-size: 1.1rem; }
	p.so { margin:3px; }
	li .so { padding: 0 0 0.6rem 6.6rem; margin-top:4px;}
	.so ul { margin-top: 0.4rem; }
	
		
	.clear { overflow:auto; }
	.clear table { border-collapse: collapse;  }
	.clear .tbl {  padding-left: 0.4rem; padding-right: 0.4rem; border-radius: 0.3rem;}
	.clear th, .simple td {  padding: 0.3rem 0.9rem; }
	
	.simple { overflow:auto; }
	.simple table { border-collapse: collapse; background-color: var(--b1Clr); }
	.simple .tbl { background-color: var(--b0Clr); padding-left: 0.4rem; padding-right: 0.4rem; border-radius: 0.3rem;}
	.simple th, .simple td { border: solid 0.1rem var(--bgClr); padding: 0.3rem 0.9rem; }
	.simple th { background-color: var(--b2Clr); }
	
	.beach { overflow:auto; }
	.beach p { background-color: var(--b0Clr); }
	.beach table { border-collapse: collapse; background-color: var(--b0Clr);  }
	.beach th, .beach td { border: solid 0.1rem var(--bgClr);  padding: 0.3rem 0.9rem; color: var(--b4Clr);  }
	.beach th { background-color: var(--a2Clr); color: var(--a4Clr);  }
	
	
	
	.history {
		min-height:3rem;
		margin: 1.6rem 2rem 1.3rem 2rem;
		padding: 0.6rem 0.8rem 0.7rem 5rem;
		color: var(--txtClr);
		border: 0.2rem solid var(--a1Clr);
		text-indent: 0.6rem;
		border-radius: 0.6rem;
		background: var(--a1Clr) url(images/style/scroll.svg) no-repeat;
		background-position: 0.3rem 0.3rem; 
		box-shadow: inset 0 0 1.1rem 0  var(--a2Clr); 
	}  
	.history p { margin: 0.5rem 0 0.3rem 0; }
	
  
  .words {
		margin: 0.9rem 2rem 1.6rem 2rem;
		padding: 0.3rem 0.3rem 0.4rem 4rem;
    background: var(--b1Clr) url(images/style/word.svg) no-repeat;
    background-position: 0.3rem 0.2rem;
		background-repeat: no-repeat;
		border: 0.1rem solid var(--b2Clr);
		border-radius: 0.6rem; 
		min-height: 2.1rem;
	}
	.words p { margin: 0.5rem 0 0.3rem 0; }

	  	
	.info { 
		margin: 0.9rem 2rem 1.6rem 2rem;
	  padding: 0.6rem 0.3rem 0.7rem 4rem; 
		background-image: url(images/style/info.svg), linear-gradient(170deg, var(--bgClr) 0%, var(--b2Clr) 100%);
		background-position: 9px 0.4rem;
		background-repeat: no-repeat;
		border: 0.1rem solid var(--b2Clr); 
		border-radius: 1.9rem;
		box-shadow: inset 0 0 0.9rem 0.2rem  var(--b2Clr); 
		min-height: 2.3rem;
	}
		.info p { margin: 0.5rem 0 0.3rem 0; }

	  

	.fun {
		padding: 0.2rem 1.3rem 0 1.4rem;
		margin: 2.5rem 1rem 2rem 1rem;
		border-radius: 3rem;
		border: 2px solid var(--bgClr);

		box-shadow: 1rem 1rem 1rem -1rem var(--b3Clr), 
		1rem -1rem 1rem -1rem var(--a3Clr), 
		-1rem 1rem 1rem -1rem var(--a3Clr), 
		-1rem -1rem 1rem -1rem var(--a3Clr),    
		0.4rem 0 1rem var(--a3Clr),  
		-0.4rem 0 1rem var(--b3Clr);  

		background: linear-gradient(170deg, var(--bgClr) 0%, var(--bgClr) 50%, var(--a0Clr) 100%);
	}
	.fun h3 { margin-top: 0.9rem;}
	p.fun {padding: 0.6rem 1.3rem 0.6rem 1.4rem; }




  
	
	
	.def {margin: 1.6rem 1rem 1.3rem 1rem; padding: 0.3rem 1.1rem 0.3rem 1.1rem; border-radius: 1rem; 	
		background: linear-gradient(160deg, var(--a0Clr) 0%, var(--a0Clr) 100%);
		border: 2px solid var(--bgClr); box-shadow: 0 0 0.9rem var(--a2Clr);

	}
	.def h3 {margin-top: 1rem;}	

	


	.note { margin: 1.3rem auto 0.8rem auto; padding: 0.5rem; 
		background: linear-gradient(170deg, var(--b0Clr) 0%, var(--b1Clr) 90px, var(--b1Clr) calc(100% - 90px), var(--b2Clr) 100%);
		border: 0.15rem solid   var(--b2Clr); border-radius: 1.9rem;
	}
	.note h3 { margin: 0.3rem 0 1.3rem 0.6rem; color: var(--b3Clr); }
	.note p { margin: 0.6rem 0 0.5rem 0; }


	   
	.hide { color: var(--a2Clr); background-color: var(--a2Clr);  border: 1px solid var(--a3Clr); padding: 3px 15px 3px 15px; }
  .hide:hover { color: var(--txtClr); background-color: var(--a1Clr); border: 1px solid var(--a2Clr); }

	.dotpoint { margin: 0 0 0.6rem 1.2rem; padding: 0.3rem 0.6rem 0.3rem 1.1rem; color: var(--b4Clr);
		background:  linear-gradient(-5deg, var(--a0Clr) 0%, var(--a1Clr) 100%); font-size: 1rem;
		
    
		border: 2px solid var(--a2Clr);  border-radius: 25px;
    border-left: 9px solid var(--b2Clr);  
	}
  .dotpoint p { font-size: 1rem; }
  .dotpoint h3 { margin-top: 1rem; }
 
  
	
	.questions { min-height:3rem; margin: 2rem 0.3rem 2rem 0.3rem; padding: 0.6rem 0.3rem 0.7rem 118px; border: 1px solid var(--b3Clr); 
		border-radius: 0.6rem; font-size: 1.1rem; 
		background-image: url(images/style/questions.svg), linear-gradient(120deg, var(--a0Clr) 0%, var(--a1Clr) 100%); background-repeat: no-repeat;
	}  
	.questionshuh { min-height: 3rem; margin: 2rem 2rem 2rem 2rem; padding: 0.6rem 0.3rem 0.7rem 7.4rem; border: 1px solid var(--b3Clr); border-radius: 0.6rem; font-size: 1.1rem; background: var(--b0Clr) url(images/style/questions.svg) no-repeat; }  
  .questions a { padding: 5px 3px 5px 3px; font-weight: normal; font-size: 1.1rem; }

	
	
	.activity {
		margin: 20px 0; padding: 0.6rem 0.3rem 0.7rem 120px; border: 1px solid var(--b3Clr); border-radius: 0.6rem; background: var(--b1Clr) url(images/style/activity-div.svg) no-repeat;
		font-size: 1.1rem;
	}
	.activity a { padding: 0; font-size: 1.1rem; font-weight: normal; }
	
	.bdr {
		border: 1px solid blue;
	}
	
 
	.rel-title { font-weight: bold; font-size: 1.1rem;  }
	.related { min-height: 3.1rem; border-top: 0.2rem solid  var(--b2Clr); border-bottom: 0.2rem solid var(--b2Clr); 
		margin-top: 0.6rem; margin-bottom: 0.6rem; padding-top: 0.8rem; padding-bottom: 9px;  
		font-weight: bold; font-size: 1.1rem; 	
		background-image: url(images/style/related.svg), linear-gradient(120deg, var(--b0Clr) 0%, var(--b1Clr) 100%);
		background-repeat: no-repeat;	
		clear: none; 
	}
	.related a { display: list-item; margin-top: 0.1rem; margin-left: 160px; font-weight: normal; list-style-type: circle; }	
	
	.glow {
	margin: 20px;
		padding: 1rem 1.5rem;
		border-radius: 40px;
		background: linear-gradient(175deg, var(--b1Clr) , var(--b2Clr));
		box-shadow:  -5px -5px 10px var(--b1Clr),
								 5px 5px 30px var(--b3Clr);
	}
	.glow p { margin: 0.5rem 0 0.3rem 0; }
	
	.vivid {
		margin: 20px 15px 25px 15px;
		padding: 1rem 1.5rem;
		border-radius: 40px;
		background: linear-gradient(175deg, var(--bgClr), var(--a1Clr));
		box-shadow:  -5px -5px 10px var(--a1Clr),
									5px 5px 30px var(--a3Clr);
	}
	.vivid p { margin: 0.5rem 0 0.3rem 0; }



	.video { float:left;  min-width:80px; min-height:37px; margin-right:-80px; font-size: 12px; }


	zem:not(.intbl em):not(p em) { color:blue; display: inline-block; width: 2.5rem; text-align: center; font-style: normal; }
	
	.large em, .larger em { display: inline-block; width: 1.8rem; text-align: center; font-style: normal;}



	
	.intbl { text-indent:0; display: inline-table; text-align: center; vertical-align: 40%; margin: 0 0.1rem 0 0.1rem; border-collapse: collapse; }
	.intbl em { display: table-row; text-align: center; border-bottom: 0.12ch solid; font-size: 93%; font-style: inherit; line-height: 130%;}
	.intbl strong { display: table-row; text-align: center; font-weight: inherit; font-size: 93%; line-height: 120%; }
	.intbl em:before, .intbl em:after, .intbl strong:before, .intbl strong:after { content: "\2005";	}  

	.hilite { background-color: var(--a2Clr); padding-left: 0.3rem; padding-right: 0.3rem;  }
	
	sup .intbl em { line-height: 100%; }
	sup .intbl strong { line-height: 100%; }


	
	.flexx {
		display: flex; 
		margin-bottom: 0.6rem; 
		flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 1rem;
	}
.flexx .col { text-align: center; }

	.box {
	display: inline-block;
	text-align: center;
	vertical-align:top;
 	margin: 0 10px 20px 0;

}
.box:not(:last-child) {
  margin-bottom: 2%;
}
.box + .box {
  margin-left: 2%;
}

	
	
	.tbl { display: table; table-layout:auto; margin-right: auto; margin-left: auto; border-collapse:separate; border-spacing: 0 0.6rem;
	background: linear-gradient(to bottom right, var(--t0Clr) 0%, var(--t0Clr) 50%, var(--t0Clr) 100%);
	border: 1px solid var(--b0Clr); padding: 0 0.5rem 0 0.5rem; border-radius: 0.6rem;  }

	.tbl .row { display: table-row; height: 1.6rem; }
	.tbl .row .lt,	.tbl .row .left { display: table-cell; text-align: right; padding: 0 0.6rem 0 0; color: var(--a4Clr); font-size: 1.05rem; vertical-align:baseline; }

	.tbl .row .md {display: table-cell; text-align: center; padding: 5px;  white-space: normal;}

	.tbl .row .rt,	.tbl .row .right,	.tbl .row .rtlt,	.tbl .row .rtct,	.tbl .row .rtrt { display: table-cell; padding: 0 0 0 0.4rem; color: var(--b3Clr); font-size: 1.1rem; font-weight: normal;  vertical-align:baseline; white-space: nowrap;}
	.tbl .row .rtlt  { text-align: left;  white-space: normal; }
	.tbl .row .rtct  { text-align: center;  white-space: normal; }
	.tbl .row .rtrt  { text-align: right;  white-space: normal; }

	.tbl .row img {  vertical-align:middle; }
	.tbl p { margin: 0.6rem auto 0.6rem auto; color: var(--b3Clr);  }


.two {
  display: grid;
  grid-template-columns: auto auto;
	justify-content: center;
	align-items: end;
	margin:auto;
	width:fit-content;
	row-gap: 10px;
 	background: linear-gradient(to bottom right, var(--b1Clr) 0%, var(--b0Clr) 50%, var(--b1Clr) 100%);

	padding: 0.5rem; border-radius: 0.6rem;
}
.two .lt {
	grid-column: 1 / span 1;
  text-align: right; padding: 0 0.7rem 0 0; color: var(--a4Clr); font-size: 1.05rem; vertical-align:baseline; align-self:start;

}
.two .rt {
	grid-column: 2 / span 1;

  padding: 0 0 0 0.4rem; color: var(--b3Clr); font-size: 1.1rem; font-weight: normal;  vertical-align:baseline; white-space: nowrap;

}
.two .rt.flow {
    white-space: normal;
}

.two .ct {
	grid-column: 1 / -1;
	text-align: center;
}


.two .rt sup {
  vertical-align: baseline;
  position: relative;
  top: -0.4rem; 
}

.many {
	display: grid;
	grid-template-columns: repeat(auto-fill, 220px);
	gap: 1rem;
	justify-content: center; 
}
.many .ct {
	padding: 0.3rem;
	text-align: center;
}
.many .lt {
	padding: 0.3rem;
	text-align: left;
}


	.floatLt {float:left; margin:0 10px 10px 0;  text-align:center;}
	.floatRt {float:right; margin:0 0 10px 10px; text-align:center;}








	.overline { border-top: 0.11rem solid; }

 .bar {
    display: inline-block;
    text-decoration: none;
    position: relative;
  }
 .bar:after {
    content: '';
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    top: 0.25rem;
    left: 0;
    border-top: 0.11rem solid;
}

	
	.js { position:relative; margin:auto; border: 2px solid var(--b1Clr); border-radius: 10px; }
	.jsCanvas {color: var(--txtClr); background-color:var(--bgClr);}  
	.can {  border-radius:10px; background-color:var(--b0Clr);}   
	.pop { padding: 0.4rem; border-radius: 0.5rem; background-color:var(--b2Clr);
		box-shadow: 0.4rem 0.4rem 0.3rem 0 rgba(40,40,40,0.75);
		transition: all linear 0.5s; text-align: center;
	}
	.btns {border-radius:0.6rem; padding: 0.3rem 0.3rem;  transition: all linear 0.3s;
		background: var(--a0Clr); box-shadow: 2px 2px 4px 0 black; }

	.control {  border-radius:0.6rem; padding: 0.3rem 0.3rem;  transition: all linear 0.3s;
		background: linear-gradient(to bottom right, var(--b0Clr) 0%, var(--b1Clr) 100%);
	}
	.wow { padding: 0.3rem 1.1rem 0.3rem 1.1rem; border-radius: 1rem; 	
		background: linear-gradient(120deg, var(--a0Clr) 0%, var(--a1Clr) 100%);
		border: 0.1rem solid var(--bgClr); box-shadow: 0 0 0.9rem var(--a2Clr);
	}
	
	.sect { background-color:var(--b1Clr); border-radius: 0.3rem; padding: 0.1rem; margin: 0.2rem; border: 1px inset;}
	.label { color:  var(--txtClr); padding: 0.1rem;  outline-style:none; } 

	.item { color: var(--txtClr); background-color: var(--a0Clr);  padding: 0.15rem;  font: 1.2rem Arial; outline-style:none;}
	.item:hover { background-color: var(--b2Clr); }

	.input {
		border: 2px inset var(--b1Clr); border-radius: 0.6rem; padding: 3px; outline-style: none; 
		font: 1.2rem Arial; background-color: var(--b1Clr); text-align: center; 
		color: var(--txtClr);
	} 
	.input:hover { box-shadow: inset 2px 2px 2px var(--b2Clr), inset -2px -2px 2px var(--b2Clr); }
	
	.output { color: var(--txtClr); background-color: var(--a1Clr); border: 1px solid var(--b2Clr); border-radius: 0.6rem; padding: 3px; font: 1.2rem Arial; text-align: center;  }
	
	.outbig {  padding: 0.5rem; background: linear-gradient(120deg, var(--b0Clr) 0%, var(--b1Clr) 100%);	border-radius: 1.9rem; 	border: 0.1rem solid  var(--b2Clr);  }
	
	.select {
		border-radius: 0.6rem; padding: 3px; 
		font: 1.2rem Arial; text-align: center; 
		color: var(--txtClr); background: var(--b1Clr); cursor: pointer;
	}
	.select:hover {  box-shadow: inset 2px 2px 2px var(--b2Clr), inset -2px -2px 2px var(--b2Clr);}


	.radio { font: 1.2rem Arial; background: var(--b0Clr); border: 1px solid var(--a1Clr); padding: 2px 10px; border-radius: 0.6rem; line-height:1.9rem; text-align:left; margin:1px; }
	.radio label {font: 1rem Arial;}
	.radio input {  cursor:pointer; }
	.radio input+label {  cursor:pointer; }
	.radio input:checked+label { font-weight: bold;  }
	

  
	.script { color: var(--bgClr); }

	.btn { text-align: center; margin: 0.1rem; padding: 0 0.5rem 0 0.5rem; text-decoration: none; font: bold 1rem/1.8rem Arial, sans-serif; color: var(--b3Clr);
		border: 0.1rem solid var(--b2Clr); border-radius: 0.6rem; cursor: pointer; background: linear-gradient(to top right, var(--b2Clr) 0%, var(--b2Clr) 30%, var(--bgClr) 100%);
		outline-style:none; user-select: none;
	}
  .btn:hover, .btn.lo:hover, .btn.hi:hover { background: linear-gradient(to top, var(--a2Clr) 0%, var(--b0Clr) 100%); color: var(--txtClr) }
  .btn.yy { border: solid 0.1rem rgba(255,220,130,0.5); background: linear-gradient(to top right, rgba(255,220,130,1) 0%, var(--bgClr) 100%);  }
  .btn.lo { border: solid 0.1rem var(--b2Clr); background: linear-gradient(to top right, var(--b2Clr) 0%, var(--b2Clr) 100%);  }
  .btn.hi { border: solid 0.1rem white; background: linear-gradient(to top right, var(--a2Clr) 0%, var(--a1Clr) 50%, var(--a0Clr) 100%); box-shadow: 0.1rem 0.1rem 0.3rem var(--b2Clr); }


  
.btnLg {  text-align: center;  padding: 4px; }
.btnLg a { display:inline-block; width:93px; height:39px; padding: 20px 0px 0px 0px; font: bold 16px sans-serif; color:white;
	background: url("/images/style/button.svg") 0 0 no-repeat;	text-decoration: none; text-align: center; outline-style:none; }
.btnLg a:hover {
		background-position: -100px 0;
		color:white;
		}
.btnLg a:active {
		background-position: -200px 0;
		color:white;
		}



.playbtn {display: inline-block; position: relative; margin-right: 0.2em; padding: 0.6em; 
		 border-radius: 100%;
		background: linear-gradient(to top right, var(--b2Clr) 0%, var(--b2Clr) 20%, var(--bgClr) 100%); 
		border:none;
		cursor: pointer; outline-style:none; user-select: none; }
		
.playbtn:hover {background: linear-gradient(to top right, var(--a2Clr) 0%, var(--b0Clr) 100%); }
.playbtn:before, button:after {content: " "; position: absolute; }
.playbtn:active {top: 0.05em; box-shadow: 0 0.02em 0.03em rgba(0,0,0,.4); }

.play:before {  left: 0.4em; top: 0.26em; border: 0.33em solid transparent;
border-left-width: 0.52em; border-left-color: var(--b3Clr);  }
.play:hover:before {border-left-color: var(--txtClr); }

.pause:before, .pause:after {display: block; left: 0.33em; top: 0.32em; width: 0.22em; height: 0.54em; background-color: var(--b3Clr); }
.pause:after {left: 0.62em; }
.pause:hover:before, .pause:hover:after {background-color: var(--txtClr); }




.slider { background:none;  }
.slider::-moz-range-progress {
  background-color: var(--b3Clr);
  height: 0.5rem;
}
.slider::-moz-range-track {
  background-color: var(--b2Clr);
}



	


	#menuLt { display: table-cell; width: 7rem; height: 3.8rem; vertical-align: middle; padding: 0 0 0 1.9rem; text-decoration: none; background: transparent url("images/style/arrow-tall-left.svg") no-repeat left center; }
	#menuRt { display: table-cell; width: 7rem; height: 3.8rem; vertical-align: middle; padding: 0 1.9rem 0 0; text-decoration: none; background: transparent url("images/style/arrow-tall-right.svg") no-repeat right center; }

	
		#menuWide { display: block; position: relative; z-index: 2;	}
	#menuTiny { display: block; position: fixed; right: 0.2rem; top: 0.2rem; height: 3.6rem; text-align: left; margin: 0;  }  
	#menuSlim { display: none; position: fixed; top: 36px;  }
	
.menu {
	text-align: center;
	margin: 0 auto 0.3rem auto;
	height: auto; 
	
	z-index: 2;
}




.menu ul {
	display: flex;  
	flex-wrap: wrap; 
	justify-content: center;  
	overflow: hidden; 
	padding: 0;
	margin: 0;
	max-height: 5em;             
	list-style-type: none; 
}

	.menu li { display: inline-block; position: relative;  margin: 0; padding: 0.4rem 0.1rem 0.4rem 0.1rem; border: 1px solid rgba(0, 0, 0, 0.1); background-color: var(--a0Clr); }
 .menu li:hover { background-color: var(--b2Clr); }
  .menu li:before { content: none; }
	.menu li a { font-size: 0.9rem;  text-decoration: none; padding: 0.4rem 0.4rem 0.3rem 0.4rem; height:1.6rem;  color: var(--txtClr);}
	.menu li ul { display: block; position: absolute; right: 0; top: 27px; z-index: 1; }
	.menu li li { display: block; background-color: var(--b1Clr); }
	.menu ul ul { display: none; }
	.menu ul li:hover > ul { display: block; }




.menuPop {
	display: flex;
	flex-direction: row;
	width: fit-content;
	margin: 0px;
	align-items: top;
	background: linear-gradient(170deg, var(--b1Clr) 0%, var(--bgClr) 50%, var(--a0Clr) 100%);
	padding: 10px;
	
	border-radius: 10px;
	box-shadow: 1px 1px 4px 4px var(--b2Clr);
}

.menuCol {
	margin: 5px 5px;
	min-width: 30px;
	text-align: left;
}

.menuCol a {
	text-decoration: none;
	color: var(--b4Clr);
	display: inline-block;
	transition: color 0.3s ease;
}

.menuCol a:hover {
	background-color: var(--b2Clr);
}

.menuCol img {
	vertical-align: middle;
	transition: transform 0.3s ease;
}

.menuCol img:hover {
	transform: scale(1.2);
}


	#hdr { position: absolute; top: 0; width: 100%; height: 300px; margin: auto; z-index: -1; background: var(--hdrImg) no-repeat fixed center top; }
	.adv #hdr { position: absolute; top: 0; width: 100%; height: 300px; margin: auto; z-index: -1; background: var(--hdrAdvImg) no-repeat fixed center top; }
	#logo { position: absolute; left:7px; top:5px;  z-index: 1;}
	#logo img {width: 104px; height: 69px;}

	

	#cookOK {
		position: absolute;
		top: 42px;
		right: 2px;
		background-color: var(--b1Clr);
		border-radius: 4px;
		padding: 2px 6px;
		font-family: Arial, sans-serif;
		font-size: 16px;
		min-width: 200px;
		min-height: 31px;
		text-align: right;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	


	
	#adHide { position: absolute; right: 3px; top: 78px; text-align: center; font: 1rem Verdana; padding:2px;  }
	#adsHide1 { display: inline; }
	#adsShow1 { display: none; }
	
	
	#linkto { height: 48px; margin: 0 0 95px auto; width: 270px; }  

		
	#linkfb, #linktw, #linkpi, #linkgp, #linkem, #linkus, #linkli, #linkwa, #linkdo { display: block; width: 48px; height: 48px; float: left; margin-left: 5px; text-indent: -9999px; background: transparent url(images/style/links48.svg) no-repeat; }
	#linkfb:hover, #linktw:hover, #linkpi:hover, #linkgp:hover, #linkem:hover, #linkus:hover, #linkli:hover, #linkwa:hover, #linkdo:hover { background-color: var(--b2Clr); border-radius: 0.2rem; }	
	#linkfb { background-position: 0 0; }
	#linktw { background-position: -50px 0; }
	#linkpi { background-position: -100px 0; }
	#linkgp { background-position: -150px 0; }
	#linkem { background-position: -250px 0; }
	#linkus { background-position: -300px 0; width: 50px; }
	#linkli { background-position: -350px 0; }
	#linkwa { background-position: -400px 0; }
	#linkdo { background-position: -450px 0; }
	
	
	.hov:hover { background-color: var(--a1Clr); border-radius: 0.5rem; }	
	


	#search { display:block; position:relative; height: 3rem; margin: -4px auto 10px auto; width: 350px;  z-index: 3;}

	#searchFld { width: 16rem; margin: 1px; padding: 0.3rem; border-radius: 0.4rem; font-size: 1.1rem; color: var(--b4Clr); background-color: var(--a0Clr); 
	border-color: var(--b2Clr); text-align: left; }
	#searchFld:hover { background-color: var(--b2Clr); }
	#searchBtn { width: 50px; height: 50px; vertical-align: middle; margin-bottom: 1px; border: 1px solid var(--a2Clr); border-radius: 0.3rem; background: var(--a0Clr) url(images/style/search.svg) no-repeat; cursor: pointer;border-style: outset; }
	#searchBtn:hover { background-color: var(--b2Clr); }
	::placeholder { color: var(--b3Clr); opacity: 1; }

	.searchSuggestBox {
		position: absolute;
		left: 50px; 
		top: 42px; 
		width: 100%; 
		border: 1px solid grey;
		background-color: white; 
		z-index: 3;
		text-align: left;
		visibility: hidden;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
	}
	
	.searchSuggestBox .item {
		padding-left: 5px;
		cursor: pointer;
	}
	
	.searchSuggestBox .item:hover {
		background-color: #f0f0f0; 
	}


		
		
  .foot { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-content: flex-start; align-items: flex-start;
  background-color: var(--b0Clr); margin-top:30px; padding:10px 0 10px 0; border-top: 1px solid blue;}
  .footCol { order: 0; flex: 0 1 auto; align-self: auto; text-align:left; }
  .footHdr { font: bold 1.1rem Arial; margin: 0 0 5px -6px;  }
  .footItem { margin: 0 0 2px 0; }
  .footCol a {  padding:3px;  text-decoration: none;}

		
	#footMenu { text-align:center; margin: 0.8rem auto 0.5rem auto; }
	#copyrt, .copyrt { margin: 0.6rem auto 0.3rem auto; text-align: center; font: 0.7rem Arial; color: var(--o1Clr); }



#themeChg { position: absolute; left:3px; top:100px; width: 60px; height: 34px; }
#themeChg input { opacity: 0; width: 0; height: 0; } 


#themeIcon1 { margin: 0.1rem; vertical-align: top; } 
#themeIcon2 { margin-top: 0.4rem; vertical-align: top;  }  
.themelite, .themedark { display: inline-block; width: 48px; height: 34px; text-indent: -9999px; background: transparent url(images/style/theme.svg) no-repeat; }
.themelite { background-position: 0 0; }
.themedark { background-position: -50px 0; }

#themeSlider1 { position: absolute; top: 0; left: 0; right: 0;  bottom: 0;  background-color: #2196f3;cursor: pointer;  transition: 0.4s;}
#themeSlider1:before {  position: absolute;  content: "";  height: 40px;  width: 40px;  left: 0px; bottom: 4px;  top: 0;  bottom: 0;
  margin: auto 0;  transition: 0.4s;  box-shadow: 0 0px 15px #2020203d;  background: white url(images/style/theme-lite.svg) center no-repeat; }
#themeSlider1:hover { box-shadow: 0 0 5px 5px var(--b4Clr); }

input:checked + #themeSlider1 {  background-color: var(--b3Clr); }
input:checked + #themeSlider1:before {  transform: translateX(24px);  background: white url(images/style/theme-dark.svg) center no-repeat; }


#themeSlider1.round { border-radius: 30px; height:30px; }
#themeSlider1.round:before { border-radius: 50%; }
	
#adend {
	display: block; 
	width: 100%; 
	min-height: 200px; 
	margin: 1em auto; 
	overflow: hidden; 
}

#login { background-color: var(--bgClr); border: 2px solid var(--bgClr); }


.minimal header { height: 20px;  }
.minimal #hdr { background-image:none;}

.minimal #menuWide,
.minimal #linkto,
.minimal #adHide,
.minimal #adend,
.minimal #search,
.minimal #cookOK { display: none; }

	.minimal #logo { position: absolute;  top:8px; }
	.minimal #themeChg { position: absolute; top: 8px; left: 115px;   }
}

 


@media (max-width: 700px) {  

	html { font-size: 14px; }
	
	#search { width: 250px; }

	#searchFld { width: 12rem;  }

	.example { margin: 0.9rem 0.3rem 1.9rem 1.2rem;  }

	ul.large > li { padding: 2px 6px 4px 0px;  }

		
	
	#adHide {display: none; }
	#adsHide1 { display: none; }
	#adsShow1 { display: none; }
}

@media (max-width: 440px) {  

	.floatLt:not(.slim), .floatRt:not(.slim) { display: block; margin: 0 auto; float:none; }

	.so { background: url(images/style/so.svg) no-repeat 1.6rem 25%; padding: 0 0 0.6rem 5.7rem; color: var(--b3Clr); font-size: 1.1rem; }

}


@media print {
.noprint {display: none;}
	#logo { position: absolute; left: 0; top: 0; }
	#hdr {display: none;}
	#adTop {display: none;}
	#adend {display: none;}
	#footer {display: none;}
	#gtran {display: none; }
	#adHide {display: none; }
	#adsHide1 { display: none; }
	#adsShow1 { display: none; }
	#linkto { display: none;}
	#linktort {display: none;}
	#menuWide { display: none; }
	#menuSlim { display: none; }
	#menuTiny { display: none; }
	#search { display: none; }
	.related { display: none; }
	#menuLt { display: none; }
	#menuRt { display: none; }
	#advText { display: none; }
	.bg { height: 6.3rem; }
	#bodybg { background: none; }
		body { background: none; } 

	h1 {color: var(--b4Clr); }
}