/* b6.css -- style for slides when not projecting.
 *
 * Shows all slides more or less like they would be shown by b6.css in
 * projection mode, but without scaling slides to fill the screen and
 * without hiding any comments between the slides.
 *
 * Author: Bert Bos <bert@w3.org>
 * Created: 1 October 2018
 */

    @font-face
    {
	font-family: My Gill Sans;
	font-style: normal;
	font-weight: normal;
	src: url(GILLSAN3.woff) format("woff")
    }
    @font-face
    {
	font-family: My Gill Sans;
	font-style: oblique;
	font-weight: normal;
	src: url(GILLSAN2.woff) format("woff")
    }
    @font-face
    {
	font-family: My Gill Sans;
	font-style: normal;
	font-weight: 700;
	src: url(GILLSAN1.woff) format("woff")
    }
    @font-face
    {
	font-family: My Gill Sans;
	font-style: oblique;
	font-weight: 700;
	src: url(GILLSAN0.woff) format("woff")
    }
    @page {
	margin: 1cm;
    }

    body {
	font-family: Gill Sans, My Gill Sans, sans-serif;
	font-size-adjust: 0.45;	/* Aspect value of Gill Sans */
	color: white;
	background: #444;
	background: linear-gradient(90deg,#333,#666,#333);
	counter-reset: slide;
    }

    @media print {
      html {
	font-size: 11pt;
      }
      body {
	background: none;
	color: black;
	margin: 0;
	columns: 31rem;		/* Width of one slide */
	column-gap: 2rem;
	column-fill: auto;
      }
    }

/*
 * The H1 starts a slide and is displayed as its title in a blue box
 * in the upper right corner.
 *
 * (Slides may also be enclosed in div.slide, as required by Dave's
 * Slidy tool.)
 */

    body > h1,
    .slide
    {
	page-break-before: always;
    }

    @media print {
	body > h1, .slide {
	  page-break-before: auto;
	}
	.slide {
	  page-break-inside: avoid;
	}
    }

    h1
    {
	box-sizing: border-box;
	width: 82%;
	padding: 0.7em 0.4em 0.5em 0.4em;
	color: white;
	text-align: center;
	font-weight: 900;
	font-variant: small-caps;
	margin: 0 -5.56% 0.5em auto;
	margin: 0 -1rem 0.5em auto;
	line-height: 1;
	font-size: 120%;
	clear: both;
	box-shadow: 0.2em 0.2em 0.3em rgba(0,0,0,0.7);
	background: #005A9C;
	border-bottom-left-radius: 0.5em;
    }

/*
 * Avoid that background gets out of sync when slides are too long.
 */

    .slide {
	display: inline-block;
	background: url(pageframe.png) top left white no-repeat;
	background-size: 100% 100%;
	color: black;
	height: 19.19rem;
	width: 30.71rem;
	margin: 3rem 2rem;
	vertical-align: bottom;
	box-shadow: 0.5rem 0.5rem 3rem black;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	padding: 0 1em;
    }

    @media print {
      .slide {
	display: block;
	margin: 2rem auto;
      }
    }

    body > h1:first-child,
    .slide:first-child
    {
	page-break-before: auto;
    }

    .slide:first-of-type
    {
	page-break-before: auto;
    }

/*
 * We want slides to be numbered, for which we use a counter. The only
 * thing we can reliably count is H1 elements.
 *
 * This triggers a bug in Opera 7.54 (but not in 8.0). If you use Opera
 * 7.54, the work-around is to attach the counter to the first element
 * *after* the H1.
 *
 * We cannot use the trick here to show all counters one on top of the
 * other in the ::after pseudo-element, in order to get the counter of
 * the last slide, and thus the total number of pages. Instead, we
 * just display "??".
 */

    h1 {
	counter-increment: slide;
    }
    h1::before, h1::after
    {
	color: white;
	font-size: 32%;		/* To fit in the blue frame */
	font-weight: bold;
	bottom: 0.5rem;
	right: 0.5rem;
	height: 1em;
	width: 2em;
	line-height: 1;
    }
    h1::before
    {
	content: counter(slide);
	text-align: right;
	position: absolute;
	margin-right: 2em;
    }
    h1::after
    {
	content: "/??";
	text-align: left;
	position: absolute;
    }

/*
 * p.letterhead is put in the upper left corner of every slide in
   slide mode, but, as we cannot make multiple copies of it, we don't
   do anything with it here.
 */

    p.letterhead
    {
    }
    body>p.letterhead		/* Hide from MSIE6 */
    {
    }
    p.letterhead img
    {
	vertical-align: bottom;
    }
    p.letterhead a:link:after, p.letterhead a:visited:after
    {
	content: "";
	content: none;
    }

/*
 * p.signature is put at the bottom left and repeated on each slide in
 * slide mode. But, as we cannot make multiple copies, we don't do
 * anything with it here.
 */

    p.signature
    {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
    }
    body>p.signature,		/* Hide from MSIE6 */
    .slide>p.signature
    {
    }
    p.signature a:link:after, p.signature a:visited:after
    {
	content: "";
	content: none;
    }

/*
 * div.comment is for comments that are visible in the screen or print
 * view, but not in projection mode.
 */

    div.comment {
	columns: 31rem;
	column-gap: 3rem;
	column-rule: dotted;
	margin: 0 0 2rem 0;
	widows: 3;
	orphans: 3;
    }
    div.comment h1
    {
	background: none;
	padding: 0;
	margin: 0 0 1em 0;
	counter-increment: none;
	width: auto;
	box-shadow: none;
	border-radius: 0;
	font-size: 140%;
    }
    div.comment h1::after,
    div.comment h1::before
    {
	content: none;
    }
    div.comment h2
    {
	font-size: 120%;
    }

/*
 * A div.callout has a lighter background and also rounded corners.
 */

    div.callout
    {
	clear: both;
	margin: 0.5em 0 0 0;
	max-width: 1600px;
	color: #005A9C;
	padding: 0.5em 0.5em 0.5em 0.5em;
	font-style: normal;
	background: #ADC4D5;
	border-radius: 0.4em;
	box-shadow: 0.2em 0.2em 0.3em rgba(0,0,0,0.7);
	overflow: auto;		/* Make sure to include any floats */
    }
    div.callout > *:first-child
    {
	margin-top: 0;
    }
    div.callout > *:last-child
    {
	margin-bottom: 0;
    }

/*
 * A sidebar has the same color and the same rounded corners as the H1
 * title, but on all sides. It is floated to the right.
 */

    div.sidebar
    {
	float: right;
	clear: right;
	margin: 0.5em 0 0 0;
	width: 30%;
	color: white;
	background: #005A9C;
	border-radius: 0.5em;
	box-shadow: 0.2em 0.2em 0.3em rgba(0,0,0,0.7);
	padding: 0.5em
    }
    div.sidebar > *:first-child
    {
	margin-top: 0;
    }
    div.sidebar > *:last-child
    {
	margin-bottom: 0;
    }

/*
 * Two sibling elements with class "col" will be displayed as columns
 * side by side.
 */

    .col
    {
	float: left;
	width: 45%;
	margin: 1em 4.5% 1em 0;
    }
    .col + .col
    {
	margin: 1em 0 1em 5%;
    }
    .col > *:first-child
    {
	margin-top: 0;
    }
    .col + .col + *
    {
	clear: left;
    }

/*
 * Various other colors and fonts.
 * And large fonts (Takahashi Method)
 */

    .no-projection, .hide	/* Things not to project */
    {
	display: none;
    }
    .veryshort		   /* Keep slides short and use this class! */
    {
 	font-size: 300%
    }
    .short
    {
 	font-size: 200%
    }
    .long
    {
	font-size: 90%
    }
    .verylong	       /* Only use if you *must* have lots of text! */
    {
	font-size: 80%
    }

    em
    {
	font-size: 130%;
	line-height: 0.85;
	font-style: inherit;
    }
    strong, dfn
    {
	font-style: normal;
	font-weight: inherit;
	color: red;
    }
    small
    {
	font-size: 70%;
    }
    div.sidebar strong, div.sidebar dfn
    {
	color: #FF0;
    }
    div.callout strong, div.callout dfn
    {
	color: white;
    }

    img
    {
	border-style: none;
    }

    h2
    {
      font-size: 100%;
      margin: 1em 0;
    }

    pre, code
    {
	font-family: Courier, monospace;
    }
    pre
    {
	margin-top: 1em;
	text-align: left;
    }
    pre span.keyword, code span.keyword
    {
	color: #909;
    }
    pre span.comment, code span.comment
    {
	color: #990;
    }
    pre span.string, code span.string
    {
	color: #090;
    }
    pre span.dim, code span.dim
    {
	color: #999;
    }
    pre.extensive, pre.compact
    { 
	font-size: 80%;
        line-height: 1;
    }

    p
    {
	margin: 0.5em 0 0 0;
    }

    ul, ol
    {
	margin: 0.5em 0 0 0;
	padding: 0;
    }
    li ul, li ol
    {
	margin-top: 0;
    }
    li
    {
	margin: 0.5em 0 0 1.5em;
    }
    li li
    {
	margin-top: 0;
	font-size: 90%
    }
    ul > li
    {
	list-style: none;
    }
    ul > li::before
    {
	content: " ";
	display: inline-block;
	background: #CB6628;
	width: 0.6em;
	height: 0.6em;
	margin: 0 0.5em 0 -1.1em;
    }
    ul ul > li,
    ol ul > li
    {
	list-style: disc;
    }
    ul ul > li::before,
    ol ul > li::before
    {
	content: none;
    }

    dd > p:first-child
    {
	margin-top: 0;
    }

    address
    {
	margin: 1em 0 0 0;
    }

/*
 * No color for links. In a slide show presentation, the people that
 * watch cannot click on them anyway and color would make the links
 * stand out more than EM or STRONG. The link has just a red asterisk
 * as a small reminder.
 */

    a:link, a:visited
    {
	color: inherit;
	text-decoration: none;
    }
    a:link:after, a:visited:after
    {
	content: "*";
	color: #CB6628;
    }
    a:link:hover, a:visited:hover
    {
	background: black;
	color: #FFC;
    }

/*
 * If there is a table of contents (ul.toc), number the items
 */

    ul.toc li
    {
	list-style: decimal;
	margin-top: 0;
	margin-bottom: 0;
    }
    ul.toc
    {
	font-size: 50%;
	column-count: 2;	/* CSS3 property */
    }

/*
 * Overlay images.
 *
 * The class=first is necessary for MSIE6, which doesn't know
 * :first-child
 */

    div.overlay
    {
	position: relative;        /* Make a containing block */
    }
    div.overlay img:first-child
    {
	position: static;
	vertical-align: bottom;    /* Avoid gap for descenders */
    }
    div.overlay img.first
    {
	position: static;
	vertical-align: bottom;    /* Avoid gap for descenders */
    }
    div.overlay img
    {
	position: absolute;        /* Take other images out of flow */
	left: 0; top: 0;           /* ... and overlap them */
    }

/*
 * This is how incremental display works in CSS3 and without
 * Javascript. Not implemented in browsers yet.
 */

    .incremental > *
    {
	presentation-level: increment
    }
    .incremental > *:below-level
    {
	visibility: hidden
    }

/*
 * A "progress bar" can show how far along in the presentation we are.
 * Put mark-up like the following somewhere in each slide:
 *
 * <p class=progress>
 *   <span>*</span>
 *   <span>*</span>
 *   <span class=cur>*</span>
 *   <span>*</span>
 *
 * Variant: use <a> instead of <span> and link to each slide. Another
 * variant: use different symbols for different kinds of slides, or
 * add extra spaces between groups of related slides.
 */

    p.progress
    {
	position: absolute;
	top: 0; left: 28%; right: 0;
	line-height: 1;
	padding: 0;
	margin: 0;
	text-align: center;
    }
    p.progress
    {
	font-size: 45%;
	color: #72A4C8;
    }
    p.progress .cur ~ *
    {
	color: #FFF;
    }
    p.progress a
    {
	text-decoration: none;
    }
    p.progress a:after
    {
	content: ""; content: none;
    }
    p.progress .cur
    {
	text-decoration: underline;
    }

/*
 * To hide things when printing, add a class "noprint".
 */

    @media print
    {
	.noprint
	{
	    display: none;
	}
    }