html {
  height: 100%;
  padding: 0px;
}

body {
  height: 98%;
  width: 99%;
  /*font-family: 'Open Sans', sans-serif; */
  font-family: 'Ubuntu', sans-serif;
  margin: 0px;
  padding: 0.25em 0.5%;
  min-height: 520px;
  overflow: hidden;
/*
window.innerheight / 25 = 4% = 1em ??
*/
  font-size: 4vh; /*  barely works with resize on chrome */	}

#slide {
  padding-top: 0em;
  padding-bottom: 0em;
  padding-left: 0%;
  padding-right: 0%;
  width: 100%;
  min-width : 130vh; /* min 4/3  aspect */
  height:100%;
} 

/* slide structure */
#toc {
  height: 80%;
  width: 70%;
  position: fixed;
  left: 20%;
  top: 1em;
  color: black;
  background: white;
  overflow: auto;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 10px 3px #000;
}

#toc > div > *{
  font-size:60%;
}

#toc  td {
    padding: 0 0.3em;
}

#toc tr > td:first-child{
  text-align: right;
}

#toc  a {
  color: #000080;
  text-decoration: underline;
}

#toc br {display: none;}

#slidebody a[href], #slidebody a[onclick]  {
 text-decoration: underline;
  color: #AAF;
}

#slidebody a[href^="http"]{
 font-size: 80%;
}

#slidebody a[target="Examples"]{
  color: #85DADA;
  font-size: 100%;
  text-decoration: underline;
}

#slideheader  {
  position: relative;
  width: 100%;
  height: 14%;
  border-radius : 0.5em;
  margin-bottom : 0.25em;
  /*position: absolute;
  top: 0%;*/
  background-color: #203040;
  background-image: -moz-linear-gradient(left, #002040 20%, #404040 85%);
  background-image: -webkit-linear-gradient(left, #002040 20%, #404040 85%);
  background-image: -ms-linear-gradient(left, #002040 20%, #404040 85%);
  background-image: -o-linear-gradient(left, #002040 20%, #404040 85%);
  background-image: linear-gradient(left, #002040 20%, #404040 85%);
  box-shadow: 4px 4px 2px #000;
}

#slidefooter  {
  margin: -1px;
  width: 100%;
  border: 0px;
  padding: 0px;
  height: 8%;
  background-color: #004804;
  background-image: -moz-linear-gradient(left, #004010 20%, #001800 85%);
  background-image: -webkit-linear-gradient(left, #004010 20%, #001800 85%);
  background-image: -ms-linear-gradient(left, #004010 20%, #001800 85%);
  background-image: -o-linear-gradient(left, #004010 20%, #001800 85%);
  background-image: linear-gradient(left, #004010 20%, #001800 85%);
  border-radius : 0.5em;
  box-shadow: 4px 4px 2px #000;
}

/* header */
.logo{
  width: 4.3em;
  height: 100%;
  display: inline-block;
  line-height: 1;
}

.logo img {
  margin:0.3em;
  vertical-align: middle; 
  height : 75%;
  padding: 0.1em 1%;
  background-color : white;
  /*max-width: 80%;*/
  border-radius : 0.2em;
  box-shadow: inset 2px 2px 1px #808080;
  background-color : transparent;
}

#heading {
  font-size: 130%;
  /*width: calc(100%-10em);*/
  width: 70%;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle; 
  text-align : center;
  /*-moz-transition-timing-function: ease-in;
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  -o-transition-timing-function: ease-in;
  -o-transition-property: opacity;
  -o-transition-duration: 0.5s;*/
  transition-timing-function: ease-in;
  transition-property: opacity;
  transition-duration: 0.5s;
}

#heading  div  {
  float : left;
  width : 3em;
  font-weight : light;
  font-size: 80%;
  text-align : center;
  
}

#slideheader  .info{
  width: 30%;
  height: 30%;
  font-size: 35%;
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
}

#slideheader  .info img {
  margin-left: 10%;
  margin-top: 0.15em;
  height : 90%;
  float: right;
}

#slideheader  .info > div{
  margin-top: 0.3em;
  margin-right: 1.5vh;
  text-align: right;
  height: 45%;
}

/* body */

/* footer */
#slidefooter  {
  position : relative;
}
#slidefooter .copyright{
  font-size: 40%;
  height: 70%;
  margin-left: 0.5em;
  margin-top: 0.3em;
  /* background: red; */
  line-height:130%;
  /*width: 50%; */
  text-align: left;
  display: inline-block;
}

#slidefooter .copyright a {
  font-size:130%;
  color: #80ff80;
  text-decoration: none;
}

#controls{
  position : absolute;
  right : 0px;
  top : 0px;
  width: 60%;
  /* background: green; */
  height: 100%;
  text-align: right;
}



#controls * {
  margin-right: 1.8%; 
  margin-left: 1.8%; 
  margin-top: 0.2em;
  height: 80%;
  vertical-align: middle;
  color:#0af;
  font-size:130%;
  font-weight: bold;
  cursor:pointer;
  text-decoration: none;
}

#slidefooter a img {
  position : absolute;
  left: 0.3em;
  top : 5%;
  height : 90%;
}

/* else ... */

#slidebody iframe {
  padding: 0%;
  margin: 0px;
  border: 0px;
  width: 100%;
  height: 100%;
  display: block;
}

#slidebody ul {
  list-style-type: square;
  margin : 0.1em 0.5em; 
}

#slidebody ul ul{
  list-style-type: disc;
}
#slidebody ul ul ul{
  list-style-type: circle;
  margin : 0.1em 0.5em; 
}
#slidebody > div  > ul:first-child {
  margin : 0.5em 1em; 
}

#slidebody p {
  margin : 0.1em 0.5em; 
}  

blockquote { 
  padding: 1em;
  font-style: italic;
  color: yellow;
}
  
ul  li{
  padding-top: 0.05em;
  padding-left: 0.5em;
}

ul li ul li {font-size: 90%}

.xxxs {font-size: 33%;}

.xxs {font-size: 50%;}

.xs {font-size: 70%;}

.s {font-size: 80%;}

.m {font-size: 100%;}

.l {font-size: 120%;}

.xl {font-size: 150%;}

.xxl {font-size: 200%;}

.xxxl {font-size: 400%;}

.c {text-align: center;}

.r {color : red;}

.y {color : yellow;}

.g {color : #20ff20;}
  
  
code {font-weight: bold;
  color : #ffff80}

em {color: orange; }

.hide {
  color: black;
  background : black;
}

div.twocol {
  padding : 1em 1%;
  float : left;
  width : 47%;
}

div.twocol + div.twocol + *{
  clear: both;
}
  
table{
  width : 90%;
  margin : 0.2em 5%;
  border-collapse:collapse;
}

table th, table td{
  border: 2px solid white;
  padding : 0.4em;
  margin : 0px;
}

  
  /*Highlight*/
.hl	{ color:#ffffff; font-family:'Courier New'; font-weight: bold; margin:1em; color:#ffff80}
.hl.num { color:#ff875f; }
.hl.esc { color:#ff5fd7; }
.hl.str { color:#ffd7d7; }
.hl.pps { color:#ffd7d7; }
.hl.slc { color:#a8a8a8; font-style:italic; }
.hl.com { color:#a8a8a8; font-style:italic; }
.hl.ppc { color:#ffffff; }
.hl.opt { color:#ffffff; }
.hl.lin { color:#a8a8a8; font-style:italic; }
.hl.kwa { color:#00d700; }
.hl.kwb { color:#5fafff; }
.hl.kwc { color:#006bd6; }
.hl.kwd { color:#d600d6; }
.hl {line-height: 1; margin:0px;}

.questions {
  color: #a0a0ff;
}

.roman {font-family: serif;}

.indent {padding: 0px 2em 0px 2em;}

.floatr {
  float : right;
  padding : 0.5em;
}

.floatl {
  float : left;
  padding : 0.5em;
}

.bestfit {
  max-height : 60vh;
  max-width : 96%;
  margin : auto;
  border-radius: 5px;
}

.full {
  max-height : 98.5%;
  max-width : 99.5%;
  text-align: center;
  margin : auto !important;
  padding : 0px !important;
}

.clear{
  clear: both;
 }
 
@media screen {
	body {
	  color: white;
	  background-color: #808080;
	}
  
  #slidebody > * {
    transition-timing-function: ease-out;
    transition-duration: 0.5s;
    padding-left: 4%;
    padding-right: 3%;
    width: 92%;
    display: block;
    height : 99.5%; /* 100% => overflow in webkit */
    overflow: auto;
  }
  
  #slidebody  {
    position: relative;
    margin: 0px;
    width: 98%;
    border: 0px;
    padding: 0.5em 1%;
    height: 72%;
    margin-bottom : 0.25em;
    line-height:1.2;
    border-radius: .5em;
    box-shadow: 4px 4px 2px #000;
    background-color: #001010;
    background-image: -moz-linear-gradient(top left, #002030 20%, #000020 100%);
    background-image: -webkit-linear-gradient(top left, #002030 20%, #000020 100%);
    background-image: -ms-linear-gradient(top left, #002030 20%, #000020 100%);
    background-image: -o-linear-gradient(top left, #002030 20%, #000020 100%);
    background-image: linear-gradient(top left, #002030 20%, #000020 100%);
    overflow: auto;
  }

  .w  {color : white;}
  
  .onprint {display:none;}
  
  .rb{background-color:#200000; opacity=1;}
  
  code {color: white; font-size: 80%;}
  
  #slides {display:none;}
  
  div.deco {
    height : 100%;
    position: relative;
      }

  div.deco > * {
    position : absolute;
  }

  div.deco > img, div.deco > div + div {
    right : 2%;
    max-width: 68%;
    max-height:100%;
    border-radius: 0.5em;
  }
  div.deco > .goals {

    max-width: 30%;
    max-height:90%;
    margin: auto;
    background-color: #222;
    color: #CCf;
    z-index: 5;
    border-radius: 0.5em;
    opacity: 0.7;
  }  
  div.deco > .annotation {

    right : 2%;
    bottom: 2%;
    font-size :70%;
    max-width: 60%;
    max-height:100%;
    font-style: italic;
  }  
  
}

@media print {

	body {
	  color: black;
	  background: white;
    font-size: 12pt;
	}
  
  #slides {
    page-break-inside : avoid;
    border-radius : .5em;
    display: block;
    clear: both;
  }

  code {color: blue;}
  
  .logo {width: 15%;
    margin: 1%;
  }
  
  .pnotes{
    color: red;
    font-family: serif;
  }
  
  #slide {
    display: none; 
  }
  
  h1:not(.empty):before {
      counter-increment: headings;
      content: counters(headings, ".") " ";
    }  
    
  section:first-of-type, section .start {
      counter-reset: headings;
    }    

}