body {
	margin: 0;
	padding: 0;
	background: white;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	height: 100vh; /* Full viewport height */
	/*	Firefox exception */
	scrollbar-color: #40A0C0 #f80D0E0;
	scrollbar-width: thin; /* options: auto, thin, none */
}

/*---------------- Banner ----------------*/
.ban-box {
	position: relative;
}
.ban-img {
	width: 100%;
	border-radius: 20px;
	margin-top: 10px;
	display: block;
}
.ban-overlay-menu {
	position: absolute;
	top: 20px;
	right: 10px;
	display: flex;
	gap: 10px;
}
.ban-flag {
	width: 48px;
	height: auto;
	cursor: pointer;
}

.icon-img {
	width: 100px;
	height: auto;
	left: 10px;
	bottom: 10px;
}

/*---------------- Menubar ----------------*/
.menu-bar {
	margin-top: 10px;
	margin-bottom: 10px;
	display: flex;
	gap: 10px;
	justify-content: center;
	background: white;			/*	This defines the color of the menubar background	*/
}
.menu-btn {
	background: url("/data/images/menus/iCHausBlue40_off.png") no-repeat center;
	border: none;
	color: white;				/*	This defines the color of the menubar buttons font color	*/
	font-size: 16px;
	font-weight: bold;
	/*	Button width and height */
	width: 113px;
	height: 40px;
	cursor: pointer;
}
.menu-btn.hover {
	background: url("/data/images/menus/iCHausBlue40_hover.png") no-repeat center;
}

.menu-btn.active {
	background: url("/data/images/menus/iCHausBlue40_on.png") no-repeat center;
}

/*
.menu-btn:active,
.menu-btn:focus {
	background: url("/data/images/menus/iCHausBlue40_on.png") no-repeat center;
}*/
/*---------------- Contents ----------------*/
.cont-box {
	flex: 1;
	background: #FFFFFF;
	padding-right: 20px;
	margin-top: 0px;
	overflow-y: auto;
	overflow-x: hidden;
	width: 1000px;  /*  Leave some room at the right of the tiles*/
	color: #40A0C0;
	/*padding: 20px;*/
}

.palette {
	width: 1000px;          /* fixed width */
}

/*---------------- Palette ----------------*/
.pal_array {
	display: grid;
	grid-template-columns: repeat(3, 1fr);  /* 3 columns */
	gap: 0px 10px;
	text-align: center;
	margin-top: 100px;      /* Margin at the top of the tile cluster */
	margin-bottom: 00px;
}

.pal_tile img {
	width: 100%;
	/*max-width: 280px;*/       /* control image size */
	border-radius: 15px;    /* round corners */
	display: block;
	margin: 0 auto;
}

.pal_tile p {
	margin-top: 10px;       /* adjustable spacing between image and text */
	font-size: 20px;
}

/*---------------- Video box ----------------*/

.video-box {
	width: 1000px; /* fixed page width */
	text-align: center; /* center title and video wrapper */
}

.video-title {
	margin-bottom: 20px;
}

.video-wrapper {
	display: flex;
	justify-content: center; /* center video inside wrapper */
}

.video-frame {
	border-radius: 15px; /* round corners */
	width: 800px; /* fixed video width */
	height: 450px; /* maintain 16:9 ratio for standard YouTube video */
}

/*---------------- Paragraph with image ----------------*/

.img-text {
	display: flex;
	align-items: center;
	gap: 20px;
}

.img-text img {
	max-width: 200px;
	height: auto;
	border-radius: 12px; /* optional rounded corners */
}

/* Layout variations */
.img-text.right {
	flex-direction: row;       /* text left, image right */
}

.img-text.left {
	flex-direction: row-reverse; /* image left, text right */
}

.img-text.top {
	flex-direction: column;   /* image on top */
}

.img-text.bottom {
	flex-direction: column-reverse; /* image on bottom */
}

.par-title {
	background-color: #F2FAFD;
	color: #40A0C0;
	text-align: left;
	font-size: 40px;
	font-weight: bold;
	padding: 10px;
	padding-left: 30px;
	border: 3px solid #E4F5F8;
	border-radius: 20px;
}

.par-table {
	width: 100%;
	margin: auto;
	text-align: left;
}

.par-text {
	font-weight: normal;
	font-size: 20px;
	color: #40A0C0;
	padding-left: 20px;
}

.par-imgcell {
	width: 200px;
	padding-top: 10px;
}


.par-imgcell img {
	width: 100%;
	border-radius: 15px; /* Rounded corners */
}

/*----------------- Table ----------------*/
/* Container for the table */
.table-frame {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 1rem;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Title centered above the table */
.table-title {
  margin: 0 0 0px 0;
  text-align: center;
  font-size: 24px;
  letter-spacing: 0px;
  color: #2080A0;
}

/*
 Use separate borders (not collapsed) + border-spacing so
 each cell has its own rounded rectangle with space between.
*/
.table-body {
  width: 100%;
  border-collapse: separate;   /* important for rounded cell corners */
  border-spacing: 14px;        /* gap between cells so rounded corners show */
  table-layout: auto;
}

/* style for each cell: rounded corners, padding and subtle shadow */
.table-body td {
  background: #f7fbff;
  padding: 10px 10px;
  border-radius: 10px;
  text-align: center;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  font-size: 15px;
  color: #0a0a0a;
  word-wrap: break-word;
}

/* Cell formats */

.key-cell {
	font-size: 20px;
	font-weight: bold;
	width: 700px;
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ref-cell {
	width: 100px;
}

.utline-cell {
}

.cat-cell {
}

.package-cell {
}

.url-cell {
}



/* small responsive tweak for very narrow screens */
@media (max-width: 480px) {
  .table-body {
    border-spacing: 10px;
  }
  .table-body td {
    padding: 10px;
    font-size: 10px;
  }
}
/*---------------- Input form ----------------*/

.form-frame {
	max-width: 800px;
	margin: auto;
	background: #F2FAFD;
	padding: 25px;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.form-frame h2 {
	text-align: center;
	margin-bottom: 20px;
}

label {
	display: block;
	margin: 10px 0 5px;
	font-weight: bold;
}

input[type=text],
input[type=email],
input[type=tel],
textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #bbb;
	border-radius: 8px;
	margin-bottom: 15px;
	box-sizing: border-box;
	font-size: 14px;
}

/* Submit Button */
//button {
//	width: 100%;
//	padding: 12px;
//	background: #40A0C0;
//	color: white;
//	font-size: 16px;
//	border: none;
//	border-radius: 10px;
//	cursor: pointer;
//}

//button:hover {
//	background: #0056b3;
//}

/* Image Styling */
.image-container {
	max-width: 500px;
	margin: 40px auto;
	text-align: center;
}

.image-container img {
	max-width: 100%;
	border-radius: 20px; /* Rounded corners */
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/*---------------- Footer ----------------*/
.footer {
	position: relative;
	height: 100px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.footer-img {
	width: 1000px;
	height: 100px;
	border-radius: 20px;
	display: block;
}
.footer-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}

::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background: #C0E8F0;
	border-radius: 5px;
}

::-webkit-scrollbar-thumb {
	background-color: #40A0C0; border-radius: 6px;

}