body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #F5F0EA; /* Tinted Window background */
    padding: 0 220px; /* Add side padding only */
}

header {
    background-color: #FFCC00; /* VIA Rail Yellow - Primary */
	background-image: url("images/VIA/VIA_Banner.jpg");
	height: 300px;
    color: #000; /* Text color over banner image */
    padding: 30px;
    text-align: center;
}

img {
	width: auto;
}

.key {
	max-width: 500px;	
}

.content img {
	width: 100%;
	max-width: 1700px;
	max-height: 400px;

}

h1 {
    font-size: 36px; /* Increase header size */
    background-color: #FFCC00; /* VIA Rail Yellow - Primary */
    color: #4B4F54; /* Charcoal text on yellow */
    text-align: center;
    padding: 5px;
	font-weight: bold;
	border: 2px solid #4B4F54; /* Charcoal border on yellow */
    border-radius: 10px; /* Rounded corners */
	width: auto;
	margin-top: 5px;
}

h2 {
    font-size: 24px; /* Increase header size */
    color: #fff; /* White text on charcoal */
    background-color: #4B4F54; /* Charcoal - Secondary */
    padding: 5px;
    border-radius: 5px;
}

h3 {
	font-size: 18px;
}

a {
    color: #4B4F54; /* Charcoal for general links */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Existing nav (for "Contents") */
nav {
    display: flex;
    flex-direction: column;
    align-items: left;
    background-color: #E7E4DE; /* Cool Grey background */
    padding: 10px;
    border: 1px solid #ccc;
	border-radius: 5px;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav li {
    margin-bottom: 10px;
}

nav a {
    color: #4B4F54; /* Charcoal for content nav links */
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

section {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff; /* White background for content sections */
    border: 1px solid #ccc;
	border-radius: 5px;
}

main {
    display: flex;
    justify-content: flex-start; /* Align content to the left */
}

/*
.content-container {
    width: 50%;
}
*/

.content-column {
    flex: 1;
    padding: 20px;
}

.content-column:first-child {
    width: 60%;
}

.content-column:last-child {
    width: 100%;
    text-align: left;
}

.content-column img {
    width: 100%;
    height: auto;
}

.equipment-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.equipment-card {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 10px;
    width: 300px;
    background-color: #E7E4DE; /* Cool Grey background */
}

.equipment-card h2 {
    color: #4B4F54; /* Charcoal */
}

.equipment-card a {
    color: #4B4F54; /* Charcoal */
}

.ComingSoon {
    background-color: #FFCC00; /* VIA Rail Yellow for "Coming Soon" */
    color: #000; /* Black text on yellow */
    text-align: center;
    padding: 10px;
	font-weight: bold;
	border: 2px solid #000; /* Black border */
    border-radius: 10px; /* Rounded corners */
}

.NotDone {
	font-style: italic;
}

.CarType {
	background-color: #4B4F54; /* Charcoal for CarType section headers */
	color: #fff; /* White text */
}

.CarType a {
	color: #FF0000; /* VIA Rail Red for links within CarType section as accent */
}

.copyright {
	font-style: italic;
	font-size: 10px;
	text-align: right;
}

/* NEW TAB NAVIGATION STYLES */
.tab-nav {
    background-color: #E7E4DE; /* Cool Grey background for the toggle container */
    padding: 10px 0; /* Vertical padding inside the container */
    margin: 30px 0; /* Increased vertical margin for balanced space */
    border-radius: 8px; /* Slightly more rounded corners for the container */
    border: 1px solid #b0b0b0; /* Subtle border for the container */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
}

.tab-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* Center the tabs */
}

.tab-nav li {
    margin: 0 5px; /* Small horizontal space between tabs */
}

.tab-nav a {
    display: block; /* Allows padding and width/height to be applied */
    padding: 12px 25px; /* Fixed padding for consistent size */
    color: #4B4F54; /* Charcoal for inactive tabs */
    text-decoration: none;
    font-weight: bold;
    font-size: 17px;
    border-radius: 6px; /* Fixed border-radius for consistent shape */
    transition: all 0.3s ease; /* Smooth transition for all properties */
    border: 1px solid transparent; /* Transparent border for consistent size */
    background-color: transparent; /* Transparent background */
}

.tab-nav a:hover {
    background-color: #d0d0d0; /* Subtle darker grey on hover */
    color: #000; /* Black text on hover */
    border-color: #b0b0b0; /* Medium grey border on hover */
    /* No changes to padding, border-radius, border here - they are now fixed in the base state */
}

.tab-nav a.active {
    background-color: #FF0000; /* VIA Rail Red for the active tab */
    color: #fff; /* White text for active tab */
    border-color: #cc0000; /* Slightly darker red border for active tab */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); /* Inner shadow for active "pressed" look */
    padding: 12px 25px; /* Ensure active tab retains button padding */
    border-radius: 6px; /* Ensure active tab retains button border-radius */
    border: 1px solid #cc0000; /* Ensure active tab retains button border */
}

/* New styles for the car group cards */
.car-group-card {
    margin-top: 40px; /* Add space above each new header */
    padding: 20px;
    background-color: #FFCC00; /* VIA Rail Yellow */
    border: 1px solid #4B4F54; /* Charcoal border */
    border-radius: 5px;
    color: #4B4F54; /* Charcoal text */
}

/* Style for the sub-category h3 within the car-group-card */
.car-group-card .sub-category {
    font-size: 24px; /* Increase font size */
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
    color: #4B4F54; /* Ensure text color is charcoal */
}

.car-group-card p {
    margin: 0;
}