@import url("vars.css");
/*
** DEVELOPMENT
*/

*, BODY * { 
	font-family:		var(--font-main);
	font-size:			var(--font-size);
	color:				var(--color-foreground);
	}
BODY {
	background-color:	#fff;
	margin:				0px;
}


/*
** MAIN GRID
*/

.capsule {
	background-color:	var(--page-background);
	left:				0px;
	top:				64px;
	height:				calc(640px + var(--timeline-area-height));
	right:				0px;
	margin:				auto;
	box-sizing:			border-box;
	display:			grid;
	max-width:			1200px;
	max-height:			900px;
	grid-template-columns: minmax(var(--min-page-width),--var(max-page-width));
	grid-template-rows:	640px var(--timeline-area-height);
	grid-template-areas:	"	vid	"
							"	tln	";
	}

.vid {
	grid-area:				vid;
	background-color:		black;
	overflow:				hidden;
}
.tln {
	grid-area:				tln;
	overflow:				hidden;
}



/*
** CONTENT AREA (VIDEO / MORE INFO etc)
*/

.vid * {
	background-color:	black;
	display:			flex;
	flex-direction: 	column;
	justify-content: 	center;
	align-content: 		center;
	height:				100%;
	min-width:			var(--min-page-width);
}

#tlncore {
	transition:			opacity 0.2s linear;
	height:				640px;
}
.tlncontent {
	position:			absolute;
	overflow:			hidden;
	display:			flex;
	flex-direction: 	column;
	justify-content: 	center;
	align-content: 		center;
	background-color:	transparent!important;
}
.tlncontent .inner {
	display:			flex;
	flex-direction: 	column;
	justify-content: 	center;
	align-content: 		center;
	background-color:	transparent!important;
	transition:			none;
}
.tlncontent .inner[transition] {
	transition:			0.5s ease, opacity 0.5s linear;
}
.matte {
	position:			fixed;
	display:			none;
	opacity:			0;
	transition:			opacity 0.25s linear;
	background-color:	gray;
	z-index:			40;
	top:				0px;
	left:				0px;
	right:				0px;
	bottom:				0px;
}
.info {
	position:			absolute;
	transition:			opacity 0.25s linear;
	border:				2px solid var(--gray2);
	background-color:	#fff;
	background-image:	url('../assets/Asset 1.png');
	background-position:center center;
	background-repeat:	no-repeat;
	color:				black;
	overflow:			hidden;
	display:			none;
	opacity:			0;
	z-index:			50;
	box-shadow:			4px 4px 32px rgba(0,0,0,0.5);
	display:			flex;
	flex-direction:		column;
	justify-content:	center;
}
.info DIV {
	margin:				1em;
	display:			flex;
	flex-direction:		column;
	justify-content:	center;
	height:				100%;
}
.info DIV IMG {
	width:				100%;
	height:				auto;
}
BODY[info] .matte {
	opacity:			0.5;
	display:			block;
}
VIDEO {
	opacity:			1.0;
	transition:			opacity 0.25s linear;
}
BODY[paused]:not([transitioning]) VIDEO {
	opacity:			0.5;
}

	
#mitab {
	position:			absolute;
	background-color:	transparent;
	background-image:	url('../assets/Asset 11.png');
	width:				316px;
	height:				56px;
	display:			flex;
	flex-direction: 	row;
	justify-content:	center;
	z-index:			55;
	font-weight:		bold;
	font-size:			16px;
	line-height:		40px;
	text-align:			center;
	color:				white;
	display:			inline-block;
	cursor:				pointer;
	user-select: 		none;
	-webkit-user-select:none;
	-moz-user-select:	none;
	-ms-user-select:	none;
	opacity:			0;
	transition:			opacity 0.25s linear, background-position 0.25s ease, height 0.25s ease, margin-top 0.25s ease;
}
BODY[hasinfo] #mitab {
	opacity:			1;
}

#vctrl {
	position:			absolute;
	background-color:	rgba(0,0,0,0.5);
	border-radius:		8px;
	z-index:			55;
	width:				256px;
	height:				42px;
	display:			flex;
	flex-direction: 	row;
	justify-content:	space-evenly;
}
#vctrl IMG {
	width:				36px;
	height:				36px;
	padding:			2px;
}


/*
** TIMELINE
*/

.tln {
	display:			grid;
	grid-template-columns: 96px auto 96px;
	grid-template-rows:	var(--timeline-area-height);
	grid-template-areas:"tlnretreatbox tlnbox tlnadvancebox";
	width:				auto;
	background-color:	var(--gray1);
}
.tln * {
	user-select: 		none;
	-webkit-user-select:none;
	-moz-user-select:	none;
	-ms-user-select:	none;
}
#tlnbox {
	grid-area:			tlnbox;
	width:				auto;
	overflow:			hidden;
	height:				var(--timeline-area-height);
}
#timeline {
	width:				auto;
	overflow:			visible;
	white-space: 		nowrap;
	margin-left:		0px;
}
#tlnretreat {
	grid-area:			tlnretreatbox;
}
#tlnadvance {
	grid-area:			tlnadvancebox;
	transform:			rotate(180deg);
}
#tlnadvance IMG, #tlnretreat IMG {
	width:				52px;
	height:				52px;
}
#tlnadvance, #tlnretreat {
	justify-self:		center;
	align-self: 		center;
	transition:			opacity 0.5s linear;
}

.tlncell {
	display:			inline-block;
	cursor:				pointer;
	transition:			opacity 1s linear, background-color 0.2s linear;
	text-decoration:	none;
	height:				var(--timeline-area-height);
}

.tlncell>DIV {
	display:			grid;
	grid-template-columns:	200px;
	grid-template-rows:		var(--timeline-bar-height) var(--timeline-body-height);
	grid-template-areas:	"	tlnhead	"
							"	tlnbody ";
}
.tlnhead {
	grid-area:			tlnhead;
	background-color:	inherit;
	height:				var(--timeline-bar-height);
	line-height:		var(--timeline-bar-height);
	text-align:			center;
	vertical-align:		middle;
	overflow:			hidden;
}
.tlnhead SPAN {
	display:			block;
	color:				var(--gray3);
	font-size:			125%;
	font-weight:		bold;
	transition:			color 0.5s ease;
	border-right:		2px solid var(--gray2);
	border-left:		2px solid var(--gray2);
	height:				calc( var(--timeline-bar-height) / 2);
	line-height:		calc( var(--timeline-bar-height) / 2);
	margin-top:			calc( var(--timeline-bar-height) / 4);
}
.tlnhead:first-child SPAN {
	border-left:		none;
}
.tlonhead:last-child SPAN {
	border-right:		none;
}
.tlnbody {
	height:				calc(0px - var(--timeline-bar-height));
	grid-area:			tlnbody;
	background-color:	transparent;
	color:				var(--gray3);
	font-size:			1em;
	text-align:			center;
	white-space: 		pre-wrap;
	padding:			1em;
	padding-top:		0em;
	transition:			background-color 0.1s linear;
} 
.tlnfill {
	grid-area:			tlnfill;
	background-color:	inherit;
	height:				var(--timeline-bar-height);
}
.tlnbar {
	grid-area:			tlnbar;
	border-right:		3px solid transparent;
}
.tlngap {
	grid-area:			tlngap;
}

.tlncell:hover {
	background-color:	var(--gray2);
}
BODY[transitioning] .tlncell:hover {
	background-color:	inherit;
}
	
.tlncell[selected] .tlnbody , .tlncell[selected]:hover .tlnbody {
	background-color:	inherit;
	color:				var(--fabry-gray-pale);
}
.tlncell[selected]:hover .tlnbody {
	cursor:				default;
}
.tlncell[selected] .tlnhead SPAN {
	color:				white;
}



/* GRAY EVERYTHING OUT IF THE VIEWPORT IS JUST TOO SMALL TO BE USEFUL */

#badvp { 
	position:			fixed;
	left:				0px;
	right:				0px;
	top:				0px;
	bottom:				0px;
	background-color:	var(--gray2);
	color:				var(--gray4);
	font-size:			1vw;
	letter-spacing:		0.25em;
	z-index:			199;
	justify-content:	center;
	align-content: 		center;
	vertical-align: 	middle;
	display:			none;
}
#badvp SPAN {
	color:				white;
	font-size:			24pt;
	display:			flex;
	flex-direction: 	column;
	position:			relative;
	justify-content:	center;
	text-align:			center;
}
@media screen and (max-width:1023px) {
	#badvp { display:flex!important; }
}


/* SUBTIMELINE */

.subtlnfixtures {
	display:			block;
}
.subtlnfixtures TR:first-of-type {
	vertical-align:		top;
}
.subtlnfixtures TR:last-of-type {
	vertical-align:		bottom;
}
.subtlnfixtures TR TD:first-of-type {
	text-align:			left;
}
.subtlnfixtures TR TD:last-of-type {
	text-align:			right;
}
.subtlnfixtures TR:first-of-type TD:first-of-type {
	font-size:			300%;
	font-weight: 		bold;
	color:				var(--gray2);
}
.subtlnfixtures IMG {
	width:				48px!important;
	height:				48px!important;
}

.subtln {
	z-index:			90;
}
.subtln .bar {
	background-image:	url('../assets/infoline_body.png');
	background-position:center center;
	background-repeat:	repeat-x;
}
.subtln H1 {
	margin:				0px;
	margin-top:			5px;
	margin-bottom:		5px;
	padding:			0px;
	font-size:			24px;
}
.subtln SPAN {
	display:			inline-block;
	margin-bottom:		5px;
	margin-top:			5px;
	font-size: 11px;
}
.subtln SPAN I {
	display:			inline-block;
	font-size:			75%;
	vertical-align:		super;
}
.subtln IMG.tip {
	width:				40px;
	height:				auto;
	cursor:				pointer;
	display:			block;
	position:			relative!important;
	top:				0px;
	left:				0px;
}
#tipmatte {
	position:			fixed;
	top:				0px;
	left:				0px;
	width:				100%;
	height:				100%;
	z-index:			89;
	background-color:	rgba(0,0,0,0.01);
	display:			none;
}
#infotip {
	position:			absolute;
	top:				0px;
	left:				0px;
	width:				35vw;
	height:				auto;
	background-color:	rgba(0,0,0,0.75);
	color:				white;
	padding:			0.5em;
	display:			none;
	z-index:			100;
	padding-right:		1em;
}
#infotip * {
	color:				white!important;
}
#infotip UL, #infotip LI {
	margin:				0px;
}
#infotip LI {
	margin-left:		-1em;
}