/* b6.css -- style for slides, inspired by MWeb brochures
 *
 * Like b5.css, but using some features from CSS level 3:
 * background-size, box-shadow, border-radius.
 *
 * To be used with a file where every H1 starts a new slide. Some
 * special classes:
 *
 * p.letterhead: use this for the logo or similar, that must be
 * repeated on every slide in the top left corner.
 *
 * p.signature: use this for the name of the author or similar, that
 * must be displayed on every slide in the lower left corner.
 *
 * div.sidebar: use this for a box that is floated to the right.
 *
 * div.callout: use this for an important line or paragraph.
 *
 * div.col, ul.col: use this for a slide with two or more columns. All
 * sibling elements with class .col will be displayed side by side.
 *
 * div.overlay to overlay several images.
 *
 * Author: Bert Bos <bert@w3.org>
 * Created: 21 Jan 2012
 */

    @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")
    }

/*
 * The font is nice and big, for readability at the back of the room
 * (and to force presenters to keep the text on the slide short :-) )
 */

    @page {
	size: 1280px 800px; /* Ratio 16:10 */
	margin: 0;
    }

    body
    {
	font: 40px/1.2 Gill Sans, My Gill Sans, sans-serif;
	font-size: 5.21vmin;
	font-size-adjust: 0.45;	/* Aspect value of Gill Sans */
    }
    html
    {
	margin: 0;
	padding: 0;
	color: black;
	background: url(pageframe.png) top left white no-repeat fixed;
	background-size: 100% 100%;
	height: 100%;
	/* '-o-page-x is an Opera (v 12.00 Labs) experiment. It
	unfortunately changes the meaning of 'position: absolute' to
	'position: fixed' and is thus incompatible with the use of
	absolute positioning in the slides (such as for the progress
	bar). */
	/* overflow: -o-paged-x; */
    }
    body
    {
	margin: 0;
	/* If we set a padding or margin, then Opera 8.0 doesn't use the
	viewport as containing block for fixed positioned elements :-( */
	padding: 0;
	background: transparent;
	height: 100%;		/* Needed to position p.signature in MSIE */
	counter-reset: slide;
    }
    @media screen		/* Hack: Mozilla needs 'relative', Opera not */
    {
	body
	{
	    position: relative;
	    z-index: 0;		/* To make p.frame's z-index work in Mozilla */
	}
    }

/*
 * 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;
    }

    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;
	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 {
	height: 100%;
	/* border-bottom: 1px solid transparent; /* Avoid margins collapsing */
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	padding: 0 5%;
	overflow: hidden;
	background: url(pageframe.png) top left white no-repeat fixed;
	background-size: 100% 100%;
    }

    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.
 *
 * The h1::before and h1::after use the same counter, but one is
 * absolutely positioned, the other is fixed. The fixed one is the
 * same on all pages and thus all pages have all counters, but the
 * last page is printed on top and thus it shows the total number of pages!
 */

    h1 {
	counter-increment: slide;
    }
    h1::before, h1::after
    {
	color: white;
	font-size: 19px;		/* To fit in the blue frame */
	font-weight: bold;
	bottom: 1em;
	right: 20px;
	height: 1em;
	width: 2em;
	line-height: 1;
    }
    h1::before
    {
	content: counter(slide);
	text-align: right;
	position: absolute;
	margin-right: 2em;
    }
    h1::after
    {
	content: "/" counter(slide);
	text-align: left;
	position: fixed;
	background: #72A4C8;
	margin-bottom: 1px;	/* Compensate the bottom border of .slide */
	visibility: visible !important; /* Don't let the script hide this */
    }
    @media (overflow-block: paged) {
	h1::after
	{
	    position: absolute;
	    content: "/" counter(pages); /* Use the built-in counter of Prince */
	}
    }

/*
 * p.letterhead is put in the upper left corner of every slide. It is
 * meant for something relatively small, like a logo, otherwise it
 * will overlap the H1 or some other part of the slide.
 */

    p.letterhead
    {
	position: absolute;
	display: block;
	left: 2em !important; /* Don't let the script hide this */
	top: 48px !important; /* Don't let the script hide this */
	visibility: visible !important; /* Don't let the script hide this */
	right: 0 !important; /* Don't let the script hide this */
	margin: 0;
	padding: 0;
	z-index: 1;
    }
    body>p.letterhead		/* Hide from MSIE6 */
    {
	position: fixed;
    }
    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. It is meant for the name of the author or
 * some similar information.
 */

    p.signature
    {
	position: absolute;
	display: block;
	bottom: 3px;
	left: 20px !important; /* Don't let the script hide this */
	top: auto !important; /* Don't let the script hide this */
	visibility: visible !important; /* Don't let the script hide this */
	right: 0 !important; /* Don't let the script hide this */
	height: 1em;
	margin: 0;
	padding: 0;
	font-size: 18px;	/* Fits in blue frame */
	line-height: 1;
	color: white;
	max-width: 90%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
    }
    body>p.signature,		/* Hide from MSIE6 */
    .slide>p.signature
    {
	position: fixed;
    }
    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 {
	display: none;
    }

/*
 * 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: #859DC7;
	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;
    }