/* Adapted version of the default reveal.js theme */

@font-face
{
    font-family: HelveticaNeue;
    src: url(./HelveticaNeueLight.ttf);
    font-weight: normal;
    font-style: normal;
}



/* Make notes a bit smaller and italics. */
aside.notes {
    font-size: 0.6em;
    font-style:italic;
}

/*
table {
    border: double;
    border-style: solid;
    padding: 20px;
}*/


/*********************************************
 * GLOBAL STYLES
 *********************************************/

/* Main / root styles */
  
.reveal {
    
    /* Font */
    
    font-family: 'HelveticaNeue', 'Arial', 'sans-serif';
    font-size: 32px;
    /*font-weight: 200;*/
    letter-spacing: -0.02em;
    color: #333333;
    
    /* Background */
    background-color: RGB(250,250,250);

   transition: transform .3s ease-out;
  -o-transition: -o-transform .3s ease-out;
  -moz-transition: -moz-transform .3s ease-out;
  -webkit-transition: -webkit-transform .3s ease-out;    
}

 
/* Styles for slides */
 .reveal section {
    padding:10px 10px 10px 10px;
    border:1px solid #EEEEEE;
    box-shadow:1px 5px 5px 1px #aaaaaa;
    border-radius:15px;
    background-color: white;
}

/* Makes a nice box around stuff (use div class=box ).*/
.reveal .box, .reveal blockquote {
    padding:10px 10px 10px 10px;
    /*border:1px solid #BFBFBF; */
    background-color:white;
    box-shadow:2px 2px 3px #aaaaaa;
    border-radius:15px;
}


body { 

  
}
  


::selection {
  color: white;
  background: #ff5e99;
  text-shadow: none; }


/**************
 * Images, Iframes
 ************/

iframe, iframe.youtube-player, iframe.youtube-player-right, iframe.right, img, img.right, img.left, figure.left, figure.right {
    width: 960px;
    height: 700px;
    frameborder:0;
    allowfullscreen:1;
    float:centre;
    
    
    margin:10px 10px 10px 10px;
    /*border:1px solid #BFBFBF;*/
    box-shadow:1px 5px 5px 1px #aaaaaa;
    /*border-radius:15px;*/
}

iframe.right {
    width:448px;
    height:270px;
    float:right;
}

iframe.youtube-player {
    width:640px;
    height:385px;
    float:none;
    /*float:left;*/
}

iframe.youtube-player-right {
    width:448px;
    height:270px;
    float:right;
}


img.right, figure.right {
    float:right;
    margin-left:50px;
    /*padding-right: 2%; /* This stops the image box overlapping the figure box */ 
    width: 45%;
    height: auto;
}
img.left, figure.left {
    float:left;
    margin-left:50px;
    /*padding-right: 2%; /* This stops the image box overlapping the figure box */ 
    width: 45%;
    height: auto;
}

img.small {
    width:30%;
}


img.top {
    width: 90%;
    height: auto;
}

.reveal figcaption {
    font-size: 50%;
}


.reveal figcaption a {
    color: yellow;
}




/* For different colour slide backgrounds (e.g. for outline slides).
 * Use:
 *  data-state="outline"
 * in the slides tag
 */
.outline .reveal .state-background{
    background: rgba( 255, 255, 204, 0.6 );    
}
/* Make a box around the outline elements */
/*.outline ol {
    padding:20px 20px 20px 80px;
    margin:10px 10px 10px 10px;
    /*border:1px solid #BFBFBF;*/
    background-color:white;
    box-shadow:2px 2px 3px #aaaaaa;
    
}*/
/* override normal list styles in outline */
.reveal .outline li a {
    color: #333333;  
}


/* For the list item that shows current place in outline */
.reveal .outline LI.current a {
    color: #999999;
}
LI.current {
    color: #999999;
}


/* For slides that ask the students questions. Use:
 *    data-state="question"
 * in the slides tag
 */
.question .reveal .state-background{
    background: rgba( 255, 230, 204, 0.6 );
}

.reveal p {
    text-align: left;
    margin-top: 0.7em;
    margin-left: 20px;
    color: rgb(10,10,70);
}

/* For sub-paragraphs (e.g. indented bullet points) */
.reveal P.level2 {
    margin-top: 0.3em;
    font-size: 0.8em;
    padding-left: 4ex;
    color: #555555;
}

.reveal P.level3 {
    margin-top: 0.2em;
    font-size: 0.7em;
    padding-left: 8ex;
    color: #555555;
}

/* 'level2' for lists: */
.reveal ul.level2, .reveal ol.level2 {
    margin-top: 0.3em;
    margin-left:0px;
    padding-left:0px;
    font-size: 0.8em;
    color: #555555;
}


/*
 * For slides with lots of text, can be made small.
 * To use these, put the whole slide in the class 'small' e.g. <section id="mySlide" class="small"> ... </section>
 */

.small {
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
    column-count:2;
    
    column-gap:20px;
    -moz-column-gap:20px;
    -webkit-column-gap:20px;
}

.small P {
    font-size: 0.5em;
}

.small P.level2  {
    font-size: 0.4em;
}

.small h2 { /* also make this heading the size of normal text in 'small' div */
    font-size: 100%;
}

/* For footnotes (small text, but not in two columns). Put footontes in a div (e.g. <div class="footnote"> .... </div> */
.footnote P {
    font-size: 0.6em;
}

.footnote P.level2  {
    font-size: 0.5em;
}


/*
 * For precisely defined columns (e.g. specify exactly what should go in each column ).
 * Basically the job that <table> used to do. From: http://www.transio.com/content/how-create-text-columns-html
 * Use as follows:
 * <div id="columns">
    <div class="left column"><p>Stuff in left column</p></div>
    <div class="right column"><p>Stuff in right column</p></div>
</div>

 * */
#columns {
    /* could set max width here. E.g. width: 600px; */
}

#columns .column {
    position: relative;
    width: 46%;
    padding: 1%;
    /*border: solid 1px #000; */
    box-shadow:2px 2px 3px #aaaaaa;
    background-color: white;
}

#columns .left {
    float: left;
}

#columns .right {
    float: right;
}

/* Nice border around tables */
.reveal table {
    padding:10px 10px 20px 10px;
    /*border:1px solid #BFBFBF;*/
    background-color:white;
    box-shadow:2px 2px 3px #aaaaaa;
    border-radius:15px;
    border-collapse:separate;
    border-spacing:20px 5px;
    
}
.reaveal td, .reveal th {
    border-bottom: 1px solid #BFBFBF;
    
}





/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0px 0px 20px 20px;
  color: #666666;  
  line-height: 0.9em;
  letter-spacing: 0.02em;
  /*font-family: "League Gothic", Impact, sans-serif;*/
  text-align: left;
  
  
  /* Try to stop hypthnation */
  -webkit-hyphens: manual;
  -moz-hyphens: manual;
  hyphens: manual;
  }
  
/* Special headers for the title page (needs class 'title') */
.title h1,
.title h2,
.title h3,
.title h4,
.title h5,
.title h6 {
    /* text-transform: uppercase; */
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
    text-align: center;
 }
  
.title h4,
.title h5,
.title h6 {
    text-shadow: none;
    color: #999999;  
}

.reveal h1 {
  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); }
  

/* for some reason quotes need to be told not to be italicised. There is probably something
in reveal that makes them to this.*/
.reveal blockquote p {
    font-style: normal;
}



/*********************************************
 * LINKS
 *********************************************/
.reveal a:not(.image) {
  color: #3333ec;
  text-decoration: none;
  -webkit-transition: color .15s ease;
  -moz-transition: color .15s ease;
  -ms-transition: color .15s ease;
  -o-transition: color .15s ease;
  transition: color .15s ease; }

.reveal a:not(.image):hover {
  color: #71e9f4;
  text-shadow: none;
  border: none; }

.reveal .roll span:after {
  color: #fff;
  background: #0d99a5; }



/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls div.navigate-left,
.reveal .controls div.navigate-left.enabled {
  border-right-color: #13daec; }

.reveal .controls div.navigate-right,
.reveal .controls div.navigate-right.enabled {
  border-left-color: #13daec; }

.reveal .controls div.navigate-up,
.reveal .controls div.navigate-up.enabled {
  border-bottom-color: #13daec; }

.reveal .controls div.navigate-down,
.reveal .controls div.navigate-down.enabled {
  border-top-color: #13daec; }

.reveal .controls div.navigate-left.enabled:hover {
  border-right-color: #71e9f4; }

.reveal .controls div.navigate-right.enabled:hover {
  border-left-color: #71e9f4; }

.reveal .controls div.navigate-up.enabled:hover {
  border-bottom-color: #71e9f4; }

.reveal .controls div.navigate-down.enabled:hover {
  border-top-color: #71e9f4; }

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

.reveal .progress span {
  background: #13daec;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }