body {
	background-color: #FDFDED;
	margin: 0;
}	

.table_noborder {
	border:		0px solid black;
	margin-left:auto; 
    margin-right:auto;
}

td { 
	vertical-align:	top;
	text-align: left;
	padding: 10px;
}

/* Don't underline links */
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

.profile_image {
  	width: auto;
  	height: 300px;
}

@media screen and (max-width: 750px) {
	.profile_image {
	  	width: 60%;
	  	height: auto;
	}
}

.mysearchbar {
	  background-color: #FFCC66;
}

/* Page structure DIV based layout */
.flex-container {
	display: flex;
	flex-direction: column;
	width: 100%;
}
	/* Order 1 */
	#header {
		text-align: center;
		font-style: italic;
		font-weight: bold;
		font-size: 200%;
		padding: 0px 0px 0px 0px;
		background-color: #FFCC66;
		width: 100%;
	}
	
	.sub_header {
		text-align: center ;
		font-weight: bold;
		font-size: 150%;
		width: 100%;
	}
	
	#banner {
		background-size: cover;
		width:   80%;
		height:  auto;
		padding: 0px 0px 0px 0px;
	}
	
	@media screen and (max-width: 750px) {
		#banner {
		  	width: 95%;
		  	height: auto;
		}
	}
	
	#logo {
		width: 10%;
		padding: 5px 10px 0px 10px;
		float: left;
	}
	
	/* Order 2 */
	.flex-inner_container {
		display: flex;
		flex-direction: column;
		background-color: #FDFDED;
		width: 100%;
	}
			
		/* Order 1 */
		#navbar {
		  background-color: #FFCC66;
		  text-transform: uppercase;
		  width: 100%;
		}

		.search_bar {
			padding:	0px 5px 0px 5px;
			width:		50%;
			height:     60px;
			float: 		right;
			border:		0px solid black;
			background-color: #FFCC66;
		}
		
		/*
		@media screen and (min-width: 751px) {
			.search_bar {
				width:		50%;
			}
		}
		*/
		
		/* Order 2 */
		#content {
			padding:	0px 10px 15px 10px;
			border:		0px solid black;
			background-color: #FDFDED;
			/*width: 		100%;*/
		}
				
			.content_center {
			  text-align: center;
			}
		
	/* Order 3  Bottom Menu */
	#sub_footer {
		font-size: 75%;
		width: 100%;
	}
	
	/* Order 4 - Copyright */
	#footer {
		text-align: center ;
		width: 100%;
	}

	
.homepage_image_left {
	width: 17%;
	float: left;
}

.homepage_image_right {
	width: 20%;
	float: right;
}
 
/* MP3 Play Button */
.play {
	height: 15px;
	width:  15px;
}

/* Tables in general */
.iss-table, .iss-table th, .iss-table td {
	padding: 7px;
	border: 1px solid black;
}

.iss-table-noborder, .iss-table-noborder th, .iss-table-noborder td {
	padding: 7px;
	border: 0px;
}

.iss-table-tight, .iss-table-tight th, .iss-table-tight td {
	padding:  0px 20px 4px 0px;
	border: 0px;
	margin-left:auto; 
    margin-right:auto;
}

.iss-table th {
	background-color: #FFCC66;
	text-align: left;
	vertical-align: top;
}

@media screen and (max-width: 750px) {
	.table_noborder {
		table-layout: fixed;
		width: 100%;
	}
	
	.iss-table {
		table-layout: fixed;
		width: 100%;
	}
	
	.iss-table-noborder {
		table-layout: fixed;
		width: 100%;
	}
	
	.iss-table-tight {
		table-layout: fixed;
		width: 100%;
	}
	
}

/* Used for laying out most collections of data */
.listHorizontal {
  font-size: 100%;
  padding: 5px 0px 15px 0px;
  margin: 0;
  justify-content:space-evenly;
  padding-left: 0;
  list-style-type: none;
  display:flex;
  flex-wrap: wrap;
 }
 
 /* For list of filter categories that appear at the top of pages like people, pieces, albums */
  .category_list_item {
	padding: 	5px 0px 10px 0px;
	width:		100px;
	max-width:	100px;
	display: 	inline-block;
	border:		0px solid black;
	
 }
 
/* List of letters that appear at the top of the page */
 .index_index {
 	padding:		0px 0px 20px 0px;
 	text-align:		left;
 	text-transform:	uppercase;
 	width:			30px;
	max-width:		30px;
	display: 		inline-block;
	border:			0px solid black;
 }
 
/* For mass displays of database data on people and pieces pages */
	/*  Container for DB dump list items */
.index_list {
	padding: 5px 0px 15px 0px;
	margin: 0;
	display:flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
 
  /* Header (letter) that appears at the start of a section of a DB dump of list items */
 .index_list_index {
 	padding:		0px 0px 5px 0px;
 	text-align:		left;
 	font-weight:	bold;
 	font-size:		125%;
 	text-transform:	uppercase;
 }
 
	/* DB dump list item */
.index_list_item {
	padding:		5px 5px 30px 5px;
	text-align:		left;
	vertical-align:	top;
	width:			200px;
	max-width:		200px;
	height:			4em;
	display:		inline-block;
	/* border:			1px solid black; */ 
	/* background-color: yellow; */
 }
 
 	/* DB dump list item for teachers list and membership roster */
.roster_list_item {
	padding:		5px 5px 30px 5px;
	text-align:		center;
	vertical-align:	top;
	width:			250px;
	max-width:		250px;
	height:			275px;
	display:		inline-block;
	/* border:			1px solid black; */
	/* background-color: yellow; */
 }
   /* Roster gallery images */
 .roster_gallery_person {
 	border:		0;
 	height:		200px;
 	max-height:	200px;
 	max-width:	200px; 
}

 /* For photo gallery bulk display item like people photos, album covers */
  .photo_gallery_item {
	padding: 	5px 10px 20px 10px;
	width:		100px;
	max-width:	100px;
	font-size:	80%;
	display: 	inline-block;
	border:		0px solid black;
 }
 
 /* Album cover gallery images */
 .photo_gallery_album {
 	border:		0;
 	height:		100px;
 	width:		100px;
 	max-height:	100px;
 	max-width:	100px;
 	display: 	block;
    margin-left: auto;
    margin-right: auto;
 }
 
 @media screen and (max-width: 750px) {
 .photo_gallery_album {
	  width: 100%;
	  height: auto;
	  display: block;
 }
}
  /* Album cover full size images */
 .photo_album {
 	border:		2px solid black;
 	height:		216px;
 	width:		216px;
 	max-height:	216px;
 	max-width:	216px;
 	display: 	block;
    margin-left: auto;
    margin-right: auto;
 }
 
  /* People gallery images */
 .photo_gallery_person {
 	border:		0;
 	height:		100px;
 	max-height:	100px;
 	max-width:	100px;
}

/* COLLAPSIBLE CONTENT - Used for genre histories */
/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.coll_content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  text-align: left;
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: left;
  margin-left: 5px;
}

.active:after {
  /* content: "\2796"; */ /* Unicode character for "minus" sign (-) */
}

/* RESPONSIVE TOPNAV */
/* Add background color to the top navigation */
.topnav {
  background-color: #FFCC66;
  overflow: hidden;
  clear:both;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #FDFDED;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #FDFDED;
  color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 750 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 750px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 750px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* RESPONSIVE SUBNAV */
/* Add background color to the top navigation */
.subnav {
  background-color: #FFCC66;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.subnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.subnav a:hover {
  background-color: #FDFDED;
  color: black;
}

/* Add an active class to highlight the current page */
.subnav a.active {
  background-color: #FDFDED;
  color: black;
}

/* Hide the link that should open and close the subnav on small screens */
.subnav .icon {
  display: none;
}

.subnav.responsive a {
  float: none;
  display: block;
  text-align: left;
}

/* Class to hide elements on mobile */
.hide_me {
	
}

@media screen and (max-width: 750px) {
	.hide_me {
		display: none;
	}
}

/* Class to hide elements for desktop */
.hide_me_d {
	display: none;
}

@media screen and (min-width: 751px) {
	.hide_me_d {
		display: none;
	}
}
	
 /* Class to highlight the current page */
.active_menu {
		font-weight: bold;
		font-size: 100%;
}	

input:invalid {
	border: 2px dashed red;
}

input:valid {
	border: 1px solid black;
}