/* b5.css -- style for slides, inspired by MWeb brochures
 *
 * To be used with a file where every H1 starts a new slide. Some
 * special classes:
 *
 * img.frame: use this for a background image. It will be scaled to
 * full screen size and used on each slide.
 *
 * 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: 18 Feb 2005
 */

/*
 * 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 :-) )
 *
 * To do: when "CSS3 Values and Units" is ready, use a font size of
 * 5.21vl instead of 40px (or, if we add it, whatever the unit is to
 * put about 45 characters on a line).
 */

    @page {
	size: landscape;
	margin: 1cm;
    }

    body {
	 font: 40px/1.2 Gill Sans, sans-serif;
    }
/*
    @media print {
      body {
	font: 17pt/1.2 Gill Sans, sans-serif;
      }
    }
*/
    html
    {
	margin: 0;
	padding: 0;
	background: white;
	color: black;
    }
    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 5%;
	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 */
	}
    }

/*
 * To do: when "CSS3 Backgrounds and Borders" is ready, use
 * 'border-image: url(pageframe) 40 40 40 40 / 2em' (or similar)
 * instead of the generated content to set the border on all sides.
 *
 * The following should create a rounded blue frame around each slide,
 * stretched to the window size. Unfortunately, as of May 2005,
 * browsers don't stretch the image and Mozilla even doesn't make the
 * image 'fixed'. The work-around is to put the image in the source
 * document with <p class=frame><img src="pageframe.png"> and then
 * stretch that.
 */

    commented-out  body::before
    {
	content: url(pageframe.png);
	position: fixed;		/* Doesn't work in Mozilla <= 1.8 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
    }

    p.frame
    {
	margin: 0;
	padding: 0;
	display: block !important;	/* Don't let the script hide this */
    }
    p.frame img
    {
	position: absolute;		/* Should be 'fixed', MSIE6 bug :-( */
	top: 0;
	left: 0;
	width: 111.11% !important;	/* Should be 100%, MSIE6 bug :-( */
	height: 100% !important;
	z-index: -1;
    }
    p.frame>img				/* Hack: hide from MSIE6 */
    {
	width: 100% !important;
	position: fixed;
    }

/*
 * All bottom margins must be zero, because Opera adds the last bottom
 * margin to the top of the next page :-(
 */

    * {
	margin-bottom: 0;
	padding-bottom: 0;
    }

/*
 * The H1 starts a slide and is displayed as its title in a blue box
 * in the upper right corner. The box has a rounded corner and a drop
 * shadow, so we use some more generated content and background
 * tricks...
 *
 * (Slides may also be enclosed in div.slide, as required by Dave's
 * Slidy tool.)
 *
 * To do: when "CSS3 Backgrounds and Borders" is ready, use something
 * like 'background: url(bluebg) (100% 100%)' instead of the generated
 * content.
 */

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

    h1
    {
	width: 80%;
	max-width: 1580px;
	background: url(darkblue-bl.png) 0% 100%;
	padding: 1em 10px 60px 10px;
	color: white;
	text-align: center;
	font-weight: 900;
	font-variant: small-caps;
	margin: 0 -5.56% 0 auto;
	line-height: 1;
	font-size: 120%;
	clear: both;
    }

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

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

    h1 {
	counter-increment: slide;
    }

/*
 * 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. Hopefully it is not a div.sidebar or div.callout,
 * because then this rule will destroy its look :-(
 *
 * 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::before, h1::after
    {
	color: white;
	font-size: 19px;		/* To fit in the blue frame */
	bottom: 1em;
	right: 20px;
	height: 1em;
	width: 2em;
	line-height: 1;
	margin: 0;
	padding: 0;
    }
    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;
    }

/*
 * 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 !important; /* Don't let the script hide this */
	left: 2em;
	top: 48px;
	right: 0;
	margin: 0;
	padding: 0;
    }
    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 !important; /* Don't let the script hide this */
	bottom: 3px;
	left: 20px;
	right: 0;
	height: 1em;
	margin: 0;
	padding: 0;
	font-size: 18px;	/* Fits in blue frame */
	line-height: 1;
	color: white;
    }
    body>p.signature,		/* Hide from MSIE6 */
    div.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 !important; /* Don't let the script hide this */
    }
    @media screen, print, tv {
      div.comment {
	column-count: 2;
	column-gap: 1em;
	font-size: medium;
	page-break-before: always;
	page-break-after: always;
	padding-top: 40px;
      }
    }

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

    div.callout
    {
	clear: both;
	margin: 1em -20px 0 0;		/* 20px = width of the shadow */
	max-width: 1600px;
	color: #005A9C;
	background: url(lightblueround-right.png) right center repeat-y;
	padding: 40px 40px 0 20px;	/* Top 40px reserved for ::before */
	font-style: normal;
    }
    div.callout::before
    {
	display: block;
	line-height: 0;
	margin: -40px -40px 0 -20px;	/* Height + margin-top = 0 */
	background: url(lightblueround-topright.png) right top no-repeat;
	text-align: left;
	content: url(lightblueround-topleft.png); /* Height is 40px */
    }
    div.callout::after
    {
	display: block;
	line-height: 0;
	margin: 0 -40px 0 -20px;
	background: url(lightblueround-bottomright.png) right bottom no-repeat;
	text-align: left;
	content: url(lightblueround-bottomleft.png);
	clear: both;
    }
    div.callout > *:first-child, address > *:first-child
    {
	margin-top: -20px;
    }

/*
 * 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 -28px 0.5em 1em;	/* 28px = width of the shadow */
	width: 30%;
	color: white;
	background: url(blueround-right.png) right center repeat-y;
	padding: 40px 40px 0 20px;	/* Top 40px reserved for ::before */
    }
    div.sidebar::before
    {
	display: block;
	line-height: 0;
	margin: -40px -40px 0 -20px;	/* height 40px - margin-top 40px = 0 */
	background: url(blueround-topright.png) right top no-repeat;
	text-align: left;
	content: url(blueround-topleft.png); /* height is 40px */
    }
    div.sidebar::after
    {
	display: block;
	line-height: 0;
	margin: 0 -40px 0 -20px;
	background: url(blueround-bottomright.png) right bottom no-repeat;
	text-align: left;
	content: url(blueround-bottomleft.png);
    }
    div.sidebar > *:first-child
    {
	margin-top: -20px;
    }

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

    .col
    {
	float: left;
	width: 45%;
	margin: 1em 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 !important /* Don't let the script display this */
    }
    .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;
    }
    div.sidebar strong, div.sidebar dfn
    {
	color: #FF0;
    }
    div.callout strong, div.callout dfn
    {
	color: white;
    }

    img
    {
	border-style: none;
    }

    h2
    {
      font-size: 100%;
    }

    pre, code
    {
	margin-top: 1em;
	font-family: Courier, monospace;
	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;
    }

    ul, ol
    {
	margin: 1em 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
    {
	list-style-image: url(bullet.png);
    }
    ul ul
    {
	list-style-image: none;
    }

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

    address
    {
	margin: 1em 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: red;
    }
    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;
    }