/* mwebslide.css -- style for slides, inspired by MWeb brochures
 *
 * 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.
 *
 * Author: Bert Bos <bert@w3.org>
 * Created: 18 Feb 2995
 */

/*
 * 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).
 */
body
{
    font: 40px/1.2 Gill Sans, sans-serif;
}

/*
 * Create a blue frame on the top, left and bottom sides, with rounded
 * corners. While waiting for CSS3, we hack it with generated content
 * and multiple backgrounds.
 *
 * To do: when "CSS3 Backgrounds and Borders" is ready, use
 * 'border-image: url(blueborder) 40 40 40 40 / 2em' (or similar)
 * instead of the generated content to set the border on all sides.
 */
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;
    padding: 0 5%;
    background: transparent;
}

/*
 * If there is a IMG.frame, use that as the background for all
 * slides, scaled to full screen.
 */
img.frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    width: 111.11% !important;	/* Should be 100%, but for Opera bug :-( */
    height: 100% !important;
    z-index: -1;
    margin: 0;
    padding: 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...
 *
 * To do: when "CSS3 Backgrounds and Borders" is ready, use something
 * like 'background: url(bluebg) (100% 100%)' instead of the generated
 * content.
 */
h1
{
    page-break-before: always;
    width: 80%;
    max-width: 1600px;
    background: url(darkblue-bl.png) 0% 100%;
    padding: 0;
    padding: 1em 0 60px 0;
    color: white;
    text-align: center;
    font-weight: 900;
    font-variant: small-caps;
    margin: 0 -5.56% 0.5em auto;
    margin-top: -18px;		/* Wrong, but compensates a bug in Opera */
    line-height: 1;
    font-size: 120%;
}

h1:first-child
{
    page-break-before: auto;
    x-margin-top: 0;
}
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 tiggers 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 :-(
 */
/* h1 + *::before, */
h1::before
{
    content: counter(slide) "/" counter(pages);
    color: white;
    font-size: 20px;		/* To fit in the blue frame */
    position: absolute;
    bottom: 0;
    right: 20px;
    height: 1em;
    width: 3em;
    text-align: right;
    line-height: 1;
    margin: 0;
    padding: 0;
}

/*
 * 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: fixed;
    left: 2em;
    top: 48px;
    right: 0;
    margin: 0;
    padding: 0;
}
p.letterhead img
{
    vertical-align: bottom;
}
p.letterhead a:link:after, p.letterhead a:visited:after
{
    content: "";
    content: none;
}

/*
 * p.signature is put in the blue frame at the bottom left and
 * repeated onm each slide. It is meant for the name of the author or
 * some similar information.
 */
p.signature
{
    position: fixed;
    bottom: 0;
    left: 20px;
    right: 0;;
    height: 1em;
    margin: 0;
    padding: 0;
    font-size: 20px;		/* Fits in blue frame */
    line-height: 1;
    color: white;
}
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 during in projection mode.
 */
div.comment
{
    display: none;
}

/*
 * A div.callout has a lighter background and also rounded corners.
 */
div.callout
{
	clear: both;
	margin: 1em -20px 1em 0;	/* 20px = width of the shadow */
	margin: 1em -20px 1em 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;
}

/*
 * Various other colors and fonts.
 */
h2
{
  font-size: 100%;
}
a:link, a:visited
{
    color: inherit;
}
pre, code
{
    font-family: Courier, monospace;
}
pre span.keyword, code span.keyword
{
    color: #909;
}

pre span.comment, code span.comment
{
}

pre span.string, code span.string
{
    color: #090;
}

pre span.attribute, code span.attribute
{
}

pre.extensive, pre.compact { 
  font-size: 80%;
}

li li
{
    font-size: 90%
}

a:link, a:visited
{
    xborder-bottom: silver dashed;
    xbackground: #FFC;
}
a:link:after, a:visited:after
{
    content: "*";
    color: red;
}
a:link:hover, a:visited:hover
{
    background: black;
    color: #FFC;
}