/* Basic style */
    body {margin-left: 1%; font-family: sans-serif;
          color: black; background-color: white; margin-top: 0; margin-right: 0 }

    body>:first-child { height: 800px; } /* background-image: url(amsterdam.jpg) } /* crashes Amaya */
    body>:first-child { background-color: black}
    body>:first-child>p { margin-top: 0px; color: white; text-align: left; padding-left: 2em }
    body>:first-child a { color: #aaf }

/* The cover page can have special paragraphs for subtitle and author */
    p.subtitle { font-weight: bold; }
    p.author { font-style: italic}

/* Each slide is a plain <div>.
   Special pages (intro material, etc,) have classes like cover, intropage, endpage */
    body>div {
        border: medium black solid;
        margin: 1em 0;
        width: 40em;
        padding-bottom: 0;
        page-break-inside: avoid;
        overflow: hidden;
    }

    div.intropage {border: medium red dotted}
    div.expose { display: none }
    div.longversion { display: none }

/* To warn myself against nested div's */
    div div {background-coloro: red}

/* I use h1 for the talk, and h2 for each slide, h3 for continuation slides */
    h1, h2, h3 {font-family: sans-serif; text-align: center; 
                padding: 0.5em 1em;  margin-top: 0; margin-left: auto; margin-right: auto; }

    h1 { color: white; background-color: transparent; 
         margin-left: 0; text-align: left; border: thin black solid }

    h2, h3 { background-color: yellow; }

    h3 {padding-left: 2em }

/* Slide contents */
    p { padding-left: 1em; padding-right: 1em; margin-bottom: 1em; margin-top: 0 }
    ul, ol, dl { padding-left: 1em; padding-right: 1em; margin-left: 1em }
    ol {margin-left: 2em}
    pre { margin-left: 2em; margin-right: 1em; padding-left: 0em; background-color: #eef;
          border: thin dotted blue; overflow: hidden }
    pre.html { background-color: #fcc; border: thin dashed black}

/* Don't underline links */
    a {text-decoration: none}
    a:hover {background-color: yellow}

/* Images */
    img.small {width:25%; text-align: center; margin-left: auto; margin-right: auto }
    img.fit {height: auto; width:100%; text-align: center; margin-left: auto; margin-right: auto }
    img.fitheight {height: 18em; width: auto; text-align: center; margin-left: auto; margin-right: auto }
    img.framed  {float: right; width: 50%;  padding: 1ex; border: thin black solid}
    img.framedh {float: right; height: 80%; padding: 1ex; border: thin black solid}
    .centred { margin-left: auto; margin-right: auto; text-align: center }
    .floatright {float: right; width: auto}
    .floatleft {float: left; width: auto; margin-right: 1em; }

/* Tables */
    table {border-collapse: collapse; padding-left: 1em; font-size: 100%}
    th {color: white; background-color: #888}

/* Frames */ 
    iframe {margin-left: 5ex; width: 90%; height: 20ex; border: none}   
    iframe.short {height: 10ex}
    iframe.medium {height: 25ex}
    iframe.long {height: 80ex}
    .source {float: right}

/* until browsers can print headers and footers properly */
    div.footer {display: none}
    div.introfooter {display: none}

/* Full screen mode */

@media projection { 
/* changes/adds the following properties */
    body {font-size: 20pt; margin-left: 0; padding: 0}
    body>div { page-break-after: always; border-style: none; margin: 0; width: 100%}
    div.expose { display: block }
    div.intropage, div.appendix, div.footer, div.introfooter  {display: none}
    div img {width: auto}
    :visited {color: blue}
}

@media print {
	/* I print two slides to a page (height 12cm, page-break-within: avoid),
	   with a border round each and number each slide.
	   I don't number presentation slides,
	   in case I have added pages since printing.
	*/

      div, div.filler {
		margin-left: 2cm; height: 12cm; margin-top: 1cm;
		border: thin black solid;
	}

      h1 {margin-top: 10cm }
	h2, h3 { counter-increment: slide }
	h2:before, h3:before { font-size: 100%; font-weight: normal; 
                             content: counter(slide) "&nbsp; &nbsp;"}

      .cover { text-align: center; border: none}
      .intropage {page-break-before: always; height: 28cm; border: none}
      .endpage {height: 80%;}
      ol { padding-top: 2cm; padding-left: 2cm; }

	/* Footers until printing works right */
      div.introfooter {
                display: none;
		    text-align: center;

                margin-left: 0;
                margin-top: 1em;
		    counter-increment: ipage;

                content: "Talk name &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;" counter(ipage, lower-roman) " &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Steven Pemberton";
      }

	div.footer {
                display: none; text-align: center;

                margin-left: 0;
                margin-top: 4cm;

		    counter-increment: page;
                   content: "Talk name &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;" counter(page) " &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Steven Pemberton";
        }

} /* media print */

/* Force pages */
.page {page-break-before: always}
.endpage {page-break-after: always}