@charset "UTF-8";
/* CSS Document responsive_core_wide_bobby1.css */

body {  /* 9 Feb 2022 copied & removed from page_core.css */
	font-family: Tahoma, Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";  
	margin: 2%;  /* was 10px;  */
	margin-bottom: 30px;  
}


/* ======================================================================== HEADER */
header {
	width: 100%;
}
header #headerLogo {
}
header #headerText {
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	display: inline-block;
	letter-spacing: normal;
}

/* ======================================================================== NAV */
nav #navbar {
	background-color: #FFCC00;
	border-top: 1px solid #966;
	z-index: 1;   /* this sends it to the top layer */
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* soft-edged transparent shadow copied from the dropdown-content code */
}
nav .dropdown {
	float: left;
} 

nav .tab button.tablinks, nav .dropdown button.dropbtn {
	/* color: #FFFFFF; commented 24 Feb 2025 */
	font-family: Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	font-style: italic;
	font-weight: bold;
	text-align: left;
	font-size: 1.1em;
}

nav .tab button.tablinks { /* 24 Feb 2025 */
	color: #FFFFFF;
}

nav .dropdown button.dropbtn { /* 24 Feb 2025 */
	color: #966;
}

/* https://www.w3schools.com/howto/howto_js_navbar_sticky.asp */
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
/* I like this but it breaks the navigation dropdown, so it is not being used */
.sticky {  
	position: fixed;
	top: 0;
	width: 100%;
}

/* https://www.w3schools.com/howto/howto_js_tabs.asp */
/* Style the tab ================================================ NAV TABS */
.tab {
  overflow: hidden;
}

/* Style the buttons that are used to open the tab content ============== NAV TAB BUTTONS */
nav button {	/* 012522 not sure that it is currently needed, but I added nav to this */
	background-color: inherit;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 10px 14px 12px 14px;
	transition: 0.3s;
}

/* Change the default color of the nav buttons per Bobby's suggestion 24 Feb 2025 */
nav .tab button.tabSearch {
  background-color: #b5db8a; /*light apple icon green*/
}

/* Change the color of the nav buttons per Bobby's suggestion 24 Feb 2025 */
nav .tab button.tabRead {
  background-color: #FFF; /*white*/
  color: burlywood; /*light brown*/
}

/* Change background color of buttons on hover */
.tab button.tabRead:hover {
  background-color: #FFFFFF; /*white*/
  color: #FC0; /* responsiveYellowBar */
}
.tab button.tabSearch:hover {
  background-color: #557A55; /*dark green*/
}

/* Create an active/current tablink class */
.tab button.tabRead.active {
  background-color: #FFFFFF; /*white*/
  color: #FC0; /* responsiveYellowBar */
}
.tab button.tabSearch.active {
	background-color: #78AC78; /*grass green*/
}

/* Style the tab content ============================================= NAV TAB CONTENT */
.tabcontent {
	display: none;
	padding: 1% 1%;  /* 9 Feb 2022 was 1% 2%; 1 Feb 2022 was 6px 12px; */
	border: 1px solid #ccc;
	border-top: none;
} 
#Search.tabcontent {     /* did not work with a space between id and class */
	background-color: #78AC78; /*grass green*/
	color: #FFFFFF; /* white*/
	top: 0px; 
	z-index: 1;  /* this sends it to the top layer */
}

#Search.tabcontent :hover { /* 24 Feb 2025 this works! but only with a space in front of the colon*/
	font-weight: bold; 
}

/* https://www.w3schools.com/howto/howto_js_accordion.asp & others ================= SEARCH ACCORDION*/
/* Style the buttons that are used to open and close the accordion panel (are these technically really buttons?) */
.tabcontent .accordion {
  	background-color: #78AC78; /*grass green*/
  	color: #FFFFFF; /* white */
  	cursor: pointer;
  	padding-top: 1.6em;
	padding-bottom: .8em;
  	width: 100%;
  	text-align: center;
  	border: none;
  	outline: none;
  	transition: 0.4s;
	font-family: Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	font-size: 1em;
	font-weight: normal;
} 

/* 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) */
#Search.tabcontent .active {
	background-color: #557A55;  /*dark green*/
	font-weight: bold;
} 

/* Style the accordion panel. Note: hidden by default */
#Search.tabcontent .panel {
  	padding-bottom: 1em;
  	background-color: #557A55;  /*dark green*/
  	display: none;
	color: black; 
	text-align: center;
} 
#Search.tabcontent .narrow {   
	max-width: 25em; 
}
#Search.tabcontent .narrow button:hover {
	background: #557A55;  /*dark green*/
}
#Search.tabcontent .narrow button:focus {
	background: #557A55;  /*dark green*/
}


.accordionPanelButton {
	background-color: white;
}
#Search.tabcontent .narrow .accordionPanelButton:hover, #Search.tabcontent .narrow .accordionPanelButton:focus {
	background-color: white; 
}


/* https://www.w3schools.com/howto/howto_css_dropdown.asp */
/* Dropdown Button ==================================================== NAV DROPDOWN */
.dropbtn {
  	padding: 10px 6px 2px 14px; /* 24 Feb 2025 decreased right padding from 14 to 6 */
	border: none; 
	background-color: inherit; /* 24 Feb 2025 tried to change to #c2a3a3 light brown instead of inherit, per Bobby's suggestion, but there are issues with the height of the button */ 
	cursor: pointer; /* this is from the clickable dropdown example */
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	top: 32px;
	background-color: #FFe680;  /*light golden-yellow*/ 
	/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
	box-shadow: 16px 16px 16px 0px rgba(0,0,0,0.2);  /* adjusted above values based on https://www.w3schools.com/cssref/css3_pr_box-shadow.asp */
	z-index: 2;   /* this sends it to the top layer; 9 May 2022 changed from 1 to 2 (only on core_wide) because of conflict with range maps */
	width: 175%;
	overflow: auto;
	border-left: 2px solid #996666;  /* #FFCC00 golden-yellow*/
}

/* Links inside the dropdown */
.dropdown-content a {
  	color: #996666;  /*brown*/
  	padding: 6px 16px;
  	text-decoration: none;
  	display: block;
	font-family: Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	font-style: italic;
	font-weight: normal;
	text-align: left;
	font-size: 1em;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover, .dropdown-content a:focus {background-color: #966; color: #FFFFFF;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content, .dropdown:focus .dropdown-content {display: block;}
 
/* Change the background color (& the color 24 Feb 2025) of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn, .dropdown:focus .dropbtn {background-color: #966; color: #FFFFFF;}


/* ======================================================================== */
/* https://www.w3schools.com/howto/howto_js_dropdown.asp - NOT SURE THAT THIS IS BEING USED*/
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
	display: block;
}


/* ======================================================================== */
/* responsive_core_wide pages: mainPrimary and mainSidebar will display at 100% width at all screen sizes */

#responsiveMain {
		overflow: visible;  /* 14 Feb 2022 to allow awesomplete's names in #formSidebarName (at the bottom) to spill out */
}

#responsiveMainPrimary {
	padding-top: 20px;

	width: 100%;
	float: none;
	padding-right: 0; 
}
.responsiveMainPrimaryContent {
	/* max-width: 50em; this is used on responsive_core stylesheet (NOT "_wide") to prevent the text width from being too wide to read comfortably */
}
#responsiveMainPrimary .responsiveMainPrimaryContent hr {
	color: burlywood;
}

#responsiveMainSidebar {
	width: 100%;
	float: none;
}
.responsiveMainSidebarContent {
}
#responsiveMainSidebar .responsiveMainSidebarContent hr {
	color: burlywood;
}
	

#responsiveMainSidebar .responsiveMainSidebarContent #formSidebarName, #responsiveMainSidebar .responsiveMainSidebarContent #formSidebarNameTop {
	background-color: burlywood; 
	padding-top: 8px;
	padding-left: 6px;
	padding-bottom: 3px;
	overflow: visible;
}

#responsiveMainSidebar #formSidebarName p {
	font-family: Tahoma, Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	margin-bottom: 0;
}

#responsiveMainSidebar #formSidebarNameTop p {
	font-family: Tahoma, Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	margin-bottom: 0;
	font-size: 70%;
}

#responsiveMainSidebar .responsiveMainSidebarContent #formSidebarNameTop {
		display: none;
} 


#thumbnailGallery {
	background-color: white;
	overflow: hidden;
}

#responsiveMain p {
	font-family: "Times New Roman", Times, serif;
	margin-bottom: 1em;
}
#responsiveMain ul {
	font-family: "Times New Roman", Times, serif;
	margin-bottom: 1em;	
	list-style: none;
}
#responsiveMain li {
	font-family: "Times New Roman", Times, serif;
	margin-bottom: 0;
	font-size: 90%;
}
#responsiveMain h1 {   /* page title */
	font-weight: bold;
	font-size: 120%;
	font-family: Tahoma, Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	margin-bottom: 1em;
}
#responsiveMain h2 {   /* subhead with space below */
	font-weight: bold;
	font-size: 110%;
	font-family: Tahoma, Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	margin-bottom: 1em;
}
#responsiveMain h3 {     /* author name */
	font-weight: normal;
	font-size: 110%;
	font-family: Tahoma, Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	margin-bottom: 1em;
}
#responsiveMain h4 {  /* subhead without space below */
	font-weight: bold;
	font-size: 110%;
	font-family: Tahoma, Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
}


/* ======================================================================== MEDIA QUERIES */
/* ======================================================================== MEDIA QUERY MAX-WIDTH SMALLEST 640px */
@media only screen and (max-width: 640px){
	
	body {
		margin: 2%;
	}
	header #headerLogo {      /* did not work when "img" was part of the selector */
		width: 240px;
		height: 51px;
	}
	nav .tab button.tablinks, nav .dropdown button.dropbtn {
		font-size: 1em;
	}
	
	nav .tab button {   /* 19 Oct 2023 reducing left/right padding so that navBar does not wrap to two lines after adding "5x" to Search (responsive_core stylesheet did this in July 2022!!!) */
		padding: 10px 2px 12px 2px;
	}

	
	.tabcontent .active {
		font-size: 1em; /* is this needed? */
	} 
	
	#thumbnailGallery {
	}
	#thumbnailColumn {
	}
	#thumbnailColumn img {
		width: 48%;;
		margin-left: 3px; 
		margin-bottom: 3px;
		float: right;
	}

}

/* ==================================================================== MEDIA QUERY MIN-WIDTH MIDDLE-SIZE & LARGER */
@media only screen and (min-width: 641px){
	
	#thumbnailColumn img {
		width: 90%;
		margin-left: 3px; 
		margin-bottom: 3px;
		float: right;
	}
	
	#responsiveMain {
		/* overflow: hidden;   13 Feb 2022 to keep floated elements from spilling out - this contradicts rule of 14 Feb! */
	}

}

/* ======================================================================== MEDIA QUERY MIN-WIDTH LARGEST 992px */
@media only screen and (min-width: 992px){
	header #headerText {
		letter-spacing: .2em;
	}
	
	#responsiveMainPrimary {
		padding-right: 3%; 
	}
	
	#responsiveMainSidebar {
		/* background-color: does not work here; why? */
	}
	
	#thumbnailColumn img {
		width: 48%;
		margin-left: 3px; 
		margin-bottom: 3px;
		float: right;
	}
}