/* Author: Bert Bos
Created: 3 February 2005 */

body
{
	font: 1em/1.2 "Gill Sans", sans-serif;
}
a:link, a:visited
{
	text-decoration: none;
}
a img {
  border: none;
}

/* A frame on all four sides is too hard/too fragile in CSS2, if only
   because of the transparency it would require for the H1, so we do
   three sides only. (Will be easy in CSS3...) */

html
{
	padding: 76px 0 0 40px;	/* Reserve 76px for the ::before */
	margin: 0;
	background: url(pageframe-left.png) center left repeat-y white;
	color: black;
}
html::before
{
	/* display: block; */
	height: 76px;
	content: " ";
	line-height: 0;
	margin: -76px 0 0 -40px; /* height + margin-top = 0 */
	background: url(pageframe-topleft.png) left top no-repeat;
}
html::after
{
	/* display: block; */
	height: 76px;
	content: " ";
	line-height: 0;
	margin: 0 0 0 -40px;
	background: url(pageframe-bottomleft.png) left bottom no-repeat;
}

body
{
	margin: 0 4em 0 4em;
	background: transparent;
}

/* The main title in the upper right corner, with a shadow */

h1
{
	width: 80%;
	max-width: 580px;
	background: #005A9C;
	color: white;
	text-align: center;
	font-weight: 900;
	font-size: 200%;
	font-variant: small-caps;
	padding: 1em 0 0 0;
	margin: 0 -2em 0.5em 20%;	/* For WinIE */
}
body>h1{
	margin: -76px -2em 0.5em auto;	/* For the others */
}
h1::after
{
	display: block;
	line-height: 0;
	background: url(blueround-bottomright.png) 20px 0px no-repeat;
	content: url(blueround-bottomleft.png);
	text-align: left;
}

/* The (W3C) logo */

x a.logo img
{
	float: left;
	margin-left: -144px;
}
a.logo
{
	position: absolute;
	left: 41px;
	margin-top: 4px;
	width: 28%;
	text-align: left;
        background: none; /* Redundant; work-around for Konqueror 3.4 */
}
a.logo img
{
	max-width: 100%;
}

/* The head (sort of subtitle for the main title) */

h2.head
{
	font-size: 200%;
	line-height: 1.2;
	font-weight: 100;
	font-family: Gill Sans, sans-serif;
}
h2.head::before
{
	float: left;
	margin-right: 0.5em;
	content: "\2593\A0\2592\A \2592\A0\2593";
	font-family: Apple Symbols, FreeMono, Lucida Sans Unicode, sans-serif;
	white-space: pre;
	color: #005A9C;
}

/* The H2s get a thin blue rule below and a few differently colored
   blue squares on the left. WinIE can't handle the negative
   text-indent (nor the generated text), so use the child-selector
   trick to give it a zero text-indent instead. */

div.section h2::before
{
	content: "\25A0";
	margin-right: 1em;
	color: #005A9C;
	white-space: pre;
}
div.section h2
{
	border-bottom: thin solid #005A9C;
	padding-bottom: 0.4em;
	margin: 2.5em 0 0.2em 0;
	font-size: 120%;
	font-weight: bold;
}
div.section>h2
{
	text-indent: -1.7em;
}
div.section h2::before
{
	color: #005A9C;
}
div.section + div.section h2::before
{
	color: #007AB3;
}
div.section + div.section + div.section h2::before
{
	color: #0090D3;
}
div.section + div.section + div.section + div.section h2::before
{
	color: #005A9C;
}

/* A sidebar has the same color and the same rounded corners as the
   main title, but on all sides. */

div.sidebar
{
	float: right;
	margin: 0 -20px 0.5em 1em;	/* 20px = width of the shadow */
	width: 30%;
	color: white;
	text-align: justify;
	background: url(blueround-right.png) right center repeat-y;
	padding: 40px 40px 0 20px;	/* Top 40px reserved for ::before */
	page-break-inside: avoid;
}

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;
}
div.sidebar h3
{
	text-align: left;
}

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

div.callout, address
{
	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;
	page-break-inside: avoid;
}

div.callout::before, address::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, address::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;
}
address > strong
{
	display: block;
}

/* Subsections */

div.subsection
{
}

h3
{
	font-size: 110%;
	margin: 1.2em 0 0.3em 0;
}

img.illustration
{
	float: left;
	margin: 0 1em 0.5em 0;
}

p
{
	margin: 0.5em 0;
}

ul, ol
{
	margin-left: 1em;
	padding-left: 0;
}
li
{
	margin: 0;
	padding: 0;
}

div.references
{
	float: right;
	width: 35%;
	max-width: 20em;
	margin: 0 0 0.5em 3em;
}
div.references a
{
	color: inherit;
}

address
{
	clear: both;
}

p.copyright
{
	font-size: smaller;
}

/* Copyright and other stuff in the footer */

div.footer
{
	display: table;
	margin: 1.2em 0;
	width: 100%;
}
div.footer p
{
	display: table-cell;
	vertical-align: top;
	padding: 0 0 0 0.5em;
}
div.footer p:first-child
{
	padding-left: 0;
}