/* Basic style */
body {font-family: sans-serif;
      color: black; background-color: white; margin: auto; max-width: 100ex }

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 }

/* 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 } /* When a slide is slowly exposed, initial slides, but not the last are so marked */
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; 
            padding: 0.5em 1em;  margin-top: 0; margin-left: auto; margin-right: auto; text-align: center}

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 }

/* The cover page can have special paragraphs for subtitle and author */
p.subtitle { font-weight: bold; }
p.author { font-style: italic}
div.toc {padding: 0 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 }

pre { margin-left: 2em; margin-right: 1em; padding-left: 0em; background-color: #eef;
      border: thin dotted blue; overflow: hidden; font-family: monospace }
pre.html { background-color: #fcc; border: thin dashed black}

div table {padding-left: 1em; font-size: 100%}
div img {width: 100%} /* crashes Amaya */
div img.smaller {width:50%; text-align: center; margin-left: auto; margin-right: auto }
div 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: 18em; width: auto; padding: 1ex; border: thin black solid}
.centred { margin-left: auto; margin-right: auto; text-align: center }
code {color: #00c}

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

/* Some images */
.floatright {float: right; wi,dth: auto}
.floatleft {float: left; width: auto; margin-right: 1em; }

/* Tables */
    table {border-collapse: collapse;}
    th {color: white; background-color: #888}

/* Frames */ 
    iframe {margin-left: 5%; width: 85%; height: 29ex; border: none }   
    iframe.long {height: 80ex}
    iframe.medium {height: 40ex}
    iframe.short {height: 16ex}
    .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; max-width: 100%}
	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}
	p, ul, blockquote, pre {margin-left: auto; margin-right: auto; max-width: 60ex }
	pre {padding: 0.5ex}
	li {max-width: 50ex; margin-left: 1.5ex;}
	: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;
	counter-increment: slide
    }
    div.intropage {
	height: auto;
    }
    div.toc{ border: none }
    div.toc ul ul {display: none}
    
    h1 {margin-top: 2cm; counter-reset: slide }
    h2, h3 { }
    h2:before, h3:before {
	font-size: 100%; font-weight: normal;
        content: counter(slide) "  "
    }

    .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                                                  " counter(ipage, lower-roman) "                                                      Steven Pemberton";
      }

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

        margin-left: 0;
        margin-top: 4cm;
	
	counter-increment: page;
        content: "Talk name                                                  " counter(page) "                                                    Steven Pemberton";
    }

} /* media print */

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