/* 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 text on the slide short :-) )
 */
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.
 */
html
{
    margin: 0;
    padding: 0;
    background: white;
    background: url(pageframe-left.png) center left repeat-y white;
    color: black;
}
body
{
    margin: 0;
    padding: 0 2em;
    background: url(pageframe-left.png) center left repeat-y;
}
body::before
{
    position: fixed;
    top: 0;
    left: 0;
    height: 76px;
    right: 0;
    z-index: -1;
    background: url(pageframe-topleft.png) left top no-repeat;
    content: " ";
}
body::after
{
    position: fixed;
    left: 0;
    bottom: 0;
    height: 135px;
    right: 0;
    z-index: -1;
    content: " ";
    line-height: 0;
    background: url(pageframe-bottomleft.png) left bottom no-repeat;
    content: " ";
}

/*
 * 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...
 */
h1
{
    page-break-before: always;
    width: 80%;
    max-width: 1600px;
    background: #005A9C;
    color: white;
    text-align: center;
    font-weight: 900;
    font-variant: small-caps;
    padding: 0;
    margin: 0 -1.67em 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;
    margin-top: 0;
}
h1::after
{
    display: block;
    line-height: 0;
    background: url(blueround-bottomright.png) 20px 0px no-repeat;
    content: url(blueround-bottomleft.png);
    text-align: left;
}
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, but we cannot attach
 * the counter to the H1, because the H1::after is already used for a
 * rounded corner and using H1::before triggers a bug in Opera 7.54
 * :-( So we 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
{
    content: counter(slide);
    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 othe rpart of the slide.
 */
p.letterhead
{
    position: fixed;
    left: 2em;
    top: 48px;
    right: 0;
    margin: 0;
}

/*
 * 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;
    font-size: 20px;		/* Fits in blue frame */
    line-height: 1;
    color: white;
}

/*
 * 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 */
	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;
    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 span.keyword, code span.keyword
{
}

pre span.comment, code span.comment
{
}

pre span.string, code span.string
{
}

pre span.attribute, code span.attribute
{
}

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