/* style.css is made available under an MIT open source license (https://opensource.org/licenses/MIT) by Adrian S. Wisnicki. It was developed by Adrian S. Wisnicki developed by Adrian S. Wisnicki and partly adapted from One More Voice (https://onemorevoice.org) which is released under a Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) license (https://creativecommons.org/licenses/by-nc/4.0/). */
/* Also see critical.css for the abbreviated version of this file. Any changes made to this file should also be made, as relevant, in the corresponding place in critical.css */


/* gtk-launch atcl-rsync */

/* 
Colors
Blue (for h1 and links, incl. header buttons): #14485C;
Green (for footer): #114448;
*/

/* Table of Contents */

/* 
Site Elements
Skip to Main Content
Header
Footer
Main Pages
	index.php
	credits.php
	documentation.php
	random.php and search.php
	show_[ ].php pages
	snapshots.php
	statistics.php
	visualizations.php
*/

/* Site Elements */
:root{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: normal;
	line-height: 1.875rem;	
}
*, 
*:before, 
*:after{
	outline: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
button{
	all: unset;
  -webkit-appearance: button;
}
html{
	-ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
}
body{
	font-size: 1rem;
	background-image: url(../images/blue-ornate-vector-pattern.jpg); 
	background-repeat: repeat; 
	margin: 0 auto;
	padding: 0;
	max-width: 100%;
	-moz-osx-font-smoothing: auto;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
@media only screen and (min-width: 768px){
	body{
		font-size: 1.1rem;
	}
}
@media only screen and (min-width: 1200px){
	body{
		max-width: 1366px;
	}
}
header,
main,
aside{
	background: white;
}
nav{
	background: #14485C;
	border: 1px solid #14485C;
	border-bottom: none;
}
@media only screen and (min-width: 768px){
	header,
	nav,
	main,
	aside,
	footer{
		margin: 0 auto;
		max-width: 900px;
	}
}
main{
	padding: 1rem 1rem 2rem;
}
@media only screen and (min-width: 768px){
	article{
		padding: 0 0 1rem;
	}
}
section > section:first-of-type,
section + section{
	margin-top: 2.5rem;
}
section > h3 + section:first-of-type{
	margin-top: 1.5rem;
}
h3{
	font-size: 1.3rem;
	font-family: 'Lora', serif;
	font-weight: 600;
	text-align: center;
}
article > section > h3{
	margin: 0 auto;
	padding-top: 1rem;
}
section section h3{
	margin-top: 0;
}
h4{
	font-size: 1.125rem;
	font-family: 'Lora', serif;
	text-align: left;
	margin: 1.25rem 0 .5rem 0;
	align-self: flex-start;
}
section h4:first-child + section{
	margin-top: 0;
}
section > h4 + section:first-of-type{
	margin-top: 1rem;
}
h5{
	font-size: 1.05rem;
	font-family: 'Lora', serif;
	font-weight: 400;
	font-style: italic;
	margin: 1rem 0 0.5rem 0;
}
ol,
ul{
	text-align: left;
	margin: 0;
	padding: 0 0 0 1.4rem;
	display: inline-block;
}
@media only screen and (min-width: 768px){
	ol,
	ul{
		margin: 0 0 0 1.5rem;
	}
}
dd{
	font-style: italic;
	margin: 0 0 1rem 1rem;
}
dd::before{
	content: '∙';
	margin-right: .5rem;
}
a,
a:visited{
	color:#14485C;
}
a:hover,
a:focus{
	color: #212119;
	outline: 1px solid #212119;
}
img{
	max-width: 100%;
	height: auto;
	display: block;
}
a:hover img,
a:focus img{
	filter: opacity(.8);
}
/* Collapsed row; used with display:flex when needing to break to new row */
.break{
  height: 0;
	flex-basis: 100%;
}
.center{
	text-align: center;
}

/* Skip to Main Content */
/* #skip functionality adapted from https://webaim.org/techniques/skipnav/ */
#skip{
	display: none;
	visibility: hidden;
}
#skip{
	display: block;
	visibility: visible;
}
#skip a{
	font-weight: 600;
	text-decoration: underline;
	color: white;
	background: #285b5f;
	padding: .5rem .75rem;
	position: absolute;
	top: -58px;
	left: 0;
	z-index: 150;
	transition: top .8s ease-out;
	-webkit-transition: top .8s ease-out;
}
#skip a:focus{
	outline-color: transparent;
	top: 0;
	left: 0;
	position: fixed;
	transition: top .4s ease-in;
	-webkit-transition: top .4s ease-in;
}

/* Header */
/* Header display method adapted from https://dev.to/dawnind/3-ways-to-display-two-divs-side-by-side-3d8b and https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/ and, most importantly, https://stackoverflow.com/a/29488710 */
/* header container */
header{
	text-align: center;
	padding: 1rem;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}
@media only screen and (min-width: 768px){
	header{
		padding: 1rem 2rem;
		flex-wrap: nowrap;
	}
}
/* header image */
header img{
	border: 3px solid #212119;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius:50%; 
	margin: 0;
	width: 125px;
	height: 125px;
	flex-basis: 125px;
}
@media only screen and (min-width: 480px){
	header img{
		width: 140px;
		height: 140px;
		flex-basis: 140px;
	}
}
@media only screen and (min-width: 624px){
	header img{
		width: 150px;
		height: 150px;
		flex-basis: 150px;
	}
}
@media only screen and (min-width: 768px){
	header img{
		width: 160px;
		height: 160px;
		flex-basis: 160px;
	}
}
/* title-subtitle container */
header span{
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-basis: calc(100% - 125px - 3rem);
}
@media only screen and (min-width: 480px){
	header span{
		width: calc(100% - 140px - 2rem);
		align-items: center;
		gap: .5rem;
	}
}
@media only screen and (min-width: 624px){
	header span{
		width: calc(100% - 150px - 2rem);
	}
}
@media only screen and (min-width: 768px){
	header span{
		padding-left: 1rem;
		width: calc(100% - 160px - 2rem);
	}
}
@media only screen and (min-width: 992px){
	header span{
		padding-left: inherit;
		gap: 0;
	}
}
/* site title */
header h1{
	font-size: 2.3rem;
	font-family: 'MonteCarlo', serif;
	text-align: left;
	line-height: 1.2em;
	margin: 0;
}
@media only screen and (min-width: 480px){
	header h1{
		font-size: 2.8rem;
		width: 100%;
	}
}
@media only screen and (min-width: 624px){
	header h1{
		font-size: 3.6rem;
		width: 100%;
	}
}
@media only screen and (min-width: 768px){
	header h1{
		font-size: 3.9rem;
	}
}
@media only screen and (min-width: 992px){
	header h1{
		font-size: 4.3rem;
	}
}
header h1 a,
header h1 a:visited{
	text-decoration: none;
	color: #14485C;
}
header h1 a:hover,
header h1 a:focus{
	text-decoration: underline;
	background: none;
	outline: none;
}
/* site subtitle */
header h2{
	font-size: 1.05rem;
	line-height: 1.5em;
	margin: 0;
}
@media only screen and (min-width: 480px){
	header h2{
		text-align: left;
	}
}
@media only screen and (min-width: 624px){
	header h2{
		font-size: 1.2rem;
	}
}
@media only screen and (min-width: 992px){
	header h2{
		font-size: 1.3rem;
	}
}
/* subtitle for different responsive sizes */
.subtitle{
	display: none;
	visibility: hidden;
}
@media only screen and (min-width: 480px){
	.subtitle{
		margin: 0;
		width: 100%;
		display: block;
		visibility: visible;
	}
	.alt-subtitle{
		display: none;
		visibility: hidden;
	}
}
@media only screen and (min-width: 992px){
	.subtitle{
		margin: 1rem 0 0 0;
	}
}
/* site navigation container */
nav{
	padding: 0 1rem;
}
@media only screen and (min-width: 480px){
	nav{
		clear: both;
		margin: 0 auto;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		flex-basis: 100%;
	}
}
/* site navigation */
nav ul{
	font-size: .95rem;
	list-style: none;
	margin: 0;
	padding: 0;
	display: -webkit-flex;
  display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
nav li{
	background: white;
	border: 1px solid #14485C;
	/* The following negative margins prevent overlapping borders from showing as double. See https://stackoverflow.com/questions/12692089/preventing-double-borders-in-css */
	margin-top: -1px;
	margin-left: -1px;
	padding: 2px 16px;
}
nav li a,
nav li a:visited{
	font-weight: 600;
	text-decoration: none;
	color: #212119;
	width: 100%;
	height: 100%;
	display: block;
}
nav li:hover,
nav li:focus-within{
	border: 1px solid #14485C;
	background: #14485C;
	outline: 1px solid white;
}
nav li:hover a,
nav li:focus-within a{
	color: white;
	background: none;
	outline: none;
}

/* Page Citation */
aside#citation p{
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	-ms-word-break: break-all;
}
aside#citation{
	text-align: center;
	margin: 2.5rem 0 0;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
aside#citation h4{
	margin-top: 0;
}
aside#citation p{
	text-align: left;
	margin: 0;
}

/* Footer */
footer{
	font-size: 1rem;
	color: white;
	background: #114448;
	padding: 1.5rem 1rem;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
@media only screen and (min-width: 768px){
	footer{
		padding: 1.5rem 2rem;
	}
}
/* site sections */
footer ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
footer li{
	margin: .25rem .6rem;
}
/* credit-copyright line */
footer p{
	text-align: center;
	margin: 1rem 0;
	padding: 0;
}
/* footer elements */
footer a,
footer a:visited{
	color: white;
}
footer a:hover,
footer a:focus{
	color: #114448;
	background: white;
}
footer .flex-break{
	display: none;
	visibility: hidden;
}
@media only screen and (min-width: 768px){
	footer .flex-break{
		height: 0;
		flex-basis: 100%;
		display: block;
		visibility: visible;
	}
}

/* Main Pages */
/* index.php */
#byline p{
	text-align: center;
	margin: 0;
	padding: 1rem 0 .75rem;
}
/* two-column layout */
#index-columns section > section:first-of-type,
#stats-columns section > section:first-of-type{
	margin-top: 0;
}
#index-columns,
#stats-columns{
	margin-top: 0;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
}
@media only screen and (min-width: 768px){
	#stats-columns{
		flex-direction: row;
		gap: 2rem;
	}
	#stats-columns > section{
		margin-top: 1.5rem;
		width: calc(50% - 3rem);
	}
}
@media only screen and (min-width: 992px){
	#index-columns{
		flex-direction: row;
		gap: 2rem;
	}
}
/* Combines middle sections of this page into two columns. Looks much better on iPad */
@media only screen and (min-width: 768px){
	#index-columns .linked-columns{
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: flex-start;
		gap: 2rem;
	}
	#linked-2{
		margin-bottom: 2rem;
	}
	#linked-1 > section,
	#linked-2 > section{
		width: calc(50% - 3rem);
	}
}
@media only screen and (min-width: 992px){
	#index-columns .linked-columns{
		display: inherit;
		flex-wrap: inherit;
		justify-content: inherit;
		gap: inherit;
	}
	#linked-1{
		margin-top: inherit;
	}
	#linked-2{
		margin-bottom: inherit;
	}
	#linked-1 > section,
	#linked-2 > section{
		width: inherit;
	}
}
#index-columns > section:first-child,
#stats-columns > section:first-child{
	margin-top: 1.5rem;
}
@media only screen and (min-width: 992px){
	#index-columns > section:last-child{
		margin-top: 1rem;
	}	
}
/* elements in two-column layout */
#index-columns section{
	margin-top: 0;
}
#index-columns .linked-columns h4{
	margin-top: 0;
}
#index-columns #authors,
#index-columns #titles,
#index-columns #related,
#index-columns #twitter-feed,
#index-columns #updates{
	margin-top: 2.5rem;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
#scholarship{
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media only screen and (min-width: 992px){
	#index-columns #twitter{
		margin-top: 0;
	}
}
#twitter-feed{
	margin-bottom: 0;	
}
#updates + p{
	margin-top: 0;
}
#social-media-buttons{
	margin: 0;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}
#social-media-buttons a{
	text-align: center;
	padding: .5rem;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
}
#social-media-buttons img{
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 11px;
	margin: 0 auto;
	width: 55px;
	height: 55px;
}
/* credits.php */
.credits{
	text-align: left;
}
.credits h4{
	text-align: left;
}
.credits ul{
	text-align: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* For #acknowledgements-list see show_[].php section */
/* documentation.php */
section[aria-labelledby="documentation"],
section[aria-labelledby="documentation"] p,
section[aria-labelledby="documentation"] h5{
	text-align: left;
}
section[aria-labelledby="documentation"] table,
section[aria-labelledby="fiction-titles"] table,
section[aria-labelledby="illustrated"] table{
	text-align: left;
	width: 100%;
	display: table;
}
section[aria-labelledby="documentation"] td,
section[aria-labelledby="fiction-titles"] td,
section[aria-labelledby="illustrated"] td{
	vertical-align: top;
	padding: .5rem .35rem;
}
section[aria-labelledby="menu"]{
	text-align: center;
	border: 1px solid gray;
	padding: 1rem 2rem;
	display: inline-block;
}
section[aria-labelledby="menu"] h4{
	margin-top: 0;
}
section[aria-labelledby="menu"] ol ol{
	list-style: lower-alpha;
	margin-left: 1.5rem;
	padding: 0;
	display: block;
}
/* random.php and search.php */
/* page framework */
section[aria-labelledby="search"],
section[aria-labelledby="sample"]{
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* layout of text, search boxes, and button */
form,
form p{
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
/* layout of text */
section[aria-labelledby="results"],
section[aria-labelledby="random"]{
	align-self: flex-start;
}
section[aria-labelledby="results"] h4,
section[aria-labelledby="random"] h4{
	margin-top: 0;
}
form p{
	font-size: .95rem;
	margin: 0;
}
form[action="random.php"] p,
form[action="view_serials.php"] p{
	flex-direction: column;
}
@media only screen and (min-width: 480px){
	form[action="view_serials.php"] p{
		flex-direction: row;
	}
}
@media only screen and (min-width: 624px){
	form[action="random.php"] p{
		flex-direction: row;
		flex-wrap: wrap;
	}
}
@media only screen and (min-width: 768px){
	form p{
		flex-direction: row;
		flex-wrap: wrap;
	}
}
p input{
	font-size: 1em;
	font-family: 'Source Sans Pro',sans-serif;
	margin: .75rem;
}
p button{
	margin: .75rem;
}
/* layout of search boxes */
/* note: placeholder is for prompt text in input boxes; default made darker for accessibility */
/* Chrome, Firefox, Opera, Safari 10.1+ */
::placeholder{
  color: #212119;
  opacity: 1; /* Firefox */
}
/* Internet Explorer 10-11 */
:-ms-input-placeholder{ 
  color: #212119;
}
/* Microsoft Edge */
::-ms-input-placeholder{
  color: #212119;
}
input{
	padding: .35rem;
	max-width: 288px;
}
input[type="text"]:hover,
input[type="text"]:focus,
input[type="number"]:hover,
input[type="number"]:focus,
input[type="date"]:hover,
input[type="date"]:focus{
	outline: 1px solid #14485C;
}
/* layout of button */
button[type="submit"]{
	font-weight: 600;
	line-height: normal;
	background: white;
	border: 1px solid gray;
	padding: .35rem;
	display: block;
	visibility: visible;
}
button[type="submit"]:hover,
button[type="submit"]:focus{
	color: white;
	background: #14485C;
}
/* show_[ ].php pages */
/* set up main pages */
.show-page{
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.show-page h3{
	margin-bottom: 1rem;
}
.show-page p{
	margin: .5rem 0;
}
.show-page ol,
.show-page ul,
.show-page li{
	margin-bottom: 0;
}
/* Adapted from https://stackoverflow.com/questions/43359758/html-css-responsive-vertical-listing-in-multiple-columns-with-floating-div */
/* See https://www.fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox/ for another solution that doesn't work here but may be useful elsewhere */
/* Note that the children <a> tags much be nested in additional <span> tags for this to work.  */
.show-columns,
.view-columns,
ul#acknowledgements-list{
	text-align: center;
	column-width: calc(100vw - 3rem);
	/* Width of screen minus padding */
	display: block;
}
@media only screen and (min-width: 480px){
	.show-columns,
	.view-columns,
	ul#acknowledgements-list{
		column-width: calc(50vw - 3rem);
	}
}
@media only screen and (min-width: 624px){
	.view-columns,
	ul#acknowledgements-list{
		column-width: calc(33.33vw - 4rem);
	}
}
@media only screen and (min-width: 768px){
	.show-columns{
		column-width: calc(33.33vw - 4rem);
	}
}
/* Numbers for 992 and 1200 a bit arbitrary; the ideal is to take max-width (900px), subtract padding, then divide by number of desired columns. Result is column-width, but that seems not to work and so that number is here reduced 16px further */
@media only screen and (min-width: 992px){
	.show-columns,
	.view-columns,
	ul#acknowledgements-list{
		column-width: 260px;
	}
}
.show-columns span,
.view-columns span,
ul#acknowledgements-list li{
	text-align: left;
	line-height: 1.6em;
	margin: 0 auto;
	padding: .5rem 0;
  page-break-inside: avoid;   /* Chrome needs this */
  break-inside: avoid-column; /* IE10 and IE11 need this */
	display: block;
}
@media only screen and (min-width: 480px){
	.show-columns span,
	.view-columns span{
		padding: .5rem 1rem;
	}
}
/* snapshots.php */
section[aria-labelledby="snapshots"] ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* statistics.php */
/* See index.php for the coding for two-column layout */
#stats-columns ol,
#stats-columns ul{
	margin: 0;
}
#stats-columns h4{
	margin: 0 0 1rem 0;
}
/* view_[].php */
/* See show_[].php for the coding for three-column layout */
/* abc = alphabetical links to show subsections that appear and bottom of given pages. */
.abc{
	line-height: 0;
	margin-top: 2rem;
	padding-bottom: 1rem;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.abc a,
.abc span{
  line-height: 1rem;
	margin: .25rem;
	padding: .25rem;
}
/* view_genres.php and view_groups.php */
section[aria-labelledby="author-tags"] h4,
section[aria-labelledby="title-tags"] h4{
	margin-top: 2.5rem
}
/* visualizations.php */
/* Google has super complicated CSS; that's why the next section looks the way it does */
/* Add scroll bar so SVG don't spill off the page */
/* See https://css-tricks.com/scale-svg/ for another solution that involves scaling SVGs */
#chart_titles_div,
#chart_volumes_year_div,
#chart_publishers_year_div,
#chart_titlesgender_div,
#chart_serials_div,
#chart_nationalitygender_div,
#chart_occupationgender_div,
#chart_setting_div
{
	border: 1px solid gray;
	margin: 0 .75rem;
	overflow-x: auto !important;
	overflow-y: hidden !important
}
/* positions SVG better than Google does */
/* #chart_titles_div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1),
#chart_volumes_year_div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1),
#chart_publishers_year_div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1),
#chart_titlesgender_div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1),
#chart_serials_div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1){
	left: -45px !important;
}
#chart_nationalitygender_div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1),
#chart_occupationgender_div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1),
#chart_setting_div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1){
	left: -120px !important;
} */
/* Google controls block */
#colFilter_titlesgender_div > div:nth-child(1),
#colFilter_volumes_year_div > div:nth-child(1),
#colFilter_publishers_year_div > div:nth-child(1){
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
}
/* buttons in the Google control block */
#colFilter_titlesgender_div > div:nth-child(1) ul,
#colFilter_volumes_year_div > div:nth-child(1) ul,
#colFilter_publishers_year_div > div:nth-child(1) ul{
	text-align: center;
}
#colFilter_titlesgender_div > div:nth-child(1) ul li,
#colFilter_volumes_year_div > div:nth-child(1) ul li,
#colFilter_publishers_year_div > div:nth-child(1) ul li{
	margin: .5rem;
}
/* Google "Formats" title */
#colFilter_titlesgender_div > div:nth-child(1) > label:nth-child(1),
#colFilter_volumes_year_div > div:nth-child(1) > label:nth-child(1),
#colFilter_publishers_year_div > div:nth-child(1) > label:nth-child(1){
	font-weight: 600;
}
/* Google "Choose a Value" button; also has two nested <div> children */
/* #colFilter_titlesgender_div > div:nth-child(1) > div:nth-child(2) > div:nth-child(1),
#colFilter_volumes_year_div > div:nth-child(1) > div:nth-child(2) > div:nth-child(1),
#colFilter_publishers_year_div > div:nth-child(1) > div:nth-child(2) > div:nth-child(1){
	line-height: 1.6rem;
} */
#colFilter_titlesgender_div > div:nth-child(1) > div:nth-child(2) > div:nth-child(1):hover,
#colFilter_volumes_year_div > div:nth-child(1) > div:nth-child(2) > div:nth-child(1):hover,
#colFilter_publishers_year_div > div:nth-child(1) > div:nth-child(2) > div:nth-child(1):hover,
#colFilter_titlesgender_div > div:nth-child(1) > div:nth-child(2) > div:nth-child(1):focus-within,
#colFilter_volumes_year_div > div:nth-child(1) > div:nth-child(2) > div:nth-child(1):focus-within,
#colFilter_publishers_year_div > div:nth-child(1) > div:nth-child(2) > div:nth-child(1):focus-within{
	filter: invert(1);
}
/* Prevents the "Choose a Value" dropbox from being too wide */
.goog-menu{
	overflow: auto;
	max-width: 12rem;
}
/* Google selection button; also has two <div> children for x and text */
/* #colFilter_titlesgender_div > div:nth-child(1) > div:nth-child(2) > ul:nth-child(2) > li,
#colFilter_volumes_year_div > div:nth-child(1) > div:nth-child(2) > ul:nth-child(2) > li,
#colFilter_publishers_year_div > div:nth-child(1) > div:nth-child(2) > ul:nth-child(2) > li{
	line-height: 1.6rem;
} */
#colFilter_titlesgender_div > div:nth-child(1) > div:nth-child(2) > ul:nth-child(2) > li:hover,
#colFilter_volumes_year_div > div:nth-child(1) > div:nth-child(2) > ul:nth-child(2) > li:hover,
#colFilter_publishers_year_div > div:nth-child(1) > div:nth-child(2) > ul:nth-child(2) > li:hover,
#colFilter_titlesgender_div > div:nth-child(1) > div:nth-child(2) > ul:nth-child(2) > li:focus-within,
#colFilter_volumes_year_div > div:nth-child(1) > div:nth-child(2) > ul:nth-child(2) > li:focus-within,
#colFilter_publishers_year_div > div:nth-child(1) > div:nth-child(2) > ul:nth-child(2) > li:focus-within{
	filter: invert(1);
}