From e14c8eaca6aa822bdac44de2147ad2b6285532bc Mon Sep 17 00:00:00 2001
From: Eric Bidelman
Date: Mon, 9 Apr 2012 21:55:59 -0700
Subject: Iframe style updates. All links open in new tab

---
 js/slides.js            |  29 ++---
 template.html           |  15 +++
 theme/css/default.css   | 281 ++++++++++++++++++++++++++++--------------------
 theme/sass/default.scss |  44 +++++++-
 4 files changed, 238 insertions(+), 131 deletions(-)

diff --git a/js/slides.js b/js/slides.js
index 1a6bb57..eee44ee 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -45,15 +45,21 @@ SlideDeck.prototype.getCurrentSlideFromHash_ = function() {
 SlideDeck.prototype.onDomLoaded_ = function() {
   this.slides_ = document.querySelectorAll('slide:not([hidden])');
 
+  // Load config.
+  this.loadConfig_();
+  this.addEventListeners_();
+  this.updateSlides_();
+
+  // Add slide numbers and total slide count metadata to each slide.
   for (var i = 0, slide; slide = this.slides_[i]; ++i) {
     slide.dataset.slideNum = i + 1;
     slide.dataset.totalSlides = this.slides_.length;
   }
 
-  // Load config.
-  this.loadConfig_();
-  this.addEventListeners_();
-  this.updateSlides_();
+  // This is an app! Make all links open in a new tab.
+  [].forEach.call(document.querySelectorAll('a'), function(a) {
+    a.target = '_blank';
+  });
 };
 
 /**
@@ -175,7 +181,7 @@ SlideDeck.prototype.loadConfig_ = function() {
   }
 
   if (settings.title) {
-    document.title = settings.title + ' - Google IO 2012';
+    document.title = settings.title.replace(/<br\/?>/, ' ') + ' - Google IO 2012';
     document.querySelector('[data-config-title]').innerHTML = settings.title;
   }
 
@@ -193,14 +199,14 @@ SlideDeck.prototype.loadConfig_ = function() {
       html = [p.name, p.company].join('<br>');
 
       var gplus = p.gplus ? '<span>g+</span><a href="' + p.gplus +
-                            '" target="_blank">' + p.gplus + '</a>' : '';
+                            '">' + p.gplus + '</a>' : '';
 
       var twitter = p.twitter ? '<span>twitter</span>' +
-          '<a href="http://twitter.com/' + p.twitter + '" target="_blank">' +
+          '<a href="http://twitter.com/' + p.twitter + '">' +
           p.twitter + '</a>' : '';
 
      var www = p.www ? '<span>www</span><a href="' + p.www +
-                       '" target="_blank">' + p.www + '</a>' : '';
+                       '">' + p.www + '</a>' : '';
 
       var html2 = [gplus, twitter, www].join('<br>');
 
@@ -350,7 +356,6 @@ SlideDeck.prototype.updateSlides_ = function(opt_dontPush) {
     }
   };
 
-  //this.triggerSlideEvent('slideleave', curSlide - 1);
   this.triggerSlideEvent('slideleave', this.prevSlide_);
   this.triggerSlideEvent('slideenter', curSlide);
 
@@ -377,7 +382,7 @@ SlideDeck.prototype.enableSlideFrames_ = function(slideNo) {
     return;
   }
 
-  var frames = el.getElementsByTagName('iframe');
+  var frames = el.querySelectorAll('iframe');
   for (var i = 0, frame; frame = frames[i]; i++) {
     this.enableFrame_(frame);
   }
@@ -388,7 +393,7 @@ SlideDeck.prototype.enableSlideFrames_ = function(slideNo) {
  * @param {number} slideNo
  */
 SlideDeck.prototype.enableFrame_ = function(frame) {
-  var src = frame._src;
+  var src = frame.dataset.src;
   if (src && frame.src != src) {
     frame.src = src;
   }
@@ -404,7 +409,7 @@ SlideDeck.prototype.disableSlideFrames_ = function(slideNo) {
     return;
   }
 
-  var frames = el.getElementsByTagName('iframe');
+  var frames = el.querySelectorAll('iframe');
   for (var i = 0, frame; frame = frames[i]; i++) {
     this.disableFrame_(frame);
   }
diff --git a/template.html b/template.html
index ee762d9..d6a03ae 100644
--- a/template.html
+++ b/template.html
@@ -199,6 +199,21 @@ function helloWorld(world) {
     </article>
   </slide>
 
+  <slide>
+    <hgroup>
+      <h2>Slide with iframe</h2>
+    </hgroup>
+    <article>
+      <iframe data-src="http://www.google.com/doodle4google/history.html"></iframe>
+    </article>
+  </slide>
+
+  <slide>
+    <article>
+      <iframe data-src="http://www.google.com/doodle4google/history.html"></iframe>
+    </article>
+  </slide>
+
   <slide class="thank-you-slide segue nobackground">
     <aside class="gdbar right"><img src="images/google_developers_icon_128.png"></aside>
     <article class="flexbox vleft auto-fadein">
diff --git a/theme/css/default.css b/theme/css/default.css
index 0c9a7d3..75984cd 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -205,14 +205,58 @@ slide.fill img {
 /**
  * Theme Styles
  */
-/* line 38, ../sass/default.scss */
+/* line 40, ../sass/default.scss */
 ::selection {
   color: white;
   background-color: #ffd14d;
   text-shadow: none;
 }
 
-/* line 44, ../sass/default.scss */
+/* line 46, ../sass/default.scss */
+::-webkit-scrollbar {
+  height: 16px;
+  overflow: visible;
+  width: 16px;
+}
+
+/* line 51, ../sass/default.scss */
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.1);
+  background-clip: padding-box;
+  border: solid transparent;
+  min-height: 28px;
+  padding: 100px 0 0;
+  -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
+  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
+  -o-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
+  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
+  border-width: 1px 1px 1px 6px;
+}
+
+/* line 60, ../sass/default.scss */
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* line 63, ../sass/default.scss */
+::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+
+/* line 67, ../sass/default.scss */
+::-webkit-scrollbar-track {
+  background-clip: padding-box;
+  border: solid transparent;
+  border-width: 0 0 0 4px;
+}
+
+/* line 72, ../sass/default.scss */
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* line 76, ../sass/default.scss */
 body {
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600, color-stop(0%, #b1dfff), color-stop(100%, #2a7cdf));
   background-image: -webkit-radial-gradient(50% 50%, #b1dfff 0%, #2a7cdf 600px);
@@ -223,7 +267,7 @@ body {
   background-attachment: fixed;
 }
 
-/* line 50, ../sass/default.scss */
+/* line 82, ../sass/default.scss */
 slides > slide {
   width: 900px;
   height: 700px;
@@ -248,13 +292,13 @@ slides > slide {
   transition: all 0.3s ease-out;
 }
 
-/* line 66, ../sass/default.scss */
+/* line 98, ../sass/default.scss */
 slides.layout-widescreen > slide {
   margin-left: -550px;
   width: 1100px;
 }
 
-/* line 71, ../sass/default.scss */
+/* line 103, ../sass/default.scss */
 slides.layout-faux-widescreen > slide {
   margin-left: -550px;
   width: 1100px;
@@ -273,7 +317,7 @@ slides.nobackground slide:not(.fill)::before {
   color: inherit !important;
 }
 */
-/* line 97, ../sass/default.scss */
+/* line 129, ../sass/default.scss */
 slides > slide:not(.fill):not(.nobackground):before {
   font-size: 12pt;
   content: "#io2012";
@@ -289,7 +333,7 @@ slides > slide:not(.fill):not(.nobackground):before {
   height: 30px;
   line-height: 1.9;
 }
-/* line 109, ../sass/default.scss */
+/* line 141, ../sass/default.scss */
 slides > slide:not(.fill):not(.nobackground):after {
   font-size: 12pt;
   content: attr(data-slide-num) "/" attr(data-total-slides);
@@ -299,7 +343,7 @@ slides > slide:not(.fill):not(.nobackground):after {
   line-height: 1.9;
 }
 
-/* line 120, ../sass/default.scss */
+/* line 152, ../sass/default.scss */
 slides > slide.title-slide:after {
   content: '';
   background: url(../../images/io2012_logo.png) no-repeat 100% 50%;
@@ -319,7 +363,7 @@ slides.layout-faux-widescreen > slide:not(.nobackground) {
   background-position-x: 0, 840px;
 }*/
 /* Slides */
-/* line 139, ../sass/default.scss */
+/* line 171, ../sass/default.scss */
 slides > slide {
   display: none;
   font-family: 'Open Sans', Arial, sans-serif;
@@ -331,7 +375,7 @@ slides > slide {
   background: -ms-linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
   background: linear-gradient(#ffffff, #ffffff 85%, #e6e6e6);
 }
-/* line 150, ../sass/default.scss */
+/* line 182, ../sass/default.scss */
 slides > slide.far-past {
   display: block;
   -moz-transform: translate(-2040px);
@@ -345,7 +389,7 @@ slides > slide.far-past {
   -ms-transform: translate3d(-2040px, 0, 0);
   transform: translate3d(-2040px, 0, 0);
 }
-/* line 156, ../sass/default.scss */
+/* line 188, ../sass/default.scss */
 slides > slide.past {
   display: block;
   -moz-transform: translate(-1020px) rotateY(30deg) rotateX(45deg);
@@ -359,7 +403,7 @@ slides > slide.past {
   -ms-transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
   transform: translate3d(-1020px, 0, 0) rotateY(30deg) rotateX(45deg);
 }
-/* line 162, ../sass/default.scss */
+/* line 194, ../sass/default.scss */
 slides > slide.current {
   display: block;
   -moz-transform: translate(0);
@@ -373,18 +417,18 @@ slides > slide.current {
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
-/* line 167, ../sass/default.scss */
+/* line 199, ../sass/default.scss */
 slides > slide.current .auto-fadein {
   opacity: 1;
 }
-/* line 171, ../sass/default.scss */
+/* line 203, ../sass/default.scss */
 slides > slide.current .gdbar {
   -moz-background-size: 100% 100%;
   -webkit-background-size: 100% 100%;
   -o-background-size: 100% 100%;
   background-size: 100% 100%;
 }
-/* line 176, ../sass/default.scss */
+/* line 208, ../sass/default.scss */
 slides > slide.next {
   display: block;
   -moz-transform: translate(1020px) rotateY(-30deg) rotateX(45deg);
@@ -398,7 +442,7 @@ slides > slide.next {
   -ms-transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
   transform: translate3d(1020px, 0, 0) rotateY(-30deg) rotateX(45deg);
 }
-/* line 182, ../sass/default.scss */
+/* line 214, ../sass/default.scss */
 slides > slide.far-next {
   display: block;
   -moz-transform: translate(2040px);
@@ -412,20 +456,24 @@ slides > slide.far-next {
   -ms-transform: translate3d(2040px, 0, 0);
   transform: translate3d(2040px, 0, 0);
 }
-/* line 188, ../sass/default.scss */
+/* line 220, ../sass/default.scss */
 slides > slide.dark {
   background: #515151;
 }
-/* line 192, ../sass/default.scss */
+/* line 224, ../sass/default.scss */
 slides > slide > hgroup + article {
-  margin-top: 1.5em;
+  margin-top: 45px;
 }
-/* line 195, ../sass/default.scss */
+/* line 227, ../sass/default.scss */
 slides > slide > hgroup + article p {
   margin-bottom: 1em;
 }
+/* line 232, ../sass/default.scss */
+slides > slide > article:only-child > iframe {
+  height: 100%;
+}
 
-/* line 206, ../sass/default.scss */
+/* line 242, ../sass/default.scss */
 slides.layout-widescreen > slide.far-past,
 slides.layout-faux-widescreen > slide.far-past {
   display: block;
@@ -440,7 +488,7 @@ slides.layout-faux-widescreen > slide.far-past {
   -ms-transform: translate3d(-2260px, 0, 0);
   transform: translate3d(-2260px, 0, 0);
 }
-/* line 212, ../sass/default.scss */
+/* line 248, ../sass/default.scss */
 slides.layout-widescreen > slide.past,
 slides.layout-faux-widescreen > slide.past {
   display: block;
@@ -455,7 +503,7 @@ slides.layout-faux-widescreen > slide.past {
   -ms-transform: translate3d(-1130px, 0, 0);
   transform: translate3d(-1130px, 0, 0);
 }
-/* line 218, ../sass/default.scss */
+/* line 254, ../sass/default.scss */
 slides.layout-widescreen > slide.current,
 slides.layout-faux-widescreen > slide.current {
   display: block;
@@ -470,7 +518,7 @@ slides.layout-faux-widescreen > slide.current {
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
-/* line 224, ../sass/default.scss */
+/* line 260, ../sass/default.scss */
 slides.layout-widescreen > slide.next,
 slides.layout-faux-widescreen > slide.next {
   display: block;
@@ -485,7 +533,7 @@ slides.layout-faux-widescreen > slide.next {
   -ms-transform: translate3d(1130px, 0, 0);
   transform: translate3d(1130px, 0, 0);
 }
-/* line 230, ../sass/default.scss */
+/* line 266, ../sass/default.scss */
 slides.layout-widescreen > slide.far-next,
 slides.layout-faux-widescreen > slide.far-next {
   display: block;
@@ -501,12 +549,12 @@ slides.layout-faux-widescreen > slide.far-next {
   transform: translate3d(2260px, 0, 0);
 }
 
-/* line 237, ../sass/default.scss */
+/* line 273, ../sass/default.scss */
 b {
   font-weight: 600;
 }
 
-/* line 241, ../sass/default.scss */
+/* line 277, ../sass/default.scss */
 a {
   color: #2a7cdf;
   text-decoration: none;
@@ -516,17 +564,17 @@ a {
       color: rgba(0, 102, 204, 0.75);
     }*/
 }
-/* line 251, ../sass/default.scss */
+/* line 287, ../sass/default.scss */
 a:hover {
   color: black !important;
 }
 
-/* line 256, ../sass/default.scss */
+/* line 292, ../sass/default.scss */
 h1, h2, h3 {
   font-weight: 600;
 }
 
-/* line 260, ../sass/default.scss */
+/* line 296, ../sass/default.scss */
 h2 {
   font-size: 45px;
   line-height: 45px;
@@ -534,7 +582,7 @@ h2 {
   color: #515151;
 }
 
-/* line 267, ../sass/default.scss */
+/* line 303, ../sass/default.scss */
 h3 {
   font-size: 30px;
   letter-spacing: -1px;
@@ -543,38 +591,38 @@ h3 {
   color: #797979;
 }
 
-/* line 275, ../sass/default.scss */
+/* line 311, ../sass/default.scss */
 ul {
   margin-left: 1.2em;
   margin-bottom: 1em;
 }
-/* line 279, ../sass/default.scss */
+/* line 315, ../sass/default.scss */
 ul li {
   margin-bottom: 0.5em;
 }
-/* line 282, ../sass/default.scss */
+/* line 318, ../sass/default.scss */
 ul li ul {
   margin-left: 2em;
   margin-bottom: 0;
 }
-/* line 286, ../sass/default.scss */
+/* line 322, ../sass/default.scss */
 ul li ul li:before {
   content: '-';
   font-weight: 600;
 }
-/* line 293, ../sass/default.scss */
+/* line 329, ../sass/default.scss */
 ul > li:before {
   content: '·';
   margin-left: -1em;
   position: absolute;
   font-weight: 600;
 }
-/* line 301, ../sass/default.scss */
+/* line 337, ../sass/default.scss */
 ul ul {
   margin-top: .5em;
 }
 
-/* line 306, ../sass/default.scss */
+/* line 342, ../sass/default.scss */
 pre {
   font-family: 'Inconsolata', 'Courier New', monospace;
   font-size: 20px;
@@ -592,7 +640,7 @@ pre {
   box-sizing: border-box;
   /*overflow: hidden;*/
 }
-/* line 320, ../sass/default.scss */
+/* line 356, ../sass/default.scss */
 pre:after {
   content: attr(data-lang);
   background-color: #a9a9a9;
@@ -605,33 +653,36 @@ pre:after {
   text-transform: uppercase;
 }
 
-/* line 333, ../sass/default.scss */
+/* line 369, ../sass/default.scss */
 code {
   font-size: 95%;
   font-family: 'Inconsolata', 'Courier New', monospace;
   color: black;
 }
 
-/* line 339, ../sass/default.scss */
+/* line 375, ../sass/default.scss */
 iframe {
   width: 100%;
-  height: 620px;
+  height: 530px;
   background: white;
-  border: 1px solid silver;
-  margin: -1px;
+  border: 1px solid #e6e6e6;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-/* line 347, ../sass/default.scss */
+/* line 383, ../sass/default.scss */
 dt {
   font-weight: bold;
 }
 
-/* line 351, ../sass/default.scss */
+/* line 387, ../sass/default.scss */
 h3 + iframe {
   height: 540px;
 }
 
-/* line 355, ../sass/default.scss */
+/* line 391, ../sass/default.scss */
 button {
   display: inline-block;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9), color-stop(70%, #e3e3e3));
@@ -660,12 +711,12 @@ button {
   font-size: 10pt;
 }
 
-/* line 370, ../sass/default.scss */
+/* line 406, ../sass/default.scss */
 button:hover {
   border-color: black;
 }
 
-/* line 374, ../sass/default.scss */
+/* line 410, ../sass/default.scss */
 button:active {
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3), color-stop(70%, #f9f9f9));
   background: -webkit-linear-gradient(#e3e3e3 40%, #f9f9f9 70%);
@@ -675,62 +726,62 @@ button:active {
   background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%);
 }
 
-/* line 378, ../sass/default.scss */
+/* line 414, ../sass/default.scss */
 .blue {
   color: #0066cc;
 }
 
-/* line 381, ../sass/default.scss */
+/* line 417, ../sass/default.scss */
 .yellow {
   color: #ffd319;
 }
 
-/* line 384, ../sass/default.scss */
+/* line 420, ../sass/default.scss */
 .green {
   color: #008a35;
 }
 
-/* line 387, ../sass/default.scss */
+/* line 423, ../sass/default.scss */
 .red {
   color: red;
 }
 
-/* line 390, ../sass/default.scss */
+/* line 426, ../sass/default.scss */
 .black {
   color: black;
 }
 
-/* line 393, ../sass/default.scss */
+/* line 429, ../sass/default.scss */
 .white {
   color: white;
 }
 
-/* line 396, ../sass/default.scss */
+/* line 432, ../sass/default.scss */
 .dark {
   background-color: rgba(0, 0, 0, 0.2);
   color: white;
 }
 
-/* line 401, ../sass/default.scss */
+/* line 437, ../sass/default.scss */
 img.centered {
   margin: 0 auto;
   display: block;
 }
 
-/* line 406, ../sass/default.scss */
+/* line 442, ../sass/default.scss */
 table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 40px;
 }
 
-/* line 412, ../sass/default.scss */
+/* line 448, ../sass/default.scss */
 th {
   font-weight: 600;
   text-align: left;
 }
 
-/* line 418, ../sass/default.scss */
+/* line 454, ../sass/default.scss */
 td,
 th {
   border: 1px solid #e0e0e0;
@@ -738,25 +789,25 @@ th {
   vertical-align: top;
 }
 
-/* line 424, ../sass/default.scss */
+/* line 460, ../sass/default.scss */
 q {
   font-size: 45px;
   line-height: 72px;
 }
-/* line 428, ../sass/default.scss */
+/* line 464, ../sass/default.scss */
 q:before {
   content: '“';
   position: absolute;
   margin-left: -0.5em;
 }
-/* line 433, ../sass/default.scss */
+/* line 469, ../sass/default.scss */
 q:after {
   content: '”';
   position: absolute;
   margin-left: 0.1em;
 }
 
-/* line 440, ../sass/default.scss */
+/* line 476, ../sass/default.scss */
 slide.fill {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
@@ -765,7 +816,7 @@ slide.fill {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 443, ../sass/default.scss */
+/* line 479, ../sass/default.scss */
 slide.fill h3 {
   background: rgba(255, 255, 255, 0.75);
   padding-top: .2em;
@@ -776,7 +827,7 @@ slide.fill h3 {
   margin-right: -60px;
   padding-right: 60px;
 }
-/* line 454, ../sass/default.scss */
+/* line 490, ../sass/default.scss */
 slide.fill h4 {
   display: inline;
   position: absolute;
@@ -785,91 +836,91 @@ slide.fill h4 {
 }
 
 /* Size variants */
-/* line 465, ../sass/default.scss */
+/* line 501, ../sass/default.scss */
 article.smaller p, article.smaller ul {
   font-size: 20px;
   line-height: 24px;
   letter-spacing: 0;
 }
-/* line 470, ../sass/default.scss */
+/* line 506, ../sass/default.scss */
 article.smaller table {
   font-size: 20px;
   line-height: 24px;
   letter-spacing: 0;
 }
-/* line 475, ../sass/default.scss */
+/* line 511, ../sass/default.scss */
 article.smaller pre {
   font-size: 15px;
   line-height: 20px;
   letter-spacing: 0;
 }
-/* line 480, ../sass/default.scss */
+/* line 516, ../sass/default.scss */
 article.smaller q {
   font-size: 40px;
   line-height: 48px;
 }
-/* line 484, ../sass/default.scss */
+/* line 520, ../sass/default.scss */
 article.smaller q:before, article.smaller q:after {
   font-size: 60px;
 }
 
 /* Builds */
-/* line 493, ../sass/default.scss */
+/* line 529, ../sass/default.scss */
 .build > * {
   -moz-transition: opacity 0.5s ease-in-out 0.2s;
   -webkit-transition: opacity 0.5s ease-in-out 0.2s;
   -o-transition: opacity 0.5s ease-in-out 0.2s;
   transition: opacity 0.5s ease-in-out 0.2s;
 }
-/* line 497, ../sass/default.scss */
+/* line 533, ../sass/default.scss */
 .build .to-build {
   opacity: 0;
 }
-/* line 501, ../sass/default.scss */
+/* line 537, ../sass/default.scss */
 .build .build-fade {
   opacity: 0.3;
 }
-/* line 504, ../sass/default.scss */
+/* line 540, ../sass/default.scss */
 .build .build-fade:hover {
   opacity: 1.0;
 }
 
 /* Pretty print */
-/* line 513, ../sass/default.scss */
+/* line 549, ../sass/default.scss */
 .prettyprint .str,
 .prettyprint .atv {
   /* a markup attribute value */
   color: #009f5d;
 }
 
-/* line 517, ../sass/default.scss */
+/* line 553, ../sass/default.scss */
 .prettyprint .kwd,
 .prettyprint .tag {
   /* a markup tag name */
   color: #0066cc;
 }
 
-/* line 520, ../sass/default.scss */
+/* line 556, ../sass/default.scss */
 .prettyprint .com {
   /* a comment */
   color: #797979;
   font-style: italic;
 }
 
-/* line 524, ../sass/default.scss */
+/* line 560, ../sass/default.scss */
 .prettyprint .lit {
   /* a literal value */
   color: #f6c000;
 }
 
-/* line 529, ../sass/default.scss */
+/* line 565, ../sass/default.scss */
 .prettyprint .pun,
 .prettyprint .opn,
 .prettyprint .clo {
   color: #515151;
 }
 
-/* line 535, ../sass/default.scss */
+/* line 571, ../sass/default.scss */
 .prettyprint .typ,
 .prettyprint .atn,
 .prettyprint .dec,
@@ -878,18 +929,18 @@ article.smaller q:before, article.smaller q:after {
   color: #d94d3a;
 }
 
-/* line 538, ../sass/default.scss */
+/* line 574, ../sass/default.scss */
 .prettyprint .pln {
   color: #515151;
 }
 
-/* line 542, ../sass/default.scss */
+/* line 578, ../sass/default.scss */
 .with-notes .note {
   opacity: 1;
   pointer-events: auto;
 }
 
-/* line 547, ../sass/default.scss */
+/* line 583, ../sass/default.scss */
 .note {
   position: absolute;
   z-index: 100;
@@ -928,7 +979,7 @@ article.smaller q:before, article.smaller q:after {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 564, ../sass/default.scss */
+/* line 600, ../sass/default.scss */
 .note > section {
   background: #fff;
   -moz-border-radius: 5px;
@@ -945,17 +996,17 @@ article.smaller q:before, article.smaller q:after {
   padding: 2em;
 }
 
-/* line 573, ../sass/default.scss */
+/* line 609, ../sass/default.scss */
 input, button {
   vertical-align: middle;
 }
 
-/* line 577, ../sass/default.scss */
+/* line 613, ../sass/default.scss */
 .centered {
   text-align: center;
 }
 
-/* line 581, ../sass/default.scss */
+/* line 617, ../sass/default.scss */
 .reflect {
   -webkit-box-reflect: below 3px -webkit-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%);
   -moz-box-reflect: below 3px -moz-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%);
@@ -964,7 +1015,7 @@ input, button {
   box-reflect: below 3px linear-gradient(rgba(255, 255, 255, 0) 85%, #ffffff 150%);
 }
 
-/* line 589, ../sass/default.scss */
+/* line 625, ../sass/default.scss */
 .flexbox {
   display: -webkit-box !important;
   display: -moz-box !important;
@@ -973,7 +1024,7 @@ input, button {
   display: box !important;
 }
 
-/* line 593, ../sass/default.scss */
+/* line 629, ../sass/default.scss */
 .flexbox.vcenter {
   -moz-box-orient: vertical;
   -webkit-box-orient: vertical;
@@ -991,7 +1042,7 @@ input, button {
   width: 100%;
 }
 
-/* line 599, ../sass/default.scss */
+/* line 635, ../sass/default.scss */
 .flexbox.vleft {
   -moz-box-orient: vertical;
   -webkit-box-orient: vertical;
@@ -1009,7 +1060,7 @@ input, button {
   width: 100%;
 }
 
-/* line 605, ../sass/default.scss */
+/* line 641, ../sass/default.scss */
 .auto-fadein {
   -moz-transition: opacity 0.6s ease-in 1s;
   -webkit-transition: opacity 0.6s ease-in 1s;
@@ -1019,52 +1070,52 @@ input, button {
 }
 
 /* ===== SLIDE CONTENT ===== */
-/* line 612, ../sass/default.scss */
+/* line 648, ../sass/default.scss */
 .logoslide img {
   width: 383px;
   height: 92px;
 }
 
-/* line 618, ../sass/default.scss */
+/* line 654, ../sass/default.scss */
 .segue {
   padding: 60px 120px;
 }
-/* line 621, ../sass/default.scss */
+/* line 657, ../sass/default.scss */
 .segue h2 {
   color: #e6e6e6;
   font-size: 60px;
 }
-/* line 625, ../sass/default.scss */
+/* line 661, ../sass/default.scss */
 .segue h3 {
   color: #e6e6e6;
   line-height: 2.8;
 }
-/* line 629, ../sass/default.scss */
+/* line 665, ../sass/default.scss */
 .segue aside {
   width: 215px !important;
 }
-/* line 632, ../sass/default.scss */
+/* line 668, ../sass/default.scss */
 .segue hgroup {
   position: absolute;
   bottom: 225px;
 }
 
-/* line 638, ../sass/default.scss */
+/* line 674, ../sass/default.scss */
 .thank-you-slide {
   background: #4387fd;
   color: white;
 }
-/* line 642, ../sass/default.scss */
+/* line 678, ../sass/default.scss */
 .thank-you-slide h2 {
   font-size: 60px;
   color: inherit;
 }
-/* line 647, ../sass/default.scss */
+/* line 683, ../sass/default.scss */
 .thank-you-slide article > p {
   margin-top: 2em;
   font-size: 20pt;
 }
-/* line 652, ../sass/default.scss */
+/* line 688, ../sass/default.scss */
 .thank-you-slide > p {
   position: absolute;
   bottom: 80px;
@@ -1072,7 +1123,7 @@ input, button {
   line-height: 1.3;
 }
 
-/* line 660, ../sass/default.scss */
+/* line 696, ../sass/default.scss */
 aside.gdbar {
   height: 97px;
   width: 155px;
@@ -1101,7 +1152,7 @@ aside.gdbar {
   transition: all 0.5s ease-out 0.5s;
   /* Better to transition only on background-size, but not sure how to do that with the mixin. */
 }
-/* line 671, ../sass/default.scss */
+/* line 707, ../sass/default.scss */
 aside.gdbar.right {
   right: 0;
   left: -moz-initial;
@@ -1114,7 +1165,7 @@ aside.gdbar.right {
   -ms-transform: rotateZ(180deg);
   transform: rotateZ(180deg);
 }
-/* line 678, ../sass/default.scss */
+/* line 714, ../sass/default.scss */
 aside.gdbar.right img {
   -moz-transform: rotateZ(180deg);
   -webkit-transform: rotateZ(180deg);
@@ -1122,13 +1173,13 @@ aside.gdbar.right img {
   -ms-transform: rotateZ(180deg);
   transform: rotateZ(180deg);
 }
-/* line 683, ../sass/default.scss */
+/* line 719, ../sass/default.scss */
 aside.gdbar.bottom {
   top: -moz-initial;
   top: initial;
   bottom: 60px;
 }
-/* line 689, ../sass/default.scss */
+/* line 725, ../sass/default.scss */
 aside.gdbar img {
   width: 85px;
   height: 85px;
@@ -1137,24 +1188,24 @@ aside.gdbar img {
   margin: 8px 15px;
 }
 
-/* line 700, ../sass/default.scss */
+/* line 736, ../sass/default.scss */
 .title-slide hgroup {
   bottom: 100px;
 }
-/* line 703, ../sass/default.scss */
+/* line 739, ../sass/default.scss */
 .title-slide hgroup h1 {
   font-size: 65px;
   line-height: 1.4;
   letter-spacing: -3px;
   color: #515151;
 }
-/* line 710, ../sass/default.scss */
+/* line 746, ../sass/default.scss */
 .title-slide hgroup h2 {
   font-size: 34px;
   color: #a9a9a9;
   font-weight: inherit;
 }
-/* line 716, ../sass/default.scss */
+/* line 752, ../sass/default.scss */
 .title-slide hgroup p {
   font-size: 20px;
   color: #797979;
@@ -1162,11 +1213,11 @@ aside.gdbar img {
   margin-top: 2em;
 }
 
-/* line 725, ../sass/default.scss */
+/* line 761, ../sass/default.scss */
 .quote {
   color: #e6e6e6;
 }
-/* line 728, ../sass/default.scss */
+/* line 764, ../sass/default.scss */
 .quote .author {
   font-size: 24px;
   position: absolute;
@@ -1174,12 +1225,12 @@ aside.gdbar img {
   line-height: 1.4;
 }
 
-/* line 737, ../sass/default.scss */
+/* line 773, ../sass/default.scss */
 [data-config-contact] a {
   color: white;
   border-bottom: none;
 }
-/* line 741, ../sass/default.scss */
+/* line 777, ../sass/default.scss */
 [data-config-contact] span {
   width: 115px;
   display: inline-block;
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
index 38fd14e..a473b97 100644
--- a/theme/sass/default.scss
+++ b/theme/sass/default.scss
@@ -32,6 +32,8 @@ $slide-top-bottom-padding: 40px;
 $slide-left-right-padding: 60px;
 $slide-border-radius: 5px;
 
+$article-cotent-top-padding: 45px;
+
 /**
  * Theme Styles
  */
@@ -41,6 +43,36 @@ $slide-border-radius: 5px;
   @include text-shadow(none);
 }
 
+::-webkit-scrollbar {
+  height: 16px;
+  overflow: visible;
+  width: 16px;
+}
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, .1);
+  background-clip: padding-box;
+  border: solid transparent;
+  min-height: 28px;
+  padding: 100px 0 0;
+  @include box-shadow(inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07));
+  border-width: 1px 1px 1px 6px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+::-webkit-scrollbar-track {
+  background-clip: padding-box;
+  border: solid transparent;
+  border-width: 0 0 0 4px;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
 body {
   @include background-image(radial-gradient(50% 50%, #b1dfff 0%,
                                             $brand-blue-secondary2 600px));
@@ -190,12 +222,16 @@ slides > slide {
   }
 
   > hgroup + article {
-    margin-top: 1.5em;
+    margin-top: $article-cotent-top-padding;
 
     p {
       margin-bottom: 1em;
     }
   }
+
+  > article:only-child > iframe {
+    height: 100%;
+  }
 }
 
 slides.layout-widescreen,
@@ -338,10 +374,10 @@ code {
 
 iframe {
   width: 100%;
-  height: 620px;
+  height: $slide-height - ($slide-top-bottom-padding * 2) - ($article-cotent-top-padding * 2);
   background: white;
-  border: 1px solid rgb(192, 192, 192);
-  margin: -1px;
+  border: 1px solid $gray-1;
+  @include box-sizing(border-box);
 }
 
 dt {
-- 
cgit v1.2.3