/*
	CSS for storyboard pages
*/	

section {padding-top:0;}

.story {position:relative;}
.story h1 {text-align:center; margin-left:8px; margin-top:0;}
.story div {display:flex; justify-content:center;}
.story img.photo {width: 80vw; max-width:800px; border:1px solid blue;}
.story img.speaker {position:absolute; left:0; top:2.5em; height:32px;}
.story img.speaker.off {display:none;}
.story.on img.speaker.off {display:block;}
.story.on img.speaker.on {display:none;}
.story h1.hdr {margin-bottom:0.5rem;}

p#textToShow {margin-bottom:0;}
p#sourceToShow{margin-top:0;text-align:right; font-style:italic;font-size:0.9em;}
p#sourceToShow::before {content:"As told by ";}
p#sourceToRead, p#voice, p#textToRead {display:none;}

p#textToShow span.ref {font-style:italic; font-size:0.8em;}

.nosrc p#sourceToShow {display:none;}
.noimg .story img.photo {display:none;}
.noborder .story img.photo {border:none;}

div.story-links {display:flex; justify-content:space-around; margin:1em;}
div.story-links span {font-style:italic; color:#600; margin-right:0.5em;}
div.story-links a {white-space:nowrap;}

@media (max-width:500px) {
	div.story-links {flex-direction:column;}
	div.story-links p {margin:0 0 4px;}	
}

div.logos {margin-top:2em; display:flex;justify-content:space-around;}
div.logos img {width:20%;}