/* CSS Document */
html {
	background:#000;
	padding:0;
	margin:0;
}
body {
	padding:0;
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	-webkit-text-size-adjust:100%;
}
table {
	margin:0;
	padding:0;
	border-collapse:collapse;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
div {
	padding:0;
	margin:0;
	text-align:left;
}
td {
	padding:0;
	margin:0;
}
a:link {color:#FC3; text-decoration:none;}
a:visited {color:#F90; text-decoration:none;}
a:hover {color:#FC3; text-decoration:none;}
a:active {color:#FC3; text-decoration:none;}

/* header and strip are centred vertically, as the old JS geometry did */
div#page {
	min-height:100vh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:20px 0;
	box-sizing:border-box;
}
div#grand {
	width:970px;
	margin:0 auto;
}
div#line_2{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	column-gap:12px;
	min-height:17px;
	padding-top:3px;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:11px;
	color:#FFF;
	padding-left:5px;
}
div#line_2 span.year { color:#999; }
div#line_2 span.pnav { margin-left:auto; padding-right:5px; }
div#line_2 span.pnav a { color:#BBB; margin-left:14px; }
div#line_2 span.pnav a:hover { color:#FC3; }

/* the white sheet starts under the header and scrolls sideways */
div#stripwrap { position:relative; }
div#strip {
	display:flex;
	overflow-x:auto;
	overflow-y:hidden;
	scrollbar-width:none;
}
div#strip::-webkit-scrollbar { display:none; }
div#strip::before { content:''; flex:none; width:max(0px, calc((100vw - 970px) / 2)); }
div#strip::after { content:''; flex:none; width:2vw; }
div.sheet {
	display:flex;
	align-items:flex-start;
	flex:none;
	background:#FFF;
}
div.desc {
	flex:none;
	width:510px;
	padding:15px;
	box-sizing:border-box;
}
div.pic { flex:none; }
div.pic img { display:block; }
div.summary {
}
div.text {
	margin-top:20px;
	font-size:12px; font-family:Arial, Helvetica, sans-serif; text-align: Left;
}

button.nav {
	display:none;
	position:absolute;
	top:50%;
	margin-top:-22px;
	width:44px;
	height:44px;
	padding:0 0 4px;
	border:0;
	border-radius:50%;
	background:rgba(0,0,0,.55);
	color:#FFF;
	font:34px/40px Arial, sans-serif;
	cursor:pointer;
	z-index:2;
}
button.nav:hover { background:rgba(0,0,0,.85); }
button.nav.on { display:block; }
button.prev { left:1%; }
button.next { right:1%; }

div#copyright {text-align:center; margin-top:20px;}
div.cpr {margin: 0 auto; text-align: center; color:#333;}

/* narrow screens: normal page flow, only the picture scrolls sideways */
@media (max-width: 989px) {
	div#page { justify-content:flex-start; padding:0 0 20px; }
	div#grand { width:auto; }
	div#line_2 { padding:10px 12px; font-size:13px; }
	div#line_2 span.pnav { flex:0 0 100%; margin:6px 0 0; }
	div#line_2 span.pnav a { display:inline-block; margin:0 18px 0 0; padding:4px 0; }
	div#strip { display:block; overflow:visible; }
	div#strip::before, div#strip::after { display:none; }
	div.sheet { flex-direction:column; align-items:stretch; }
	div.pic { order:-1; overflow-x:auto; background:#000; }
	div.pic img { width:auto; height:min(500px, 62vh); max-width:none; }
	div.desc { width:auto; padding:16px; font-size:15px; line-height:1.5; }
	div.text { font-size:15px; }
	button.nav.on { display:none; }
}