/*
   Stylesheet to be used by the all.html file. The same stylesheet will be used by all 
   generated HTML files, and contains the general style definitions.
   I. Herman
   $Date: 2003/05/23 14:52:37 $
*/   

/* Note that most of the font sizes are set in percentages!!!!! */

body {
    background: white;  
    background-image: url("W3CBackground.png");
    background-repeat: repeat-y;
    background-position: top left;
    background-attachment: fixed;
    font-family:  arial, helvetica, sans-serif;
    color: #00135f;
    font-size-adjust: 0.5;
    margin: 0;
    padding: 0;
}

/* ===================================================================================== */

/* The real 'meat' on a slide. This setting is valid for all media  */
/* I think it is, theoretically, unnecessary to repeat the background stuff here.
However, IE6 seems to have a bug in setting the left border and padding on this thing
and draws over that background (whereas Mozilla is all right). I tend to believe
the correctness of Mozilla, but had to repeat this background stuff to get it
working in IE6 ;-(
To be even more precise: I think the correct thing to do would have been to 
set the margin to 100 and leave the padding intact. But then, again in IE,
the background image *defined in the body* reappears in the slide content, too,
as an extra vertical band. I do not understand why.
Sigh... the settings below work in both browsers, but it is either a mess, or I am dumm (or both)
Also, for some reason, this has no effect when in print mode. I have no idea why (I tested it
on Mozilla)
*/
div.slideContent {
    text-align: left;
    overflow: auto;
    padding: 0.5em;
    color: black;
    padding-left: 110px;
    margin-left: 0px;
    margin-top: 0;
    background-image: url("W3CBackground.png");
    background-repeat: repeat-y;
    background-position: top left;
    background-attachment: fixed;
}

/* ============================================================= */
/* General CSS statements, regardless of the divs and the media  */
/* ============================================================= */

img { 
    border: 0;
}

blockquote, q { 
    color: #aa4444; 
    font-style: italic;
}

/* Headers: in general, h1 is used for the slide title, and is treated later.
   Having said that, it is probably not a good idea to use these in a slide
   anyway!
*/
h2 { 
   font-size: 130%; 
   font-weight: bold;
}
h3 { 
   font-size: 120%;
   font-weight: bold;
}  
h4 { 
   font-size: 100%;
   font-weight: bold;
}
h5 { 
   font-size: 100%;
   font-style: italic;
}
h6 { font-size: 100% }
h1 { clear:both }

/* Try to save some space on the slides... */
div.slide p, div.projSlide p, div.genSlide p { 
    margin-top: 0; 
    clear:both;
}

/* Lists */
dt  { 
    font-weight: bold; 
    color:darkGreen; 
    fill: darkGreen;
} 
li li  { 
   font-size: 90%
}
dl dl  { 
   font-size: 90%
}
dd     { 
   font-size: 90%
}

/* I use paragraphs quite often within lists, but they should not take too much space... */
dl p, ul p, ol p, dl ol, dl ul, dl dl, ol ol, ol dl, ol ul, ul dl, ul ol, ul ul {
    margin-top: 0;
    margin-bottom: 0;
}

/* These are for CS slides ;-) controlling the code type text is important... */
pre,tt,samp  { 
    color: maroon; 
    font-weight: bold; 
    font-family: "Courier New", courier, monospace;
    margin-bottom: 0; 
    margin-top: 0;
    font-size-adjust: 0.4;
}

code { 
    color: maroon; 
    font-weight: bold; 
    font-family: "Courier New", courier, monospace;
    font-size-adjust: 0.4;
}
pre, tt, samp { 
    font-size: 70%
}          

/* Emphasis */
em { 
   color: maroon; 
   font-style:italic;
}

/* Various emphasis colours. */
.emph1 { 
   color: blue;
}
.emph2 { 
   color: #006400;
}
.emph3 { 
   color: #cc0066;
} 
.emph4 { 
   color: #ff00cc;
}
.emph5 { 
   color:red;
}

ul, ol { 
   margin-left: 18pt; 
   margin-top: 0.5em; 
   margin-bottom: 0.5em;
}

/* Tables. The table colouring reflect my taste, obviously... */
table.full { 
   width: 85%;
}
th { 
   text-align: center;
   font-weight: bold;
}
table.coloured td, td.coloured, table.colored td, td.colored  { 
   background: #CCFFFF;
}
table.coloured th, table.colored th  { 
   background: #c0c0c4;
}

/* Link control */
a:link, a:visited, a:active { 
   color: #006699; 
   text-decoration: none;
}
a:hover, a.focus { 
   background: #FFA;
}

/* I never know whether I use British or US spelling... */
.center, .centre { 
   text-align: center;
}

/* This filters out svg only portions from the XHTML output! */
.svgOnly { 
   display: none;
}

/* ===================================================================================== */
/* The generated signature for a slide is enclosed into a div.signature                  */
/* The signature itself is a table; the table elements have all their specific classes:
   td.authorSig      is the author field, left cell of the table
   td.dateSig        is the date, middle cell of the table
   td.slideNumberSig is the number, right cell of the table
/* ===================================================================================== */

/* Signature. Contains one table with three elements. */
div.signature {
    margin-top: 0.2em;
    font-size: 10pt;
    border-top: medium groove #ccf;
}

div.signature table { 
    width: 90%;    
}

/* Styles for the three table cells of the signature */
div.signature td.authorSig { 
    text-align: left; 
    width: 33%;
    font-size: 10pt;
}

div.signature td.dateSig { 
    text-align: center; 
    width: 33%;
    font-size: 10pt;
    
}

div.signature td.slideNumberSig { 
    text-align: right; 
    width: 33%;
    font-size: 10pt;
}

/* ======================================================================== */
/* The table of content is enclosed into a div.toc                          */
/* ======================================================================== */

div.toc { 
   padding-left: 1em;
}
div.tocTitle h1 { 
   color: navy; 
   font-size: 220%; 
   padding-top: 1em;
}
div.tocTitle h2 { 
   color: navy; 
   font-size: 120%; 
   text-align: center;
}

div.prologue { 
			text-align: justify; 
			margin-bottom: 1em; 
			margin-top: 1em; 
			padding: 1em;
			}

div.tocTitle {
    margin-top:-2em;
    font-weight: bold;
    text-align: center;
    padding-left:0.3em;
    border-bottom-width: medium;
    border-bottom-color: navy;
    border-bottom-style: ridge;
}

/* ===================================================================================== */
/* ===================================================================================== */
/* Font size settings for the generated slides.                                          */
/* Note that percentages are used, ie, the browser's font setting should influence the   */
/* final outlook!!!                                                                      */

div.genSlide { 
   font-size: 240%;
}

div.genSlide td, div.genSlide th {
   font-size: 220%;
}

/* ===================================================================================== */
/* The slide's title is set by the h1 element                                            */

div.slide h1, div.projSlide h1, div.genSlide h1 {
    color: white;
    text-align: center;
    font-weight: bold;
    margin-top: -50px;
    padding-left: 0em;
    padding: 0;
}


div.slide h1, div.projSlide h1 {
    font-size: 140%;
}

/* Slide title */
div.genSlide h1 {
    font-size: 110%;
}

/* ===================================================================================== */
/* The title area is enclosed into a div.header and includes a table with the logo and
   the navigational images. 
   Note that this header is generated for standalone slides only,
   projHeader for projection mode/printer mode only
*/
div.projHeader {
    background: #048;
    color: white;
}

div.header {
    font-size: 24pt;
    color: white;
    background: #048;
    height: 60px;
}

div.header table { 
    width: 100%;
}

/* Table cell in the header for the logo */
div.header td.logoHd {
    text-align: left;
    vertical-align: top;
}

/* Table cell in the header for the navigation arrows */
div.header td.navigationHd {
    text-align: right;
    vertical-align: top;
}


/* ================================================================ */
/*  Styles for the title page                                       */
/* ================================================================ */

p.TitleMajor {
    text-align: center;
    font-size: 150%;
    font-weight: bold;
    padding-top: 2em;
    margin-bottom: 2em;
    font-style: italic;
}

p.TitleMinor{
    text-align: center;
    font-size: 90%;
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-style: italic;
}

p.TitleMinor2, p.TitleMinor3, p.TitleMinor4 {
    text-align: center;
    font-size: 70%;
    font-weight: bold;
    margin-bottom: 0.5em;
}    

p.TitleMinor2{
    padding-top: 2em;
}

p.TitleMinor4{
    padding-top: 3em;
}