/********************************************************************
	
          A U D I O

*********************************************************************/

div.Song
	{
	margin-bottom: 24pt;
	}
	
div.Song h1, div.Song h2
	{
	margin-bottom: 0;
	margin-top: 0;
	text-align: center;
	}

div.Song h1 { font-size: 100%; }
div.Song h2 { font-size: 90%; }

div.Song p
	{
	margin-top: 12pt;
	padding-left: 5%;
	padding-right: 5%;
	}
	
div.Song img
	{
	margin-top: 12pt;
	margin-bottom: 18pt;
	}

audio {
	margin-bottom: 12pt;
	display: block;
	width: 100%;
	color: var(--clr_Panel_Text);
	border: 1px var(--clr_Panel_Heading) solid;
	border-radius: var(--DefaultBorderRadius);
	box-shadow: var(--DefaultBoxShadow);
	margin-top: 12pt;
	margin-left: auto;
	margin-right: auto;
}
	
audio:hover
	{
	background-color: var(--clr_Panel_Accent);
	}

/********************************************************************

          A L B U M   P L A Y E R

    AI: OzWebAudioHelpers.GenerateAlbumPlayer emits a Now Playing line,
    AI: an <audio id=player> and a pair of skip buttons. Nothing styled
    AI: any of it, so the readout ran together with the page's prose and
    AI: the buttons were raw browser chrome. They take the theme's panel
    AI: colours now, so each site gets its own.

*********************************************************************/

#NowPlaying {
	text-align: center;
	margin-top: 12pt;
	margin-bottom: 0;
}

#NowPlayingTitle {
	font-style: italic;
}

p.TrackButtons {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 0;
}

	p.TrackButtons button {
		font-family: var(--fnt_Nav_Link);
		font-size: 90%;
		padding: 4px 14px;
		cursor: pointer;
		color: var(--clr_Panel_Text);
		background-color: var(--clr_Panel_Background);
		border: 1px solid var(--clr_Panel_Heading);
		border-radius: var(--DefaultBorderRadius);
		box-shadow: var(--DefaultBoxShadow);
	}

		p.TrackButtons button:hover:not(:disabled) {
			color: var(--clr_Panel_Heading);
		}

		/* AI: The helper disables Previous on the first track and Next on the
		   last, so the state has to be visible or the button looks broken. */
		p.TrackButtons button:disabled {
			opacity: 0.45;
			cursor: default;
			box-shadow: none;
		}