/* Entire background dark gray */
html {
	background-color: #313131; /* Dark background for the entire page */
}
/* Default Font */
body {
	font-family: "Nunito Sans", sans-serif;
}
#outer-container {
	width: 1200px;
	margin: 0 auto; /* Center the outer container horizontally */
}
/* Header with Icon and Navigation */
header {
	/* Center align the header */
	margin: 0 auto; /* Center the header horizontally */
	background-color: #313131; /* Dark background for the header */
	height: 80px; /* Set the height of the header */
	display: flex; /* Use flexbox for layout */
	align-items: center; /* Center items vertically */
	justify-content: space-between; /* Space out items horizontally */
	padding: 0 20px; /* Add horizontal padding */
	/* Push the logo down slightly */
	padding-top: 10px; /* Adjust the top padding to push the logo down */
	border-bottom: 5px solid #000000; /* Black border at the bottom of the header */
}
/* Nav Bar Items - Horizontal Menu Items, Aligned to the next next to icon*/
nav {
	display: flex; /* Use flexbox for layout */
	align-items: center; /* Center items vertically */
	background-color: #313131; /* Dark background for the nav bar */
	height: 80px; /* Set the height of the nav bar */
}
/* Mint Header Logo in header*/
img#header-logo {
	/* Icon is on top of everything */
	z-index: 1000; /* Ensure the header logo is above other elements */
	margin: 10px 0; /* Add some margin around the header logo */
	display: block; /* Ensure the header logo is displayed as a block element */
	width: 100px; /* Set the width of the header logo */
	height: auto; /* Maintain aspect ratio */
}
nav ul {
	list-style-type: none; /* Remove default list styling */
	margin: 0; /* Remove default margin */
	padding-top: 20px; /* Remove default padding */
	padding-left: 20px; /* Add left padding for the nav bar items */
	display: flex; /* Horizontal layout for the nav bar items */
	gap: 50px; /* Space between the nav bar items */
	color: #aaaaaa; /* Light gray text for the nav bar items */
}
nav ul li a {
	color: inherit; /* Light gray text for the nav bar items */
	font-family: "Permanent Marker", sans-serif;
	font-size: 42px; /* Font size for the nav bar items */
	text-decoration: none; /* Remove underline from nav bar items */
}
nav ul li a:hover {
	color: #ff0000; /* Change text color on hover */
}
/* Banner should be overplapped slightly by the logo */
header .header-bottom-border {
	position: relative; /* Position the border relative to the header */
	z-index: 999; /* Ensure the border is above other elements */
	top: 100px; /* Position the border just below the header */
	margin-top: -2px; /* Slightly overlap the banner with the header bottom border */
	/* Ensure the border spans the full width of the page */
	background-color: #000000; /* Black border under the header */
	height: 2px; /* Thickness of the border */
	width: 100%; /* Full width of the page */
}
#banner {

	padding: 0px; /* Add padding around the banner */
	text-align: center; /* Center the content inside the banner */
	width: 1200px;
	height: 523px; /* Set the height of the banner */
}
/* Banner logo over the banner image */
#banner img:last-child {
	position: relative; /* Position the banner logo relative to the banner */
	top: -350px; /* Move the banner logo upwards */
	width: 1155px; /* Set the width of the banner logo */
	height: auto; /* Maintain aspect ratio */
	z-index: 1000; /* Ensure the banner logo is above other elements */
}
/* Bottom section of the page */
/* In front of the banner */
#bottom-section {
	position: relative; /* Position the bottom section relative to the banner */
	z-index: 998; /* Ensure the bottom section is below the header and banner */
	background-color: #ff0000; /* red background for the bottom section */
	padding: 15px; /* Add padding around the bottom section */
	text-align: center; /* Center the content inside the bottom section */
	border-top: 2px solid #000000; /* Add a black border at the top of the bottom section */
	border-bottom: 2px solid #000000; /* Add a black border at the bottom of the bottom section */
}
/** Content Section has marshmallow background */
#content-section {
	/* Center the content section on the page */
	margin: 0 auto; /* Center the content section horizontally */
	background-color: #ffe4e1; /* light gray background */
	padding: 20px; /* Add padding around the content section */
	text-align: left; /* Align the content inside the content section to the left */
	font-size: 18px; /* Set the font size for the content section */

}
/** Page Title within content sections */
#content-section h1, #content-section h3.formGroupTitle {
	text-align: center; /* Align the page title to the center */
	font-family: "Permanent Marker", sans-serif; /* Use the Permanent Marker font for the page title */
	font-size: 36px; /* Set the font size for the page title */
	color: #313131; /* Red color for the page title */
	margin-top: 0px; /* Add space above the page title */
	margin-bottom: 20px; /* Add space below the page title */
}
/* Band members list styling */
/* Member photos are on the left and names are to the right vertically centered */
/* Band member items are horizontally aligned but wrap vertically on narrow screens */
#band_members .band-member-item {
	display: flex; /* Use flexbox for horizontal alignment */
	align-items: center; /* Vertically center the items */
	margin-bottom: 20px; /* Add space between band member items */
}
#band_members .band-member-photo {
	margin-right: 20px; /* Add space between the photo and the name */
	width: 100px; /* Set a fixed width for the band member photo */
	height: auto; /* Maintain aspect ratio */
}
#band_members .band-member-name {
	font-weight: bold; /* Make the band member name bold */
}

div.formGroup div.formquestion label {
	margin-bottom: 10px; /* Add space below each label */
	display: inline-block; /* Ensure the label is treated as an inline block element */
	vertical-align: top; /* Align the label to the top of the form question */
	width: 200px; /* Set a fixed width for the labels */
}

div.formGroup div.formquestion input,
div.formGroup div.formquestion textarea,
div.formGroup div.formquestion select {
	margin-bottom: 10px; /* Add space below each input, textarea, and select element */
	display: inline-block; /* Ensure the elements are treated as inline block elements */
	vertical-align: top; /* Align the elements to the top of the form question */
	width: 300px; /* Set a fixed width for the input, textarea, and select elements */
}

div.band_event {
	margin-bottom: 20px; /* Add space below each band event */
}

div.band_event span.event_title {
	margin-bottom: 10px; /* Add space below the event title */
	font-weight: bold; /* Make the event title bold */
	display: block; /* Ensure the event title is displayed as a block element */
}
	
div.band_event span.event_location_name {
	margin-bottom: 10px; /* Add space below the event details */
	font-style: italic; /* Italicize the event location name */
	display: block; /* Ensure the event location name is displayed as a block element */
}

div.band_event span.event_date {
	margin-bottom: 10px; /* Add space below the event date */
	font-style: italic; /* Italicize the event date */
	display: block; /* Ensure the event date is displayed as a block element */
}

input.nav-check {
	display: none; /* Hide the nav-check element */
}