html  { image-rendering: -moz-crisp-edges; image-rendering: pixelated; }        /* all images, videos, background-images */
	img   { -ms-interpolation-mode: nearest-neighbor; } /* all images, IE */

	.bannerBG {
		color:#faf270;	/*a87d21*/
		width: calc( 80% + 34px );
		height: 300px;
		padding: 0px;
		border-bottom: 6px solid #faf270;
		background-color:#cccccc;
		background-image: url("hero.png");
		background-size:     cover;
		background-repeat:   no-repeat;
		background-position: center center;      
	}
	
	.normalContainer {
		color:#faf270;	/*a87d21*/
		width: 80%;
		padding: 16px;
		border: 1px solid #3b7845;
		background-color:#c7ab33;
	}
	
	.keysContainer {
		width: 80%;
		padding: 16px;
		border: 1px solid #faf270;
		background-color:#ded645;
	}
	
	.keysDescription {
		float: right;
	}
	
	hr{
		border-top-color: #c7ab33;
		border-bottom-color: #faf270;
	}

	.msgalert{  
	font-family: Arial,Helvetica,sans-serif;
	font-size:12px; font-weight:900; color:#dd0000;

	}

	.unselectable {
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
	}
	.ui-widget{
		font-size: 0.9em;
	}

	a:link {color:#3b7845;font-weight:bold;text-decoration: none;}      /* unvisited link */
	a:visited {color:#3b7845;font-weight:bold;text-decoration: none;}  /* visited link */
	a:hover {color:#faf270;font-weight:bold;text-decoration: underline;}  /* mouse over link */
	a:active {color:#c7ab33;font-weight:bold;text-decoration: none;}  /* selected link */
	body{
		background-color: #78a064;
	font-family: system-ui;
	font-size: 24px;
	line-height: 42px;
	}
	p{
		margin:0px;
		font-size: 24px;
		line-height: 200%;
	}
	.side_info{
		font-size:18px;
		text-align: justify;
		text-indent: 24px;
	}
	button span{
		font-size: 13px;
	}
	
	.demoHeaders {
		margin-top: 2em;
	}
	#dialog-link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;
	}
	#dialog-link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;
	}
	#icons {
		margin: 0;
		padding: 0;
	}
	#icons li {
		margin: 2px;
		position: relative;
		padding: 4px 0;
		cursor: pointer;
		float: left;
		list-style: none;
	}
	#icons span.ui-icon {
		float: left;
		margin: 0 4px;
	}
	.fakewindowcontain .ui-widget-overlay {
		position: absolute;
	}
	select {
		width: 200px;
	}
	
	#footer{
		height:200px;
		border-top: 4px solid #cccccc;
		background-color:#eee;
	}
	#controlpanel{
		width:100%;
		height:100%;
		background-color:#eee;
	}
	#div_controlpanel_main{
		text-align:right; 
		padding:4px 16px 4px 16px;
		border-bottom: 4px solid #cccccc;
	}
	.login_box{
		border: 4px solid #ccc;
		padding:16px;
		background-color: #fff;
		position:absolute;
		float:right;
		top:48px;
		right: 16px;
	}
	
	#article_container {
		display:table;
		height:100%;
		text-align: center;
	}
	#article_list {
		vertical-align: top;
		text-align: center;
	}
	#article_list p{
		margin:16px 16px 16px 16px;
		text-indent: 24px;
	} 
	#article_content {
		height:calc(100%);
		vertical-align: top;
		text-align: justify;
		text-justify: inter-word;
	}
	#article_content p{
		margin:16px 16px 16px 16px;
		text-indent: 24px;
	} h1{
		padding:0 0 0 16px;
		font-size:24px;
		background: -webkit-linear-gradient(left, #efefef , #ffffff); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(right, #efefef, #ffffff); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(right, #efefef, #ffffff); /* For Firefox 3.6 to 15 */
		background: linear-gradient(to right, #efefef , #ffffff); /* Standard syntax */
		border-top: 1px solid #cccccc;
	} h2{
		margin:0 16px 0 16px;
		padding:0 0 0 16px;
		border-radius: 8px 8px 0 0;
		font-size:16px;
		background: -webkit-linear-gradient(#efefef , #ffffff); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#efefef, #ffffff); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#efefef, #ffffff); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#efefef , #ffffff); /* Standard syntax */
	} .imageRight{
		float: right;
		margin: 0px 16px 0px 16px;
	} .imageLeft{
		float: left;
		margin: 0px 16px 0px 16px;
	}
	
	.articleIcon {
		float:right;
		width: 64px;
		height: 64px;
		border-radius: 8px;
		margin: 0 4px 4px 0;
		background-image: url("../icons/misc.png");
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		filter: grayscale(100%); 
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
		opacity: 0.5;
	}
	.articleIconBig {
		float:right;
		width: 132px;
		height: 132px;
		border-radius: 8px;
		margin: 0 4px 4px 0;
		background-image: url("../icons/misc.png");
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		filter: grayscale(100%); 
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	}
	/*do if width at least this*/
	@media screen and (min-width: 800px) {
		#article_container {
			width: 100%;
			height: 100%;
		}
		#article_list {
			display:inline-block;
			max-width:  320px;
		}
		#article_content {
			display:inline-block;
			max-width:  calc(100% - 330px);
			height: 100%;
		}
	}
	/*do if width below this*/
	@media screen and (max-width: 500px) {
		#article_container {
			width: 100%;
			height: 100%;
		}
		#article_list {
			width: 100%;
		}
		#article_content {
			width: 100%;
			height: 100%;
			border-left: 0px solid #ddd;
		}
		#article_content p{
			margin:16px 16px 16px 16px;
			text-indent: 24px;
		}  .imageRight{
			float: right;
			margin: 0px 16px 0px 16px;
		} .imageLeft{
			float: left;
			margin: 0px 16px 0px 16px;
		}
	}
	@media screen and (min-width: 625px) {
		.breakIt {
			display: none;
		}
	}
	
	
	/*do if width at least this*/
	@media screen and (min-width: 120px) {
		.leftSide {
			display:inline-block;
			width: calc( 50% - 16px );
			vertical-align: top;
		}
		.rightSide {
			display:inline-block;
			width: calc( 50% - 16px );
			vertical-align: top;
		}
	}
	/*do if width below this*/
	@media screen and (max-width: 1200px) {
		.leftSide {
			display:inline-block;
			width: 100%;
			vertical-align: top;
		}
		.rightSide {
			display:inline-block;
			width: 100%;
			vertical-align: top;
		}
	}


.boxGrid{
	display: grid;
	grid-template-columns: 50% 50%;
	gap: 24px;
}
.boxGridCell{
	display:flex;
	align-items: center; /* Vertical center of image & text */
}
.boxGridCellCenter{
	width: 100%;
	text-align: center;
}
.inset{
	border-left: 2px ridge #faf270;
	margin-left: 22px;
	padding-left: 22px;
}
.blockHeader { 
	display: inline-block;
	margin-bottom: 16px;
	padding: 4px 32px 4px 32px;
	background: #3b7845;
	border: 0px solid #faf270;
	border-radius: 48px;
	color: #faf270;
	font-weight: bold;
	font-size:48px;
	line-height: 64px;
}

u{
	border: 2px solid #c7ab33;
	background: #faf270;
	border-radius: 3px;
	box-shadow: 2px 2px #9c7c1a;
	text-decoration-color: #faf270;
	margin: 0px 8px 0px 4px;
	padding: 0px 8px 0px 8px;
}