/* presentation.css

   Copyright (c) 2011-2012 Gerald Senarclens de Grancy
   GNU General Public License version 3

*/

body {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
  height: 100%;
  color: #120873;
  background-color: white;
  font-family: 'Averia Gruesa Libre', sans-serif;
  font-size: 150%;
}

@media print {
  body { font-size: 110% !important; }
}

/* Title Slide */
div.slide.titlepage {
  text-align: center;
}
div.slide.titlepage.h1 {
  padding-top: 40%;
}
/** For slides showing mainly a single image
 * To use it, add a style="background-image: url(...)" declaration to the slide
 *
 * If you desire to have a text, use style="margin: 20% 0% 0% 70%;" to
 * position it and adjust the color to fit to the image.
 */
div.slide.image {
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: 100% 100%;
}
div.slide.image > h1 {
  background-image: none;
  background-color: transparent;
  box-shadow: 0 0 0 0;
}

#cover-text {
  position: absolute;
  bottom: 12%;
  max-width: 65%;
}
#title {
  font-family: 'Indie Flower', cursive;
  font-size: 300%;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 0.5em;
  line-height: 100%;
}
#subtitle, #conference {
  font-size: 150%;
  font-weight: bold;
  margin-left: 0;
  line-height: 120%;
}

#conference {
  margin-bottom: 0;
}

#author {
  margin: 1em 0 0 0;
}

#author a:link, #author a:visited {
  color: inherit;
}

div.slide.cover {
  color: white;
  background-color: #728ec2;
  padding-left: 3em;
}

@media print {
  #cover-text {
    position: static;
  }
}


/* General Slide Layout */

div.slide {
  z-index: 20;
  margin: 0 0 0 0;
  padding: 0;
  border-width: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 120%;
  background-color: transparent;
  page-break-before: always;
}

div.slide.clean {
  background-color: white;
}

div.slide>* {
  margin: 3%;
/*  margin-left: 1em;
  margin-right: 1em;*/
}

div.slide>br {
  margin-top: 0;
  margin-bottom: 0;
}

div.incremental>* {
  margin-bottom: 1em;
}

div.background {
  background-color: transparent;
}

div.slide h1 {
  padding-left: 1em;
  padding-top: 0.5em;
  margin-bottom: 0.8em;
  margin-top: 0em;
  margin-right: 0;
  min-height: 1.5em;
  height: 1.5em;
  font-family: 'Indie Flower', cursive;
  font-size: 180%;
  color: #c9fc6a;
  box-shadow: 0 0 12px 8px #437a00;
  background-color: #639a00;
}

@media print {
  div.slide h1 { font-size: 150%; }
}

div.slide h1 a {
  color: white;
  text-decoration: none;
}

div.slide h1 a:link {
  color: white;
  text-decoration: none;
}

div.slide h1 a:visited {
  color: white;
  text-decoration: none;
}

div.slide h1 a:hover {
  color: white;
  text-decoration: underline;
}

div.slide h1 a:active {
  color: red;
  text-decoration: underline;
}

/* separator slides */
div.slide.separator {
  display: table;
  height: 100%;
  width: 100%;
}

div.slide.separator h1 {
  display: table-cell;
  font-size: 280%;
  background-size: 25% auto;
  background-position: 99% 3%;
  vertical-align: middle;
  text-align: center;
  height: 100%;
  width: 100%;
}

div.slide.separator.alert h1 {
  background-color: #FFA500;
  color: #1047A9;
}

div.slide.separator.inverted h1 {
  background-color: #c9fc6a;
  color: #639a00;
}

div.slide.separator a:link, div.slide.separator a:visited {
  color: inherit;
  text-decoration: inherit;
}

div.slide.separator a:hover {
  text-shadow: #aaa 0 0 20px;
}

/* styling for named background */
div.background.slanty {
  z-index: 2;
  bottom: 0;
  height: 100%;
  background: transparent;
}

div.background.slanty img { margin-top: 4em; width: 100%; height: 80% }

/* the following makes the pre background translucent */
/* opacity is a CSS3 property but supported by Mozilla family */
/* filter is an IE specific feature that also requires width */
div.slide.slanty pre {
  width: 93%;  /* needed for IE filter to work */
  opacity: .8;
  filter: alpha(opacity=80);
}

li pre {
  margin-left: 0;
  font-style: normal;
}

@media print { pre { font-size: 60%; } }

pre, pre.prettyprint {
  border-color: #639a00 !important;
  color: #120873;
  background-color: #c9fc6a;
  padding: 0 1em 1em 1em !important;
  border-left-width: 1em !important;
  border-top-width: thin;
  border-right-width: thin;
  border-bottom-width: thin;
  page-break-inside: avoid;
}

blockquote { font-style: italic }

img { background-color: transparent }

p.copyright { font-size: smaller }

.center { text-align: center }
.footnote { font-size: smaller; margin-left: 2em; }

a img { border-width: 0; border-style: none }

a:visited { color: navy }
a:link { color: navy }
a:hover { text-decoration: underline }
a:active { text-decoration: underline }
a {text-decoration: none}

/* advanced attribute selection; matches all links starting with http and adds a little icon to them */
a[href^="http"] {
  background-image: url(images/link_external.png);
  background-repeat: no-repeat;
  background-position: right top;
  padding-right: 10px;
}

/* same as above, but for mailto links */
a[href^="mailto:"] {
  background-image: url(images/link_email.png);
  background-repeat: no-repeat;
  background-position: right top;
  padding-right: 10px;
}

/* mark links to pdf files with a little icon */
/* this declaration has to be below the http declaration so that
 *   pdf files will have the corresponding icon, no matter whether they are
 *   external or not (the specificity of both selectors is the same) */
a[href$=".pdf"] {
  background-image: url(images/link_pdf.png);
  background-repeat: no-repeat;
  background-position: right top;
  padding-right: 22px;
}

a[href$=".py"] {
  background-image: url(images/link_py.png);
  background-repeat: no-repeat;
  background-position: right top;
  padding-right: 22px;
}

a[href$=".tar"], a[href$=".tar.gz"], a[href$=".tar.bz2"] {
  background-image: url(images/link_tar.png);
  background-repeat: no-repeat;
  background-position: right top;
  padding-right: 22px;
}

/* Mark links to image files with a little icon.
 * This doesn't use attribute matching as for pdf files as it is not desirable
 * to automatically mark all links to images.
 */
a.to-img {
  background-image: url(images/link_img.png);
  background-repeat: no-repeat;
  background-position: right top;
  padding-right: 22px;
}

/* mark links to image files with a little icon */
/* this declaration has to be below the http declaration so that
 *   image files will have the corresponding icon, no matter whether they are
 *   external or not (the specificity of both selectors is the same) */
/*a.mark[href$=".jpg"], a.mark[href$=".jepg"], a.mark[href$=".png"], a.mark[href$=".svg"] {
  background-image: url(images/link_img.png);
  background-repeat: no-repeat;
  background-position: right top;
  padding-right: 22px;
}*/


.navbar a:link {color: white}
.navbar a:visited {color: yellow}
.navbar a:active {color: red}
.navbar a:hover {color: red}

ul { list-style-type: square; }
ul ul { list-style-type: disc; }
ul ul ul { list-style-type: circle; }
ul ul ul ul { list-style-type: disc; }
li { margin-left: 0.5em; margin-top: 0.5em; }
li li { font-size: 85%; font-style: italic }
li li li { font-size: 85%; font-style: normal }

div dt {
  margin-left: 0;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: bold;
}

div dd {
  margin-left: 2em;
  margin-bottom: 0.5em;
}


/*ul,ol,blockquote,h2,h3,h4,h5,h6,dl,table {
  margin-left: 0em;
  margin-right: 0em;
}*/

p.subhead { font-weight: bold; margin-top: 2em; }

div.cover p.explanation {
  font-style: italic;
  margin-top: 3em;
}


.smaller { font-size: smaller }

td,th { padding: 0.2em }

div.slide ul, div.slide ol {
  margin: 0.6em 1.5em 0.6em 1.5em;
  padding: 0;
}

ul li {
  list-style: none;
  margin: 0.1em 0em 0.6em 0;
  padding: 0 0 0 40px;
  background: transparent url(images/bullet.png) no-repeat 5px 0.3em;
  line-height: 140%;
}

/* workaround IE's failure to support background on li for print media */
@media print {
  ul {
/*     list-style-position: outside; */
  }

  ul li {
    list-style: disc;
    padding-left: 0;
    background: none;
/*     text-indent: -40px; */
  }
}

ol li {
  margin: 0.1em 0em 0.6em 40px;
  padding: 0 0 0 0;
  line-height: 140%;
}

li li {
  font-size: 85%;
  font-style: italic;
  list-style-type: disc;
  background: transparent;
  padding: 0 0 0 0;
  margin-left: 0;
}
li li li {
  font-size: 85%;
  font-style: normal;
  list-style-type: circle;
  background: transparent;
  padding: 0 0 0 0;
  margin-left: 0;
}
li li li li {
  list-style-type: disc;
  background: transparent;
  padding: 0 0 0 0;
  margin-left: 0;
}

/* rectangular blue bullet + unfold/nofold/fold widget */

/*
 setting class="outline on ol or ul makes it behave as an
 ouline list where blocklevel content in li elements is
 hidden by default and can be expanded or collapsed with
 mouse click. Set class="expand" on li to override default
*/

ol.outline li:hover { cursor: pointer }
ol.outline li.nofold:hover { cursor: default }

ul.outline li:hover { cursor: pointer }
ul.outline li.nofold:hover { cursor: default }

ol.outline { list-style:decimal; }
ol.outline ol { list-style-type:lower-alpha }

ol.outline li.nofold {
  padding: 0 0 0 20px;
  background: transparent url(images/nofold-dim.gif) no-repeat 0px 0.3em;
}
ol.outline li.unfolded {
  padding: 0 0 0 20px;
  background: transparent url(images/fold-dim.gif) no-repeat 0px 0.3em;
}
ol.outline li.folded {
  padding: 0 0 0 20px;
  background: transparent url(images/unfold-dim.gif) no-repeat 0px 0.3em;
}
ol.outline li.unfolded:hover {
  padding: 0 0 0 20px;
  background: transparent url(images/fold.gif) no-repeat 0px 0.3em;
}
ol.outline li.folded:hover {
  padding: 0 0 0 20px;
  background: transparent url(images/unfold.gif) no-repeat 0px 0.3em;
}

ul.outline li.nofold {
  padding: 0 0 0 52px;
  background: transparent url(images/bullet-nofold-dim.png) no-repeat 5px 0.3em;
}
ul.outline li.unfolded {
  padding: 0 0 0 52px;
  background: transparent url(images/bullet-fold-dim.png) no-repeat 5px 0.3em;
}
ul.outline li.folded {
  padding: 0 0 0 52px;
  background: transparent url(images/bullet-unfold-dim.png) no-repeat 5px 0.3em;
}
ul.outline li.unfolded:hover {
  padding: 0 0 0 52px;
  background: transparent url(images/bullet-fold.png) no-repeat 5px 0.3em;
}
ul.outline li.folded:hover {
  padding: 0 0 0 52px;
  background: transparent url(images/bullet-unfold.png) no-repeat 5px 0.3em;
}

li ul.outline li.nofold {
  padding: 0 0 0 21px;
  background: transparent url(images/nofold-dim.gif) no-repeat 5px 0.3em;
}
li ul.outline li.unfolded {
  padding: 0 0 0 21px;
  background: transparent url(images/fold-dim.gif) no-repeat 5px 0.3em;
}
li ul.outline li.folded {
  padding: 0 0 0 21px;
  background: transparent url(images/unfold-dim.gif) no-repeat 5px 0.3em;
}
li ul.outline li.unfolded:hover {
  padding: 0 0 0 21px;
  background: transparent url(images/fold.gif) no-repeat 5px 0.3em;
}
li ul.outline li.folded:hover {
  padding: 0 0 0 21px;
  background: transparent url(images/unfold.gif) no-repeat 5px 0.3em;
}

img.withBorder {
  border: 2px solid #c60;
  padding: 4px;
}


#hidden-bullet {
  visibility: hidden;
  display: none;
}

div.slide.cover a:visited { color: white }
div.slide.cover a:link { color: white }

div.slide.cover a:hover, div.slide.cover a:active {
  color: yellow; text-decoration: underline;
}

div.slide.cover img.cover {
   margin: 0 0 0 0;
   float: right;
   padding-bottom: 4em;
   width: 40%;
   max-width: 500px;
   overflow: hidden;
}

div.slide.cover a:hover, div.slide.cover a:active {
    color: yellow; text-decoration: underline;
}

/* for Bert as an ardent user of the old W3C slidemaker tool */

div.comment { display: none; visibility: hidden }

@media print {
 div.slide h1 { background: transparent; color: black }
 div.slide.cover { background: transparent; color: black }
 div.slide.cover h1 { background: transparent; color: black }
 div.comment { display: block; visibility: visible }
}

/* for the bibliography/ reference section */
div.slide div.reference {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

div.slide span.authors {
    color: darkblue;
    font-variant: small-caps;
    display: block;
}
div.slide span.title {
    display: block;
    font-style: italic;
    font-weight: lighter;
}
div.slide span.pub_details {
    display: block;
    color: gray;
    font-size: 80%;
}

/* replaces definition lists; needed to allow outlines to collapse */
ul.factlist li {
    list-style-type: none;
}

ul.factlist span.key {
    font-style: normal;
    font-weight: bold;
    display: block;
}

ul.factlist span.value {
    font-style: normal;
    margin-left: 2em;
}

div.incremental.image {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 85%;
  vertical-align: bottom;
}



img.incremental { /* deprecated; use div.slide.image instead */
  position: absolute;
  margin: 0 5%;
  padding: 0;
  width: 90%;
  max-height: 100%;
}

img.single { /* deprecated; use div.slide.image instead */
  display: block;
  margin: 0 auto;
  padding: 0;
  height: 72%;
  max-width: 90%;
}

@media print { img.single { height: auto; width: 90%; } }

.block {
  border-radius: 12px;
  border: 1px solid #437a00;
  padding: 20px;
/*   margin-bottom: 1em; */
  box-shadow: 12px 12px 20px 0px #437a00;
  background-color: white; /* needed for printing */
  page-break-inside: avoid;
}

@media print { .block { box-shadow: none; } }

.block > .title {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  font-size: 120%;
  font-weight: bold;
  border-bottom: 1px solid #437a00; /*TODO: adjust*/
  padding: 0.5em;
  margin: -20px -20px 1em -20px;
  background-color: #639a00;
  color: #c9fc6a;
  page-break-inside: avoid;
}

.center, div.slide>.center {
  margin: 0 auto;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

table.single {
  width: 80%;
}

th, td {
  border: 1px solid #000;
}


/* for embedding ipython shell elements and other demos etc */
li.demo, .demo>li, ul > li.nofold.demo {
  list-style-type: none;
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
}
/* Make sure derived styles respect the demo items */
li.demo:before, .demo>li:before, ul > li.nofold.demo:before {
  content: "";
  background-color: none;
  color: transparent;
  box-shadow: none;
  margin-left: 0;
  display: none;
  margin-right: 0;
}
li.demo>iframe {
  border: none;
  width: 100%;
  height: 10em;
}

/* embedding files */
pre.filename {
  display: inline-block;
  margin-bottom: 0;
  padding-bottom: 0.3em !important;
  padding-top: 0.3em !important;
  padding-left: 2em !important;
  border: 1px solid #639A00;
  border-bottom: none;
  border-left-width: thin !important;
  letter-spacing: 130%;
/*   font-variant:  small-caps; */
  font-weight: normal;
  text-align: center;
}

pre.content {
  margin-top: 0;
  border: 1px solid #639A00 !important; /*make sure prettify won't override*/
  padding: 1ex !important;
}

@media screen, handheld, projection, tty {
.print-only, #link-list {
  display: none;
}
}

/* general print-only adjustments */
@media print {
  .screen-only, div.slide.separator, .python-console-loader {
    display: none !important;
  }
  #link-list {
    font-size: 80%;
  }
}


/* Buttons */
.button, .python-console-loader {
  display: inline-block;
  padding: 0.2em 0.4em;
/*   margin: 0.4em 0.4em 0.4em 0; */
  border: medium double #6c8f25;
  border-radius: 0.5em;
  box-shadow: 0 0 0.6em #6c8f25;
}

.button:hover, .python-console-loader:hover {
  background-color: #d1e1a5;
}

.button:active, .python-console-loader:active {
  box-shadow: inset 0 0 0.6em #6c8f25;
}

.button>a {
  text-decoration: none;
}


/* embeds from pythonanywhere.com */
object.pythonanywhere {
  width: 90%;
  margin: 0 5%;
}