/* == Page Layout =========================================================== */

/* -- Page Structure and General Styles ------------------------------------- */

body { /* Page body */
  margin: 0;
  padding: 0;
  border: none;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11pt;
  background: #030303; 
}

@media (min-width: 30rem) { /* Wide viewports... */
  body { /* ...Limit body width */
	  width: 30rem;
	  margin-left: auto;
	  margin-right: auto;
  }
}

header {
	z-index: 9999;
  position: fixed;
  top: 0;
  background: #2c2d33;
  width: 100%;
  height: 10rem;
}

@media (min-width: 30rem) { /* Wide viewports... */
  header {
    width: 30rem;
  }
}

main {
  display: block; /* for IE 9-11 */
  position: relative;
  margin-top: 10rem;
  width: 100%;
  min-height: calc(100vh - 10rem);
  background-color: #030303;       /* <- Track ambient color! */
  background-repeat: no-repeat;
  background-position: center center;
}

.credits {
	font-size: 8pt;
}

/* -- General Styles -------------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

a {/*#68b8e2? #22B424?*/
	color: #00afd3;
	text-decoration: none;
}

a.button {/*#68b8e2? #22B424?*/
  color: #030303;
  background-color: #00afd3;
  text-decoration: none;
  padding: 2px;
}

.error {
  color: red;
}

/* == Music Book Player Layout ============================================== */

/* -- Audio Player Layout --------------------------------------------------- */

audio {
	visibility: hidden;
}

div.audio-player {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 7rem;
  background: #4c4e5a;
  background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
  background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
  background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
  background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
  background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
}

/* -- Audio Player Header Layout -------------------------------------------- */

div.audio-player-header {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 5rem;
}

div.album-info {
  width: 61.8%;
}

div.spectrum-analyzer {
  width: 38.2%;
}

/* -- Album Info Layout -- */

.audio-player-header h1 {
  margin-top: 1rem;
  margin-left: 0.5rem;
  font-weight: bold;
  font-size: 1.3rem;
  color: #ececec;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.audio-player-header h2 {
  margin-left: 0.5rem;
  font-weight: normal;
  font-size: 0.8rem;
  color: #ececec;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

/* -- Audio Player Player Layout -------------------------------------------- */

div.audio-player-player {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 2rem;
}

/* -- MediaElement Layout --------------------------------------------------- */

div.mejs-container { /* Player container */
  width: 100% !important;
  height: 2rem !important;
}

div.mejs-inner { /* Player inner container */
  width: 100% !important;
  height: 100% !important;
}

div.mejs-controls { /* Player controls container */ 
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100% !important;
  height: 100% !important;
}

/* -- Buttons and Indicators -- */ 
.mejs-controls .mejs-button button {
  cursor: pointer;
  display: block;
  text-indent: -9999px;
}
 
.mbp-loop button,
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button,
.mbp-prev button,
.mbp-next button,
.mbp-cnts button,
aside button {
  width: 33px;
  height: 33px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 33px 33px; 
  cursor: pointer;
  display: block;
  text-indent: -9999px;
}

.mbp-loop button { 
  margin-left: 0.35em;
  background-image: url(../img/loop-none.svg);
}

.mejs-controls .mejs-play button {
  background-image: url(../img/play.svg);
}
 
.mejs-controls .mejs-pause button { 
	background-image: url(../img/pause.svg);
}

.mbp-prev button {
  background-image: url(../img/prev-disabled.svg);
  visibility: hidden; /* Made visible by MusicBookPlayer.initialize() */
}

.mbp-next button {
  background-image: url(../img/next-disabled.svg);
  visibility: hidden; /* Made visible by MusicBookPlayer.initialize() */
}

.mbp-cnts button {
  background-image: url(../img/contents-disabled.svg);
  visibility: hidden; /* Made visible by MusicBookPlayer.initialize() */
}

.mejs-time { /* Current time and duration indicators */
	height: 0.9rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.8rem;
  color: #ececec;
}

/* -- Time Rail -- */

.mejs-controls div.mejs-time-rail { /* Time rail container */
	position: relative;
	height: 0.75rem;
}

.mejs-controls .mejs-time-rail span { /* All bars */
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  cursor: pointer;
  -webkit-border-radius: 0px 0px 2px 2px;
  -moz-border-radius: 0px 0px 2px 2px;
  border-radius: 0px 0px 2px 2px;
}
 
.mejs-controls .mejs-time-rail .mejs-time-total { /* Duration bar */
	background: #565860; 
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded { /* Load progress bar */
  background: #7b7d82;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-current { /* Current time bar */
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: #22B424;
  background: -webkit-linear-gradient(top, #22B424 0%, #1C9B1F 100%);
  background: -moz-linear-gradient(top, #22B424 0%, #1C9B1F 100%);
  background: -o-linear-gradient(top, #22B424 0%, #1C9B1F 100%);
  background: -ms-linear-gradient(top, #22B424 0%, #1C9B1F 100%);
  background: linear-gradient(top, #22B424 0%, #1C9B1F 100%);
}

/* -- Time Rail Knob -- */

.mejs-controls .mejs-time-rail .mejs-time-handle {
  display: block;
  width: 1rem;
  height: 1rem;
  top: -0.125rem;
}

/* -- Time Rail Tooltip -- */
.mejs-controls .mejs-time-rail .mejs-time-float { /* Balloon */
  display: none;
  width: 33px;
  height: 23px;
  top: -26px;
  margin-left: -17px;
  background: url(../img/time-box.png);
}
 
.mejs-controls .mejs-time-rail .mejs-time-float-current { /* Text */
  width: 33px;
  display: block;
  left: 0;
  top: 4px;
  font-size: 8pt;
  font-weight: bold;
  color: #666666;
  text-align: center;
}

/* -- Track Controls -------------------------------------------------------- */

div.track-controls {
  width: calc(100% - 0.65rem);
	height: 2.5rem;
	margin-top: 0.25rem;
	margin-right: 0.15rem;
	margin-bottom: 0.25rem;
	margin-left: 0.5rem;
  display: grid;
  grid-template-columns: auto 33px 33px 33px;
  gap: 0.1rem;
  align-items: top;
}

div.track-info {
  width: 100%;
}

div.track-title-container {
	display: flex;
  flex-direction: row;
  align-items: flex-start;
  column-gap: 0.25em;
}

.track-number, .track-number a,
.track-number-separator, .track-number-separator a,
.track-title h1, .track-title h1 a {
	font-weight: normal;
  font-style: normal;
  font-size: 1rem;
  text-decoration: none;
  color: #ececec;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.track-title h2, .track-title h2 a, .part-title {
	font-weight: normal;
  font-style: italic;
  font-size: 0.8rem;
  text-decoration: none;
  color: #ececec;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

/* == Content Layout ======================================================== */

div.content {
	visibility: hidden; /* Made visible by MusicBookPlayer.initialize() */
	display: flex;
	flex-direction: row;
	align-items: flex-start;
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding: 0;
  -ms-overflow-style: none;  /* Hide scrollbar: IE and Edge */
  scrollbar-width: none;     /* Hide scrollbar: Firefox */
}

div.content::-webkit-scrollbar { /* Hide scrollbar: Chrome, Safari and Opera */
  display: none;
}

section {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  scroll-snap-align: start;
  scroll-margin: 0;
}

.track-image,
#track-image {
	width: 100%;
}

#track-comment,
.track-comment {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  background-color: #03030380;       /* <- Track ambient color! */
	color: #ececec;
}

.track-comment .new
{
  color: #ffff80;
}

/* -- TOC ------------------------------------------------------------------- */

table.toc,
table.toc td {
  border-collapse: collapse;
}

table.toc td {
	vertical-align: top;
	padding-top: 0.35rem;
}

/* -- Credits, etc. --------------------------------------------------------- */

div.credits {
	visibility: hidden; /* Toggled by MusicBookPlayer.showCredits() */
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background-color: transparent;
	display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding-top: 3rem;
}

aside {
	position: relative;
  color: #7f6e00;
  background: rgba(255,248,204,0.925);
  font-size: 9pt;
  margin: 1rem 0.5rem 0 0.5rem;
  padding: 0 0.5rem 0.5rem 0.5rem;
  border: 1px solid #7f6e00;
  border-radius: 0 0.5rem 0.5rem 0.5rem;
  box-shadow:2px 2px 3px rgba(0,0,0,0.35);
}

aside.with-close-button {
	border-top-right-radius: 1.2rem;
}

aside button.close {
	position: absolute;
	top: 0.2rem;
	right: 0.2rem;
  background-image: url(../img/close.svg);
}

aside a {
  color: #7f6e00;
}

aside h1 {
  color: #7f6e00;
  font-size: 10pt;
  font-weight: bold;
  margin: 0.5rem 0 0 0;
}

aside ul {
  padding-left: 1rem;
}

aside li {
  margin: 0;
  padding-left: 0;
}

/* EOF */