#outercontainer {
		display: flex;	
		flex-wrap: wrap;  
		justify-content: space-around;
		background-color:steelblue;
		padding: 9px;
		/* width:1000px; */
	}
	 #centerbox {
    display: flex;      
    flex-wrap: wrap;       
    justify-content: center; 
    background-color: lightsteelblue;
    margin: 9px;
    padding: 9px;
}
table {
	border: 1px solid darkblue;
	margin: 9px;
	padding: 5px;
}
th, td {
	border: 1px solid darkblue;
	padding: 5px;
	margin: 2px;
}
td {
	background-color: lightsteelblue;
}
th {
	background-color: steelblue;
}
.highlight {
	background-color: yellow;
}

	 #secondBox {
	display: block;
	margin-top: 20px;
    display: flex;      
    flex-wrap: wrap;       
    justify-content: center; 
    background-color: lightsteelblue;
    margin: 9px;
    padding: 9px;
}

#tableContainer {
	display: flex;
	flex-wrap: wrap;
	flex: 1 1 100%; 
}

#tableContainer table {
    flex: 1 1 400px;    
    min-width: 300px;     
    max-width: 100%;     
    box-sizing: border-box;
}

#glossaryContainer {
	flex: 1 1 100%; 
	display: flex;
	flex-wrap: wrap;
	 flex-direction: column; 
}

#glossaryContainer table {
    flex: 1 1 400px;    
    min-width: 300px;     
    max-width: 100%;     
    box-sizing: border-box;
}
	.imgbox {
		flex-grow: 1; 
		flex-basis: 300px; /* base size */
		background-color:lightsteelblue;
		margin: 9px;
		}

	.logo {
		width:100%;
	}
	#centeredtitle {
		text-align: center;	font-size: 36pt; 
		color: white; background-color: steelblue;
	}
	#galleryBox {
		flex-grow: 1; 
		flex-basis: 300px;
	text-align: center; 
	}
	.centerFigure {
    width: 300px;         
    margin: 10px;        
    text-align: center;  
}

.centerFigure img {
    width: 100%;           
    height: auto;         
    display: block;     
}


/* Glossary styling to match tables */
#glossaryContainer {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    margin: 9px;
    padding: 9px;
    background-color: lightsteelblue;
    border: 1px solid darkblue;
    box-sizing: border-box;
}

#glossaryContainer dl {
    display: grid;
    grid-template-columns: 200px 1fr; /* first column = term, second = definition */
    margin: 0;
    padding: 0;
    border-collapse: collapse;
}

#glossaryContainer dt {
    border: 1px solid darkblue;
    background-color: steelblue;
    color: white;
    font-weight: bold;
    padding: 5px;
    margin: 0;
}

#glossaryContainer dd {
    border: 1px solid darkblue;
    background-color: lightsteelblue;
    padding: 5px;
    margin: 0;
}

.highlight {
    background-color: yellow;
}


.coreHighlight {
  background-color: #f39c12; /* strong orange spotlight for the core column */
  color: white;
  font-weight: bold;
}
.highlightRow {
  background-color: #dff0d8; /* light green highlight for the entire row */
}
#glossaryReveal {
    flex-basis: 100%;
	text-align: center;
}

#messagebox {
    border: 1px solid darkblue;
    padding: 5px;
    margin: 10px;
    background-color: #f0f0f0;
    min-height: 30px; /* optional, ensures box always has some height */
}
.definition {
    display: none;
}