/**
 * My Album
 */
body.album h6 {
  display: none;
}

body.album #flipbook details nav ul li {
  background-repeat: no-repeat;
}

body.album #flipbook details nav ul li.album_2 {
  background-image: url("/images/album_2.jpg");
}

body.album #flipbook details nav ul li.album_3 {
  background-image: url("/images/album_3.jpg");
}

body.album #flipbook details nav ul li.album_4 {
  background-image: url("/images/album_4.jpg");
}

body.album #flipbook details nav ul li.album_5 {
  background-image: url("/images/album_5.jpg");
}

body.album #flipbook details nav ul li.album_6 {
  background-image: url("/images/album_6.jpg");
}

body.album #flipbook details nav ul li.album_7 {
  background-image: url("/images/album_7.jpg");
}

body.album #flipbook details nav ul li.album_8 {
  background-image: url("/images/album_8.jpg");
}

body.album #flipbook details nav ul li.album_9 {
  background-image: url("/images/album_9.jpg");
}

body.album #flipbook details nav ul li.album_12 {
  background-image: url("/images/album_12.jpg");
}

body.album #flipbook details nav ul li.album_2:hover,
body.album #flipbook details nav ul li.album_2.selected {
  background-image: url("/images/album_2_on.jpg");
}

body.album #flipbook details nav ul li.album_3:hover,
body.album #flipbook details nav ul li.album_3.selected {
  background-image: url("/images/album_3_on.jpg");
}

body.album #flipbook details nav ul li.album_4:hover,
body.album #flipbook details nav ul li.album_4.selected {
  background-image: url("/images/album_4_on.jpg");
}

body.album #flipbook details nav ul li.album_5:hover,
body.album #flipbook details nav ul li.album_5.selected {
  background-image: url("/images/album_5_on.jpg");
}

body.album #flipbook details nav ul li.album_6:hover,
body.album #flipbook details nav ul li.album_6.selected {
  background-image: url("/images/album_6_on.jpg");
}

body.album #flipbook details nav ul li.album_7:hover,
body.album #flipbook details nav ul li.album_7.selected {
  background-image: url("/images/album_7_on.jpg");
}

body.album #flipbook details nav ul li.album_8:hover,
body.album #flipbook details nav ul li.album_8.selected {
  background-image: url("/images/album_8_on.jpg");
}

body.album #flipbook details nav ul li.album_9:hover,
body.album #flipbook details nav ul li.album_9.selected {
  background-image: url("/images/album_9_on.jpg");
}

body.album #flipbook details nav ul li.album_12:hover {
  background-image: url("/images/album_12_on.jpg");
}

#flipbook nav a {
  display: inline-block;
  width: 100%;
  background-repeat: no-repeat;
  color: transparent;
}

#flipbook nav div {
  display: flex;
  flex-direction: column;
}

body.album #whole-wide-world.page pre {
  margin-left: 2em;
}

body.album h4 {
  width: 100%;
  text-align: center;
}

body.album .recordsrule img {
  margin: 0 2em;
}

#myalbum {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1em;
  gap: 1em;
}

details#album {
  position: fixed;
  top: 1em;
  left: 1em;
}

details#album summary div {
  background: url(../myalbum/images/bg.png) repeat-y;
}

details#album summary {
  cursor: pointer;
}

details#album>nav {
  margin-top: 0;
}

details#album li {
  height: 38px;
}

details#album li:first-child {
  height: 50px;
}

details#album li:last-child {
  height: 20px;
}

details#album li a {
  height: 100%;
}

details#album summary div {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
}

#clickme {
  background: url(bg.png) repeat-y;
  width: 315px;
  height: 24px;
}

details#album[open] .hideme {
  display: none;
}

body.album-intro .page {
  padding: 50px 1em 1em 1em;
}

#square-pegs.page ul {
  text-align: center;
  padding-left: 0;
  list-style-type: none;
}

#whole-wide-world {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Page backgrounds */

#mona.page {
  background: #760A03;
}

#doya.page {
  background: #B9D6E5;
}

#fool.page {
  background: #902714;
}

#fever.page {
  background: url("/myalbum/style/red-leather3.jpg");
  color: white;
}

#barbara-ann.page {
  background: #AC2206;
  color: white;
}

#barbara-ann.page a,
#fool.page a,
#mona.page a,
#square-pegs.page a {
  color: var(--lighter);
}


body.album #mona.page,
body.album #fool.page {
  color: white;
}

#square-pegs.page {
  background: #4d7250;
  color: white;
}

#bebebleu.page {
  background: #75AFBA;
}

#album-intro.page,
#whole-wide-world.page {
  background: url("/myalbum/style/grey.gif");
}


body.album #flipbook article {
  padding: 0;
}

body.album figure {
  border: 1px solid var(--light);
  max-width: 90%;
  border-radius: 5px;
  margin: auto;
  padding: 1em;
}

body.album figure figcaption {
  text-align: left;
  max-width: 750px;
}

body.album #whole-wide-world figure,
body.album #whole-wide-world figure img {
  border: none;
}

body.album #whole-wide-world figure figcaption {
  text-align: center;
}

body.album figure img {
  border: 1px solid var(--light);
}

body.album details {
  padding: 0;
}

body.album table {
  max-width: 95%;
}


body.album img {
  max-width: 80%;
  height: auto;
}

details#album {
  background: url(../myalbum/images/grey.gif) repeat;
  border-radius: 3px;
  padding: 0 1px 1px 0;
  height: fit-content;
}

details#album li {
  width: 315px;
}


@media (min-width: 768px) {


  details#album summary {
    position: fixed;
    background: #EDEDED;
    border-radius: 5px;
  }

  details#album nav {
    margin-top: 1.4em;
  }

  body.album img {
    display: block;
    margin: auto;
  }

  body.album div.player {
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 382px;
    height: auto;
    max-width: 90%;
    margin: auto;
  }

  body.album .page:nth-of-type(2) div.player {
    background: url('/myalbum/images/new-multi-player-bg.png') no-repeat;
  }

  body.album .page:nth-of-type(3) div.player {
    background: url('/myalbum/images/new-multi-player-bg2.png') no-repeat;
  }

  body.album .page:nth-of-type(4) div.player {
    background: url('/myalbum/images/new-multi-player-bg3.png') no-repeat;
  }

  body.album .page:nth-of-type(5) div.player {
    background: url('/myalbum/images/new-multi-player-bg4.png') no-repeat;
  }

  body.album .page:nth-of-type(6) div.player {
    background: url('/myalbum/images/new-multi-player-bg5.png') no-repeat;
  }

  body.album .page:nth-of-type(7) div.player {
    background: url('/myalbum/images/new-multi-player-bg6.png') no-repeat;
  }

  body.album .page:nth-of-type(8) div.player {
    background: url('/myalbum/images/new-multi-player-bg7.png') no-repeat;
  }

  body.album .page:nth-of-type(9) div.player {
    background: url('/myalbum/images/new-multi-player-bg8.png') no-repeat;
  }
}

@media (min-width: 1024px) {
  article>div {
    margin-left: 380px;
  }

  #flipbook>details>nav {
    flex: 0;
    padding: 1em;
    margin-top: 1em;
    max-width: 380px;
  }

  body.album figure img {
    max-width: 500px;
  }

  body.album figure {
    display: flex;
  }

  body.album figure>* {
    flex: 1 1 0;
    padding: 0.5em;
  }

}