/*
Theme Name: WPL-Ombre
Theme URI: //westmontlibrary.org
Description: WPL Ombre
Version: 260528
Author: K Barnett
Author URI: //westmontlibrary.org
*/

@charset "utf-8";

@font-face {
font-family: "wplicons";
	src: url("/WPLicons/wplicons3.woff") format("woff");
	font-display: swap;
}

/* ------------------- COLORS ---------------------- */

/* logo dark grey	#38414c; */
/* logo grey		changed to #535a65 */

/* body bkg			#f1f1f1; */
/* wrapper bkg		#f8f8f8; */
/* accent grey		#dcdcdc; */

/* WPL blue			#1f9ae5; */

/* very dark grey	#22262b */
/* light grey		#a2a6ab */
/* link blue		#0073bb */

/* -------------------- ICONS ----------------------- */

/* Book/Collection		e60a */
/* Info					e606 */
/* Calendar/Events		e607 */
/* Star/Kids			e608 */
/* Community/Cycle		e609 */
/* My Account/User		e60d */

/* Menu/hamburger		2630 */
/* Close/X				1f5d9 */
/* Arrow left			27f5 */
/* Arrow right			27f6 */
/* Check				2713 */
/* Check small			1f5f8 */
/* Check circle			1f5f9 */
/* Search/magnifying	1f50d */
/* Arrow up-right		2b67 */
/* Chevron Down/Expand	25bc */
/* Chevron up			25b2 */
/* Chevron left/prev	25c0 */
/* Chevron right/next	25b6 */

/* Android				eac0 */
/* Apple/iOS			eabe */
/* FB					e499 */
/* IG					ea92 */
/* TikTok				e902 */
/* Youtube				e60g */
/* Envelope/email		1f582 */
	
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	box-sizing: inherit;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

html, body {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	margin: 0;
	outline: 0;
	border: 0;
	padding: 0;
	top: 0;
	left: 0;
	width: 100%;
	font-size: 18px;		/* set rem size */
	font-family: ProbaPro, sans-serif;
	}



body {
	background-color: rgba(239,239,239,1);
	max-height: 10000px;
}


	#wrapper {
		width: 95%;
		/*min-width: 1024px;*/
		max-width: 1600px;
		border: 0;
		z-index: 0;
	}

/* BLUE ---------- blue test ----------- BLUE */
#wrapper.blue {
    box-sizing: border-box;
	position: relative;
	top: 0;
	margin: 0 auto; /* center horiz */
	padding: 0;
	display: flex;
	flex-direction: column;
    background:#f1f1f1;
	box-shadow: 0px 5px 20px -2px #dcdcdc;
}
	/*---- desktop ----*/	
	@media screen and (min-width: 1025px) {
		#wrapper.blue {
			min-width:1024px;
			max-width:100%;
		}
	}
	
	/*---- desktop narrow ----*/
	@media screen and (max-width: 1250px) {
		#wrapper.blue {
			width:100%
		}
	}
	
	/*---- mobile ----*/	
	@media screen and (max-width: 1024px) {
		#wrapper.blue {
			width:100%;
		}
	}







/*-------- 8-26-25 consolidate anchor styling ---------*/
/*------- 8-27-25 remove unnecessary #wrapper ---------*/

a:focus-visible {
	outline:2px solid #38414caa;
}

/* these are areas w dark bkgs */
.wp-block-cover a:focus-visible,
.special-menu-container a:focus-visible {
	outline:2px solid #ffffffaa;
}

/*--- top banner ---*/

	#topbanner a {
		color:#0073bb;
		text-decoration:underline solid #1f9ae5aa 2px;
		text-underline-offset:2px;
		
		display: inline-block;
		padding: 0.5rem;
		font-weight: bold;
		overflow-wrap: break-word;
		transition: background 0.2s;
	}
	
	#topbanner a:hover,
	#topbanner a:focus-visible {
		color:#c93818;
		text-decoration:underline solid #c93818aa 2px;
		background:#ffffff;
	}

/*--- main nav ---*/

	nav#nav-id .sub-menu li a:hover,
	nav#nav-id .sub-menu li a:focus-visible {
		color:#c93818;
		text-decoration:underline solid #c93818aa 2px;
	}

/*--- main content ---*/

	#main-container :focus-visible {
		outline-offset:2px;
	}

	#main-container p a,
	#main-container li a,
	#main-container table a {
		color:#0f5078;
		text-decoration:underline solid #1f9ae5aa 2px;
		text-underline-offset:2px;
	}
		/* sidebar-right: no underline on links before hover */
		#main-container .sidebar-right li a {
			text-decoration:none;
		}

	#main-container p a:hover,
	#main-container p a:focus-visible,
	#main-container li a:hover,
	#main-container li a:focus-visible,
	#main-container table a:hover,
	#main-container table a:focus-visible {
		color:#c93818;
		text-decoration:underline solid #c93818aa 2px;
	}

	/* button-style links */
		#main-container p.link a,
		#main-container .wp-block-cover ul.subnav li a {
			padding:0.35rem 0.5rem;
			text-decoration:none;
			font-weight:bold;
			font-size:1.111rem;
		}
	
		#main-container p.link a {
			color:#0073bb;
			background:none;
			border:2px solid #0073bb;
		}
		
		/* subnav for youth etc - larger button-style/box-style */
		#main-container #menu-container li a {
			display:flex;
			flex-direction:column;
			justify-content:center;
			height:100%;
			padding:0 0.25rem;
			
			background:none;
			color:#0073bb;
			text-align:center;
			border:2px solid #0073bb;
			
			text-decoration:none;
			font-weight:bold;
			font-size:1.222rem;
			box-shadow:3px 3px 0 0 #0073bb;
		}
		
		/* subnav in cover (light button-style) */
		#main-container .wp-block-cover ul.subnav li a {
			color:#ffffff;
			background:#00000088;
			border:2px solid #1f9ae5;
		}
		
		/* consider changing the subnav links to .link */
		#main-container p.link a:hover,
		#main-container p.link a:focus-visible,
		#main-container #menu-container li a:hover,
		#main-container #menu-container li a:focus-visible,
		#main-container .wp-block-cover ul.subnav li a:hover,
		#main-container .wp-block-cover ul.subnav li a:focus-visible {
			text-decoration:none;
			color:#ffffff;
			background:#0073bb;
		}
		
		#main-container #menu-container li a:hover,
		#main-container #menu-container li a:focus-visible {
			box-shadow:none;
		}
		
		/* homepage-container: solid button-style link */
		#main-container .homepage-right-container p.link a {
			color:#ffffff;
			background:#0073bb;
			border:2px solid #0073bb;
		}
		
		#main-container .homepage-right-container p.link a:hover,
		#main-container .homepage-right-container p.link a:focus-visible {
			color:#ffffff;
			background:#c93818;
			border:2px solid #c93818;
		}
		
		
	/* text links in cover blocks */
		#main-container .wp-block-cover p a {
			color:#ffffff;
			text-decoration:underline solid #1f9ae5 2px;
		}
		
		#main-container .wp-block-cover p a:hover,
		#main-container .wp-block-cover p a:focus-visible {
			color:#ffffff;
			background:#0073bbaa;
		}
		
	/* special DB or Makery nav */
		#main-container .special-menu-container a {
			font-size:1.111rem;
			font-weight:bold;
			color:#ffffff;
			text-decoration:underline solid #1f9ae5 2px; /* prevent underline flicker */
		}
		
		#main-container .special-menu-container a:hover,
		#main-container .special-menu-container a:focus-visible {
			color:#ffffff;
			text-decoration:underline solid #1f9ae5 2px;
		}


/*--- footer ---*/

	#footer-container a:not(.socialmedia) {
		color:#f1f1f1;
		text-decoration:underline solid #1f9ae5 2px;
		text-underline-offset:2px;
	}

	#footer-container a:not(.socialmedia):hover,
	#footer-container a:not(.socialmedia):focus-visible {
		background:#0073bbaa;
	}

	#footer-container a:not(.socialmedia):focus-visible,
	#footer-container a.socialmedia:focus-visible::before {
		outline:2px solid #ffffffaa;
		outline-offset:2px;
	}
	
/*-------- 8-25-25 end consolidate anchor styling ---------*/







/* BLUE ------------ TOP BANNER --------- BLUE */
#wrapper.blue #topbanner.blue {
	position:relative;
	width:100%;
	background:#f8f8f8;
	color: #38414c;
	text-align: center;
	display:flex;
	flex-direction:row;
	justify-content:flex-end;
	align-items:center;
	border-bottom:2px solid #1f9ae5;
	z-index:3;
}

#wrapper.blue #topbanner.blue p {
	color:#38414c;
	padding:0;
	border-left:1px solid #dcdcdc;
	font-size:1rem;
	font-weight:bold;
	margin:0;
}

#wrapper.blue #topbanner.blue p.todays-hours {
	padding:0.5rem;
	border-left:0;
}

#wrapper.blue #topbanner.blue.irregular p.todays-hours {
	color:#c93818;
}

#wrapper.blue #topbanner.blue p a {
	display:inline-block;
	padding:0.5rem;
	border:0;
	
    /*8-26-25*//*color:#0073bb;*/
    /*8-25-25*//*text-decoration:underline;*/
    font-weight:bold;
    overflow-wrap:break-word;
    transition:background 0.2s;
}

#wrapper.blue #topbanner.blue p a:hover,
#wrapper.blue #topbanner.blue p a:focus,
#wrapper.blue #topbanner.blue p a:focus-visible {
	/*8-25-25*/
	/*background:#ffffff;
	border:0;
	color:#c93818;*/
}
/* BLUE ------------ TOP BANNER --------- BLUE */












/* SITE HEADER */
header {
	margin: 0;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;	
	overflow: visible;	
}

	/*---- mobile ----*/	
	@media screen and (max-device-width: 640px) {
		header {
			
		}
		
	}
	





/* BLUE -------------- header ---------------  BLUE*/

#wrapper.blue header,
#wrapper.blue header nav,
#wrapper.blue #search-container {
	position:relative; /* needed for ombre, as default is static */

	display:flex;
    width: 100%;
	padding:0;
	font-size:20px;
}


#wrapper.blue header p,
#wrapper.blue #header p,
#wrapper.blue header li,
#wrapper.blue #header li {
	font-size:20px;
}

#wrapper.blue header h3,
#wrapper.blue #header span {
	font-size:25px;
}

#wrapper.blue #header {
	display:flex;
	flex-direction:column;
    background:#ffffff;
	/*box-shadow:0 0.25rem 0.25rem -0.35rem #00000040;*/
	box-shadow:0 5px 5px -7px #00000040; /* for ombre */
	z-index:3;
}

#wrapper.blue #header #header-container {
	display:flex;
	flex-direction:row;
	z-index:3;
	padding:2rem 2rem 0 2rem;
	padding:40px 40px 0 40px; /* for ombre */
	margin:0 auto;
	width:100%;
	max-width:80rem;
	max-width:1600px; /* for ombre */
}
	
	/* ---- narrow ---- */
	@media screen and (max-width: 1366px) {
		#wrapper.blue #header #header-container {
			padding:2rem 1rem 0 1rem;
			padding:40px 20px 0 20px; /* for ombre */
		}
	}
	
	/* ---- narrower ---- */
	@media screen and (max-width: 1200px) {
		#wrapper.blue #header #header-container {
			padding:1rem 0.5rem 0 0.5rem;
			padding:40px 10px 0 10px; /* for ombre */
		}
	}

	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue #header #header-container {
			flex-direction:column;
			margin:0;
			padding:0;
		}
	}

#wrapper.blue header #header-content {
	display:flex;	
	flex-direction:row;
	padding:0;
    align-items:flex-end;	
	vertical-align:bottom;
}
	
	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue header #header-content {
			height:auto;
			padding:0;
			justify-content:space-between;
			align-items:center;
		}
	}
/* BLUE -------------- header ---------------  BLUE*/








p, ul, li, td, th, tr, select {
	padding: 0;
	margin: 0;
	text-decoration: none;
	line-height: 140%;
	font-family: ProbaPro, sans-serif;
	font-weight: normal;
	font-style: normal;
}

/* fix uneven line heights due to superscript and subscript */
sup,
sub {
	line-height:0;
}

/* more superscript down */
sup {
	vertical-align:0.33em;
}

h1, h2, h3, h4, h5, h6,
ul.menu > li > a,
label,
input[type="text"],
textarea,
button, /* 1/5/26 */
input[type="button"],
input[type="reset"],
input[type="submit"],
button[type="submit"],
input[type="email"],
input[type="date"],
select {
	padding: 0;
	margin: 0;
	font-family: ProbaPro, sans-serif;
	font-style: normal;
	font-weight: bold;
}

h1 {
	font-size: 1.888rem;
	line-height:normal;
}

@media screen and (max-width: 1024px) {
	h1 {
		font-size: 1.6rem;
	}
}

/* for homepage heading h/t https://www.tpgi.com/the-anatomy-of-visually-hidden/ */
h1.visually-hidden2:not(:focus):not(:active) {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

h2 {
	font-size: 1.666rem;
	color:#38414c;
	line-height:normal;
}

h3 {
	font-size: 1.222rem;
	line-height:normal;
}

h4 {
	font-size:1.111rem;
}

p, li {
	font-size: 1rem;
}

a {
	text-decoration: none;
	transition: 50ms;
}

#wrapper.blue .menu-header a:hover,
#wrapper.blue .menu-header a:focus,
#wrapper.blue .menu-header a:focus-visible,
#wrapper.blue .menu-header button:hover,
#wrapper.blue .menu-header button:focus-visible {
	color:#c93818;
}

ul > li {
	list-style: none;
}

ul.two-column-list {
	-moz-column-count: 2;
	-moz-column-gap: 1rem;
	-webkit-column-count: 2;
	-webkit-column-gap: 1rem;
	column-count: 2;
	column-gap: 1rem;
}

/* italic text */
em {
	padding: 0;
	margin: 0;
	font-family: ProbaPro;
	font-style: italic;
}

strong {
	font-family: ProbaPro, Calibri, sans-serif;
	font-weight: bold;
}

.normal-weight {
	font-weight:normal;
}

select {
	font-size: 0.888rem;
}

.wplicons {
	font-family: "wplicons";
	font-weight: normal;
}

/* lighter (logo grey) text */
.light-text {
	color: #535a65;
}

/* for text that should be screenreader accessible but not visually displayed */
.visually-hidden,
h1.visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.inline {
	display: inline !important;
}

.inline-block {
	display: inline-block;
}

.block {
	display: block;
}




/*keep*/
.flexrow,
.flex-row,
.flex-row-75,
.flex-row-50,
.flex-row-30,
.flex-row-25 {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}

/* gutenberg */
/* keep */
.wp-block-columns {
	margin: 0;
	gap:0!important;
	width:100%;
}


/* not sure about this...
trying to fix a gutenberg thing */
.wp-block-columns:not(.is-not-stacked-on-mobile) {
}


/* gutenberg */
/* keep */
.wp-block-column {
	margin:0!important;
	flex-basis:auto;
	gap:0!important;
}

/* undo gutenberg default styles */
@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-column:not(:only-child) {
		/* flex-basis: calc(50% - 1em)!important; */
		flex-basis:auto;
		/* flex-grow: 0; */
		flex-grow:1;
	}
}

/* gutenberg */
/* keep */
.wp-block-column.feat-img {
	flex-grow:0!important;
	flex-basis:auto!important;
	padding: 0 0 1rem 0;
}

	/*@media screen and (min-device-width: 768px)*/
	@media screen and (min-width: 768px) {
		.wp-block-column.feat-img {
			padding: 0 1.5rem 0 0;
		}
	}

/* gutenberg */
/* keep */
	/*@media screen and (min-device-width: 768px)*/
	@media screen and (min-width: 768px) {
		.flex-row-75 > .wp-block-column:not(.feat-img) {
			flex-basis: 75%!important;
		}		
		
		.flex-row-50 > .wp-block-column:not(.feat-img) {
			flex-basis: 50%!important;
		}
	}


/* gutenberg */
/* keep */
.flex-row-30 > .wp-block-column {
	flex-basis: 30%!important;
}

/* gutenberg */
/* keep */
.flex-row-25 > .wp-block-column {
	flex-basis: 25%!important;
}

/* gutenberg */
/* keep */
.wp-block-group {
	gap:0!important;
}

/* gutenberg */
/* keep */
.wp-block-group.flex-row > .wp-block-group__inner-container {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
}

/* --------------- FORM CONTROLS --------------- */

/* all */
input {
	border-radius: 0;
	-webkit-appearance: none;	/* reset appearance */
  	-moz-appearance: none;
  	appearance: none;
}

/* text and select */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
textarea,
select {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 0.333rem;
	border:2px solid #a2a6ab;
	/*box-shadow: 0 0.333rem 1rem -0.111rem rgba(0,0,0,0.05);*/
	outline: 0;
	vertical-align: top;

	background-color:#ffffffdd;
	font-size:1rem;
	color:#38414c;
}

input[type="checkbox"],
input[type="radio"] {
	height:1rem;
	width:1rem;
	border:2px solid #a2a6ab;
	margin:0.25rem 0 0 0;
	vertical-align:sub;
}

input[type="radio"] {
	border-radius: 50%;
}

/* buttons */
input[type="submit"],
button[type="submit"],
input[type="reset"],
input[type="button"] {
	-webkit-appearance: none;	/* reset appearance */
  	-moz-appearance: none;
  	appearance: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	position: relative;
	
	/*height: 2rem;*/ /* remove for scaling text but not zoom */
	border:2px solid #a2a6ab;

	outline: 0;
	padding: 0.25rem;
	cursor: pointer;
	text-align: center;
	
	transition: 50ms linear;
	font-size: 1.111rem;
	
	color:#0073bb;
	border:2px solid #0073bb;
	background:transparent;
	
	display:flex;
	justify-content:center;
	align-items:center;
}

.footer-column input[type="submit"] {
	color:#ffffff;
	border:2px solid #1f9ae5;
}

/* buttons for enews, card signup, and nonres calc */
/* form:not(#searchform) input[type="submit"],
form:not(#searchform) button[type="submit"],
form:not(#searchform) input[type="reset"],
form:not(#searchform) input[type="button"]*/
form#mc-embedded-subscribe-form input[type="submit"],
form#mauticform_verifyregister button[type="submit"],
form#mauticform_verifyregisterminor button[type="submit"],
form#nonresidentcalculatorhome input[type="button"],
form#nonresidentcalculatorhome input[type="reset"],
form#nonresidentcalculatorrent input[type="button"],
form#nonresidentcalculatorrent input[type="reset"] {
	min-width:8rem;
}

button,
button > * {
	cursor:pointer;
}

/* icon used for button, accompanied by .visually-hidden text span */
button.icon-button span {
    font-family:"wplicons";
	font-size:1.25rem;
	font-size:25px; /* for ombre */
	padding:0;
	height:unset; /* previously set by ombre */
    color:#ffffff;
	font-weight:normal;
	line-height:1;
}


/* input - hover and focus-visible */
/* text */
input[type="text"]:hover,
input[type="text"]:focus-visible,
input[type="tel"]:hover,
input[type="tel"]:focus-visible,
input[type="email"]:hover,
input[type="email"]:focus-visible,
input[type="date"]:hover,
input[type="date"]:focus-visible,
input[type="number"]:hover,
input[type="number"]:focus-visible,
input[type="password"]:hover,
input[type="password"]:focus-visible,
textarea:hover,
textarea:focus-visible,
/* select */
select:hover,
select:focus-visible,
/* check/radiobox */
input[type="checkbox"]:hover,
input[type="checkbox"]:focus-visible,
input[type="radio"]:hover,
input[type="radio"]:focus-visible,
/* buttons */
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible,
input[type="button"]:hover,
input[type="button"]:focus-visible,
input[type="reset"]:hover,
input[type="reset"]:focus-visible {
	box-shadow: 0 0.25rem 0.5rem -0.111rem rgba(0,0,0,0.15); /* hshadow vshadow blur distance color */
}

/* buttons - hover/focus-visible: color */
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible,
input[type="button"]:hover,
input[type="button"]:focus-visible,
input[type="reset"]:hover,
input[type="reset"]:focus-visible {
	transition: 50ms linear;
	
	background:#0073bb;
	color:white;
	border-color:#0073bb;
}

/* input - focus-visible: background and border color */
/* text and select */
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="email"]:focus-visible,
input[type="date"]:focus-visible,
input[type="password"]:focus-visible,
textarea:focus-visible,
/* select */
select:focus-visible {
	background:#ffffff;
	border-color:#1f9ae5;
}

/* check/radiobox */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	border-color:#1f9ae5;
}

#footer-container input[type="checkbox"]:focus-visible,
#footer-container input[type="radio"]:focus-visible {
	outline:2px solid #1f9ae5;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	border:2px solid white;
	background:#38414c;
	box-shadow: 0 0 0.25rem 0rem rgba(0,0,0,0.5);
}

#footer-container input[type="checkbox"]:checked,
#footer-container input[type="radio"]:checked {
	border:2px solid #a2a6ab;
	background:#ffffff;
	box-shadow: 0 0 0.25rem 0rem rgba(0,0,0,0.5);
}

input[type="checkbox"]:checked:focus-visible,
input[type="radio"]:checked:focus-visible {
	background:#1f9ae5;
}

label.hidden-label {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}




/* BLUE ------------------ search bar inputs ---------------- BLUE */

#wrapper.blue #search-bar input[type="submit"],
#wrapper.blue .searchbar button[type="submit"] {
	border:2px solid #38414c;
	background:#38414c;
	font-weight:normal;
}

#wrapper.blue #search-bar input[type="submit"]:hover,
#wrapper.blue #search-bar input[type="submit"]:focus,
#wrapper.blue #search-bar input[type="submit"]:focus-visible,
#wrapper.blue .searchbar button[type="submit"]:hover,
#wrapper.blue .searchbar button[type="submit"]:focus-visible {
	background:#c93f1f;
	border:2px solid #c93f1f;
	/*outline:none;*/
}

#wrapper.blue #search-bar input[type="text"],
#wrapper.blue .searchbar input[type="text"] {
	background:#ffffffdd;
	border:2px solid #38414c;
}

#wrapper.blue #search-bar input[type="text"]:hover,
#wrapper.blue #search-bar input[type="text"]:focus,
#wrapper.blue #search-bar input[type="text"]:focus-visible,
#wrapper.blue .searchbar input[type="text"]:hover,
#wrapper.blue .searchbar input[type="text"]:focus-visible {
	background:#f8f8f8;
	border:2px solid #1f9ae5;
}

#wrapper.blue #search-bar input[type="text"]:focus,
#wrapper.blue #search-bar input[type="text"]:focus-visible,
#wrapper.blue .searchbar input[type="text"]:focus-visible {
	background:#ffffff;
}
/* BLUE ------------------ inputs ---------------- BLUE */





/* prevent wrapping on certain Android browsers */
@media screen and (max-device-width: 800px) {
	p, a, li, h1, h2, h3 {
		background-image: url(' ');
	}
}






	
	











/* BLUE -------------------- Nav ----------------- BLUE */

#wrapper.blue #logo-container { 
    /*flex-basis:11rem;*/
	flex-basis:220px; /* for ombre */
    /*min-width:10rem;*/
	min-width:200px; /* for ombre */
    flex-grow:0;
    flex-shrink:1;	
}

	/* ---- tablet ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue #logo-container {
			display:block;
			flex-basis:auto;
			min-width:unset;
		}
	}

#wrapper.blue #logo-container a {
	display:block;
}

#wrapper.blue #logo-container a:focus-visible {
	outline:3px solid #0f5078;
}
	
#wrapper.blue #logo-container img {
    width:100%;
    height:auto;
    vertical-align:bottom;
}

#wrapper.blue #button-container {
	display:flex;
	flex-direction:row;
	padding:0 10px 0 0;
}

	/* ---- desktop/wide device ---- */
	@media screen and (min-width: 1025px) {
		#wrapper.blue #button-container {
			display:none;
		}
	}

#wrapper.blue nav.nav-header {
    flex-grow:1;
    flex-shrink:1;
	display:flex;
    flex-direction:row;
    justify-content:flex-end;
	align-items:flex-end;
	/*padding:1.25rem 0;*/
	padding:25px 0; /* for ombre */
}
	
	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue nav.nav-header {
			padding:0;
			background:#fafafa;
		}
	}

/* contains both the nav menu and the .account-container (my account link) */
#wrapper.blue .nav-container {
	display:flex;
	flex-direction:row;
	flex-grow:1;
	justify-content:flex-end;
}

	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue .nav-container {
			display:none;
			flex-direction:column;
			/*padding:0.5rem 0;*/
			padding:10px 0; /* for ombre */
			border-top:1px solid #dcdcdc;
		}
	}


/* hide hamburger */
#wrapper.blue #expand-nav {
    display: none;
}

	/* ---- mobile ---- */
	/* show hamburger */
	@media screen and (max-width: 1024px) {
		#wrapper.blue #expand-nav {
			display:block;
			margin: 0;
			/*padding:1.5rem 0.75rem 1.25rem 0;*/
			padding:30px 15px 25px 0; /* for ombre */
			background:#ffffff;
			text-align:center;
			
			padding:10px;
			font-family:"wplicons";
		}
		
		#wrapper.blue #expand-nav span {
			font-size:1.5rem;
			font-size:30px;
			font-weight:normal;
			color:#38414c;
		}
	}
	
	#wrapper.blue #expand-nav:focus,
	#wrapper.blue #expand-nav:focus-visible,
	#wrapper.blue #expand-search:focus,
	#wrapper.blue #expand-search:focus-visible	{
		outline:2px solid #1f9ae5;
	}

#wrapper.blue .menu-header {
	position:relative;
	display:flex;	
    flex-direction:row;  
	justify-content:flex-end;
    align-items:flex-end;
    align-content:flex-end;
	flex-wrap:wrap; /* for scaling text but not zoom */
}


	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue .menu-header {
			flex-direction:column;
			align-items:flex-start;
		}
	}

/* all nav items */
#wrapper.blue .menu-header li,
#wrapper.blue .menu-header button {
    list-style:none;
}

/* all nav items */
#wrapper.blue .menu-header a,
#wrapper.blue .menu-header button {
    text-decoration:none;
    color:#38414c;
    /*font-size:1rem;*/
	font-size:20px; /* for ombre */
    font-weight:normal;
	font-family: ProbaPro;
}

/* top level */
#wrapper.blue .menu-header > li {
	position:unset;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	/*max-width:10rem;*/ /* remove for scaling font but not zoom */
	/*max-width:200px;*/ /* for ombre */ /* remove for scaling font but not zoom */
	margin:0 0.5rem;
	margin:0 10px; /* for ombre */
	padding:0;
	font-size:1rem;
	font-size:20px; /* for ombre */
	text-align:center;
}
	
	/* ---- narrow ---- */
	@media screen and (max-width: 1366px)  {
		#wrapper.blue .menu-header > li {
			margin:0 0.25rem;
			margin: 0 5px; /* for ombre */
		}
	}

	/* ---- narrower ---- */
	@media screen and (max-width: 1100px) {
		#wrapper.blue .menu-header > li {
			margin:0 3px;
		}
	}

	/* first top level item only */
	#wrapper.blue .menu-header > li:first-of-type {
		margin-left:0;
	}

	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue .menu-header > li {
			flex-grow:1;
			width:100%;
			max-width:unset;
			margin:0;
			padding:0;
			align-items:flex-start;
			border-bottom:1px solid #dcdcdc;
		}
	}
	
	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue .menu-header > li:last-of-type {
			border-bottom:0;
		}
	}

/* first level link */
#wrapper.blue .menu-header > li > a,
#wrapper.blue .menu-header > li > button {
    white-space:nowrap;
	padding:0 2rem 0 1rem;
	padding:0 40px 0 20px; /* for ombre */
	line-height:1;
	text-align:left;
	
	padding:10px 40px 10px 20px; /*test*/
	background:transparent;
	transition: background 0.1s;
}

	/* first level link */
	/* ---- desktop (narrower) ---- */
	@media screen and (max-width: 1200px) {
		#wrapper.blue .menu-header > li > a,
		#wrapper.blue .menu-header > li > button {
			padding:10px 30px 10px 10px;
		}
	}
	
	/* first level link */
	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue .menu-header > li > a,
		#wrapper.blue .menu-header > li > button {
			padding:1rem;
			padding:20px; /* for ombre */
			width:100%;
		}
	}

/* ---- desktop only ---- */
	/*@media screen and (min-device-width: 1025px)*/
	@media screen and (min-width: 1025px) {
		#wrapper.blue .menu-header > li > a:hover,
		#wrapper.blue .menu-header > li > a:focus,
		#wrapper.blue .menu-header > li > a:focus-visible,
		#wrapper.blue .menu-header > li > a.nav-active,
		#wrapper.blue .menu-header > li > button:hover,
		#wrapper.blue .menu-header > li > button:focus,
		#wrapper.blue .menu-header > li > button:focus-visible,
		#wrapper.blue .menu-header > li > button.nav-active	{
			background:#f1f1f1;
			border-radius:0.25rem;
			border-radius:5px; /* for ombre */
			outline:none;
		}
		
		#wrapper.blue .menu-header > li > a:focus-visible,
		#wrapper.blue .menu-header > li > button:focus-visible {
			outline:2px solid #38414cbb;
			outline-offset:0;
		}
		
		#wrapper.blue .menu-header > li > a.nav-active,
		#wrapper.blue .menu-header > li > button.nav-active {
			color:black;
		}
		#wrapper.blue .menu-header > li > a.nav-active:hover,
		#wrapper.blue .menu-header > li > a.nav-active:focus,
		#wrapper.blue .menu-header > li > a.nav-active:focus-visible,
		#wrapper.blue .menu-header > li > button.nav-active:hover,
		#wrapper.blue .menu-header > li > button.nav-active:focus,
		#wrapper.blue .menu-header > li > button.nav-active:focus-visible {
			color:#c93818;
		}
	}

/* down chevron on all menu items with sub-menus */
#wrapper.blue .menu-header > li.menu-item-has-children > a::after,
#wrapper.blue .menu-header > li.menu-item-has-children > button::after {
	display:inline-block; /* necessary for css transforms */
	font-family:"wplicons";
	content:"\25bc";
	position:absolute;
	margin-left:0.1rem;
	margin-left:2px; /* for ombre */
	vertical-align:bottom;
	pointer-events:none;
}
	
	/* ---- mobile ---- */
	/* ------ CHANGED MAX-WIDTH 1025 to 1024 --------- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue .menu-header > li.menu-item-has-children > a::after,
		#wrapper.blue .menu-header > li.menu-item-has-children > button::after {
			position:relative;
		}
	}

#wrapper.blue .menu-header > li > a.nav-active:after,
#wrapper.blue .menu-header > li > button.nav-active:after {
	transform:rotate(180deg);
}	
	

/* first sub-level - closed */
#wrapper.blue .menu-header > li > ul.sub-menu {
   display:none;
}

	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue .menu-header > li > ul.sub-menu {	
			position:relative;
			flex-direction:column;			
		}
	}

/* first sub-level - open */
#wrapper.blue .menu-header > li > ul.sub-menu.nav-shown {
	display:flex;		
	position:absolute;
	flex-direction:row;
	transform:translateY(3.6rem);
	top:0;
	left:0;
	padding:1.5rem 1rem 1rem 1rem;
	padding:30px 20px 20px 20px; /* for ombre */
	
	padding:20px; /*test*/
	
	min-width:100%;
	/*width:100%;*/
	background:#f8f8f8;
	
	background:#ffffff; /*test*/
	
	border-bottom:3px solid #1f9ae5;
	box-shadow:0 0.25rem 0.5rem -0.25rem #00000060;
	box-shadow:0 5px 5px -5px #00000060; /* for ombre */
	
	z-index:10;
}
	
	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue .menu-header > li > ul.sub-menu.nav-shown {	
			position:relative;
			flex-direction:column;	
			transform:none;
			padding:1rem 1rem 0 1rem;
			padding:20px 20px 0 20px; /* for ombre */
			width:100%;
			background:#f1f1f1;
			border:0;
			box-shadow:none;
		}
	}
	
	/* ---- mobile landscape ---- */
	@media screen and (max-width: 1024px) and (min-width:768px) {
		#wrapper.blue .menu-header > li > ul.sub-menu.nav-shown {
			flex-direction:row;
			padding:1rem 0;
			padding:20px 0; /* for ombre */
		}
	}


/* second level sections */
#wrapper.blue .menu-header > li > ul.sub-menu > li {
    flex-grow:1;
    padding:0 2rem;
	padding:0 40px; /* for ombre */
    text-align:left;
    border-right:1px solid #e0e0e0;
	
	flex-basis:33.33%;
	flex-grow:0;
	
	min-width:12rem;
}

	/* second level sections */
	/* ----- desktop only ----- */
	/*@media screen and (min-device-width:1025px)*/
	@media screen and (min-width:1025px) {
		#wrapper.blue .menu-header > li > ul.sub-menu > li {
			flex-grow:1;
			max-width:50%;
		}
	}

/* second level sections - first */
#wrapper.blue .menu-header > li > ul.sub-menu > li:first-of-type {
    padding:0 2rem 0 1rem;
	padding:0 40px 0 20px;
}

/* second level sections - last */
#wrapper.blue .menu-header > li > ul.sub-menu > li:last-of-type {
	padding:0 1rem 0 2rem;
	padding:0 20px 0 40px; /* for ombre */
    border-right:0;
}

/* second level sections - SINGLE */
#wrapper.blue .menu-header > li > ul.sub-menu > li:only-of-type {
	padding:0 2rem 0 1rem;
	padding:0 40px 0 20px;
	border-right:0;
}



	/* second level sections */
	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue .menu-header > li > ul.sub-menu > li,
		#wrapper.blue .menu-header > li > ul.sub-menu > li:first-of-type,
		#wrapper.blue .menu-header > li > ul.sub-menu > li:last-of-type {
			padding:1rem 0 0 0;
			padding:20px 0 0 0; /* for ombre */
			border-right:0;
			border-top:1px solid #dcdcdc;
			
			flex-grow:1;
		}
		
		#wrapper.blue .menu-header > li > ul.sub-menu > li:first-of-type {
			padding:0;
			border-top:0;
		}
	}
	
	/* second level sections */
	/* ---- mobile landscape ---- */
	/*@media screen and (max-device-width: 1024px) and (min-device-width:768px) and (orientation:landscape) {*/
	@media screen and (max-width: 1024px) and (min-width:768px) {
		#wrapper.blue .menu-header > li > ul.sub-menu > li,
		#wrapper.blue .menu-header > li > ul.sub-menu > li:first-of-type,
		#wrapper.blue .menu-header > li > ul.sub-menu > li:last-of-type {
			border-right:1px solid #dcdcdc;
			border-top:0;
			padding:0 1rem;
			padding:0 20px; /* for ombre */
			flex-basis:33.33%;
		}
		
		#wrapper.blue .menu-header > li > ul.sub-menu > li:last-of-type {
			border-right:0;
		}
	}

/* sub level contents - 2nd and subsequent levels */
#wrapper.blue .menu-header > li > ul.sub-menu a {
    font-size:0.9rem;
	font-size:18px; /* for ombre */
}

/* second level headings - don't allow clicks and override focus color */
#wrapper.blue .menu-header > li > ul.sub-menu > li > a {
	font-size:0.9rem;
	font-size:18px; /* for ombre */
    font-weight:bold;
	color:#38414c;
	pointer-events:none;
	text-transform: uppercase;
	color:#0073bb;
}

/* second level headings - ONLY allow clicks on li w/ class menu-img-container (contains image) */
#wrapper.blue .menu-header > li > ul.sub-menu > li.menu-img-container > a {
	pointer-events:auto;
	display:grid;
}

/* second level image */
#wrapper.blue .menu-header > li > ul.sub-menu > li > a img.menu-img {
	max-width:100%;
	justify-self:center;
	margin:0;
}

/* optional caption for a second level image */
/* use ~ instead of + b/c ewww can insert a noscript element when rewriting jpg/png to webp */
#wrapper.blue img.menu-img ~ .smaller {
    font-size:0.9rem !important;
	/*font-size:16px !important;*/
    display:block;
	color:#38414c;
	line-height:133%;
	font-weight:normal;
	background:#f8f8f8;
	padding:0.5rem;
	margin:0 0 20px 0;
	text-transform:none;
}


	/* second level image */
	/* ---- desktop ---- */
		@media screen and (min-width: 1025px) {
			#wrapper.blue img.menu-img ~ .smaller {
				margin:0;
				background:#f1f1f1;
			}
		}
		/* second level image */
		/* ---- mobile landscape ---- */
		@media screen and (max-width: 1024px) and (min-width:768px) and (orientation:landscape) {
			#wrapper.blue img.menu-img ~ .smaller {
				margin:0;
			}
		}


/* second level image (and optional desc text) when parent a is focused */
#wrapper.blue .menu-header > li > ul.sub-menu > li > a:focus-visible {
	outline:3px solid #0f5078;
}


/* second level contents (entire subcategory) */
#wrapper.blue .menu-header > li > ul.sub-menu > li > ul.sub-menu {
    margin:0.5rem 0;
	margin:10px 0; /* for ombre */
}

	/* second level contents (entire subcategory) */
	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue .menu-header > li > ul.sub-menu > li > ul.sub-menu {
			padding:0 0.5rem;
			padding:0 10px; /* for ombre */
		}
	}
	/* second level contents (entire subcategory) */
	/* ---- mobile landscape ---- */
	@media screen and (max-width: 1024px) and (min-width:768px) and (orientation:landscape) {
		#wrapper.blue .menu-header > li > ul.sub-menu > li > ul.sub-menu {
			margin:0.5rem 0 0 0;
			margin:10px 0 0 0; /* for ombre */
		}
	}

/* third level contents (actual items under subcategory) */
#wrapper.blue .menu-header > li > ul.sub-menu > li > ul.sub-menu > li {
    padding:0.3rem 0;
	padding:6px 0; /* for ombre */
}

/* third level content LINKS (actual items under subcategory) */
#wrapper.blue .menu-header > li > ul.sub-menu > li > ul.sub-menu > li a {
	/*8-25-25*/
	/*border-bottom:2px solid transparent;*/
}

#wrapper.blue .menu-header > li > ul.sub-menu > li > ul.sub-menu > li a:hover,
#wrapper.blue .menu-header > li > ul.sub-menu > li > ul.sub-menu > li a:focus,
#wrapper.blue .menu-header > li > ul.sub-menu > li > ul.sub-menu > li a:focus-visible {
	/*8-25-25*/
	/*border-bottom:2px solid;*/
	/*8-26-25*/
	/*text-decoration:underline;
	text-decoration-color:#c93818aa;
	text-decoration-thickness:2px;
	text-underline-offset:2px;
	outline:none;*/
}

#wrapper.blue .menu-header > li > ul.sub-menu > li > ul.sub-menu > li a:focus-visible {
	/*8-25-25*/
	/*border-bottom:2px solid transparent;*/
	outline-offset:3px;
	outline:2px solid #38414cbb;
}


/* optional smaller description text for menu items */
#wrapper.blue .menu-header .smaller {
	font-size:0.9rem !important;
    display:block;
	color:#38414cbb;
	line-height:120%;
}

#wrapper.blue .menu-header > li > ul.sub-menu > li > ul.sub-menu > li a:hover .smaller,
#wrapper.blue .menu-header > li > ul.sub-menu > li > ul.sub-menu > li a:focus-visible .smaller {
	/*8-25-25*/
	/*border-bottom:0;*/
	text-decoration:underline solid #a2a6ab 2px;
}


/* Contains My Account and search-expand-desktop */
#wrapper.blue .account-container {
	display:flex;
	padding:1rem 1rem 0.75rem 1rem;
	padding:20px 20px 15px 20px; /* for ombre */
	margin:0;
}

	/* ---- desktop/wider ---- */
	@media screen and (min-width: 1025px) {
		#wrapper.blue .account-container {
			justify-content:flex-end;
			padding:0;
			margin:0 0 0 0.25rem;
			margin:0 0 0 5px; /* for ombre */
		}
	}
	
	/* ---- desktop/wider ---- */
	@media screen and (min-width: 1101px) {
		#wrapper.blue .account-container {
			margin:0 0 0 0.5rem;
			margin:0 0 0 10px; /* for ombre */
		}
	}
	
	/* ---- desktop/wider ---- */
	@media screen and (min-width: 1367px) {
		#wrapper.blue .account-container {
			margin:0 0 0 1rem;
			margin:0 0 0 20px; /* for ombre */
		}
	}
	
/* ---- No desktop ---- */
@media screen and (min-width: 1025px) {
	#wrapper.blue .account-container.no-desktop {
		display:none !important;
	}
}

/* ---- No mobile ---- */
@media screen and (max-width: 1024px) {
	#wrapper.blue .account-container.no-mobile {
		display:none !important;
	}
}

/* My Account */
#wrapper.blue a#my-account {
    padding:0.45rem 0.75rem 0.3rem 0.75rem;
	padding:9px 15px 6px 15px; /* for ombre */
	padding:6px 12px;/*update*/
	background:white;
	color:#0073bb;
	border:2px solid;
	font-weight:bold;
}

/* comes after My Account on desktop or larger devices */
#wrapper.blue #expand-search-desktop {
	font-family: "wplicons" !important;
    box-sizing:content-box;
    flex-grow:0;
    flex-shrink:0;
	margin:0;
	padding:0.4rem 0.35rem 0.35rem 0.35rem;
	padding:8px 7px 7px 7px; /* for ombre */
	padding:8px 9px; /* update */
	border-left:1px solid #ffffff;
	border:0; /*update*/
	margin:0 0 0 3px; /*update*/
	background:#0073bb;
    text-align:center;
	cursor: pointer;
}

	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue #expand-search-desktop {
			display:none;
		}
	}

#wrapper.blue #expand-search-desktop > h3,
#wrapper.blue #expand-search-desktop > span {
	color:#ffffff;
	font-family:wplicons;
}

#wrapper.blue a#my-account:hover {
	color:#c93818;
}

#wrapper.blue a#my-account:focus,
#wrapper.blue a#my-account:focus-visible {
	background:#c93818;
    color:#ffffff;
	border:2px solid #c93818;
	outline:none;
}

#wrapper.blue #expand-search-desktop:hover,
#wrapper.blue #expand-search-desktop:focus,
#wrapper.blue #expand-search-desktop:focus-visible {
	background:#c93818;
    color:#ffffff;
	outline:none;
}



/* BLUE -------------------- Nav ----------------- BLUE */








/* everything but nav */
	/*---- desktop / tablet ----*/
	#main-container {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		position: relative;
		margin: 0;
		padding: 0 3rem;
		width: 100%;
		height: 100%;

		opacity: 1;
		z-index: -1;
		
		/*display:flex;
		flex-direction:row;*/
	}
	/*---- desktop narrow ----*/
	@media all and (max-width: 1366px) {
		#main-container {
			padding: 0 2rem;
		}
	}
	/*---- desktop narrowest ----*/
	@media all and (max-width: 1200px) {
		#main-container {
			padding: 0 1.5rem;
		}
	}
	/*---- mobile ----*/
	@media screen and (max-width: 1024px) {
		#main-container {
			overflow-x: hidden;
			position: relative;
			left: 0;
			top: 0;
			margin: 0;
			padding: 0 1rem;
			width: 100%;
			height: 100%;
			/*flex-direction:column;*/
		}
	}
	
	#main-container.no-padding {
		padding: 0;
	}
	
	#main-container.full-width {
		background:white;
	}


/* HEADER TEST */
/* anchor containing wpllogoblock */
#wpllogoblock-container {
	align-self:flex-start;
}


/* WPL LOGO */
/*---- desktop / tablet ----*/
	#wpllogoblock {
		float: left;
		margin:0 0 1rem 0;
		width: 15rem; /* 19w : 10h */
		height: 8rem; /* close enough */
		background-image: url("/wp-content/uploads/wpllogo_color_slant_opt-1.svg");
		background-size: contain;
		background-repeat: no-repeat;
	}
	/*---- mobile ----*/
	@media screen and (max-device-width: 767px), (min-device-width: 769px) and (max-device-width: 800px) {
		#wpllogoblock {
			position: relative;
			display: inline-block;
			padding: 0;
			height: 6rem;
			margin: 0 0 1rem 0;
		}
	}
	/* HEADER TEST */
	/*---- mobile ----*/
	@media screen and (max-device-width: 767px) {
		#wpllogoblock {
			margin:0 0 1rem 1rem;
		}
	}







/* HEADER TEST */
.header-nav {
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	align-items:flex-end;
	height:100%;
	flex-basis:50%;
	flex-grow:1;
	flex-shrink:1;
}

	/* HEADER TEST */
	/*---- mobile ----*/
	@media screen and (max-device-width: 767px) {
		.header-nav {
			/*flex-grow:1;*/
		}
	}






/* HEADER TEST */
#search-container-container {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap-reverse;
	width:100%;
	justify-content:flex-end;
	align-items:center;
}
	/* HEADER TEST */
	/*---- mobile ----*/
	@media screen and (max-device-width: 640px) {
		#search-container-container {
			flex-direction:column-reverse;
		}
	}










/* BLUE --------------- SEARCH ------------------- BLUE */
/*---------------------------------------- search --------------------------------------------- */
#wrapper.blue #search-container {
    /*height:9rem;
	height:180px;*/ /* for ombre */
	background-color:#0073bb;
    background-image:url('//westmontlibrary.org/wp-content/uploads/bookshelf_header_2.webp');
	background-size:cover;
	background-position:center center;
    font-size:1rem;
	font-size:20px; /* for ombre */
	z-index:2;
	
	display:flex;
	flex-direction:row;
	justify-content:center;
	
	padding:3.5rem 0;
}

#wrapper.blue header #search-container {
    margin:0;
}

/* ---- mobile ---- */
@media screen and (max-width: 1024px) {
	#wrapper.blue #search-container {
        padding:2.5rem 0;
	}
}

#wrapper.blue #search-content {
	height:100%;
	width:100%;
	max-width:1600px;
	margin:0 auto;
	display:flex;
	flex-direction:row;
	justify-content:center;
}

#wrapper.blue #search-container p,
#wrapper.blue #search-container select {
    color:#ffffff;
    font-size:1rem;
	font-size:20px; /* for ombre */
}

#wrapper.blue nav #search-container p,
#wrapper.blue nav #search-container select {

}

#wrapper.blue #searchform {
	display:flex;	
    flex-direction:row;
    justify-content:center;
	align-items:center;	
    align-content:center;
    width:80%;
    margin:0 auto;
}

/* ---- mobile ---- */
@media screen and (max-width: 1024px) {
	#wrapper.blue #searchform {
        flex-wrap:wrap;
        width:90%;
	}
}

#wrapper.blue #search-choose {
	box-sizing:border-box;
	display:flex;
	flex-direction:row;
    flex-grow:0;
    flex-shrink:0;
	align-items:center;
    margin:0.25rem;
	margin:5px; /* for ombre */
	max-width:100%;
	flex-wrap:wrap; /* for scaling text but not zoom */
}

#wrapper.blue #search-choose select,
#wrapper.blue select#fakeEl {
    margin:0 0.25rem;
	margin:0 5px; /* for ombre */
    padding:0.25rem;
	padding:5px; /* for ombre */
    font-size:1rem;
	font-size:20px; /* for ombre */
    background:transparent;
	border:0;
    border-bottom:3px solid #ffffff;
    
    font-weight:bold;
	
	text-align:left;
	text-align-last: unset;
	padding:2px;
	margin:0 10px;
	
	/*appearance:auto !important;
	-moz-appearance: auto !important;
	-webkit-appearance: auto !important;*/
	
	border:2px solid white;
	padding:7px;
	
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	cursor:pointer;
	padding:7px 35px 7px 10px;
	background:transparent url("//westmontlibrary.org/wp-content/uploads/select-arrow-custom5.svg") center right no-repeat;
	background-size:44px;
}

#wrapper.blue select#fakeEl {
	position:absolute;
	top:0;
	left:-1000000px;
	visibility:hidden;
	width:150px;
}

#wrapper.blue #search-choose select:focus-visible {
	background-color:#1f9ae588;
	box-shadow:0 0 20px -5px #00000080;
}

#wrapper.blue #search-choose option { 
    background:#1F9AE5;
    font-size:0.9rem;
	font-size:18px; /* for ombre */
	
	background:#f8f8f8;
	color:#38414c;
}

#wrapper.blue #search-choose option:focus-visible {
	background:unset;
}

#wrapper.blue #search-bar {
	display:flex;
	flex-direction:row;
    flex-grow:1;
	align-items:stretch;
    /*box-sizing:content-box;*/
    margin:0.25rem;
	margin:5px; /* for ombre */
    box-shadow:0 0 1rem -0.25rem #00000080;
	box-shadow:0 0 20px -5px #00000080; /* for ombre */
}

/* search text */
#wrapper.blue #search-bar input[type="text"] {
    flex-grow:1;
    min-width:10rem;  
	min-width:200px; /* for ombre */
    padding:0.5rem;
	padding:10px; /* for ombre */
    font-size:0.9rem;
	font-size:18px; /* for ombre */
    /*box-sizing:content-box;*/
	height:unset; /* counter original ombre styling */
}


#wrapper.blue #search-bar input[type="text"]:focus,
#wrapper.blue #search-bar input[type="text"]:focus-visible {
    box-shadow:0 0 1rem -0.25rem #00000080;
	box-shadow:0 0 20px -5px #00000080; /* for ombre */
	border:1px solid #f9443a;
	border:2px solid #1f9ae5;
	/*outline:none;*/
}

/* search button */
#wrapper.blue #search-bar input[type="submit"] {
    /*box-sizing:content-box;*/
    flex-grow:0;
    flex-shrink:0;
    width:2.25rem;
	width:45px; /* for ombre */
	height:unset;
	margin:0;
    font-family:"wplicons";
    font-size:1.5rem;
	font-size:30px; /* for ombre */
    color:#ffffff;
}

#wrapper.blue #search-bar input[type="submit"]:hover,
#wrapper.blue #search-bar input[type="submit"]:focus {

}
	
/* on mobile */	
#wrapper.blue #expand-search {
	/*box-sizing:content-box;*/
	flex-grow:0;
	flex-shrink:0;
	background:none;
	margin:0;
	padding:1.5rem 0.7rem 1.25rem 0;
	padding:30px 14px 25px 0; /* for ombre */
	border:none;
	text-align:left;
	
	padding:10px;
}	
	
	/* ---- desktop/wider devices ---- */
	@media screen and (min-width: 1025px) {
		#wrapper.blue #expand-search {
			display:none;
		}
	}

#wrapper.blue #close-search {
	position:absolute;
	background:none;
	
	padding: 7px;
	top:14px;
	right:40px;
	border-radius:100%;
	
	display:flex;
	justify-content:flex;
	align-items:flex;
}

	/* ---- narrow ---- */
	@media screen and (max-width: 1366px) {
		#wrapper.blue #close-search {
			right:20px; /*to match location of expand-search-desktop */
		}
	}
	
	/* ---- narrow ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue #close-search {
			padding:10px;
			right:10px;
			top:5px;
		}
	}


#wrapper.blue #expand-search span,
#wrapper.blue #close-search span,
#wrapper.blue button.icon-button span {
    font-family:"wplicons";
	font-size:1.25rem;
	font-size:25px; /* for ombre */
	padding:0;
	height:unset; /* previously set by ombre */
    color:#ffffff;
	font-weight:normal;
	line-height:1;
}

	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {	
		#wrapper.blue #expand-search span {
			color:#38414c;
			font-size:1.5rem;
			font-size:30px; /* for ombre */
		}
	}

#wrapper.blue #expand-search:hover,
#wrapper.blue #expand-search:focus,
#wrapper.blue #expand-search:focus-visible,
#wrapper.blue #expand-search span:hover,
#wrapper.blue #expand-search span:focus,
#wrapper.blue #expand-search span:focus-visible {
	background:#c93818;
}

	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		#wrapper.blue #expand-search:hover,
		#wrapper.blue #expand-search:focus,
		#wrapper.blue #expand-search:focus-visible,
		#wrapper.blue #expand-search span:hover,
		#wrapper.blue #expand-search span:focus,
		#wrapper.blue #expand-search span:focus-visible {
			background:none;
		}
	}

#wrapper.blue #close-search:focus,
#wrapper.blue #close-search:focus-visible {
	background:#F9443A;
	background:#c93818;
}

#wrapper.blue #search-container.search-hidden {
	display:none;
}
/* BLUE -------------------- SEARCH ------------------- */



/*---- Overlay for Blue ----*/
div#overlay {
	background:#38414c55;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	pointer-events:none;
	opacity:0;
	transition:800ms;
	z-index:2;
}




/*--------HOMEPAGE - 2nd tier----------*/

#homepagegroup-container {
	position: relative;
	width: 100%;
	margin: 2rem 0;
	/*clear: both;*/
	height: 15rem;
	box-shadow: 0 0.333rem 1rem -0.111rem rgba(0,0,0,0.15);
}
	/*---- mobile ----*/
	/*@media screen and (max-width: 800px)*/
	@media screen and (max-width: 1024px) {
		#homepagegroup-container {
			margin: 0 0 1rem 0;
			height: 100%;
			box-shadow: none;
		}
	}

#homepagegroup-container-special,
.homepagegroup-container-special {
	position: relative;
	/*clear: both;*/
	display:flex;
	flex-direction:row-reverse;
	margin: 0rem -3rem;
	padding: 2rem;
	background:white;
	color:white;	
	gap:1rem;
}

	/*---- breakpoints match main-container ----*/
	@media all and (max-width: 1366px) {
		#homepagegroup-container-special,
		.homepagegroup-container-special {
			margin: 0rem -2rem;
		}
	}
	
	@media all and (max-width: 1200px) {
		#homepagegroup-container-special,
		.homepagegroup-container-special {
			margin: 0rem -1.5rem;
		}
	}
	
	@media screen and (max-width: 1024px) {
		#homepagegroup-container-special,
		.homepagegroup-container-special {
			flex-direction:column;
			flex-wrap:wrap;
			margin:0rem -1rem;
			padding:1.5rem 1.5rem 2rem 1.5rem;
			gap:2rem;
			}
	}

.homepagegroup-container-special.spotlight {
	justify-content:center;
	border-top: 2px solid #efefef;
	border-bottom: 2px solid #efefef;
	padding: 2rem;
	
	flex-direction:column;
	align-content:center;
}


@media screen and (min-width: 1025px) {
	.homepagegroup-container-special.spotlight {
		padding: 2rem 4rem;
	}
}


/* title of tabbed spotlight */
.homepagegroup-container-special.spotlight h2{
	font-size:1.9rem;
	color:#1f9ae5;
}

#homepagegroup-container-special .homepage-right-container,
.homepagegroup-container-special .homepage-right-container {
	display: flex;
	flex-direction: column;
	padding: 2rem;
	flex-basis:60%;
	flex-grow:1;
	margin:0;
	background-color:#38414c;
	background-size: cover;
	background-position: center;
	box-shadow: 0 0.333rem 1rem -0.111rem rgba(0,0,0,0.15);
	}

	/*---- mobile ----*/
	@media screen and (max-width: 1024px) {
		#homepagegroup-container-special .homepage-right-container,
		.homepagegroup-container-special .homepage-right-container {
			width: auto;
			margin: 0rem -1.5rem 0 -1.5rem;
		}
	}
	
.homepage-right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width:60%;
	height:100%;
}
	
	/*---- mobile ----*/
	@media screen and (max-width: 640px) {
		.homepage-right {
			width: 100%;
		}
	}
	
.homepage-right > div {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 20rem;

	justify-content: space-between;
	align-items: flex-start;
	text-align: left;
}

.homepage-right > div > div {
	margin: 1rem 0 2rem 0;
}

/* delete h1 */
#homepagegroup-container-special .homepage-right-container h1,
.homepagegroup-container-special .homepage-right-container h1,
#homepagegroup-container-special .homepage-right-container h2,
.homepagegroup-container-special .homepage-right-container h2 {
	padding: 0;
	color: #f1f1f1;
	font-size:1.333rem;
	font-weight:normal;
	}

	
.homepage-right-container .homepage-right p {
	max-width:40rem;
	color:white;
	line-height:normal;
	font-size:1.444rem;
}

.homepage-right-container .homepage-right p:not(.link):first-of-type {
	font-size:2rem;
	font-weight:bold;
	padding:1rem 0;
}

.homepage-left-container {
	display: flex;
	flex-direction: row;
	flex-wrap:wrap;
	flex-basis: 40%;
	justify-content:space-between;
	color:white;
	margin:0;
	padding:0;
	gap:1rem;
}

	@media screen and (max-width: 1024px) {
		.homepage-left-container {
			margin:0 0 1rem 0;
			flex-grow:1;
		}
	}
	
	@media screen and (max-width: 640px) {
		.homepage-left-container {
			flex-direction:column;
		}
	}
	
.homepage-left {
	background: darkgrey;
	flex-basis: 45%;
	flex-grow:1;
	flex-shrink: 1;
	
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding:2.5rem;
	margin:0;
	background-size:cover;
	color:white;
	text-align: center;
}

.homepage-left:nth-of-type(1) {
	background: linear-gradient(rgba(10,120,180,0.2),rgba(00,90,100,0.6)),url('//westmontlibrary.org/wp-content/uploads/digital-branch-banner-bkg.jpg');
	background-size:cover;
	background-position:center right;
	flex-basis:100%;
}

.homepage-left:nth-of-type(2) {
	background:linear-gradient(rgba(10,120,180,0.2),rgba(00,130,160,0.6)),url('//westmontlibrary.org/wp-content/uploads/computer-lab_sm_feat-nav5.jpg');
	background-size:cover;
}

.homepage-left:nth-of-type(3) {
	background: linear-gradient(rgba(30,10,80,0.2),rgba(150,20,50,0.6)),url('//westmontlibrary.org/wp-content/uploads/virtual-programs_feat-nav2.jpg');
	background-size:cover;
}

.homepage-left .textbox {
	padding: 1rem;
	border:3px solid #ffffff88;
	color:white;
}

.homepage-left:nth-of-type(1) .textbox {
	background:#212e6dbf;
	color:white;
}

.homepage-left:nth-of-type(2) .textbox {
	background:#0b4b5ebf;
	color:white;
}

.homepage-left:nth-of-type(3) .textbox {
	background:#6b0a20b1;
	color:white;
}


a.homepage-left:hover .textbox,
a.homepage-left:focus .textbox {
	border:3px solid white;
	box-shadow: 0 0.25rem 1rem -0.125rem black;
}

.homepage-left .textbox h2 {
	padding: 0 0 0.5rem 0;
	border-bottom:1px solid #ffffffcc;
	margin: 0 0 0.5rem 0;
	color:white;
	font-size:1.333rem;
}

.textbox p,
.textbox h2 {
	color:white;
}



/* ALERTS/SITE MESSAGES */
#homepage-alert-container {
	display: block;
	width: 100%;
	padding: 1.5rem;
	box-shadow: 0 0.333rem 1rem -0.111rem rgba(0,0,0,0.15);
	margin: 2rem 0;
	background:#cbebff;
	border-left:6px solid #1f9ae5;
	border-right:6px solid #1f9ae5;
}

/*@media screen and (max-device-width: 640px)*/
@media screen and (max-width: 1024px) {
	#homepage-alert-container {
		margin: 1rem 0;
		padding: 1rem;
	}
}

#homepage-alert-container hr {
	margin:1rem 4rem;
	background: #1f9ae580;
}


/* CALLOUT BOX INSIDE POST */
.callout,
p.searchwp-revised-search-notice {
	margin:1.5rem 0;
	padding:1.5rem;
	background:#f8f8f8;
	border:2px solid #f1f1f1;
	box-shadow:3px 3px 0 0 #f1f1f1;
}

			

/*------------------- YOUTH PAGE NEW -----------------------*/
#special-container {
	display:flex;
	flex-direction:row;
	justify-content:center;
	padding:2rem;
}

@media screen and (max-width: 640px) {
	#special-container {
		padding:1rem;
	}
}


#special-container.youth {
	
}

#special {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr 1fr auto auto;
	grid-column-gap: 2rem;
	grid-row-gap: 2rem;
	width:100%;
	max-width:1200px;
}

@media screen and (max-width: 787px) {
	#special {
		display:flex;
		flex-direction:column;
		gap:1rem;
	}
}

.special-school #special {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
}

/*--- hero/promo image w title text ---*/
	#promo-container {
		/* first horiz / first vert / last horiz / last vert */
		grid-area: 1 / 1 / 3 / 3;
		
		display: flex;
		flex-direction:column;
		justify-content:center;
		background: green;
		height: 20rem; /* for rem = 20 */
		height: 400px;
		height:100%;
		width: 30rem; /* for rem = 20 */
		width: 600px;
		width:100%;
		padding: 2rem;
		
		background-size:cover;
		background-position:center center;
	}

	@media screen and (max-width: 787px) {
		#promo-container {
			
		}
	}

	#promo-container.youth {
		background-image:url('https://westmontlibrary.org/wp-content/uploads/youth-hero.webp');
		
	}
	
	#promo-container.teens {
		background-image:url('https://westmontlibrary.org/wp-content/uploads/teen_hero-1.webp');
		
	}
	
	#promo-container.school {
		background-image:url('https://westmontlibrary.org/wp-content/uploads/school_hero.webp');
		
	}
	
	#promo-container.adults {
		background-image:url('https://westmontlibrary.org/wp-content/uploads/adult_hero2.webp');
	}
	
	.special-school #promo-container {
		/* first horiz / first vert / last horiz / last vert */
		grid-area: 1 / 1 / 2 / 2;
	}

	#promo-container h1 {
		position:relative;
		color:white;
		font-size:2.5rem;
		display:flex;
		flex-direction:column;
		gap:0.5rem;
		/*text-shadow:0 0 0.5rem #000000;*/
	}

	#promo-container h1::before {
		  
	  }

	#promo-container h1 span.smaller {
		display:block;
		font-size:1.5rem;
		font-weight:400;
	}


/*--- SPECIAL SUBNAV ---*/
	#menu-container {
		/* first horiz / first vert / last horiz / last vert */
		grid-area: 3 / 1 / 5 / 3;
	}
	
	.special-school #menu-container {
		/* first horiz / first vert / last horiz / last vert */
		grid-area: 1 / 2 / 2 / 4;
	}

	#menu-container ul {
		display: grid;
		grid-template-rows: repeat(2, 1fr);
		grid-template-columns: repeat(3, 1fr);
		gap:1rem;
		height:100%;
	}
	
	/*.special-adult #menu-container ul {
		grid-template-rows: 1fr;
	}*/

	@media screen and (max-width: 640px) {
		#menu-container ul {
			grid-template-columns: repeat(2,1fr);
		}
	}

	#menu-container ul li {
		min-height: 4rem;
	}

	ul.menu-new-youth li a {
		
	}

	ul.menu-new-youth li a:hover,
	ul.menu-new-youth li a:focus-visible {
		
	}

/*--- LIBCAL EVENT FEED ---*/

	#event-container {
		/* first horiz / first vert / last horiz / last vert */
		grid-area: 1 / 3 / 5 / 4;
		
		display:flex;
		background:white;
		flex-direction:column;
		min-width:16rem; /* for 1 rem = 20px */
		min-width:320px;
		padding:1.5rem;
		gap:1rem;
	}
	
	@media screen and (max-width: 640px) {
		#event-container {
			width:100%;
		}
	}

	#event-container p.link a {
		display:inline-block;
	}

	.event-list {
		width:100%;
		display:flex;
		flex-direction:column;
		gap:0.5rem;
	}

	.event-list li {
		margin:0;
		background:white;
		display:flex;
		flex-direction:row;
		justify-content:flex-start;
		align-items:flex-start;
		gap:0.5rem;
	}
	
	/* EVENT DATE BOX */
		.event-list li .event-date-box {
			width:3.75rem;
			height:3.75rem;
			flex-grow:0;
			flex-shrink:0;
			padding:0;
			background:#f1f1f1;
			display:flex;
			flex-direction:column;
			justify-content:flex-start;
			align-items:stretch;
		}
		
		/* hide date boxes for duplicate dates */
		.event-list li.dupe .event-date-box {
			visibility:hidden;
		}
		
		.event-list li .event-date-box p.month {
			padding:0.25rem 0;
			/*border-radius:4px 4px 0 0;*/
			text-align:center;
			text-transform:uppercase;
			font-size:0.8rem;
			color:white;
			background:#38414ccc;
		}
		
		.event-list li .event-date-box p.date {
			padding:0;
			height:100%;
			text-align:center;
			font-weight:bold;
			font-size:1.222rem;
			display:flex;
			flex-direction:column;
			justify-content:center;
			color:#38414ccc;
		}
		
		/* make text smaller if multiple days */
		.event-list li .event-date-box p.date.multi {
			font-size:1rem;
		}
	
	/* EVENT DETAILS BOX */
		.event-list li .event-details-box {
			flex-grow:1;
			padding:0 0.25rem;
		}
	
		/* EVENT TITLE */
			.event-list li .event-title {
				margin: 0 0 0.111rem 0;
			}
			
			#event-container .event-list li .event-title a {
				display:inline-block;
				font-size:1rem;
				text-decoration:none;
			}

			#event-container .event-list li.libcal-early-childhood .event-title a {
				color:#bd4206;
			}
			
			#event-container .event-list li.libcal-family .event-title a {
				color:#a43674;
			}

			#event-container .event-list li.libcal-grades-k-2 .event-title a,
			#event-container .event-list li.libcal-grades-3-5 .event-title a,
			#event-container .event-list li.libcal-grades-k-5 .event-title a	{
				color:#166e35;
			}
			
			#event-container .event-list li.libcal-teens .event-title a {
				color:#027b8f;
			}
			
			#event-container .event-list li.libcal-emerging-adults .event-title a {
				color:#7C3DBF;
			}
			
			#event-container .event-list li.libcal-adults .event-title a {
				color:#2f5c9c;
			}

			#event-container .event-list li .event-title a:hover,
			#event-container .event-list li .event-title a:focus-visible {
				color:#c93818;
				text-decoration:underline solid 2px;
			}
			
			#event-container .event-list li .event-title a:focus-visible {
				outline:2px solid #38414caa;
				outline-offset:2px;
			}

		.event-list li .event-details {
			
		}
		
		.event-list li p {
			font-size:0.9rem;
		}

		.event-list li p.event-time {
			display:inline;
		}
		
		/* EVENT AUDIENCE */
			.event-list li p.event-audience {
				display:inline;
			}
			
			.event-list li p.event-audience::before {
				display:inline-block;
				margin:0 0.3333rem;
				height:0.3333rem;
				width:0.3333rem;
				vertical-align:3px;
				border-radius:1rem;
				content:"";
			}
			
			.event-list li.libcal-early-childhood p.event-audience::before {
				background:#bd420612;
				background:#bd4206;
			}
			
			.event-list li.libcal-family p.event-audience::before {
				background:#a43674;
			}

			.event-list li.libcal-grades-k-2 p.event-audience::before,
			.event-list li.libcal-grades-3-5 p.event-audience::before,
			.event-list li.libcal-grades-k-5 p.event-audience::before {
				background:#166e35;
			}
			
			.event-list li.libcal-teens p.event-audience::before {
				background:#027b8f;
			}
			
			.event-list li.libcal-emerging-adults p.event-audience::before {
				background:#7C3DBF;
			}
			
			.event-list li.libcal-adults p.event-audience::before {
				background:#2f5c9c;
			}





/*--- RIBBON 
	100% width content ribbon
	does not style actual contents
---*/
	.ribbon-container {
		width:100%;
		background-color:#ffffff;
		background-size:cover;
		background-position:center center;
		
		padding:2rem;
		color:#38414c;
	}
	
	.ribbon-container.dark {
		background-color:#38414c;
		color:#ffffff;
	}

	@media screen and (max-width: 1366px) {
		.ribbon-container {
			
		}
	}

	.ribbon-container.youth-books {
		background-image: url('https://westmontlibrary.org/wp-content/uploads/youth-books_ribbon2-scaled.webp');
	}

	.ribbon-container.youth-beyond {
		background-image: url('https://westmontlibrary.org/wp-content/uploads/youth-beyond_ribbon-scaled.webp');
	}
	
	.ribbon-container.teen-books {
		background-image: url('https://westmontlibrary.org/wp-content/uploads/teen-books_ribbon5-scaled.webp');
	}
	
	.ribbon-container.adult-books {
		background-image: url('https://westmontlibrary.org/wp-content/uploads/adult-books_ribbon3-scaled.webp');
	}
	
	.ribbon-container.adult-beyond {
		background-image: url('https://westmontlibrary.org/wp-content/uploads/adult-beyond_ribbon2-scaled.webp');
	}

	.ribbon {
		max-width:1200px;
		margin:0 auto;
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:2rem;
		padding:0;
	}
	
	.left-align .ribbon,
	.teen-social .ribbon {
		flex-direction:row;
		justify-content:flex-start;
		flex-wrap:wrap;
	}

	.ribbon-container h2,
	.ribbon-container.dark .header {
		width:100%;
		text-align:left;
	}
	
	.ribbon-container.left-align h2,
	.ribbon-container.teen-social h2 {
		width:unset;
		flex-basis:content;
	}
	
	.ribbon-container h2,
	.ribbon-container .header {
		color:#38414c;
	}

	.ribbon-container.dark h2,
	.ribbon-container.dark .header {
		color:#ffffff;
	}


/*--- CONTENT CONTAINER
	container for posts used as cards etc
---*/
	.content-container {
		width:100%;
		
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		column-gap:1rem;
		row-gap:2rem;
	}

/*--- CONTENT
	container for posts used as cards etc
---*/
	.content {
		min-width:10rem; /* for rem = 20 */
		min-width:200px;
		
		display:flex;
		flex-direction:column;
		justify-content:flex-start;
		align-items:center;
		gap:1rem;
		
		width:calc( 25% - 1rem );
		flex-grow:1;
		
		width:100%;
	}
	
	.content:focus-visible {
		outline:none;
	}
	
	@media (min-width: 641px) {
		.content,
		.content.four-item {
			width:calc( 50% - 1rem );
			max-width:50%;
		}
	}
	
	@media (min-width: 1025px) {
		.content,
		.content.four-item {
			width:calc( 25% - 1rem );
			max-width:25%;
		}
	}
	
	@media (min-width: 787px) {
		.content.five-item {
			width:calc( 33% - 1rem );
			max-width:33%;
		}
	}
	
	@media (min-width: 1201px) {
		.content.five-item {
			width:calc( 20% - 1rem );
			max-width:20%;
		}
	}

	.content.card-item {
		background:#ffffff;
		border:2px solid #22262b;
		gap:0;
	}

	.content.card-item:hover,
	.content.card-item:focus-visible {
		box-shadow:3px 3px 0 0 #22262b;
		
	}

	@media (max-width: 640px) {
		.content.circle-item {
			flex-direction:row;
		}
	}
	
	.content .content-img {
		background-size:contain;
		background-position:center center;
	}

	.content.circle-item .content-img {
		flex-shrink:0;
		flex-grow:0;
		display: flex;
		height: 8rem;
		width: 8rem;
		border:2px solid #22262b;
		border-radius: 100%;
		margin: 0 auto;
		background-size:100%;
		transition:300ms ease-in-out;
		box-shadow:inset 0 0 1.5rem 0 #00000022;
	}

	.content.circle-item:hover .content-img,
	.content.circle-item:focus-visible .content-img {
		background-size:110%;
		transition:300ms ease-in-out;
		box-shadow:3px 3px 0 0 #22262b;
	}

	.content.card-item .content-img {
		height:10rem;
		width:100%;
		background-size:100%;
		border-radius:0;
		transition:300ms ease-in-out;
		box-shadow:inset 0 0 1.5rem 0 #00000022;
	}

	.content.card-item:hover .content-img,
	.content.card-item:focus-visible .content-img {
		background-size:110%;
		transition:300ms ease-in-out;
		box-shadow:0 0 0 0 transparent;
	}
	
	.content .content-text {	
		display:flex;
		flex-direction:column;
		width:100%;
		gap:0.5rem;
	}

	.content.circle-item .content-text{
		padding:0;
		text-align:center;
	}
	
	@media (max-width: 640px) {
		.content.circle-item .content-text{
			flex-shrink:1;
			text-align:left;
		}
	}

	.content.card-item .content-text {
		padding:1rem;
		text-align:left;
	}

	.content .content-text p,
	.content .content-text a,
	.content .content-text h3 {
		display:inline-block;
		color:#38414c;
	}
	
	.dark .content.circle-item .content-text p,
	.dark .content.circle-item .content-text a,
	.dark .content.circle-item .content-text h3 {
		color:#ffffff;
	}

	/*.content.card-item .content-text p,
	.content.card-item .content-text a,
	.content.card-item .content-text h3 {
		color:#38414c;
	}*/

	.content:focus-visible .content-text h3 {
		text-decoration:underline solid 2px;
	}



/*------end HOMEPAGE - 2nd tier---------*/







/* FEATURED NAV container - horiz */

	/*---- desktop / tablet ----*/
	#featurednav-container {
		clear: both;
		width: 100%;
		height: auto;
		position:relative;
		border: 0;
		outline: 0;
		padding: 0;
		margin: 2rem 0;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
		
		gap:1rem;
	}
	
	/*---- mobile ----*/
	@media screen and (max-width: 640px) {
		#featurednav-container {
			margin: 1rem 0;
		}
	}
	
	
	
	/* desktop or large tablet only */
	@media screen and (min-device-width: 769px) {
		.no-padding #featurednav-container {
			padding: 3rem;
		}
	}
	
	

/* header for featnav repurposed on youth page */
.header-youth-container {
	margin: 1rem auto;
	display:flex;
	flex-direction:row;
	justify-content:center;
}

/* header for school page */
.header-container {
	margin: 3rem auto 0 auto;
	display:flex;
	flex-direction:row;
	justify-content:center;
}

.header-youth {
	display:flex;
	flex-direction:column;
	justify-content:center;
	color:#38414c;
	margin:0;
	text-align:center;
}


.header-youth h1 {
	padding:0;
}

.header-item {
	display:flex;
	flex-direction:column;
	justify-content:center;
	background:#1f9ae5;
	color:white;
	margin:0;
	padding:2rem;
	text-align:center;
}

.header-item h2 {
	/*9-2-25*/
	color:#ffffff;
}

/* FEATURED NAV indiv item - homepage/horiz default */
	/*---- desktop / tablet ----*/
	.featurednav {
		position: relative;
		height: auto;
		width: 20%; /* 25% to favor 3 across rather than 4 */
		min-width: 16rem;
		max-width: 32%;
		margin: 0.5rem;
		border: 0;
		outline: 0;

		display:flex;
		flex-direction:column;
		justify-content:stretch;
		flex-grow: 1;
		
		background-size: cover;
		background-position: center center;
		background: #ffffff;
		
		box-shadow: 0.2rem 0.2rem 0rem 0rem #efefef;
		
		margin:0;
	}

	
	
	.featurednav.horizontal {
		flex-direction:row;
		flex-wrap:wrap;
		width:45%;
	}
	
	.featurednav.invisible {
		background: transparent;
		box-shadow: none;
		margin:2rem;
	}
	
	
	
	/*---- tablet ----*/
	@media screen and (max-width: 1024px) {
		.featurednav {
			max-width: 50%;
		}
	}
	
	/*---- mobile ----*/
	@media screen and (max-width: 640px) {
		.featurednav {
			max-width: 100%;
		}
	}


/*IN ORDER TO MAKE THIS WORK I NEED TO CHANGE A (anchor) HEIGHT TO auto */
	.featurednav .feat-img {
		width: 100%;
		height: 100%;
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 14rem;
		background-size: cover;
		background-position: center;
	}
	
.featurednav.horizontal .feat-img {
	 display:flex;
	 justify-content:center;
	 align-items:center;
	 height:unset;
	 flex-basis:10%;
	 /*flex-grow: 1;*/
}

/*---- mobile ----*/
	@media screen and (max-device-width: 768px) {
		.featurednav.horizontal .feat-img {
			flex-grow:0;
		}
	}
	
.featurednav.horizontal .feat-img img {
	width: 8rem;
	height: auto;
}	


/* text content for events on youth, teen, adults page */
.featurednav .feat-content {
	 display:flex;
	 flex-direction:column;
	 justify-content:space-between;
	 align-items:flex-start;
	 flex-grow: 1;
	 padding:2rem;
}
	
/* make entire FEAT NAV item into link */
	/*---- desktop / tablet ----*/
	.featurednav a,
	.featurednav div.text {
		width: 100%;
		height: auto;
		/*color: rgba(255,255,255,1);*/
		padding: 0;
		outline-offset:0;
		transition: 100ms linear;
		
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		
		height:100%;
		justify-content:flex-start;
	}
	
	.featurednav.horizontal a,
	.featurednav.horizontal div.text {
		flex-basis: 50%;
		flex-grow: 1;
		justify-content:center;
	}
	
.featurednav div.text {
	
}
	
.featurednav a h2,
.featurednav div.text h2 {
	display: block;
	margin: 0;
	padding: 0.75rem 0 0.5rem 1rem;
	width: 100%;
	color: rgba(85,93,97,1);

	font-size: 1.111rem;

	padding: 1rem 1rem 0 1rem;
	font-size: 1.333rem;
}

.featurednav a p,
.featurednav div.text p {
	display: block;
	padding: 0.5rem 1rem 0 1rem;
	width: 100%;
	height: 100%;

	color: rgba(85,93,97,1);
	padding: 1rem;
	height: auto;
}

.featurednav a:hover,
.featurednav a:focus,
.featurednav a:focus-visible {
	box-shadow: 0 0.333rem 1rem -0.111rem rgba(0,0,0,0.5);
}

.featurednav a:focus-visible {
	outline:2px solid #38414c;
}

/* FEATURED NAV - inner pages / vert stack */
	/*---- desktop / tablet ----*/
	#sidebar-left {
		position: relative;
		display: block;
		float: left;
		width: 23%;
		height: 100%;
		padding: 0 0.5rem 0 0;
		margin: 0;
		
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
		/* 3-10-21 */
		margin: 1rem 0 0 0;
	}
	
	
	/*---- tablet/mobile ----*/
	@media screen and (max-width: 1200px) {
		#sidebar-left {
			width: 100%;
			float: none;
			clear: both;
			padding: 0;
			margin:1rem 0;
			gap:1rem;
		}
	}

/* FEAT NAV indiv - inner pages / vert stack */
#sidebar-left > .featurednav {	
	width: 100%;
	min-width: unset;
	max-width: unset;
	margin: 0 0 1rem 0;
}
	
	/*---- tablet wide ----*/
	@media screen and (max-width: 1200px) {
		#sidebar-left > .featurednav {
			width:unset;
			margin:0;
			flex-basis:45%;
			min-width:16rem;
		}
	}

ul.event-group {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	width:66%;
	flex-grow:1;
	justify-content:space-between;
	align-items:space-between;
}

ul.event-group li.featured-text-only {
	width: 30%;
	margin:0.5rem;
	padding:1rem;
	flex-grow:1;
	display:flex;
	flex-direction:column;
	background:white;
}

li.featured-text-only h3 {
	
}



.item-container {
	display: flex;
	flex-direction: row;
	/* wp 6 force wrap */
	flex-wrap: wrap!important;
	justify-content: flex-start;
	clear: both;
	width: 100%;
	height: auto;
	position:relative;
	border: 0;
	outline: 0;
	padding: 0 3rem;
	margin: 0;
	background:white;
	gap:0!important;
}


/*---- mobile ----*/
	/*@media screen and (max-device-width: 640px)*/
	@media screen and (max-width: 640px) {
		.item-container {
			margin: 0;
			padding: 0;
		}
		
	}

.wp-block-group .item-container {
	padding: 0;
	justify-content: space-between;
}


.item-container.item-container-mini {
	margin:0;
	padding: 0;
}

.item-container.item-container-mini:first-of-type {
	margin:1rem 0 0 0;
}

.item {
	padding: 3rem;
	flex-basis: 40%;
	flex-grow:1;
	min-width: 25rem;
	max-width: 45rem;
	/* max-width:50%; do this when staff page is fixed... might actually be problem with .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column */
	
	display:flex;
	flex-direction:row;
	align-items:flex-start;
}


	/*---- wide desktop ----*/
	@media screen and (min-width: 1366px) {
		.item {
			padding: 4rem;
		}
	}

	/*---- mobile ----*/
	/*@media screen and (max-device-width: 640px)*/
	@media screen and (max-width: 1024px)	{
		.item {
			padding:2rem;
			
			min-width: 100%;
			max-width: unset;
			
			flex-direction:column;
			flex-basis:100%;
			border-bottom:3px solid #f8f8f8;
		}
	}

.item-container.item-container-mini .item {
	padding:1rem 0;
}

.wp-block-group .item-container .item {
	/*padding: 0;
	max-width:28rem;*/
}

	/*---- wide desktop ----*/
	@media screen and (min-width: 1366px) {
		.wp-block-group .item-container .item {
			/*padding: 0rem;*/
		}
	}


.post .item {
	padding: 2rem;
}

/*---- mobile ----*/
	/*@media screen and (max-device-width: 640px)*/
	@media screen and (max-width: 1024px) {
		.post .item {
			padding:2rem 1rem;
		}
	}

/* images on left side of e.g. makery pages on desktop ONLY */
@media screen and (min-width: 1025px) {
	.feat-img img {
		max-width:400px;
	}
}

.item .feat-img img {
	width: 100%;
	max-width: 200px;
	height:auto;
}
	
.item-container.item-container-mini .item .feat-img img {
	max-width: 8rem; /* 144px */
}

.wp-block-column.text,
.item .text {
	padding: 0;
	flex-basis:50%!important;
	flex-grow:1!important;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:flex-start;
}

.wp-block-column.text.flex-center,
.item .text.flex-center {
	justify-content:center;
}

.text.text-long {
	justify-content:flex-start;
	align-items:unset;
}

.feat-img + .text,
.item .feat-img + .text {
	
}
	

.wp-block-column.text + .feat-img {
	padding:0 0 0 1.5rem;
}

	/*---- mobile ----*/
	@media screen and (max-device-width: 767px) {
		.wp-block-column.text + .feat-img {
			padding:1.5rem 0 0 0;
		}
	}
	


.item-container.item-container-mini .item .text h2 {
	font-size:1.222rem;
	color:#38414c;
}

/* hide the Android/iOS app links when items are "mini" style */
.item-container.item-container-mini .item .app-block {
	display:none;
}

h2.item-container-header {
	display:inline-block;
	margin:0;
	padding: 1rem 5rem 0 4rem;
	border-left:1rem solid #1f9ae5;
	color:#535a65;
	background:white;
	font-size:1.8rem;
}

/*---- mobile ----*/
	@media screen and (max-device-width: 767px) {
		h2.item-container-header {
			padding:1rem;
		}
	}

div + h2.item-container-header {
	margin:4rem 0 0 0;
	box-shadow:0 -0.5rem 1rem -1rem #dcdcdc;
}

/*---- mobile ----*/
	@media screen and (max-device-width: 767px) {
		div + h2.item-container-header {
			margin:2rem 0 0 0;
		}
	}

blockquote.wp-block-quote {
	margin:2rem 0;
	padding:0 1rem;
	border-left:6px solid #f1f1f1;
	color: #535a65;
}

cite {
	font-size: 0.9rem;
	color: #38414c;
}



/* ------------------ CONTENT -------------------*/

/* PAGE / POST content CONTAINER */
	/*---- desktop / tablet ----*/
	#wide-container {
		position: relative;
		height: 100%;
		border: 0;
		color: #38414c;
		width: 77%;
		float: right;
		padding: 0 0 0 0.5rem;
		margin: 0;
		
		/* 3-10-21 */
		margin:1rem 0 0 0;
	}

	#post-container {
		position: relative;
		height: 100%;
		border: 0;
		color: #38414c;
		float: left;
		padding: 0 0.5rem 0 0;
		margin: 0;
		width: 72%;
	}

	#full-container {
		position: relative;
		height: 100%;
		border: 0;
		color: #38414c;
		width: 100%;
		float: right;
		padding: 0;
		margin: 0;
	}

	#full-container.its {
		margin: 0 0 1rem 0;
		box-shadow: 0 0.333rem 1rem -0.111rem rgba(0,0,0,0.15); /* hshadow vshadow distance blur color */
	}

	/*---- mobile ----*/
	@media screen and (max-width: 1200px) {
		#wide-container,
		#full-container {
			position: relative;
			width: 100%;
			float: none;
			clear: both;
			display: block;
			padding: 0;
		}
	}

	/*---- mobile ----*/
	@media screen and (max-width: 1024px) {
		#post-container,
		#wide-container,
		#full-container {
			position: relative;
			width: 100%;
			float: none;
			clear: both;
			display: block;
			padding: 0;
		}
	}


/*---------------- POST and PAGE-------------------------- */
/* PAGE / POST CONTENT */
	/*---- desktop / tablet ----*/	
	.post {
		height: auto;
		overflow: auto;		/* stop floats from going over the post boundary */
		margin: 0 0 1rem 0;
		padding: 1.75rem;
		background:white;
		box-shadow: 0 0.333rem 1rem -0.111rem rgba(0,0,0,0.15); /* hshadow vshadow distance blur color */

		overflow: visible;
	}

	/*---- mobile ----*/
	@media screen and (max-width: 1024px) {
		.post {
			padding: 1.5rem;
		}

	}






.calendar {
	height: 100%;
	width: 100%;
}

/* IMG in POST */
	.post img,
	.post .img {
		display: block;
		/*height: 8rem;
		width: 8rem;
		border-radius: 50%;*/
		background-position: center;
		margin: 0 0.75rem 0.75rem 0;
	}

	.post img.aligncenter {
		margin: 0 auto 0.75rem auto;
	}

	.post p + img {
		margin-top: 0.75rem;
	}

/* PAGE / POST TITLE */
	/*---- desktop / tablet ----*/	
	.post h1 {
		display: block;
		padding-bottom: 0.75rem;					/* btwn text and border */
		border-bottom: 1px solid rgba(220,220,220,1);
		margin-bottom: 1.75rem;					/* btwn border and next elem */
		color: #38414c;
	}
	/*---- mobile ----*/
	@media screen and (max-device-width: 767px), (min-device-width: 769px) and (max-device-width: 800px) {
		.post h1 {
			padding-bottom: 0.5rem;					/* btwn text and border */
			margin-bottom: 1rem;					/* btwn border and next elem */
		}
	}
	
	/* TITLES on child pages */
	.post h1 a {
		color: #38414c;
		cursor: text;
	}

	
	.feat-content p {
		margin: 0.25rem 0;
	}

	
/* link that is styled like a button (e.g. to read more for Book Recs on youth/teen/adult page or go to playlist on YT) */
	
	/*8-25-25*/
	.link a,
	.link a:hover,
	.link a:focus-visible {
		text-decoration:none!important;
	}
	
	h3.link,
	.homepage-right p.link a {
		font-size:1.222rem !important;
	}
	
	.homepage-right p.link {
		font-weight:bold;
	}
	
	.post h3.link {
		text-align:center;
		align-self:center;
	}
	
	.post.its h3.link {
		margin: auto 0 2rem 0;
		text-align:center;
		align-self:center;
	}
	
	.feat-content h3.link {
		margin: 1rem 0 0 0;
		text-align:center;
		align-self:center;
	}
	
	
	
	/* standard blue box "button" link */
	.post h3.link a,
	h3.link	a,
	.homepage-right p.link a,
	.wp-block-button.link a {
		padding: 0.5rem 0.75rem;
		background:#0073bb;
		color: white;
		border: 0;
		display:inline-block;
	}
	
	.wp-block-button.link a {
		font-weight:bold;
		border-radius:0;
	}
	
	.post.its h3.link a,
	.feat-content h3.link a	{
		padding: 0.3rem 0.5rem;
	}
	
	.homepage-right h3.link a,
	.homepage-right p.link a	{
		font-size:1.6rem;
		box-shadow: 0 0.333rem 1rem -0.111rem rgba(0, 0, 0, 0.15);
	}
	
	/* blue-outlined box "button" link */
	.text p.link a,
	.post p.link a,
	.post-ra p.link a,
	h3.link-outline a,
	.item-container-mini .item h3.link a,
	.wp-block-button.is-style-outline.link a {
		display:inline-block;
		padding: 0.35rem 0.5rem;
		text-align:center;
		font-size:1.1rem;
		font-weight:bold;
		width: 100%;
		background:none;
		color:#0073bb;
		/* 8/13/25 */
		border:2px solid #0073bb;
	}
	
	.post p.link a,
	.post-ra p.link a {
		width: fit-content;
		display:flex;
		flex-direction:row;
		align-items:stretch;
		text-align:left;
	}
	
	/* WHAT IS THIS FOR ???? */
	.post p.link a::before {
		display:flex;
		flex-direction:row;
		align-items:center;
		font-weight:normal;
		font-size:1.2rem;
	}

	p.link-info a::before {
		font-family:"wplicons";
		content:"\e606";
		padding:0 0.5rem 0 0;
		margin:0 0.5rem 0 0;
		border-right:1px solid #1f9ae5;
	}
	

	
	.wp-block-cover p.link.white-outline {
		margin:auto 0 0 0;
	}
	
	/* white outlined box link for cover blocks */
	p.link.white-outline a {
		display:inline-block;
		padding:0.35rem 0.5rem;
		margin:0;
		/*text-align:center;*/
		font-size:1.1rem;
		font-weight:bold;
		background:none;
		color:white;
		border:2px solid #ffffffaa;
	}
	
	p.link.white-outline a:hover {
		background:#c93818;
		border-bottom-color:#ffffffaa;
	}
	
	/* blue box link */
	.post h3.link a:hover,
	.post h3.link a:focus,
	.post h3.link a:focus-visible,
	h3.link a:hover,
	h3.link a:focus,
	h3.link a:focus-visible,
	.homepage-right p.link a:hover,
	.homepage-right p.link a:focus,
	.homepage-right p.link a:focus-visible,
	.wp-block-button.link a:hover,
	.wp-block-button.link a:focus,
	.wp-block-button.link a:focus-visible {
		background:#c93818;
	}
	
	/* blue-outline box link */
	.post p.link a:hover,
	.post-ra p.link a:hover,
	.text p.link:not(.ios,.android) a:hover,
	h3.link-outline a:hover,
	.item-container-mini .item h3.link a:hover,
	.wp-block-button.is-style-outline.link a:hover {
		/* 8/13/25 */
		color:#ffffff;
		background:#0073bb;
		border-bottom-color:#0073bb;
	}
	
	/* blue-outline box link */
	.post p.link a:focus,
	.post p.link a:focus-visible,
	.post-ra p.link a:focus-visible,
	.text p.link:not(.ios,.android) a:focus,
	.text p.link:not(.ios,.android) a:focus-visible,
	h3.link-outline a:focus,
	h3.link-outline a:focus-visible,
	p.link.white-outline a:focus,
	p.link.white-outline a:focus-visible,
	.item-container-mini .item h3.link a:focus,
	.item-container-mini .item h3.link a:focus-visible,
	.wp-block-button.is-style-outline.link a:focus
	.wp-block-button.is-style-outline.link a:focus-visible {
		/* 8/13/25 */
		color:#ffffff;
		background:#0073bb;
		border-bottom-color:#0073bb;
	}
	
	/* blue-outline rounded button link for DB apps */
	p + p.link.android,
	p + p.link.ios {
		margin:0 !important;
	}
	
	h4.link a,
	p.link.ios a,
	p.link.android a {
		display:inline-block !important;
		width:auto !important;
		border:2px solid #1f9ae5;
		font-weight:bold;
		margin: 0.25rem 0.5rem 0.25rem 0 !important;
		padding: 0.25rem 0.5rem;
		background-position:0.4rem center !important;
		background-size:auto 70% !important;
		background-repeat:no-repeat !important;
		color:#1f9ae5;
		border-radius:2rem !important;
		white-space:pre !important;
	}

	h4.link.android a,
	p.link.android a {
		padding: 0.25rem 0.5rem 0.25rem 2rem !important;
		background-image:url('//westmontlibrary.org/wp-content/uploads/android-icon-web_med-grey.svg') !important;
	}

	h4.link.ios a,
	p.link.ios a {
		padding: 0.25rem 0.5rem 0.25rem 2rem !important;
		background-image:url('//westmontlibrary.org/wp-content/uploads/apple-icon-web_med-grey.svg') !important;
	}

	h4.link a:hover,
	p.link.android a:hover,
	p.link.ios a:hover,
	h4.link a:focus-visible,
	p.link.android a:focus-visible,
	p.link.ios a:focus-visible {
		border-color:#c93818 !important;
		color:#c93818 !important;
		background-color:#f1f1f1 !important;
		box-shadow: inset 3px 3px 0 0 #dcdcdc !important;
	}
	

	
	/* subnav link list within cover/hero */
	.wp-block-cover ul.subnav {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		margin:1rem 0 0 0;
	}
	
	.wp-block-cover ul.subnav li {
		margin: 0.5rem 0.5rem 0 0;
		display:flex;
	}
	
	

	.post h1 img {
		box-sizing: content-box;
		margin: 1.5rem auto;
	}

	h3.link-inpage {
		color: white !important;
		padding: 0.25rem;
		height: 2rem;
		width: 50%;
		background: rgb(165,169,171);
		display: inline-block;
		text-align: center;
		margin: 0;
	}


.post h2,
.post h3,
.post h4,
.post h5 {
	margin: 1rem 0 0 0;
}

.post .item h2 {
	margin:unset;
}

.post h2,
.text h2 {
	color:#0579bf;
}

.post h3,
.text h3 {
	color: #38414c;
	line-height: 125%;
	font-size:1.333rem;
}

.post h2 + h3,
.text h2 + h3 {
	margin: 1.5rem 0 0 0;
}

/* 8-13-25*/
.post p,
.post li,
td {
	color: #000000;
}

.post h1 + p,
.post h2 + p,
.post h3 + p,
.post p + p,
.post ul + p,
.post ol + p,
.text h1 + p,
.text h2 + p,
.text h3 + p,
.text p + p,
.text p + ul,
.text p + ol,
.text p + div,
.text div + p,
.text div + h3, 
.text div + h4 {
	margin: 0.75rem 0 0 0;
}

.post h4 + p,
.text h4 + p {
	margin: 0.333rem 0 0 0;
}

.post ul + p {
	margin: 1.5rem 0 0 0;
}

.post ul + h2,
.post ul + h3 {
	margin:2rem 0 0 0;
}

.text p + h3,
.text ul + h3,
.text ol + h3,
.text p + h4,
.text ul + h4,
.text ol + h4,
.text ul + p,
.text ol + p {
	margin:2rem 0 0 0;
}

.text ul,
.text ol {
	margin: 0.75rem 0;
}

/* any ul, ol */
.text-long ul,
.text-long ol {
	padding: 0.75rem 0 0.5rem 1rem;
	margin: 0;
}

/* first level only */
.text-long > ul,
.text-long > ol {
	margin: 1rem 0;
	padding: 2rem;
	background: #f8f8f8;
}

	/*---- mobile ----*/
	/*@media screen and (max-device-width: 1024px)*/
	@media screen and (max-width: 1024px) {
		/* first level only */
		.text-long > ul,
		.text-long > ol {
			margin: 1rem 0;
			padding: 1rem;
			background: #f8f8f8;
		}
	}

.post li,
.text li {
	margin: 0.75rem 0 0 1.5rem;
}

/*8-13-25*/
.post table li {
	margin: 0 0 0.75rem 1.0rem;
}

/*8-13-25*/
.post table p + ul > li:first-of-type {
	margin-top:0.75rem;
}

.text li:first-of-type {
	margin: 0 0 0 1.5rem;
}

.post li::marker,
.text li::marker {
	color: #1f9ae5;
	font-weight: bold;
}

.text ul > li,
.post ul > li {
	list-style:disc;
}

.post ol > li {
	padding-left: 0.75rem;
	margin:2rem 2rem 2rem 1.25rem;
}

.post div.date-container {
	margin: 1rem 0 0 0;
}

.post.its div.date-container {
	margin:0;
	padding:1rem;
}

.post p.date {
	color: rgba(85,93,97,1);
	clear: both;
}

.post.its p {
	margin: 0.5rem 0;
	padding: 0 1rem;
}

.post.its p.date {
	margin: 0;
}




/* for the links in cover blocks */
.wp-block-cover p a:hover,
.wp-block-cover p a:focus-visible {
	
}

.post a.moretag span,
.text a.moretag span {
	font-size: 0.75rem;
}






	

/* nested list */
.post > ul > li > ul,
.post > ul > li > ol,
.post > ol > li > ul,
.post > ol > li > ol {
	/*margin:1rem 0;*/
	margin:0.5rem 0 1rem 0;
	padding:1rem;
	background:#f8f8f8;
	/*border-top:6px solid #f1f1f1;
	border-bottom:6px solid #f8f8f8;*/
}

.post > ul > li > ul > li:first-of-type,
.post > ul > li > ol > li:first-of-type,
.post > ol > li > ul > li:first-of-type,
.post > ol > li > ol > li:first-of-type {
	margin-top:0;
}

/*------ HORIZ RULE ------*/
	hr,
	hr.wp-block-separator,
	.wp-block-separator,
	.post hr {
		height: 1px;
		background: #dcdcdc;
		margin: 2rem 4rem;
		border:0;
	}

	/*---- mobile ----*/
	@media screen and (max-width: 1024px) {
		hr.wp-block-separator,
		.post hr {
			margin: 2rem 1rem;
		}
	}

/* EXTERNAL links - in POST only */
.post a[href*="//"]:not([href*="westmontlibrary.org"]):after {
	
}

.post a[href*="//"]:not([href*="westmontlibrary.org"]):hover:after {
	
}

/* PAGINATION */

	/* area for links to next and prev pages of posts */
	.post.posts_link {
		height: 4rem;
		padding: 1.5rem;
	}

	/* links to go to next or prev pg of posts */
	.post.posts_link p,
	.post.posts_link a {
		margin: 0;
		border: 0;
	}
	/* line up the arrow */
	.post.posts_link span {
		transform: translateY(15%);
	}

/* STAFF - Info and Bios */	

	/* name, position, contact, etc */
	div.staffinfo {
		display: inline-block;
		border-right: 1px solid rgba(220,220,220,1);
		padding: 0 1.75rem 0 0;
		text-align: center;
		width: 39%;
		vertical-align: middle;
	}

	/* bio */
	div.staffbio {
		display: inline-block;
		padding: 0 0 0 1.75rem;
		width: 60%;
		vertical-align: middle;
	}

	/*---- narrow ----*/
	@media all and (max-width: 1366px) {
		div.staffinfo {
			width: 44%;
		}
		div.staffbio {
			width: 55%;
		}
	}

	/*---- narrower ----*/
	@media all and (min-width: 641px) and (max-width: 1365px) {
		div.staffinfo {
			width: 100%;
			border-right: 0;
			padding: 0 0 1rem 0;
			border-bottom: 1px solid rgba(220,220,220,1);
		}
		div.staffbio {
			width: 100%;
			padding: 1rem 0 0 0;
		}
	}

	/*---- mobile ----*/
	@media screen and (max-device-width: 640px) {
		div.staffinfo {
			width: 100%;
			border-right: 0;
			padding: 0 0 1rem 0;
			border-bottom: 1px solid rgba(220,220,220,1);
		}
		div.staffbio {
			width: 100%;
			padding: 1rem 0 0 0;
		}
	}

	div.staffinfo p {
		margin: 0.25rem 0 0 0;
	}

.post div.staffinfo img {
	margin: 0.75rem auto;
}

ul.gridmenu {
	width: 100%;
	display: table-cell;
}

ul.gridmenu li {
	display: inline-block;
	padding: 1rem;
	margin: 0;
	text-align: center;
	border: 0;
	width: 25%;
	border-left: 1px solid rgba(220,220,220,1);
}



/*---- search results page ----*/

/* "Displaying results for X" when search term not found */
/* see .callout */
p.searchwp-revised-search-notice {
	font-size:1.111rem;
}

em.searchwp-suggested-revision-query {
	font-weight:bold;
}

ul.search-results {
	margin:1rem 0;
	padding:0 1rem;
}

ul.search-results li {
	margin:0;
	padding:1.5rem 0.5rem;
	border-bottom:1px solid #e0e0e0;
}

ul.search-results li:last-of-type {
	border-bottom:0;
}

h2.search-result {
	margin:0;
}

mark {
	background-color: #1f9ae522;
}

nav.menu-page-numbers {
	margin:0.5rem 0;
}

nav.menu-page-numbers .page-numbers {
	padding:0.5rem 0.75rem;
}

a.page-numbers {
	color:#0073bb;
}

.page-numbers.current {
	background:#0073bb;
	color:white;
	font-weight:bold;
}



.scroll-to-top {
	position: fixed;
	bottom:10vh;
	right:10vh;
	
	padding: 0.5rem;
	border-radius: 3rem;
	font-size: 2rem;
	text-align: center;
	font-family: "wplicons";
	background-color:#38414cbb;
	color: white;
	z-index: 10;

	display: none;
}

.scroll-to-top:focus-visible {
	background:#c93818;
	outline:2px solid #38414cbb;
	outline-offset:0;
}

/*------ CONTACT FORM 7 ------*/

/* is this from wpcf7??? */
.ajax-loader {
	height: 1px !important;
}

/*---------------- end POST and PAGE -------------------- */

/* SIDEBAR RIGHT container */
	/*---- desktop / tablet ----*/
	#sidebar-right-container {
		float: right;
		position: relative;
		height: 100%;
		margin: 0;
		padding: 0 0 0 0.5rem;
		width: 28%;
	}
	/*---- mobile ----*/
	@media screen and (max-width:1024px) {
		#sidebar-right-container {
			width: 100%;
			float: none;
			clear: both;
			display: block;
			padding: 0;
		}
	}
	
/* SIDEBAR RIGHT item */
	/*---- desktop / tablet ----*/
	.sidebar-right {
		padding: 1.75rem;
		margin: 0 0 1rem 0;
		width: 100%;
		height: auto;
		background-color: rgba(255,255,255,1);
		box-shadow: 0 0.333rem 1rem -0.111rem rgba(0,0,0,0.15); /* hshadow vshadow distance blur color */
		background: linear-gradient(rgba(255,255,255,1),rgba(251,251,251,1));
	}

	#sidebar-relatedpages {
		border-top: 6px solid rgba(88,189,223,0.3);
	}
	
	#sidebar-contact {
		border-top: 6px solid rgba(112,180,239,0.3);
	}

	/*---- mobile ----*/
	/*@media screen and (max-device-width: 800px)*/
	@media screen and (max-width: 1024px) {
		.sidebar-right {
			padding: 1.5rem;
		}
	}

/* SIDEBAR RIGHT TITLE */
	/*---- desktop / tablet ----*/
	.sidebar-right h3,
	.sidebar-right h2 {
		display: block;
		margin-bottom: 1.111rem;
	}
	
	/*---- mobile ----*/
	@media screen and (max-width: 1024px) {
		.sidebar-right h3,
		.sidebar-right h2 {
			padding:0 0 0.5rem 0;
			border-bottom: 1px solid #e0e0e0;
			margin:0 0 0.5rem 0;
		}
	}
	

.sidebar-right ul {
}

	/*---- mobile ----*/
	@media screen and (max-width: 1024px) {
		.sidebar-right ul {
			column-width:10rem;
			column-gap:2rem;
			column-rule:1px solid #e0e0e0;
		}
	}


.sidebar-right li {
	padding:0.5rem 0 0.5rem 0;
	border-top:1px solid #e0e0e0;
}

	/*---- mobile ----*/
	@media screen and (max-width: 1024px) {
		.sidebar-right li {
			border-top: 0;
		}
	}





/*------------------------FOOTER-----------------------*/

footer {
    display:block;
    background:#38414c;
    width:100%;
	background-image:url('//westmontlibrary.org/wp-content/uploads/wpl-logo_footer-bkg.svg');
	background-size:cover;
	background-color:#38414c;
	color:#dcdcdc;
}

	/*---- mobile ----*/
	@media screen and (max-width: 800px) {
		footer {
			background-position: 95% bottom;
		}
	}
	
#footer-container {
	flex-direction:row;
	padding:2.5rem 3rem 0 3rem;
}

	/* ---- narrow ---- */
	@media screen and (max-width: 1366px) {
		#footer-container {		
			padding:2.5rem 2rem 0 2rem;
		}
	}
	
	/* ---- narrower ---- */
	@media screen and (max-width: 1200px) {
		#footer-container {		
			padding:2.5rem 1.5rem 0 1.5rem;
		}
	}

	/* ---- tablet ---- */
	@media screen and (max-width: 1024px) {
		#footer-container {		
			padding:2rem 2rem 0 2rem;
		}
	}

	/* ---- mobile ---- */
	@media screen and (max-width: 800px) {
		#footer-container {
			flex-direction:column;
		}
	}

.footer {
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
}

/* ---- mobile ---- */
@media screen and (max-width: 1024px) {
	.footer {
        flex-direction:column;
	}
}

.footer p {
	color:#dcdcdc;
}



.footer-column {
    flex-basis:content;
	flex-grow:0;
    padding:0 3rem 3rem 0rem;
}

.footer-column:last-of-type {
	flex-grow:1;
	max-width:30rem;
}
	
	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		.footer-column {
			padding:0 0 2.5rem 0;
			flex-basis:auto;
		}
	}


/* headers */
.footer h2 {
	font-size:1.333rem;
	color: #f1f1f1;
}

.footer .sub-section {
	padding: 0.5rem 0 0 0;
}

.footer .sub-section li {
	display: flex;	
	flex-direction:row;
	justify-content:space-between;
	list-style:none;
	white-space:pre;
	max-width:16rem; /* prevent hours from getting too far away */
	flex-wrap:wrap; /* for scaling text but not zoom */
}

.footer ul.sub-section > li > p + p {
	padding: 0 0 0 1rem;
}

ul.socialmedia {
	width:100%;
	display:flex;	
	flex-direction:row;
	justify-content:flex-start;
	margin:1rem 0 0 0;
}

.teen-social ul.socialmedia {
	width:unset;
	margin:0;
}

.socialmedia li {
	margin:0 0.5rem 0 0;
}

.socialmedia a {
	font-weight:normal;
	text-decoration:none!important;
	border:0;
}

.socialmedia a::before {
	font-family: "wplicons";
	font-size:1.5rem;
	padding:0.5rem;
	color:#dcdcdc;
	border-radius:100%;
	transition:250ms linear;
}

.teen-social .socialmedia a::before {
	color:#0073bb;
}

.socialmedia a:hover::before,
.socialmedia a:focus-visible::before {
	color: #f1f1f1;
	background:#0073bbaa;
}

.teen-social .socialmedia a:hover::before,
.teen-social .socialmedia a:focus-visible::before {
	color: #f1f1f1;
	background:#0073bb;
}

		
.socialmedia.facebookicon:before {
	content: "\e499";
}

.socialmedia.instagramicon:before {
	content: "\ea92";
}

.socialmedia.youtubeicon:before {
	content: "\e900";
}

.socialmedia.tiktokicon:before {
	content: "\e902";
}

.socialmedia.emailicon:before {
	content: "\1f582";
}

/* ----------------------- end footer --------------------- */






/*-----------MAILCHIMP ENEWSLETTER SUBSCRIPTION--------*/


#mc_embed_signup h2 {
	margin: 0 0 0.75rem 0;
}

/* includes label and input pair */
	div.mc-field-group {
		/*height: 2rem;*/ /* remove for text scale but not zoom */
		margin: 1rem 0;
		width: 100%;
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		align-items:center;
	}
	
	/*---- mobile ----*/
	@media screen and (max-width: 1024px) {
		div.mc-field-group {
			height: auto;
			flex-direction:column;
			align-items:flex-start;
		}
	}
	
	/* select newsletter */
	div.mc-field-group.input-group {
		height: auto;
		flex-direction:column;
		align-items:unset;
	}
	
	.mc-field-group.input-group li {
		display:flex;
		flex-direction:row;
		padding:0.5rem 0 0 0;
	}

	div.mc-field-group label {
		margin-right:1rem;
	}
	
	div.mc-field-group.input-group label {
		width:80%;
		padding-left:1rem;
		font-weight:normal;
	}

	div.mc-field-group input {
	}

	div.mc-field-group input.email,
	div.mc-field-group input[type="text"] {
		height: 2rem;
		min-width:70%;
		margin:0.333rem 0 0 0;
	}
	
	/*---- mobile ----*/
	@media screen and (max-width: 1024px) {
		div.mc-field-group input.email,
		div.mc-field-group input[type="text"] {
			width:100%;
		}
	}

/* SUBSCRIBE button */
	#mc_embed_signup input[type="submit"] {
		margin: 1rem 0 0 0;
		width: 100%;
	}

#mce-responses {
	font-family: ProbaPro, Calibri, sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 133%;
}



/* ------------------ NON RESIDENT CALCULATOR ----------------------*/

.nonresident-container {
	width: 100%;
	display: block;
	margin:1.5rem 0 3rem 0;
	border:1px solid #dcdcdc;
}

div.nonresident {
	text-align: center;
	padding: 20px;
	height: 100%;
	position: relative;
}

.inputside {
	background-color: #f8f8f8;
}

.inputside:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #f8f8f8;
	border-width: 12px;
	margin-left: -12px;
	z-index:10;
}

.outputside {
	background-color: #efefef;
}

.nonresident-inputs {
	display:flex;
	flex-direction:row;
	justify-content:center;
	flex-wrap:wrap;
	gap:0.25rem;
	margin:0.5rem 0 0 0;
}

.nonresident div.input-set {
	display:flex;
	flex-direction:row;
	justify-content:center;
	
	flex-basis:100%;
	max-width:18.25rem; /* twice max button width + gap */
}

.nonresident div.input-set.button-set {
	gap:0.25rem;
}

.nonresident p.input-label {
    border:2px solid #a2a6ab;
	margin:0;
    padding:0.333rem;
    background:white;
	color:#38414c;
}

.nonresident p.input-label.dollar {
	border-right: 0;
}

.nonresident p.input-label.permonth {
	border-left: 0;
}

.nonresident input {
	margin:0;
}

.nonresident input[type="text"] {
	flex-grow:1;
	flex-shrink:1;
}

.nonresident input[type="button"],
.nonresident input[type="reset"] {
	padding:0.333rem 0.5rem;
	font-size: 1rem;
	height:unset;
	flex-basis:40%;
	flex-grow:1;
	max-width:9rem;
}

.nonresident input[type="button"] {
	color:white;
	background:#0073bb;
	border-color:#0073bb;
}

.nonresident input[type="button"]:focus-visible {
	color:#0073bb;
	background:white;
}

div.calc-output {
	display:flex;
	flex-direction:row;
	justify-content:center;
}

p.outputbox {
	border:2px solid #a2a6ab;
	border-radius:3px;
	padding:0.333rem 0.5rem;
	margin:0.5rem 0 0 0;
	background:#f1f1f1;
	color:#535a65;
	min-width:8rem;
	box-sizing:content-box;
}

p.outputbox.errorbox {
	border-color: #d0222c;
	background:#ffefef;
	color:#b1020c;
}

p.outputbox.resultbox {
	color:#38414c;
	font-weight:bold;
	border-color:#38414c;
	background:white;
}

/* ------------------ END NON RESIDENT CALCULATOR ----------------------*/








/* EMBEDS */

iframe.googleform {
	width: 100%;
	height: 1000px;
}

iframe.googleform body {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}



.post .row {
	display: flex;
	flex-direction: row;
	padding: 1rem 0;
	justify-content: space-between;
	align-items: center;
}

	/*---- mobile ----*/
	@media screen and (max-width: 800px) {
	.post .row {
			flex-direction: column;
			padding: 0;
		}
	}

.post .row .normal {
	flex-basis: 55%;
	flex-grow: 0;
}

.post .row .normal ul:not(.key) > li {
	padding-left: 0 !important;
}

.post .row .normal ul:not(.key) > li:before {
	display: none !important;
}

.post .row .pull {
	flex-basis: 40%;
	flex-grow: 0;
	/*padding: 1rem;
	border-top: 6px solid #1F9AE5;
	border-bottom: 6px solid #1F9AE5;*/
}

/*---- mobile ----*/
	@media screen and (max-width: 800px) {
	.post .row .normal {
			width: 100%;
			padding: 0;
		}
	.post .row .pull {
			width: 100%;
			/*padding: 1rem 0;*/
			margin: 1rem 0;
		}
	}

.post .row .pull p {
	font-size: 1.1rem;
}

.post .row .pull p span.highlight {
	font-weight: bold;
	font-style: italic;
	color: #1B87c9;
}

.post .row .pull img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* ----------------------- Book Recs feat nav styles --------------------- */

.post-excerpt-content {
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	flex-grow:1;
}

.post.its h3 span.excerpt-author,
span.excerpt-author {
	font-weight:normal;
}

.its ul.genre-list,
.featurednav ul.genre-list {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
}

.its ul.genre-list {
	/*padding: 0 1rem;*/
}

.its ul.genre-list li,
.featurednav ul.genre-list li {
	display: inline-block;
	margin: 0.2rem 0.2rem 0 0;
	color: white;
}


ul.genre-list li::before {
	display: none !important;
}	

ul.genre-list li.day-week {
	background: #38414c;
}

ul.genre-list li strong {
	color: white;
}

ul.genre-list li a {
	display:inline-block;
	padding: 0.2rem 0.4rem !important;
	font-size:0.9rem;
	color: white !important;
	cursor: pointer;
	border:0 !important;
	text-decoration:none !important;
}

ul.genre-list li a:hover,
ul.genre-list li a:focus-visible {
	background:black;
}

/*------ ageranges ------ */

.adult {
	background:#3c6eb6;
	border-color:#3c6eb6;
}

.board-book-ages-0-3 {
	background:#bb4688;
	border-color:#bb4688;
}

.picture-book {
	background:#c64f29;
	border-color:#c64f29;
}

.early-reader-gr-1-2 {
	background:#6e00a0;
	border-color:#6e00a0;
}

.beginning-chapter-gr-2-3 {
    background:#538307;
	border-color:#538307;
}

.intermediate-chapter-gr-3-5 {
    background:#1e8843;
	border-color:#1e8843;
}

.middle-grade-gr-5-8 {
	background:#783bb5;
	border-color:#783bb5;
}

.teen-gr-6-12,
.young-adult,
.young-adults {
	background:#027b8f;
	border-color:#027b8f;
}

.youth-teen-multiple-ages {
	background:#8e2689;
	border-color:#8e2689;
}

.no-age {
	background: rgb(160,0,130);
	border-color: rgb(160,0,130);
}

/* ------ genres ------ */

.adventure-thriller,
.action-adventure,
.espionage-and-terrorism,
.survival-stories,
.war-stories {
	background:#960096 !important;
}

.post-header-overlay.adventure-thriller {
	background:#96009699 !important;
}

.contemporary,
.abuse,
.animals-contemporary,
.art-music,
.coming-of-age,
.cooking-food,
.crimes-legal-issues,
.death,
.disability-illness,
.drugs-alcohol,
.ethnic-racial-identity,
.faith-religion,
.family,
.fostering-adoption,
.friendship,
.gender-sexual-identity,
.homelessness-runaways,
.lgbtq,
.mental-illness,
.contemporary-politics-government,
.social-political-activism,
.sports-games,
.teen-pregnancy-parenting,
.theater,
.violence-bullying,
.contemporary-war,
.social-justice
 {
	background:#2a43bb !important;
}

.post-header-overlay.contemporary {
	background:#2a43bb99 !important;
}

.fantasy,
.fantasy-alternate-worlds,
.animals,
.epic-fantasy,
.fairy-tales,
.magic-and-wizards,
.fantasy-superheroes,
.myth-legend,
.urban-fantasy {
    background:#12873b !important;
}

.post-header-overlay.fantasy {
	background:#12873b99 !important;
}

.historical,
.mystery-historical,
.history,
.romance-historical,
.twentieth-century,
.twentieth-century-north-america,
.age-of-exploration,
.ancient,
.biblical,
.industrial-revolution,
.middle-ages,
.pre-1900s-north-america
 {
	background:#005050 !important;
}

.post-header-overlay.historical {
	background:#00505099 !important;
}

.humor,
.dark-comedy,
.satire,
.slapstick,
.spoof,
.contemporary-humor,
.humorous-horror {
    background:#df2a5c !important;
}

.post-header-overlay.humor {
	background:#df2a5c99 !important;
}

.multicultural,
.africa,
.african-american,
.americans-abroad,
.asia,
.asian-american,
.australia-new-zealand,
.europe,
.latin-america,
.latino-american,
.native-american,
.north-america,
.south-america {
	background:#9e0000 !important;
}

.post-header-overlay.multicultural {
	background:#9e000099 !important;
}

.mystery,
.mystery-contemporary,
.crime-and-law,
.suspense,
.cozy {
	background:#8c005e !important;
}

.post-header-overlay.mystery {
	background:#8c005e99 !important;
}

.nonfiction,
.animals-pets,
.anthology,
.arts-culture,
.biography-memoir,
.diy-crafts,
.economics-social-sciences,
.essays,
.health-medicine,
.language-literature,
.nonfiction-politics-government,
.religion,
.science,
.technology,
.nonfiction-war,
.environmental {
	background:#1e3c64 !important;
}

.post-header-overlay.nonfiction {
	background:#1e3c6499 !important;
}

.paranormal-horror,
.angels-demons,
.ghosts,
.occult,
.out-of-body-experiences,
.psionic-powers,
.superheroes,
.unexplained-phenomena,
.vampires,
.werewolves,
.zombies {
	background:#141414 !important;
}

.post-header-overlay.paranormal-horror,
.post-header-overlay.paranormalhorror {
	background:#14141499 !important;
}

.romance,
.romance-contemporary,
.romance-romance
 {
	background:#c80028 !important;
}

.post-header-overlay.romance {
	background:#c8002899 !important;
}

.play-and-learning {
	background:#005ac8 !important;
}

.post-header-overlay.play-and-learning {
	background:#005ac899 !important;
}

.science-fiction,
.aliens,
.science-fiction-alternate-worlds,
.bioengineering,
.cyberpunk,
.dystopia-utopia,
.hard-sci-fi,
.post-apocalyptic,
.space,
.steampunk,
.science-fiction-time-travel,
.virtual-reality,
.fantasy-time-travel,
.robots
 {
	background:#480880 !important;
}

.post-header-overlay.science-fiction {
	background:#48088099 !important;
}


.short-stories {
	background:#5a7000 !important;	
}

.post-header-overlay.short-stories {
	background:#5a700099 !important;
}

.genre {
	opacity: 0.9; 
}


/*--- Formats ---*/

.book,
.graphic-novel,
.ebook-hoopla,
.ebook-libby,
.ebook-overdrive,
.graphic-novel-comics-plus,
.graphic-novel-hoopla,
.graphic-novel-libby,
.graphic-novel-overdrive {
	background:#6f55c4;
}

ul.format-list li.book::marker,
ul.format-list li.graphic-novel::marker,
ul.format-list li.ebook-hoopla::marker,
ul.format-list li.ebook-libby::marker,
ul.format-list li.ebook-overdrive::marker,
ul.format-list li.graphic-novel-comics-plus::marker,
ul.format-list li.graphic-novel-hoopla::marker,
ul.format-list li.graphic-novel-libby::marker,
ul.format-list li.graphic-novel-overdrive::marker {
	color:#6f55c4;
}

.audiobook,
.audiobook-hoopla,
.audiobook-overdrive,
.audiobook-libby,
.playaway-audiobook {
	background:#2a845b;
}

ul.format-list li.audiobook::marker,
ul.format-list li.audiobook-hoopla::marker,
ul.format-list li.audiobook-overdrive::marker,
ul.format-list li.audiobook-libby::marker,
ul.format-list li.playaway-audiobook::marker {
	color:#2a845b;
}

.music,
.music-cd,
.music-hoopla,
.music-libby,
.music-overdrive {
	background:#ba3bba;
}

ul.format-list li.music::marker,
ul.format-list li.music-cd::marker,
ul.format-list li.music-hoopla::marker,
ul.format-list li.music-libby::marker,
ul.format-list li.music-overdrive::marker {
	color:#ba3bba;
}

.movie,
.movie-dvd,
.movie-hoopla,
.movie-kanopy,
.movie-libby,
.movie-overdrive,
.tv-series,
.tv-series-dvd,
.tv-series-hoopla,
.tv-series-kanopy,
.tv-series-libby,
.tv-series-overdrive {
	background:#d63e05;
}

ul.format-list li.movie::marker,
ul.format-list li.movie-dvd::marker,
ul.format-list li.movie-hoopla::marker,
ul.format-list li.movie-kanopy::marker,
ul.format-list li.movie-libby::marker,
ul.format-list li.movie-overdrive::marker,
ul.format-list li.tv-series::marker,
ul.format-list li.tv-series-dvd::marker,
ul.format-list li.tv-series-hoopla::marker,
ul.format-list li.tv-series-kanopy::marker,
ul.format-list li.tv-series-libby::marker,
ul.format-list li.tv-series-overdrive::marker {
	color:#d63e05;
}

.video-game {
	background:#cd3c23;
}

ul.format-list li.video-game::marker {
	color:#cd3c23;
}

/*--- Author images ---*/
.author-image img {
	border-radius:50%;
	border:6px solid white;
}

/* ----------------------- end Book Recs styles --------------------- */




/*--- old pill shaped menu ---*/
ul.menu-ys {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap:wrap;
	margin:2rem 0;
}

.menu-ys li,
.post ul.menu-ys > li {
	font-size:1.111rem;
	font-weight:bold;
	margin: 0.3rem;
	white-space:pre;
	display:flex;
	padding:unset;
}

.post ul.menu-ys > li:before {
	display: none;
}

.menu-ys li a {
	border: 4px solid;
	padding:0.75rem 1rem;
	color: #38414c;
	border-radius: 2rem;
}

.menu-ys li a:visited {
	border-bottom: unset;
}
/*--- END old pill shaped menu ---*/


/*--- IG links page ---*/
	#link-page {
		margin: 0;
		padding: 0;
		width: 100%;
		background-color: #38414c;
		background-image: url('//westmontlibrary.org/wp-content/uploads/ig-links-bkg.png');
		background-size:cover;
		display:flex;
		flex-direction:column;
		align-items: center;
		height: 100%;
		min-height: 100vh;
		padding: 0 0 2rem 0;
	}

	#link-page.ig-links-teen {
		background-image: url('//westmontlibrary.org/wp-content/uploads/teen-links-bkg.png');
	}

	#link-page a.logoblock {
		width: 100%;
		margin: 0 0 2rem 0;
		background: white;
	}

	#link-page #wpllogoblock {
		width: 100%;
		height: 5rem;
		float: none;
		background-position:center top;
	}

	.menu-ig-links {
		display:flex;
		flex-direction:column;
		align-items:center;
		text-align: center;
	}

	.menu-ig-links li {
		display: flex;
		width:100%;
		margin: 0.75rem;
	}

	.menu-ig-links.menu-ig-links-teen li {
		/*box-shadow:	0.5rem 0.5rem 0 -0.25rem #44a9ff;*/
	}

	.menu-ig-links li a {
		padding:0.75rem 1rem;
		color: #38414c;
		background:white;
		border: 4px solid;
		font-size: 1.111rem;
		font-weight:bold;
		flex-grow:1;
	}

	.menu-ig-links.menu-ig-links-teen li a {
		
	}
/*--- END IG links page ---*/


.flex-row-100 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

.flex-col-50 {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 50%;
	min-width: 10rem;
}

.flex-col-center {
	padding: 1rem 2rem;
	align-items: center;
	text-align: center;
}

.flex-col-left,
.flex-col-right {
	padding: 0 1.5rem;
}

	/*---- mobile ----*/
	@media screen and (max-device-width: 640px) {
		.flex-col-left,
		.flex-col-right {
			padding: 0.5rem;
		}
	}

.flex-row-img-text {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	width:100%;
	justify-content:center; /*so items are centered when wrapping to col on mobile*/
	align-items:flex-start;
}

.social-row {
	display:flex;
	flex-direction:row;
	justify-content:center;
	flex-wrap:wrap;
}

.social-item {
	height:3rem;
	width:3rem;
	background:#1f9ae5;
	border-radius:100%;
	margin:0.5rem;
}

.social-item img {
	width:100%;
}












/* DELETE ME AND USE .callout instead */
div.callout-container {
	/*margin:1.5rem 0;
	padding:1.5rem;
	border-top:6px solid #1f9ae5;
	border-bottom:6px solid #1f9ae5;
	background:#cbebff;*/
	
	margin:1.5rem 0;
	padding:1.5rem;
	background:#f8f8f8;
	border:2px solid #f1f1f1;
	box-shadow:3px 3px 0 0 #f1f1f1;
}

div.callout-container a {
	color:rgb(15, 80, 120);
}








/*----------------------- expandable summary/details -----------------------*/

details {
	/* original wp styles */
	box-sizing:border-box;
	overflow:hidden;
	
	/* my styles */
	display:flex;
	flex-direction:column;
	background:#f1f1f1;
	border:1px solid #dcdcdc;
	padding:0.75rem 1rem;
	margin:0.5rem 0;
}

ul + details,
p + details {
	margin-top:1rem;
}

details:focus-visible {
	outline:2px solid #38414cbb;
	outline-offset:3px;
}

details.wp-block-details summary,
details.wp-block-details[open] summary {
	display:flex;
	flex-direction:row;
	align-items:center;
	list-style:none;
}

details.wp-block-details summary:focus-visible {
	outline:2px solid #38414cbb;
	outline-offset:3px;
}


details.wp-block-details summary::before {
	display:inline-block;
	font-family:"wplicons";
	content: "\25bc"; /* chevron down */
	font-size:1.1rem;
	margin:0 0.5rem 0 0;
	color:#1f9ae5;
}


details.wp-block-details[open] summary::before {
	content:"\25b2"; /* chevron up */
	color:#38414c;
}

details.wp-block-details summary + * {
	margin-top:1rem;
	border-top:1px solid #dcdcdc;
}

details.wp-block-details summary + p,
details.wp-block-details summary + h2,
details.wp-block-details summary + h3  {
	padding-top:1rem;
}





/* ----------------------- special nav (DB, Makery) -------------------- */

.special-menu-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content:space-between;
	padding: 1rem 5rem;
	z-index: 2;
	box-shadow: 0 0.6rem 1rem -0.5rem rgba(0,0,0,0.25);
	
	background: #0073bb;
}

	/* ---- tablet ---- */
	@media screen and (max-width: 1366px) {
		.special-menu-container {
			padding: 1rem;
		}
	}

	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		.special-menu-container {
			flex-direction:column;
			align-items:flex-start;
		}
	}

/* ----------------------- digital branch styles --------------------- */

.special-menu-container#digitalbranch-menu-container {
	background: #24374e;
}

.special-menu-container#makery-menu-container {
	background: #38414c;
}

.special-menu-header {	
	flex-basis: initial;
	margin: 0 2rem 0 0;
	flex-grow: 0;
	flex-shrink: 1;
	background-size: contain;
	background-position: center;
}

	/* ---- mobile ---- */
	@media screen and (max-width: 1024px) {
		.special-menu-header {
			margin: 0 0 1rem 0;
		}
	}

.special-menu-header a {
	display: block;
}

.special-menu-header a:focus-visible {
	outline:2px solid #dcdcdc;
}

.special-menu-header img {
	vertical-align:bottom;
	width:7rem;
}

#makery-menu-container .special-menu-header img {
	width:8rem;
}

.special-menu-container ul {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	flex-wrap: wrap;
}

	/* ---- mobile ---- */
	@media screen and (max-width: 1024px){
		.special-menu-container ul {
			justify-content: flex-start;
		}
	}
	
.special-menu-container ul li {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	
	/* 10-8-19 test */
	/*padding: 0.5rem 1rem 0.5rem 2rem;*/
	/*8-26-25*/
	/*
	background-repeat: no-repeat;
	background-size: 2rem;
	background-position: left center;*/
	
	padding:0.5rem 1rem 0.4rem 1rem; /* to account for a bottom-border */
	/*8-26-25*/
	padding:0.5rem 1rem;
}

.special-menu-container ul.makery-menu li {
	padding: 0.5rem 1rem;
}

/* ebooks */
.digitalbranch-menu li:first-of-type {
	/*background-image: url('//westmontlibrary.org/wp-content/uploads/db-nav-ebooks.svg');*/
}

/* newspapers & magazines */
.digitalbranch-menu li:nth-of-type(2) {
	/*background-image: url('//westmontlibrary.org/wp-content/uploads/db-nav-magazines.svg');*/
}

/* online learning */
.digitalbranch-menu li:nth-of-type(3) {
	/*background-image: url('//westmontlibrary.org/wp-content/uploads/db-nav-learning.svg');*/
}

/* databases */
.digitalbranch-menu li:nth-of-type(4) {
	/*background-image: url('//westmontlibrary.org/wp-content/uploads/db-nav-magazines.svg');*/
}

/* youth */
.digitalbranch-menu li:nth-of-type(5) {
	/*background-image: url('//westmontlibrary.org/wp-content/uploads/db-nav-youth.svg');*/
}


	/* ---- mobile ---- */
	@media screen and (max-width: 1024px){
		.special-menu-container ul li {
			flex-basis: 40%;
			flex-grow: 1;
			text-align: left;
			justify-content: flex-start;
			padding: 0.5rem 0 0.5rem 2rem;
			padding:0.5rem 0;
		}
	}

.special-menu-container ul li a {
	/*8-26-25*/
	/*color: white;
	text-decoration: none;
	font-weight:bold;
	font-size:1.1rem;*/
	/*8-26-25*/
	/*
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;*/
	white-space: nowrap;
	/*8-26-25*/
	/*padding: 0;*/
	
	/*8-26-25*/
	/*border-bottom:3px solid transparent;*/
}

.special-menu-container ul li a:hover,
.special-menu-container ul li a:focus,
.special-menu-container ul li a:focus-visible {
	
	/*8-26-25*/
	/*
	border-bottom:3px solid #1f9ae5;*/
}


/* gutenberg */
/* keep */
.wp-block-cover {
	padding: 5rem;
	height:100%;
}

/* gutenberg */
/* keep */
	/* ---- mobile ---- */
	@media screen and (max-width: 1024px){
		.wp-block-cover {
			padding: 3rem 2rem;
		}
	}
	
.wp-block-cover__image-background {
	background-color:#38414c;
}
	
.flex-row-25 .wp-block-cover {
	padding:2rem;
}

/* gutenberg */
/* keep */
.wp-block-cover__inner-container  {
	max-width: 60rem;
	height:100%;
}

.wp-block-cover.boxed .wp-block-cover__inner-container  {
	max-width: 40rem;
	padding:2rem;
	background:white;
	box-shadow:0 0 1rem -1rem black;
}

	/* ---- mobile ---- */
	@media screen and (max-width: 1024px){
		.wp-block-cover.boxed .wp-block-cover__inner-container {
			padding: 1.5rem;
		}
	}

.wp-block-cover.boxed.boxed-dark .wp-block-cover__inner-container  {
	background:#38414c;
}


.flex-row-25 .wp-block-cover .wp-block-cover__inner-container {
	display:flex;
	flex-direction:column;
	height:100%; /* need to make it same as parent element */
}

/* gutenberg */
/* keep */
.wp-block-cover__inner-container > div + div {
	margin:1.25rem 0 0 0;
}

/* gutenberg */
/* keep */
.wp-block-cover h1 {
	font-size: 2.5rem;
}
@media screen and (max-width:1024px) {
	.wp-block-cover h1 {
		font-size: 2rem;
}
}

/* gutenberg */
/* keep */
.wp-block-cover p {
	font-size:1.111rem;
}

.wp-block-cover h1 + p {
	margin: 1.25rem 0 0 0;
}

.wp-block-cover h2 + p,
.wp-block-cover p + p {
	margin: 0.75rem 0;
}

.wp-block-cover h2 {
	margin: 1rem 0 0 0;
}

.wp-block-cover p + .flex-row {
	margin: 1.5rem 0 0 0;
}

.wp-block-cover p + h3 {
	margin: auto 0 0 0;
}

#full-container > .wp-block-group {
	display:flex;
	width:100%;
	padding: 2rem;
}

/* ---- mobile ---- */
	@media screen and (min-width: 1366px){
		#full-container > .wp-block-group {
			padding: 3rem;
		}
	}

.wp-block-group .wp-block-group__inner-container {
	/*display:flex;*/
	width:100%;
	max-width:60rem;
	margin: 0 auto;
}


/* gutenberg */
/* keep */
.wp-block-image {
	margin:0;
}

.wp-block-image img {
	height: auto!important;
}

/* gutenberg */
/* keep */
.wp-block-image .aligncenter,
.wp-block-image .alignleft,
.wp-block-image .alignright {
	/*display:unset;*/
	display:flex;
}

.wp-block-image .aligncenter {
	justify-content:center;
}


/* DB */
/* keep */
#searchdigital-container {
	margin:1.5rem 0 0 0;
}

/* DB */
/* keep */
#searchdigital-container .searchbar {
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:stretch;
	float:none;
}

/* DB */
/* keep */
#searchdigital-container .searchbar input[type=text]#searcharg {
	flex-grow:1;
	max-width:25rem;
}

form#searchdigitalform button[type="submit"] {
	width:2.25rem;
}


.wp-block-buttons .wp-block-button {
	margin: 0.5rem 0.5rem 0 0 !important;
}

.wp-block-buttons:last-of-type .wp-block-button {
	margin: 0.5rem 0 0 0 !important;
}



/* table in post (e.g. get a library card page) */
	/* 8-13-25 */
	.wp-block-table td, .wp-block-table th {
		border: 1px solid #a2a6ab;
		padding: 0.75rem;
		vertical-align: top;
	}

	/* 8-13-25 */
	.wp-block-table th {
		background:#ebeced;
		font-weight:bold;
		color:#38414c;
	}

	/* 8-13-25 */
	.wp-block-table td {
		background:#f8f8f8;
	}


/* skip link */
	a.skip-link {
		display:block;
		position:absolute;
		top:5px;
		left:5px;
		z-index:20;
		padding:1rem;
		background: #0073bb;
		border:3px solid #38414c;
		color:white;
		font-size:1.6rem;
	}

	/* Hide skip link when it's not focused */
	a.skip-link:not(:focus) {
		clip: rect(0 0 0 0); 
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap; 
		width: 1px;
	}



/*--- TABS and PANELS
	h/t https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/ for basic styles
--- */

.tabs {
	
}

/* choose */
[role="tablist"] {
	/*min-width: 100%;
	display:flex;
	flex-direction:row;
	margin:1rem 0 0 0;*/
	font-family:ProbaPro;
}

[role="tab"] {
	
}

[role="tab"][aria-selected="true"] {
  
}

[role="tab"][aria-selected="false"] {
}

[role="tab"]:hover,
[role="tab"]:focus-visible {
	
}

[role="tab"]:focus-visible {
	outline:2px solid #38414cbb;
	outline-offset:2px;
}

[role="tabpanel"] {
	flex-grow:1;
}

[role="tabpanel"]:focus-visible {
	outline:2px solid #38414c;
	outline-offset:2px;
}

[role="tabpanel"].is-hidden {
	display: none;
}




/*--- ASPEN SPOTLIGHTS 
	Styles copied directly from spotlight-style-25-09-05.05.css
	to style external tablist
---*/

/* the whole thing */
.ui-tabs.collectionSpotlight.horizontal-carousel,
div.spotlight-tabbed {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	
	/* added 1/5/26 */
	width:100%;
	gap:1rem;
}


/* tablist */
.nav-tabs {
	padding:0;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:stretch;
	min-width:8rem;
	vertical-align:top;
	flex-wrap:wrap;
	
	/*8-19-25*/
	row-gap:0.25rem;
	column-gap:0.5rem;
}

/* for desktop, stack tabs */
@media screen and (min-width: 768px) {
	.nav-tabs {
		flex-direction:column;
		justify-content:flex-start;
		width:15%;
		
		/*8-19-25*/
		gap:0;
	}
}

/* mobile */
.nav-tabs button /* added 1/6/26 */ {
	margin:0;
	padding:0.2rem 0.5rem;
	border:1px solid #dcdcdc;
	background:transparent;
	flex-basis:25%;
	flex-grow:1;
	color:#0073bb;
	font-size:1.222rem;
	font-weight:normal;
	text-align:center;
	white-space:nowrap;
	
	display:flex;
	flex-direction:column;
	justify-content:center;
}


/* orig styles */
.nav-tabs button:hover {
	color:#c93818;
	/*background:#f1f1f1;*/
	background:transparent; /*1-6-26*/
}

.nav-tabs button[aria-selected='true'],
.nav-tabs button[aria-selected='true']:hover
 {
	color: #38414c;
	font-weight:bold;
	background:transparent; /*8-19-25*/
	text-decoration:none;
	outline:none;
}

/* underline all tabs BUT currently active tab when hovering/focusing */
.nav-tabs button[aria-selected='false']:hover,
.nav-tabs button[aria-selected='false']:focus-visible {
	text-decoration:underline solid 2px;
}

/* outline any tab on focus */
.nav-tabs button:focus-visible {
	outline:2px solid #38414c;
	outline-offset:2px;
}


/* NEW styles added 11/23 to accommodate unfixed Aspen error */
/* for desktop, bottom borders */
@media screen and (min-width: 768px) {
	.nav-tabs button {
		margin: 0;
		
		border: 0;
		padding: 0.5rem 0;
		border-bottom: 1px solid #dcdcdc;
		text-align: left;
		flex-basis:unset;
		width:100%;
		flex-grow:0;
	}
	.nav-tabs a:last-of-type,
	.nav-tabs button:last-of-type	{
		border-bottom: 0;
	}
	.nav-tabs a[aria-selected='true'],
	.nav-tabs button[aria-selected='true'] {
		background:transparent;
	}
}
/*--- END ASPEN SPOTLIGHTS ---*/