/**
 * STAR-REAPER Booklet Page by Silver Lucidity
 * @author Markus Brunner
 */
@font-face {
	font-family: 'ShadowsIntoLight-Regular';
	src: url('fonts/ShadowsIntoLight-Regular.ttf') format('truetype')
}
@font-face {
	font-family: 'AnonymousPro-Regular';
	src: url('fonts/AnonymousPro-Regular.ttf') format('truetype')
}
@font-face {
	font-family: 'LibreBarcode39Text-Regular';
	src: url('fonts/LibreBarcode39Text-Regular.ttf') format('truetype')
}

html.overview {
	background: black;
	color: white;
}
html.tribute-compilation {
	background: black url("../tribute-compilation/_cover/silver-lucidity_tribute-compilation_small.jpg") center center repeat;
}
html.star-reaper {
	background: black url("../star-reaper/_cover/silver-lucidity_star-reaper_small.jpg") center center repeat;
}
html.far-from-the-tree {
	background: black url("../far-from-the-tree/_cover/silver-lucidity_far-from-the-tree_small.jpg") center center repeat;
}
html.number-42{
	background: black url("../42/_cover/silver-lucidity_42_small.jpg") center center repeat;
}
html.heartbreak {
	background: black url("../heartbreak/_cover/silver-lucidity_another-heartbreak-story_small.jpg") center center repeat;
}
html.out-of-time {
	background: black url("../out-of-time/_cover/silver-lucidity_out-of-time_small.jpg") center center repeat;
}
html.timewaster {
	background: black url("../timewaster/_cover/silver-lucidity_timewaster_small.jpg") center center repeat;
}
html.the-also-ran {
	background: black url("../timewaster/_cover/silver-lucidity_the-also-ran_small.jpg") center center repeat;
}

#logo {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 0;
}

body {
	font-family: "ShadowsIntoLight-Regular", sans-serif;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	margin: 0;
	padding: 1em;
}

#overview-list .status {
	position: relative;
	overflow: hidden;
}
#overview-list .status:before,
#overview-list .music-styles{
	display: inline-block;
	position: absolute;
	top: 5em;
	left: 0em;
	transform: skew(5deg, -45deg) translateX(-3em) translateY(-3em);
	padding: 1em 4em;
	opacity: 0.5;
	background: blue;
	width: 200px;
	height: 22px;
	text-align: center;
}
#overview-list .status--finalisation:before {
	content: 'Status: Finalisation';
}
#overview-list .status--songwriting:before {
	content: 'Status: Songwriting';
}
#overview-list .music-styles {
	top: 3em;
	left: 0em;
	background: yellow;
	color: black;
	width: 140px;
}

dl {
	
}
dt {
	font-size: 2em;
}

a {
	color: lightblue;
}

h1, h2, h3, h4, h5 {
	font-family: "AnonymousPro-Regular", sans-serif;
}

h3:before, h3:after {
	content: '_';
}

#booklet {
	display: flex;
	opacity: 0.95;
}

#booklet article {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1em;
}

#booklet audio {
	position: absolute;
	left: 0;
	top: 0;
}

#booklet article h2.mix:before {
	content: '_mix_: ';
}

#booklet article h2.mix {
	font-size: 1em;
	margin-top: 3.5em;
	color: green;
	margin-bottom: -1.5em;
}

#booklet article h2.missing:before {
	content: '_missing_: ';
}

#booklet article h2.missing {
	font-size: 1em;
	margin-top: 3.5em;
	color: red;
	margin-bottom: -1.5em;
}

#booklet.live-mode .mix,
#booklet.live-mode .missing {
	display: none !important;
}

#booklet article h3 {
	margin-top: 3.5em;
}

/* fallback - no js - begin */
#booklet.no-booklet {
	display: flex;
	flex-direction: column;
}
#booklet.no-booklet > div {
	border-radius: 5px;
	position: relative;
	background: white;
	color: black;
	padding: 1em;
	height: auto;
	margin-bottom: 1em;
}
#booklet.no-booklet article {
	height: auto;
}
/* fallback - no js - end */

.b-page {
	border-radius: 5px;
}

.booklet .b-page-cover {
	background-color: #363636;
	color: white;
}

.booklet .b-page-cover h1 {
	font-size: 3em;
	color: #ddd;
	text-shadow: 0 1px 3px #222;
	line-height: 0.8em;
	margin-top: 0.5em;
}

.booklet .b-page-cover h1+h2 {
	font-size: 2em;
	color: #fff;
	text-shadow: 0 1px 3px #222;
	margin-top: -0.5em;
}

.booklet .b-counter {
	background-color: transparent !important;
}

.booklet article {
	display: flex;
	flex-direction: column;
	height: 82vh;
	overflow-y: scroll;
	overflow-x: hidden;
	padding: 0 1em 0 0;
	margin: 0 1.5em 0 1em;
}

.credits {
	font-size: 1.4em;
	font-family: "LibreBarcode39Text-Regular", monospace;
}

.lyrics {
	font-size: 1.2em;
	font-family: "ShadowsIntoLight-Regular", sans-serif;
	margin-top: -1em;
}

.marketing {
	background: rgba(0,0,0,0.7);
	margin-top: 5em;
	border-top: 3px dashed #4d4d4d;
	padding-top: 5em;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.marketing h2 {
	display: none;
}

.qr-code-hyperfollow {
	clear: both;
}

.qr-code-hyperfollow img {
	width: 20%;
	height: auto;
}

.marketing .spotify-album-view {
	float: right;
	width: 70%;
}