html, .view body {
        background-color: slategray; counter-reset: slideidx;
    }

    html { font-family: 'Titillium Web', sans-serif;}

    html, .view body { background-color: slategray; counter-reset: slideidx; }

    body, .view section { background-color: white; color:slategray; }

  /* A section is a slide. It's size is 800x600, and this will never change */

  pre, code { font-family: courier ; font-weight:bold; color:#48f;}

  div.nav {
			position:absolute;
	}
	div.nav a {
        font-size: 20px;
        color: #cccccc;
	}

  section, .view head > title {
      font-size: 24px;
  }

	section {
		background: url(gfx/cylc-logo-small.png) right bottom no-repeat,
            url(gfx/Niwa_colour.svg) left bottom 5px no-repeat;
		background-size:130px 50px, 150px 36px;
		}

    section h3 {
        margin-left:60px;
    }

    section h4 {
        margin-left:60px;
    }

    h3.subtitle {
        margin-bottom:0px;
    }
    h4.subtitle {
        margin-top:0px;
    }

section.map {
  background: url(pierce-cylc.png);
  background-size: 1280px 1280px;
  animation-duration: 20s;
  animation-name: slide;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes slide {
  from { background-position: 0 0; }
  to { background-position: -1280px -1280px; }
}

  section.code {
      background-color:white;
	}

  section.code p {
      margin:0px;
      margin-left:20px;
	}


  section.code h3 {
      margin:0px;
      margin-left:20px;
      margin-top:10px;
      margin-bottom:0px;
      color: #5ebede;
	}

  section.code pre {
      margin-top:10px;
      padding:0px;
      padding-left:10px;
  }

  section.code pre.console {
    padding:10px;
  }

	section.chapter {
        background-image:none;
	}

	section.chapter p {
            text-align:center;
	}

 	section.chapter h3  {
		text-align:center;
		margin:0;
		padding:0;
	}

 	section.chapter h4  {
		text-align:center;
		margin:0;
		padding:0;
        color: #5ebede;
	}

	section.dark {
		background-color:slategray;
        background-image:none;
	}

	section.dark p {
        color:#50d88e;
        text-align:center;
        margin-top:20px;
        font-size:40px;
	}

	strong { color: #00c798; font-weight: bold;}

	strong.warning { color: #ff5d6a; font-weight: bold;}


	section.dark strong { color: #7ecefe; }

	section.code strong { color: #33c76f; }

    section.dark h2 {
        color:white;
        margin-top: 100px;
    }

    section.dark h3 {
        color:white;
        margin-top: 180px;
    }


	section.centered {
	}

	section.centered h3 {
        text-align:center;
        margin:0px;
        margin-top: 200px;
	}

	section.centered p {
        text-align:center;
	}

  .view section:after {
      counter-increment: slideidx;
      content: counter(slideidx, decimal-leading-zero);
      position: absolute; bottom: -80px; right: 100px;
      color: white;
  }

  .view head > title {
      color: white;
      text-align: center;
      margin: 1em 0 1em 0;
  }

  h1 {
    margin-top: 60px;
    text-align: center;
    font-size: 120px;
	color: slategray; /*#33c76f;*/
  }

  h2 {
      margin-top: 100px;
      text-align: center;
      font-size: 80px;
      color: slategray; /*#33c76f;*/
  }

  h3 {
      margin: 50px 0px 30px 100px;
      font-size: 40px;
	  color: slategray; /*#33c76f;*/
  }

  h4 {
      margin: 50px 0px 30px 100px;
      font-size: 30px;
	  color: slategray; /*#33c76f;*/
  }

  ul { margin-left:100px; margin-top:30px }

  li { margin-bottom: 15px; margin-right:50px}

  li > ul {margin-left:30px; margin-top:10px}

  li > ul > li {margin-bottom: 0px; margin-top: 0px; margin-right:30px }

  p {
      margin: 75px;
      margin-bottom:0px;
      margin-top:15px;
      font-size: 24px;
  }

	pre {
        font-size:20px;
        background:#eee;
        padding-left:30px;
	}

	pre.incremental {
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
	}

	pre.console {
		background: #000;
		position:absolute;
		padding:10px;
		bottom:0;
		right:0;
		width:100%;
		height:200px;
        font-size:20px;
		color: #00f34a;
		text-shadow: 0px 0px 10px #0f0;
        border:None;
	}
	pre.console code {
        color:#46f;
        text-shadow: 0px 0px 10px #46f;
	}

	section.console1 > figure > img {
        height:550px;
	}
	section.console1 pre {
		background: #000;
		position:absolute;
		bottom:0;
		right:0;
		width:100%;
		height:50px;
        font-size:20px;
		color: #00f300;
		text-shadow: 1px 1px 5px #00c300;
	}

	section.console pre {
        height:100%;
	}

  blockquote {
    height: 100%;
    background-color: black;
    color: white;
    font-size: 160px;
    font-weight:bold;
    padding: 50px;
    text-align:center;
  }
/*  blockquote:before {
    content: open-quote;
  }
  blockquote:after {
    content: close-quote;
  }
  */

  /* Figures are displayed full-page, with the caption
     on top of the image/video */

  .vid {width:45%; float:right; margin-left:5%}
  .vid p {margin:0;}
  .vid h4 {margin:0; margin-bottom:20px;}

  figure {
    background-color: slategray;
    width: 100%; height: 100%;
  }

  figure.white {
    background-color: white;
	background-image:url(gfx/Niwa_colour.svg);
	background-position:right 560px;
	background-repeat:no-repeat;
	background-size:150px 36px;
	}

  figure > * {
    position: absolute;
  }
  figure > img, figure > video {
    width: 100%; height: 100%;
  }

	figure.bottom {
		background: white;
  }

  figure.bottom > * {
    position: absolute;
    /*background: white;*/
  }
  figure.bottom > img, figure.bottom > video {
    width: 100%; height: 50%;
    bottom:20px;
  }

	figure.white figcaption {
		 font-size:20px;
         color:#66aa66;
         text-shadow: 2px 2px 3px limegreen;
	}

  figcaption {
    margin: 70px;
    font-size: 20px;
    color: white;
  }

  footer {
    position: absolute;
    font-size:20px;
    bottom: 0;
    width: 100%;
    padding: 40px;
    text-align: right;
    border-top: 5px solid slategray; /*#33c76f;*/
    background-image:url(gfx/Niwa_colour.svg);
    background-position:top left;
    background-repeat:no-repeat;
  }

  footer h4 { font-size:80%}

	/*a { color: #00c798; }*/

    /*em { color: steelblue }*/

  /* Transition effect */
  /* Feel free to change the transition effect for original
     animations. See here:
     https://developer.mozilla.org/en/CSS/CSS_transitions
     How to use CSS3 Transitions: */

/*  section {
    -moz-transition: left 400ms ease-in-out 0s;
    -webkit-transition: left 400ms ease-in-out 0s;
    -ms-transition: left 400ms ease-in-out 0s;
    transition: left 400ms ease-in-out 0s;
  }*/

  .view section {
    -moz-transition: none;
    -webkit-transition: none;
    -ms-transition: none;
     transition: none;
  }

  .view section[aria-selected] {
    border: 5px black solid;
  }

  /* Before */
  section { left: -150%; }
  /* Now */
  section[aria-selected] { left: 0; }
  /* After */
  section[aria-selected] ~ section { left: +150%; }

  /* Incremental elements */

  /* By default, visible */
  .incremental > * { opacity: 1; }

  /* The current item */
  .incremental > *[aria-selected] { opacity: 1; }

  /* The items to-be-selected */
  .incremental > *[aria-selected] ~ * { opacity: 0; }

  /* The progressbar, at the bottom of the slides, show the global
     progress of the presentation. */
  #progress-bar {
    height: 4px;
    background: #a0b0c0;
  }