@charset "UTF-8";
* {
  box-sizing: border-box;
}
body {
  max-width: 960px;
  color: black;
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px auto;
}
img {
  max-width: 100%;
  height: auto;
}
header {
  color: #00008b;
  background-color: #92caff;
  font-weight: bold;
  border: none;
  padding: 10px;
}
.header-photo {
  float: left;
  text-align: center;
  background-color: #92caff;
}
.header-text {
  float: left;
  text-align: left;
  padding-top: 12px;
  padding-left: 20px;
}
.name {
  font-size: 54px;
  word-spacing: .22em;
  letter-spacing: .1em;
}
.subtitile {
  font-size: 28px;
}
a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: purple;
  text-decoration: none;
}
a:hover {
  color: darkblue;
  background-color: none;
  text-decoration: underline;
}
a:active {
  color: darkblue;
  text-decoration: none;
}

/*START: 106 lines of adapted CSS settings for responsive nav from:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown*/
.topnav {
  overflow: hidden;
  background-color: #00008b;
}

.topnav a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #00008b;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #fff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: rebeccapurple;
  color: white;
  font-weight: bold;
}

.dropdown-content a:hover {
  background-color: rebeccapurple;
  color: #fff;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
/*END: 106 lines of adapted CSS settings for responsive nav from:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown*/


h3 {
  font-size: 20px;
  color: #ffffff;
  background-color: #00008b;
  font-weight: bold;
  text-align: center;
  padding: 8px;
}
p {
  line-height: 150%;
  padding-left: 10px;
  padding-right: 10px;
}
.bio-photos {
  width: 28%;
  padding: 5px;
  text-align: center;
  margin-top: 1.3em;
}
.bio-left-photo {
  float: left;
}
.bio-right-photo {
  float: right;
}
.bio-left-text, .bio-right-text {
  width: 72%;
  float: left;
  text-align: left;
}
/*Columns for list on Scores page*/
.scores {
  float: left;
  padding: 0 5px;
  text-align: left;
  line-height: 150%;
}
.scores-large {
  width: 72%;
}
.scores-small {
  width: 14%;
}
.cd-photo {
  width: 34%;
  float: left;
  padding: 5px;
  text-align: center;
}
.cd-text {
  width: 66%;
  float: left;
  text-align: left;
}
.half-page-column {
  width: 50%;
  float: left;
  padding: 5px;
  text-align: left;
}
.half-page-column-centered {
  width: 50%;
  float: left;
  padding: 5px;
  text-align: center;
}
.large-GS-column {
  width: 61%;
  float: left;
  padding: 10px;
  text-align: left;
}
.small-GS-column {
  width: 39%;
  float: left;
  padding: 10px;
  text-align: center;
}
.small-GS-column2 {
  width: 39%;
  float: left;
  padding: 10px;
  text-align: left;
}
.events-left-column {
  width: 50%;
  float: left;
  padding: 0 5px;
  text-align: left;
  line-height: 150%;
}
.events-right-column {
  width: 50%;
  float: left;
  padding: 0 5px;
  text-align: left;
  line-height: 150%;
}
.blue-divider {
  font-weight: bolder;
  color: #00008b;
}
.three-columns-centered {
  width: 33%;
  float: left;
  padding: 5px;
  text-align: center;
}
/* In media query, use display: none to hide these on smller screens */
.large-item {
  display: contents;
}
.clear-column {
  clear: both;
}
.center {
  text-align: center;
}
.center-items {
  display: flex;
  justify-content: center;
}
.caption {
  font-size: 12px;
  line-height: 100%;
}
.partisan-photo {
  max-width: 600px;
  height: 420px;
  background-color: #8E8F90;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid black;
}
/* smaller font indented beneath main entries */
.description {
  display: block;
  margin-left: 24px;
  font-size: 14px;
}
/* for Videos and Lecture+Performance Videos pages */
.video-description {
  display: block;
  margin-left: 160px;
  line-height: 150%;
}
.video-text-indent {
  display: block;
  padding-left: 28px;
}
/* for labeling videos on individual composition pages */
.video-description2 {
  display: block;
  line-height: 150%;
  text-align: center;
}
.fourteen-px {
  font-size: 14px;
}
.publ-photos {
  float: left;
  padding-top: 28px;
  padding-left: 34px;
  padding-right: 34px;
  padding-bottom: 5px;
  text-align: center;
}
/* For Holocaust Remembrance Page: columns 1-5 for Photos and 1-5 for Text */
.rememebrance-photos {
  float: left;
  padding: 5px;
  text-align: center;
  margin-top: 1.3em;
}
.rememebrance-photo-1 {
  width: 13%;
}
.rememebrance-photo-2 {
  width: 23%;
}
.rememebrance-photo-3 {
  width: 21%;
}
.rememebrance-photo-4 {
  width: 34%;
}
.rememebrance-photo-5 {
  width: 40%;
}
.rememebrance-text {
  float: left;
  text-align: left;
}
.rememebrance-text-1 {
  width: 64%;
}
.rememebrance-text-2 {
  width: 45%;
}
.rememebrance-text-3 {
  width: 60%;
}
.rememebrance-text-4 {
  width: 77%;
}
.rememebrance-text-5 {
  width: 66%;
}
/* End of columns for Holocaust Remembrance Page */

/* Columns for Cello Sonata page - sources section */
.source-photo {
  float: left;
  padding: 5px;
  text-align: center;
  margin-top: 1.3em;
  width: 16%;
}
.source-text {
  float: left;
  text-align: left;
  width: 84%
}
.line {
  line-height: 150%;
}
footer {
  color: #00008b;
  background-color: #92caff;
  text-align: center;
  font-size: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
}
/* left footer column */
.footer-column1 {
  width: 42%;
  float: left;
  text-align: left;
  padding-left: 10px;
}
/* center footer column */
.footer-column2 {
  width: 33%;
  float: left;
  text-align: left;
}
/* right footer column */
.footer-column3 {
  width: 25%;
  float: left;
  text-align: center;
}

/*START W3 Schools style for accordion, adapted to my design*/
.accordion {
  background-color: #00008b;
  color: #fff;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
  transition: 0.4s;
}
.active, .accordion:hover {
  background-color: rebeccapurple;
}
.accordion:after {
  content: '\002B';
  color: #fff;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2212";
}
.panel {
  padding: 15 5 0 5px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
/*END W3 Schools style for accordion, adapted to my design*/

@media (max-width: 480px) {
  .header-photo, .header-text, .bio-left-photo, .bio-right-photo, .bio-left-text, .bio-right-text {
    width: 100%;
  }
  .half-page-column, .half-page-column-centered, .cd-text, .large-GS-column, .small-GS-column, .small-GS-column2, .events-left-column, .events-right-column, .publ-photo-column, .rememebrance-photos, .rememebrance-text, .source-photo, .source-text, .scores-large, .three-columns-centered {
    float: none;
    width: 100%;
  }
  .name {
    font-size: 46px;
    letter-spacing: normal;
    word-spacing: normal;
  }
  .subtitile {
    font-size: 22px;
  }
  .footer-column1, .footer-column3 {
    width: 100%;
    padding-bottom: 20px;
  }
  .footer-column2 {
    width: 100%;
    padding-left: 10px;
    padding-bottom: 20px;
  }
  .large-item {
    display: none;
  }
  .cd-photo {
    width: 100%;
    float: none;
    padding: 0;
  }
  .scores-small {
	width: 50%;
	}
}