body {background-image: linear-gradient(to bottom, #BB9977 0%, #997755 100%);  color:#000000; font-size:14pt; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 1.2em; margin:0px;}
		div { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); border:none; border-radius:4px;}
		.headerbar {font-size:1.5em;  background:#FFEEDD; height:34px; padding:6px;  vertical-align:bottom;}
		.comment {font-size:0.75em; font-weight: bold;border:none; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);border-radius:8px; background: linear-gradient(to bottom, #EECCAA 0%, #FFDDBB 100%); display:inline-block; margin:4px; padding:4px;}
		.main {background:#DDBB99; min-height:100%; padding:0px; padding-left:8px; padding-right:8px; margin:0 auto; text-align:left;}

		.layer {position:relative;width:150px; height:64px; font-size:14pt; background:#CCAA88; margin-top:7px;}
		.laybit {position:relative; width:132px; height:32px; padding:8px;font-size:14pt; background:#CCAA88; margin-top:2px; margin-bottom:2px;}
		.layval {width:48px; height:14px; font-size:10pt; background:#000000; color:#FFFFFF;}
		
		.Scrolly {float:right;width:156px; margin-left:2px; height:100%;overflow-y:scroll; overflow-x:hidden;}
		
		.Scrollyr {float:right;width:156px; margin-left:2px; height:100%; overflow-y:hidden; overflow-x:hidden;}
		.ScrollyT {float:right;width:156px; margin-left:2px; height:32px; overflow-y:hidden; overflow-x:hidden; background:#000000;}
		.ScrollyB {float:right;width:156px; margin-left:2px; text-align:center; height:calc(100% - 34px); margin-top:2px; overflow-y:scroll; overflow-x:hidden;}
		
		.file-input-container {position: relative;display: inline-block;}
		.file-input {display: none;}
		.file-input-label {position: absolute; top: 0px; left: 0px; width:64px; display: inline-block; padding: 2px; border: 1px solid #ccc; cursor: pointer;}
		.nbb {
		  position: absolute;
		  top: 0;
		  right: 24px;
		  width: 24px;
		  height: 24px;
		  font-size:20pt;
  		text-align:center;		  
		  display: inline-block;
		  padding: 3px 5px;
		  margin:4px;
		  background:none;
		  color:#000000;
		  border:none;
		  cursor: pointer;		  
		}

		.rbb {
		  position: absolute;
		  top: 0;
		  right: 0;
		  width: 24px;
		  height: 24px;
		  font-size:14pt;
  		text-align:center;		  
		  display: inline-block;
		  padding: 3px 5px;
		  margin:4px;
		  background:none;
		  color:#000000;
		  border:none;
		  cursor: pointer;		  
		}

		.dbb {
		  position: absolute;
		  bottom: 0;
		  right: 0;
		  width: 24px;
		  height: 24px;
		  font-size:14pt;
  		text-align:center;		  
		  display: inline-block;
		  padding: 3px 5px;
		  margin:4px;
		  background:none;
		  color:#000000;
		  border:none;
		  cursor: pointer;		  
		}		
		
		.thumbnail {
		  display: inline-block;
		  width: 48px; /* Adjust the size as per your requirement */
		  height: 48px; /* Adjust the size as per your requirement */
		  margin:2px; border:2px solid #000000;
		  background-color: 000000;
		  background-size: cover;
		  background-position: center;
		  image-rendering: pixelated;
		}
		.file-input-label:hover {
		  background-color: #e9e9e9;
		}

		/* Hide the default checkbox */
		input[type="checkbox"] {
		  display: none;
		}

		/* Style the label to resemble a checkbox */
		label {
			font-size:12pt;
			width:128px;
			text-align:center;
			display: inline-block;
			padding: 1px 1px;
			margin:1px;
			background-color: #664422;
			color:#FFFFFF;
			border-radius: 8px;
			border: 2px solid #ccc;
			cursor: pointer;
		}

		/* Style the label when the checkbox is checked */
		input[type="checkbox"]:checked + label {
		  background-color: #AFA;
		  color: #000000;
		  border-color: #6699CC;
		}
		
		.number-input {
		  /* Add your styles here */
		  width: 64px;
		  height: 28px;
		  padding: 2px;
		  background-color: #000000;
		  color:#FFFFFF;
		  border-radius: 8px;
		  border: none;
		  margin:2px;
		  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);		  
		  font-size: 14px;
		}		

		.chunkybut {
			font-size:14pt;
			width:128px;
			text-align:center;
			display: inline-block;
			padding: 1px 1px;
			margin:	1px;
			background-color: #DCD4CB;
			color:#000000;
			border-radius: 8px;
			border: 2px solid #AAA;
			cursor: pointer;
			box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
		}
		
		.tabbutOn {
			font-size:14pt;
			width:50px;
			height:30px;
			text-align:center;
			display: inline-block;
			padding: 1px 1px;
			margin:	1px;
			background-color: #DCD4CB;
			color:#000000;
			border-radius: 8px;
			border: 2px solid #AAA;
			cursor: pointer;
			box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
		}
		.tabbutOff {
			font-size:14pt;
			width:50px;
			height:30px;
			text-align:center;
			display: inline-block;
			padding: 1px 1px;
			margin:	1px;
			background-color: #9C948B;
			color:#000000;
			border-radius: 8px;
			border: 2px solid #AAA;
			cursor: pointer;
			box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
		}
		
		

		.lb {width:240px; display:inline-block; vertical-align:top; margin-top:8px;}
		.rb {width:752px; display:inline-block; vertical-align:top; margin-top:8px;}

		.abutton {min-width:72px; text-align:center; display:inline-block; padding:2px;  margin-top:5px; margin-bottom:5px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
			background-color: #DCD4CB;
			color:#000000;
			border-radius: 8px;
			border: 2px solid #AAA;
			cursor: pointer;
			line-height:1.0em; text-decoration:none; font-weight:normal;
		}
		.abutton_sml {min-width:32px; text-align:center; display:inline-block; padding:2px;  margin-top:5px; margin-bottom:5px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
			background-color: #DCD4CB;
			color:#000000;
			border-radius: 8px;
			border: 2px solid #AAA;
			cursor: pointer;
			line-height:1.0em; text-decoration:none; font-weight:normal;
		}
		.buttonised {min-width:32px; text-align:center; display:inline-block; padding:2px; margin-top:4px; margin-bottom:4px;
			background:#CCCCCC; color:#000000; 
			border-radius:6px;
			border:3px solid #999999;
			border-style:outset;
			line-height:1.0em; text-decoration:none; font-weight:normal;
		}

		.abutton_sel {min-width:72px; text-align:center; display:inline-block; padding:2px; margin-top:5px; margin-bottom:5px;
			background:#999999; color:#FFFFFF; 
			border-radius:6px;
			border:3px solid #999999;
			border-style:inset;
			line-height:1.0em; text-decoration:none; font-weight:normal;
		}
		.abutton_sml_sel {min-width:32px; text-align:center; display:inline-block; padding:2px; margin-top:4px; margin-bottom:4px;
			background:#999999; color:#FFFFFF; 
			border-radius:6px;
			border:3px solid #999999;
			border-style:inset;
			line-height:1.0em; text-decoration:none; font-weight:normal;
		}
		.abutton_side {width:128px; text-align:center; display:inline-block; padding:2px; margin-top:4px; margin-bottom:4px;
			background:#FFDDBB; color:#000000;
			font-size:0.75em;font-weight: bold;
			border-radius:1em;
			border:1px solid #CCCCCC;
			border-style:outset;
			line-height:1.0em; text-decoration:none;
		}
		.abutton_side_sel {width:128px; text-align:center; display:inline-block; padding:2px; margin-top:4px; margin-bottom:4px;
			background:#996633; color:#FFFFFF;
			font-size:0.75em;font-weight: bold;
			border-radius:1em;
			border:1px solid #999999;
			border-style:outset;
			line-height:1.0em; text-decoration:none;
		}


		input[type=range] {-webkit-appearance: none; width: 90px;}
		input[type=range]:focus {outline: none;}
		input[type=range]::-webkit-slider-runnable-track {width: 100%; height: 8.4px; cursor: pointer;  background: #000000; border-radius: 1.3px; border: 0.2px solid #555555;}
		input[type=range]::-webkit-slider-thumb {box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 16px; width: 16px; border-radius: 6px; background: #EEDDCC; cursor: pointer; -webkit-appearance: none; margin-top: -4px;}
		input[type=range]:focus::-webkit-slider-runnable-track {background: #0d0d0d;}
		input[type=range]::-moz-range-track {width: 100%; height: 8.4px; cursor: pointer;  background: #000000; border-radius: 1.3px; border: 0.2px solid #555555;}
		input[type=range]::-moz-range-thumb {box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 16px; width: 16px; border-radius: 6px; background: #EEDDCC; cursor: pointer; -webkit-appearance: none; margin-top: -4px;}
		input[type=range]:focus::-moz-range-track {background: #0d0d0d;}

.hamburger {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #446688;
	color:#000000;
	text-align:center;
	font-size:32px;
	cursor: pointer;
	transition: transform 0.3s ease;
	z-index:101;
}
.hamcontent {
	position:absolute;
	transition: margin-left 0.3s ease;
	background:#99AACC;
	z-index:100;
	padding:16px;
	width:220px;
	top:56px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
	border-radius:4px;
	margin-left: -300px;
}
.hamburger.active {}
.hamburger.active ~ .hamcontent {margin-left: 0px;}
.hambold {
	display:block;
	height:24px;
	align-items: center;
	margin:2px;
	color:#000000; text-decoration:none; font-size:16pt; margin-top:-4px;
}

.gallery {display:flex; flex-wrap:wrap; background:#99BBDD; width:1024px; padding:8px; margin:0 auto; margin-top:32px; text-align:center;}
.galleryBox {flex: 1; display:inline-block;background:#88AACC; height:220px; width:220px; padding:8px; margin:8px; text-align:center;
    flex-direction: column;
    align-items: center;
	justify-content: space-between;
}
.galleryImg {max-width:200px;  max-height:180px;}
.galleryFImg-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  cursor: pointer;
}

.galleryFImg {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
}