/**
 * Solarized Dark theme for reveal.js.
 * Author: Achim Staebler
 */
@import url(fonts/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
/**
 * Solarized colors by Ethan Schoonover
 */
html * {
  color-profile: sRGB;
  rendering-intent: auto; }

/*********************************************
 * GLOBAL STYLES
 *********************************************/
:root {
  --background-color: #F5F5F5;
  --main-font: Lato, sans-serif;
  --main-font-size: 30px;
  --main-color: #313636;
  --block-margin: 20px;
  --heading-margin: 0 0 20px 0;
  --heading-font: Perpetua, Impact, serif;
  --heading-color: #eee8d5;
  --heading-line-height: 1.2;
  --heading-letter-spacing: normal;
  --heading-text-transform: none;
  --heading-text-shadow: none;
  --heading-font-weight: normal;
  --heading1-text-shadow: none;
  --heading1-size: 2em;
  --heading2-size: 1.75em;
  --heading3-size: 1.5em;
  --heading4-size: 1em;
  --code-font: monospace;
  --link-color: #268bd2;
  --link-color-hover: #78b9e6;
  --selection-background-color: #d33682;
  --selection-color: #fff; 

  --white: #FFFFFF;
  --grayish: #F5F5F5;
  --gray: #CCCCCC;
  --black: #000000; 

  /* Shendruk lab group colours */
  /* Main */
  --saphire: #00325F;
  --crimson: #C10043;
  --capri: #00C4DF;
  --amber: #F4AA00;
  --plum: #810262;
  --cerulean: #0091B5;
  --ruby: #D40072;
  /* Secondary */
  --cardinal: #AC0040;
  --cinnamon: #CD5A13;
  --limegreen: #29BC29;
  --gold: #8D744A;
  --taupe: #6E5058;
  --teal: #457E81;
  --forestgreen: #004631;
  --mahogany: #6A3328;
  --silver: #C2D3DF;
  --oldrose: #B8858D;
  --curry: #9C9A00;
  --cobalt: #005072;
  /* Modified */
  --rubydarker: #C50063;
  --purple: #38065C;
  --cardinaldarker: #610024;
  --ceruleandarker: #00718C;
  --amberlighter: #F0BF4F;
  --amberbrighter: #F5F258;
  --onyx: #0F0F0F; }

.reveal-viewport {
  background: var(--white);
  background-color: var(--white);}

.reveal {
  font-family: "Perpetua", serif;
  font-size: 30px;
  font-weight: normal;
  color: #313636; }

.reveal ::selection {
  color: #fff;
  background: #d33682;
  text-shadow: none; }

.reveal ::-moz-selection {
  color: #fff;
  background: #d33682;
  text-shadow: none; }

.reveal .slides section,
.reveal .slides section > section {
  line-height: 1.3;
  font-weight: inherit; }

/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 20px 0;
  color: #005072;
  font-family: "Perpetua";
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  word-wrap: break-word; }

.reveal h1 {
  font-size: 2em; }

.reveal h2 {
  font-size: 1.75em; }

.reveal h3 {
  font-size: 1.5em; }

.reveal h4 {
  font-size: 1em; }

.reveal h1 {
  text-shadow: none; }

/*********************************************
 * OTHER
 *********************************************/
.reveal p {
  margin: 20px 0;
  line-height: 1.3; }

/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
  max-width: 95%;
  max-height: 95%; }

.reveal strong,
.reveal b {
  font-weight: bold; }
.reveal i {
  font-style: italic; }
.reveal em {
  font-style: italic;
  color: #610024;}

.reveal ol,
.reveal dl,
.reveal ul {
  display: inline-block;
  text-align: left;
  margin: 0 0 0 1em; }

.reveal ol {
  list-style-type: decimal; }

.reveal ul {
  list-style-type: disc; }

.reveal ul ul {
  list-style-type: square; }

.reveal ul ul ul {
  list-style-type: circle; }

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
  display: block;
  margin-left: 30px; }

.reveal dt {
  font-weight: bold; }

.reveal dd {
  margin-left: 30px; }

.reveal blockquote {
  display: block;
  position: relative;
  width: 70%;
  margin: 20px auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline-block; }

.reveal q {
  font-style: italic; }

.reveal pre {
  display: block;
  position: relative;
  width: 90%;
  margin: 20px auto;
  text-align: left;
  font-size: 0.55em;
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

.reveal code {
  font-family: monospace;
  text-transform: none; }

.reveal pre code {
  display: block;
  padding: 5px;
  overflow: auto;
  max-height: 400px;
  word-wrap: normal; }

.reveal table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0; }

.reveal table th {
  font-weight: bold; }

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.2em 0.5em 0.2em 0.5em;
  border-bottom: 1px solid; }

.reveal table th[align="center"],
.reveal table td[align="center"] {
  text-align: center; }

.reveal table th[align="right"],
.reveal table td[align="right"] {
  text-align: right; }

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
  border-bottom: none; }

.reveal sup {
  vertical-align: super;
  font-size: smaller; }

.reveal sub {
  vertical-align: sub;
  font-size: smaller; }

.reveal small {
  display: inline-block;
  font-size: 0.6em;
  line-height: 1.2em;
  vertical-align: top; }

.reveal small * {
  vertical-align: top; }

.reveal img {
  margin: 20px 0; }

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  color: #268bd2;
  text-decoration: none;
  transition: color .15s ease; }

.reveal a:hover {
  color: #78b9e6;
  text-shadow: none;
  border: none; }

.reveal .roll span:after {
  color: #fff;
  background: #1a6091; }

/*********************************************
 * Frame helper
 *********************************************/
.reveal .r-frame {
  border: 4px solid #313636;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }

.reveal a .r-frame {
  transition: all .15s linear; }

.reveal a:hover .r-frame {
  border-color: #268bd2;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }

/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls {
  color: #610024; }

/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
  background: rgba(0, 0, 0, 0.2);
  color: #610024; }

/*********************************************
 * PRINT BACKGROUND
 *********************************************/
@media print {
  .backgrounds {
    background-color: #002b36; } }

/*********************************************
 * Custom features
 *********************************************/

 /* Tim: Custom class for ol or ul for references */
 /* See example in GroupExample.html for use case */
.References {
  font-size: medium; /* consider changing this to large? */
  position: fixed;
  /* margin-top: 5%;  */
  left: 0px;
  bottom: 2%;
  text-align: left;
 }

/* Louise: Top aligned headers */
/* Usage: <h1 class="topAlign">A top aligned header</h1>, or any other header item */
.topAlign {
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  margin: auto;
}

/* Ryan: Group colourway in hex */
/* Usage : <p class="ruby"> This is our group colour: ruby </p> */
/* OR: <p style="color:var(--ruby)">ruby!</p> */
/* Main */
.saphire {color: var(--saphire);}
.crimson {color: var(--crimson);}
.capri {color: var(--capri);}
.amber {color: var(--amber);}
.plum {color: var(--plum);}
.cerulean {color: var(--cerulean);}
.ruby {color: var(--ruby);}
/* Secondary */
.cardinal {color: var(--cardinal);}
.cinnamon {color: var(--cinnamon);}
.limegreen {color: var(--limegreen);}
.gold {color: var(--gold);}
.taupe {color: var(--taupe);}
.teal {color: var(--teal);}
.forestgreen {color: var(--forestgreen);}
.mahogany {color: var(--mahogany);}
.silver {color: var(--silver);}
.oldrose {color: var(--oldrose);}
.curry {color: var(--curry);}
.cobalt {color: var(--cobalt);}
/* Modified */
.rubydarker {color: var(--rubydarker);}
.purple {color: var(--purple);}
.cardinaldarker {color: var(--cardinaldarker);}
.ceruleandarker {color: var(--ceruleandarker);}
.amberlighter {color: var(--amberlighter);}
.amberbrighter {color: var(--amberbrighter);}
.onyx {color: var(--onyx);}

/* Benjamin: Differing background colours */
/* Usage: <section id="title" data-background-color = var(--white)>  */
body.white{
  background-color: var(--white);
  background-color: var(--white);
}
body.gray{
  background: var(--gray);
  background-color: var(--gray);
}
body.grayish{
  background: var(--grayish);
  background-color: var(--grayish);
}
body.black{
  background: var(--black);
  background-color: var(--black);
}

/* Jack: Figures and figure captions */
/* Usage: */
/* <div class="imagecaption">
  <figure>
    <img src="u-2.png" style="height: 300px;"/>
    <figcaption>Vader enjoying the beach.</figcaption>
  </figure>
</div> */  


/* Colours etc can all be customised below: */
.imagecaption {
  padding: 3px;
  margin: 10px;
  float: left;
  border: 1px solid black; 
  /* Comment out the border line to remove the border */
}
figure {
  display: table;
  margin: 0px;

}

figure img {
  display: block;
}

figcaption {
  display: table-caption;
  caption-side: bottom;
  text-align: center;
  border: 1px dotted #005072;
    /* Comment out the border line to remove the border */

}

.imagecaptionnb {
  padding: 3px;
  margin: 10px;
  float: left;

}

.figcaptionnb {
  display: table-caption;
  caption-side: bottom;
  text-align: center;
}

/* Tim: Flex containers */
/*
  The group has been using flex containers (ie, class="container" and 
  class="col" for a while but implementation has been hacky. This now defines 
  it in the group CSS so should work on any fresh reveal file without any extra
  style calls necessary.
*/

.container {
  display: flex;
  justify-content: space-evenly;
}

.col {
  flex: 1;
}