/* Elements with class=button approximate a native <button>. */
.button {-webkit-appearance: button;
appearance: button; text-decoration: none; cursor: default;
color: buttontext; letter-spacing: normal;
word-spacing: normal; display: inline-block;
text-align: center; background-color: buttonface;
font: 400 medium system-ui, Segoe UI, sans-serif; font: -moz-button;
padding: 1px 8px 2px; border-radius: 0.25em;
/*border: 1px outset ThreeDLightShadow;*/
/*border: 1px outset buttonface*/}
[for=sync] {padding-left: 2em; margin-top: 1.2rem}
#sync {position: relative; z-index: 1; width: 1em;
margin: 0 -1.5em 0 0.5em}
#player {margin-top: 1.2rem;
border-top: 1px solid transparent /* Trick to stop margin collapsing */}
.slide:target {outline: none}
iframe {width: 100%; height: 100%}
#video1 {overflow: hidden} /* Force border-radius on the video */
/* output button {cursor: pointer} */
label.button::before {content: none} /* Undo a rule in style.css */
.comment, .progress {display: none}
.slide {width: 40.889em; height: 23em; /* Ratio 16:9 */
/* Add a border, because the slides are white: */
overflow: hidden; box-sizing: border-box; border: 1px solid;
display: block; margin: 0 0 1em 0; box-shadow: none}
.slide canvas {vertical-align: bottom}
summary::before {font-size: 1em; margin-left: 0}
/* Normal layout (medium or wide window), with the video about half
the width of the slides and shown to the right of the slides,
slightly overlapping. */
#slidenr, #caption {box-sizing: border-box; line-height: 1.3}
#video1, #slidenr, #caption, #cue, .slide {border-radius: 0.5em}
#video1, #audio {border: none}
#slidenr {display: block; background: #eee; color: black;
text-align: center}
#slidenr a:link {color: inherit}
#caption, #prevnext {display: none}
#caption {height: 3.2em /* Room for two lines and padding */}
#caption, #cue {background: #eee; color: black}
#caption, #slidenr {text-align: center; padding: 0.3em;
margin: 0 0 1em 0}
#cue {display: block; margin: -0.3em; padding: 0.3em; min-height: 3.2em}
#cue[lang|=zh] {font-size: 110%; min-height: 1.6em}
#cuelang {float: right}
#player {clear: both}
#player, #slides {position: relative}
#player::after {content: " "; display: block; height: 0; clear: both}
#slides, #caption {width: 40.889em; max-width: 100%}
#slidenr, #video1 {margin: 0; display: block; position: fixed;
right: 1em; z-index: 2; width: 20em; max-width: 100%}
#video1 {bottom: 3.6em; height: 11.25em /* 20em * 9/16 */;
max-height: 100%}
#slidenr {bottom: 1em}
/* If sticky positioning is supported, use that instead of fixed. */
@supports (position: sticky) or (position: -webkit-sticky) {
body {overflow: visible}
#slidenr, #video1 {position: -webkit-sticky; position: sticky;
right: auto; bottom: auto; left: 100%}
#video1 {top: 1em; margin-top: 1em;
margin-bottom: -12.25em /* Negative of height + margin-top */}
#slidenr {margin-top: 13.25em; /* The height of the video + margins */
top: 13.25em; /* Top of the video + height of the video + margins */
margin-bottom: -15.15em /* -margin-top - line-height - padding */}
}
/* In synchronized mode, the video is absolutely positioned next to
the slide (actually in the same place as with sticky positioning,
if that is supported). */
#sync:checked ~ #player #slidenr, #sync:checked ~ #player #video1 {
position: absolute; right: 0; left: auto; bottom: auto}
#sync:checked ~ #player #video1 {top: 1em; margin: 0}
#sync:checked ~ #player #slidenr {top: 13.25em; margin: 0}
/* In synchronized mode, show only the active slide. */
#sync:checked ~ #player .slide {position: absolute; top: 0; left: 0;
visibility: hidden}
#sync:checked ~ #player .slide.active {position: relative;
visibility: visible}
.videonav #prevnext, #sync:checked ~ #prevnext {display: inline}
#sync:checked ~ #player #slides > *:not(.slide) {display: none}
.videonav #player #caption, #sync:checked ~ #player #caption {display: block}
/* ... and only the active elements of incremental display. */
#sync:checked ~ #player .next {visibility: hidden}
#sync:checked ~ #player .slide.active .next.active {visibility: visible}
/* Make the link to the current slide in #slidenr less visible. */
#sync:checked ~ #player #slidenr a {text-decoration: none}
/* Avoid transition effects when synchronization is off.*/
#sync:not(:checked) ~ #player .slide {animation: none}
/* No animation when moving backwards. */
#sync:checked ~ #player .slide.active ~ .visited {animation: none}
/* Turn off transitions on A inside slides in synchronized mode. */
#sync:checked ~ #player .slide a {transition: none}
/* If the body is narrow, leave the video above the slides
instead. Use 'relative' instead of 'static', so that
'z-index' continues to apply and the video is on top of the
negative margin of the following slides. */
@media (max-width: 68em) {
#sync:checked ~ #player #slidenr, #slidenr,
#sync:checked ~ #player #video1, #video1 {position: relative;
top: auto; left: auto;
margin: 1em 0}
}
/* If the body is very narrow, scale the slides down. */
@media (max-width: 46.5em) {
.slide {transform-origin: 0 100%; transform: scale(0.8);
margin-top: -4.6em}
}
@media (max-width: 38em) {
.slide {transform: scale(0.6); margin-top: -9.2em}
}
@media (max-width: 29em) {
.slide {transform: scale(0.4); margin-top: -13.8em}
}
@media (max-width: 19.5em) {
.slide {transform: scale(0.2); margin-top: -18.4em}
}
iframe.fw { width: 100%; height: 400px;}
main { clear: left;}
.slide[data-fmt="shower"] {
font-size: 1em;
height: 26em;
width: 40.889em;
}
html {
font-size: 1em;
}
.slide h1,
.slide h2,
.slide h3,
.slide h4,
.slide h5,
.slide p,
.slide dl,
.slide ul,
.slide ol {
/*margin: inherit;*/
}
.slide iframe {
/*width: 133%;*/
/*height: 133%;*/
/*transform: scale(0.75);*/
/*transform-origin: 0 0;*/
}
.slide.iframe {
/*height: 26em;*/
}
/**
* Following rule is needed for PDF.js to position the text layer correctly
* relative to the canvas
*/
.slide .page { position: relative; }