/* Site-wide styling for ArchivedMasters.org */
:root {
	--main-color: #ccf;
	--main-bg-color: #000;
	--main-link-color: #fff;
	--main-visited-color: var(--main-link-color);
	--main-hover-color: #ff0;
	--main-active-color: #aaa;
	
	--topNav-color: var(--main-color);
	--topNav-bg-color: #1f5153;
	--topNav-link-color: var(--main-link-color);
	--topNav-visited-color: var(--topNav-link-color);
	--topNav-hover-color: var(--main-hover-color);
	--topNav-active-color: var(--main-active-color);
	
	--max-text-width: 60rem;
}

* {
  margin: 0;
  padding: 0;
}
h1 {
   color: var(--main-color);
   background-color: var(--main-bg-color);
   text-align: center;
   font-size: 2em;
	margin: 1em auto 0.5em;
}
h2.performance-subtitle {
   color: var(--main-color);
   background-color: var(--main-bg-color);
   text-align: center;
   font-size: 1.5em;
	margin: 0em auto 1.5em;
}

p {
	 margin-bottom: 1em;
}
#main ul {
	list-style-type: disc;
	padding-left: 2em;
	margin: 2em;
}

body {
   color: var(--main-color);
   background-color: var(--main-bg-color);
   text-align: left;
   font-family: verdana, arial, sans-serif;
   line-height:1.25;
}
body.performance-page main {
	/*! margin: 1rem auto; */
	margin: 0 1em;
}
#header {
	text-align:center;
}

a:link { 
   color: var(--main-link-color);
} 
a:visited {
   color: var(--main-visited-color);
} 
a:hover { 
   color: var(--main-hover-color);
}
a:active  {
	color: var(--main-active-color);
}
#home-page-image {
	width:95%;
	height:auto;
}
#footer {
} 

#footerImage {
	width:100%;
	height:auto;
	}
#about-blurb {
	max-width:40rem;
	margin: auto;
}

/* Common Navigation bar at the top of pages. */
nav.topNav {
	color: var(--topNav-color);
	background-color: var(--topNav-bg-color);
	margin: 1.5rem auto;
	padding: 0.25rem 0.25rem 0.5rem 0.25rem;
	text-align: center;
}

nav.topNav a {
	padding-left:0.5rem;
	padding-right:0.5rem;
}
nav.topNav a:link {
	color: var(--topNav-link-color);
} 
nav.topNav a:visited {
	color: var(--topNav-visited-color);
}
nav.topNav a:hover {
	color: var(--topNav-hover-color);
}
nav.topNav a:active {
	color: var(--topNav-active-color);
}
.performance-title {
	text-align:center;
}
#performance-description {
	max-width: var(--max-text-width);
	/*! text-indent: -2rem; */
	margin: 1.5rem auto;
	width: 100%;
	padding-left: 0;
}
#performance-description ul {
	list-style: none;
  text-indent: -2em;
  padding-left: 2em;
	margin-bottom: 1.5em;
}
#performance-description li {
  margin-bottom: .5rem;
}
#performance-description p {
	 margin-bottom: 1em;
}
.performance-image {
	width:100%;
}
#file-list{
}
ul#file-list {
	list-style:none;
	width:100%;
	max-width: var(--max-text-width);
	padding: 0;
	margin: 0 auto;
	
}
.image-listing,
.file-listing {
	border-top: 1px solid #666;
	max-width: var(--max-text-width);
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 2rem;
	text-indent: -2rem;
}
.image-listing figure {
	text-align: center;
}	
.image-listing figcaption {
	text-align:center;
}
.file-description  {
}

.file-link{
}
.file-link a {
	text-decoration: none;
}
.file-listing audio {
	height: 1.75rem;
	display: block;
	width: 90%;
	text-indent: 0rem;
	margin-top: 0.5rem;
}

/* (Alternate method to hide)
.visually-hidden { 
	color:rgba(0,0,0,0); 
	font-size:1px; 
	height:1px;
	width:1px;
	overflow: hidden;
}
*/

/* Ref: https://css-tricks.com/comparing-various-ways-to-hide-things-in-css/ */
.visually-hidden:not(:focus):not(:active) {
  clip: rect(0, 0, 0, 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

/* style the download icon */
a .file-link-icon {
	--color-download-icon:#008000;
	--color-download-icon-visited:var(--color-download-icon);
	--color-download-icon-hover:yellow;
	--color-download-icon-active:#daa506;
}
a:link .file-link-icon  {
  color:var(--color-download-icon); 
}
a:visited .file-link-icon  {
	color:var(--color-download-icon-visited);
}
a:hover .file-link-icon  {
	color: var(--color-download-icon-hover);
}
a:active .file-link-icon {
	color: var(--color-download-icon-active);
}
a .file-link-icon svg {
	font-size: 1.6rem;
	vertical-align: -.25em;
}