/*
   Stylesheet to be used by the all.html file. The same stylesheet will be used by all 
   generated files, and contains the general style definitions.
   I. Herman
   $Date: 2002/09/30 10:57:52 $
*/   

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

/* The CSS file relies on some conventions to be used by the source XHTML file and
   the generated files. These are:
   
   div.slide encloses a full slide in the source file
   
   
   div.projSlide encloses each slide in the 'projection ready' Overview file;
   div.genSlide encloses each slide when individual XHTML files are generated
   
   In both cases, the real slide content (ie, not the title and the link images) is
   enclosed into a div.slideContent
   
   
   In the case of SVG files: the background is rendered by a rect.Background, so by
   setting its fill attribute one can conrol the bacgkround of the slide; the
   real slide content is drawn on the top of a rect.slideContent (again, one
   can control the background by a fill attribute). The border of the slide content
   is controlled by xslt templates, see the desccription. However the colours
   used by the frame are controlled by path.frameLight and path.frameDark; one
   can set the colour of these, too.
*/

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

/* Size of slides and slide content... */
div.genSlide {
    position: absolute; 
    width:  98%; 
    height: 99%; 
    margin: 0;
    padding: 0;
    text-align: center;
}

/* The real 'meat' on a slide. This setting is valid for all media  */
div.slideContent {
    text-align: left;
    overflow: auto;
    border: ridge 4pt;
    padding: 0.5em;
    background: white;
    color: black;
    margin-left: 2pt;
    margin-top: 0;
}

@media screen {
    div.slideContent {
        height: 74%;
        width: 97%;
    }    
}

@media projection {
    div.slideContent {
        height: 74%;
        margin-right: 2pt;
    }    
}

body {
    background:  #ffcc99; /* #ffcc99; #eeeeff; */ 
    font-family:  georgia, verdana, trebuchet, arial, helvetica, sans-serif;
    color: #00135f;
    font-size: 10pt; 
    font-size-adjust: 0.5;
    margin: 0;
    padding: 0;
}

/* SVG Text elements */
text, tspan {
    fill: #00135f;
}

/* SVG Slides may use all kinds of fonts for themselves, and we do not know that in
   advance. It is safer to list the font families explicitly for the generated
   text types, instead of setting a global value.
*/
.p, .li-1, .li-2, .dt, .q, .blockquote, .acronym, .abbr, .strong,
.h1, .h2, .h3, .h4, .h5, .h6, .dt, .dd, .td, .th {
    font-family: Georgia, Verdana, Trebuchet, Arial, Helvetica, sans-serif;
}

/* ================================================================ */
/*      Styles for the title page of the presentation (if used)     */  
/* ================================================================ */
text.TitleMajor {
    text-anchor: middle;
    font-size:55px; 
    font-weight:bold;      
    stroke:none;
}

text.TitleMinor, tspan.TitleMinor {
    text-anchor: middle;
    font-size:40px; 
    font-weight:bold; 
    font-style: italic;     
    stroke:none;
}

text.TitleMinor2, tspan.TitleMinor2 {
    text-anchor: middle;
    font-size:25px; 
    font-weight:bold;      
    stroke:none;
}

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;
}


/* ============================================================= */
/* General CSS statements, regardless of the divs and the media  */
/* The XHTML-like classes (eg, .h2, .h3, etc) are used by the    */
/* generated SVG!                                                */
/* ============================================================= */


img { border: 0; }

.p, .li-1, .dt, .q, .blockquote, .td, .th { font-size: 38px; }

.i                      { font-style: italic; }
.b                      { font-weight: bold; }
.acronym, .abbr         { font-variant: small-caps; }
.strong                 { font-weight: bold; fill: maroon; }
.kbd, .var              { font-family: "Courier New", courier, monospace; }

blockquote, q, .blockquote, .q { color: #aa4444; fill: #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% }
.h2 { font-size: 46px; font-weight: bold; }
.h3 { font-size: 42px; font-weight: bold; }
.h4 { font-size: 38px; font-weight: bold; }
.h5 { font-size: 38px; font-style: italic; }
.h6 { font-size: 38px; }

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, .dt { font-weight: bold; color:darkGreen; fill: darkGreen; } 
li li  { font-size: 90% }
dl dl  { font-size: 90% }
dd     { font-size: 90% }
.dd    { font-size: 34px; }
.li-2  { font-size: 34px; }
.li-3  { font-size: 30px; }

/* 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,.pre,.samp  { 
          color: maroon; fill:maroon; 
          font-weight: bold; 
          font-family: "Courier New", courier, monospace;
          margin-bottom: 0; margin-top: 0;
          font-size-adjust: 0.4;
}
code, .code { 
          color: maroon; fill: maroon; 
          font-weight: bold; 
          font-family: "Courier New", courier, monospace;
          font-size-adjust: 0.4;
}
pre, tt, samp { font-size: 70% }          
.pre, .samp { font-size: 28px;  }


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

/* Various emphasis colours. Note the fill values; these are for the SVG usage! */
.emph1 { color: blue; fill: blue; stroke: none; }
.emph2 { color: #006400; fill: #006400; stroke: none;  }
.emph3 { color: #cc0066; fill: #cc0066; stroke: none; } 
.emph4 { color: #ff00cc; fill: #ff00cc; stroke: none;  }
.emph5 { color:red; fill: red; stroke: none; }

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; }
tspan.th { text-anchor: middle; font-weight: bold;  }
table.coloured td, td.coloured, table.colored td, td.colored  { background: #CCFFFF; }
table.coloured th, table.colored th  { background: #c0c0c4; }
tspan.colored tspan.th, tspan.coloured tspan.th { font-style: italic; fill:green; }

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


/* I always mix up the British and US spelling... */
.center, .centre { text-align: center; }

/* This filters out svg only portions from the XHTML output! */
div.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-style: italic;
    font-size: 10pt;
}

div.signature table { 
    width: 100%;    
}

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

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

div.signature td.slideNumberSig { 
    text-align: right; 
    width: 33%;
    font-style: italic;
    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%; }
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;
}

@media projection, print { 
    div.toc { display: none }
    div.prologue { display: none }
}

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

/* Note also the usage of the media selector for the projection mode!                    */

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

@media projection {
    div.projSlide { font-size: 240%; }
    div.projSlide td, div.projSlide th { font-size: 220%; }
}

@media print {
    div.projSlide { font-size: 240%; }
    div.projSlide td, div.projSlide th { font-size: 220%; }
}

@media screen {
    div.projSlide, div.slide { 
       margin-bottom: 1em;
    }
}

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

div.slide h1, div.projSlide h1, div.genSlide h1 {
    color: navy;
    text-align: center;
    font-weight: bold;
    margin-top:-42px;
    padding-left: 0em;
    border-bottom-color: navy;
    border-bottom-style: ridge;
    border-bottom-width: medium;
    padding: 0;
}

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

@media screen {
    div.projSlide h1 {
        background: #FFFFCC;
        border-bottom-width: thin;
    }
}

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

@media screen {
    div.projSlide h1 { margin-top: 0em; }
}

/* ===================================================================================== */
/* 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.
*/
div.header {
    font-size: 24pt;
}

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;
}

/* ===================================================================================== */
/* This is to ensure the separation of the slides when projection/print mode is used...  */
@media projection {
    div.slide, div.projSlide { 
        page-break-before: always;
    }
    div.slide, div.projSlide { 
        margin-top: 1em;
    }
    div.slide { 
        margin-top: 2em;
        border: none;
    }
}

@media print {
    div.projSlide { 
        page-break-before: always;
    }
    div.slide { 
        margin-top: 2em;
        border: none;
    }
}
    
/* ================================================================================== */
/* This part of the CSS file is for the SVG slides, and is ignored by HTML!!!!!       */
/* ================================================================================== */

/* The text used for the title in the middle of the title area */
text.slideTitle{
    text-anchor: middle;
    font-size:50px; 
    font-weight:bold;      
    stroke:none;
    font-family: Georgia, Verdana, Trebuchet, Arial, Helvetica, sans-serif;
}

feSpecularLighting.arrow {
    lighting-color: lightGray;
}

feSpecularLighting.title {
    lighting-color: gray;
}

rect.w3clogoBackground {
    fill: #ffcc99;
    stroke: none;
}

rect.Background {
    fill: #ffcc99; /* #eeeeff; #ffcc99; */
    stroke: none;
}

rect.slideContent {
    fill: white;
    stroke: none;
}

rect.tocItem {
    fill: white;
    stroke: black;
}


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

/* The link arrows */
path.linkArrow, circle.linkArrow  { 
    stroke:none; 
    fill:#0b02ff;
}

path.linkArrowM, circle.linkArrowM  { 
    stroke:none; 
    fill:red;
}

text.authorSig { 
    text-anchor: start;
    font-style: italic;
    font-size: 15px;
    fill:#00135f; 
    stroke:none;
    font-family: Georgia, Verdana, Trebuchet, Arial, Helvetica, sans-serif;
}

text.dateSig { 
    text-anchor: middle;
    font-style: italic;
    font-size: 15px;
    fill:#00135f; 
    stroke:none;
    font-family: Georgia, Verdana, Trebuchet, Arial, Helvetica, sans-serif;
}

text.slideNumberSig { 
    text-anchor: end;
    font-style: italic;
    font-size: 15px;
    fill:#00135f; 
    stroke:none;
    font-family: Georgia, Verdana, Trebuchet, Arial, Helvetica, sans-serif;
}

/* The frame colours */
path.frameLight { 
    stroke: none; 
    fill: lightGray;
}

path.frameDark { 
    stroke: none; 
    fill: black;
}

/* Tooltip colour and text control */
text.tooltip { 
    text-anchor: start;
    font-style: italic;
    font-size: 15px;
    fill:white; 
    stroke:none;
}

stop[id~="tooltip-forward-c1"] {
    stop-color:darkolivegreen;
    stop-opacity:1
}

stop[id~="tooltip-forward-c2"] {
    stop-color:darkseagreen;
    stop-opacity:1
}
stop[id~="tooltip-forward-c3"] {
    stop-color:lightgreen;
    stop-opacity:1
}

stop[id~="tooltip-back-c1"] {
    stop-color:darkmagenta;
    stop-opacity:1
}

stop[id~="tooltip-back-c2"] {
    stop-color:magenta;
    stop-opacity:1
}

stop[id~="tooltip-back-c3"] {
    stop-color:plum;
    stop-opacity:1
}