From a43294ef655c97758b425bd7a0c1d005cdd83483 Mon Sep 17 00:00:00 2001
From: Eric Bidelman
Date: Tue, 10 Apr 2012 15:16:55 -0700
Subject: Code highlighting in place

---
 js/slides.js            |   4 +
 template.html           |  35 +++++-
 theme/css/default.css   | 301 ++++++++++++++++++++++++++++--------------------
 theme/sass/default.scss |  72 ++++++++----
 4 files changed, 266 insertions(+), 146 deletions(-)

diff --git a/js/slides.js b/js/slides.js
index eee44ee..3f2366b 100644
--- a/js/slides.js
+++ b/js/slides.js
@@ -123,6 +123,10 @@ SlideDeck.prototype.onBodyKeyDown_ = function(e) {
       e.preventDefault();
       break;
 
+    case 72: // H
+      document.body.classList.toggle('highlight-code');
+      break;
+
     case 78: // N
       document.body.classList.toggle('with-notes');
       break;
diff --git a/template.html b/template.html
index a86bf46..21af68e 100644
--- a/template.html
+++ b/template.html
@@ -100,14 +100,15 @@ URL: https://code.google.com/p/io-2012-slides
       <h3>Subtitle Placeholder</h3>
     </hgroup>
     <article>
+      <p>Press 'h' to highlight important sections of code (wrapped in <code>&lt;b&gt;</code>).</p>
       <pre class="prettyprint" data-lang="javascript">
 &lt;script type='text/javascript'&gt;
   // Say hello world until the user starts questioning
   // the meaningfulness of their existence.
   function helloWorld(world) {
-    for (var i = 42; --i &gt;= 0;) {
+    <b>for (var i = 42; --i &gt;= 0;) {
       alert('Hello ' + String(world));
-    }
+    }</b>
   }
 &lt;/script&gt;
 </pre>
@@ -156,7 +157,7 @@ function helloWorld(world) {
       <h2>Slide with Speaker Notes</h2>
     </hgroup>
     <article>
-      Press 'n'
+      Press 'n' to show speaker notes on a slide.
     </article>
   </slide>
 
@@ -262,7 +263,33 @@ function helloWorld(world) {
     </article>
   </slide>
 
-
+  <slide>
+    <hgroup>
+      <h2>Slide styles</h2>
+    </hgroup>
+    <article class="smaller columns-2">
+      <ul>
+        <li class="red">class="red"</li>
+        <li class="red2">class="red2"</li>
+        <li class="red3">class="red3"</li>
+        <li class="blue">class="blue"</li>
+        <li class="blue2">class="blue2"</li>
+        <li class="blue3">class="blue3"</li>
+        <li class="green">class="green"</li>
+        <li class="green2">class="green2"</li>
+      </ul>
+      <ul>
+        <li class="green3">class="green3"</li>
+        <li class="yellow">class="yellow"</li>
+        <li class="yellow2">class="yellow2"</li>
+        <li class="yellow3">class="yellow3"</li>
+        <li class="gray">class="gray"</li>
+        <li class="gray2">class="gray2"</li>
+        <li class="gray3">class="gray3"</li>
+        <li class="gray4">class="gray4"</li>
+      </ul>
+    </article>
+  </slide>
   <slide class="segue dark nobackground">
     <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside>
     <hgroup class="auto-fadein">
diff --git a/theme/css/default.css b/theme/css/default.css
index 63c72a8..d82a3c2 100644
--- a/theme/css/default.css
+++ b/theme/css/default.css
@@ -205,21 +205,21 @@ slide.fill img {
 /**
  * Theme Styles
  */
-/* line 40, ../sass/default.scss */
+/* line 41, ../sass/default.scss */
 ::selection {
   color: white;
   background-color: #ffd14d;
   text-shadow: none;
 }
 
-/* line 46, ../sass/default.scss */
+/* line 47, ../sass/default.scss */
 ::-webkit-scrollbar {
   height: 16px;
   overflow: visible;
   width: 16px;
 }
 
-/* line 51, ../sass/default.scss */
+/* line 52, ../sass/default.scss */
 ::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.1);
   background-clip: padding-box;
@@ -233,30 +233,30 @@ slide.fill img {
   border-width: 1px 1px 1px 6px;
 }
 
-/* line 60, ../sass/default.scss */
+/* line 61, ../sass/default.scss */
 ::-webkit-scrollbar-thumb:hover {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-/* line 63, ../sass/default.scss */
+/* line 64, ../sass/default.scss */
 ::-webkit-scrollbar-button {
   height: 0;
   width: 0;
 }
 
-/* line 67, ../sass/default.scss */
+/* line 68, ../sass/default.scss */
 ::-webkit-scrollbar-track {
   background-clip: padding-box;
   border: solid transparent;
   border-width: 0 0 0 4px;
 }
 
-/* line 72, ../sass/default.scss */
+/* line 73, ../sass/default.scss */
 ::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-/* line 76, ../sass/default.scss */
+/* line 77, ../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);
@@ -267,7 +267,7 @@ body {
   background-attachment: fixed;
 }
 
-/* line 82, ../sass/default.scss */
+/* line 83, ../sass/default.scss */
 slides > slide {
   width: 900px;
   height: 700px;
@@ -292,13 +292,13 @@ slides > slide {
   transition: all 0.3s ease-out;
 }
 
-/* line 98, ../sass/default.scss */
+/* line 99, ../sass/default.scss */
 slides.layout-widescreen > slide {
   margin-left: -550px;
   width: 1100px;
 }
 
-/* line 103, ../sass/default.scss */
+/* line 104, ../sass/default.scss */
 slides.layout-faux-widescreen > slide {
   margin-left: -550px;
   width: 1100px;
@@ -317,7 +317,7 @@ slides.nobackground slide:not(.fill)::before {
   color: inherit !important;
 }
 */
-/* line 129, ../sass/default.scss */
+/* line 130, ../sass/default.scss */
 slides > slide:not(.fill):not(.nobackground):before {
   font-size: 12pt;
   content: "#io2012";
@@ -333,7 +333,7 @@ slides > slide:not(.fill):not(.nobackground):before {
   height: 30px;
   line-height: 1.9;
 }
-/* line 141, ../sass/default.scss */
+/* line 142, ../sass/default.scss */
 slides > slide:not(.fill):not(.nobackground):after {
   font-size: 12pt;
   content: attr(data-slide-num) "/" attr(data-total-slides);
@@ -343,7 +343,7 @@ slides > slide:not(.fill):not(.nobackground):after {
   line-height: 1.9;
 }
 
-/* line 152, ../sass/default.scss */
+/* line 153, ../sass/default.scss */
 slides > slide.title-slide:after {
   content: '';
   background: url(../../images/io2012_logo.png) no-repeat 100% 50%;
@@ -363,7 +363,7 @@ slides.layout-faux-widescreen > slide:not(.nobackground) {
   background-position-x: 0, 840px;
 }*/
 /* Slides */
-/* line 171, ../sass/default.scss */
+/* line 172, ../sass/default.scss */
 slides > slide {
   display: none;
   font-family: 'Open Sans', Arial, sans-serif;
@@ -560,21 +560,18 @@ a {
   text-decoration: none;
   padding-bottom: 2px;
   border-bottom: 1px solid rgba(42, 124, 223, 0.5);
-  /*  &:visited {
-      color: rgba(0, 102, 204, 0.75);
-    }*/
 }
-/* line 287, ../sass/default.scss */
+/* line 283, ../sass/default.scss */
 a:hover {
   color: black !important;
 }
 
-/* line 292, ../sass/default.scss */
+/* line 288, ../sass/default.scss */
 h1, h2, h3 {
   font-weight: 600;
 }
 
-/* line 296, ../sass/default.scss */
+/* line 292, ../sass/default.scss */
 h2 {
   font-size: 45px;
   line-height: 45px;
@@ -582,7 +579,7 @@ h2 {
   color: #515151;
 }
 
-/* line 303, ../sass/default.scss */
+/* line 299, ../sass/default.scss */
 h3 {
   font-size: 30px;
   letter-spacing: -1px;
@@ -591,38 +588,52 @@ h3 {
   color: #797979;
 }
 
-/* line 311, ../sass/default.scss */
+/* line 307, ../sass/default.scss */
 ul {
   margin-left: 1.2em;
   margin-bottom: 1em;
+  position: relative;
 }
-/* line 315, ../sass/default.scss */
+/* line 312, ../sass/default.scss */
 ul li {
   margin-bottom: 0.5em;
 }
-/* line 318, ../sass/default.scss */
+/* line 315, ../sass/default.scss */
 ul li ul {
   margin-left: 2em;
   margin-bottom: 0;
 }
-/* line 322, ../sass/default.scss */
+/* line 319, ../sass/default.scss */
 ul li ul li:before {
   content: '-';
   font-weight: 600;
 }
-/* line 329, ../sass/default.scss */
+/* line 326, ../sass/default.scss */
 ul > li:before {
   content: '·';
   margin-left: -1em;
   position: absolute;
   font-weight: 600;
 }
-/* line 337, ../sass/default.scss */
+/* line 334, ../sass/default.scss */
 ul ul {
   margin-top: .5em;
 }
 
-/* line 342, ../sass/default.scss */
+/* line 340, ../sass/default.scss */
+.highlight-code pre > * {
+  opacity: 0.25;
+  -moz-transition: opacity 0.5s ease-in;
+  -webkit-transition: opacity 0.5s ease-in;
+  -o-transition: opacity 0.5s ease-in;
+  transition: opacity 0.5s ease-in;
+}
+/* line 344, ../sass/default.scss */
+.highlight-code b {
+  opacity: 1;
+}
+
+/* line 349, ../sass/default.scss */
 pre {
   font-family: 'Inconsolata', 'Courier New', monospace;
   font-size: 20px;
@@ -640,7 +651,7 @@ pre {
   box-sizing: border-box;
   /*overflow: hidden;*/
 }
-/* line 356, ../sass/default.scss */
+/* line 363, ../sass/default.scss */
 pre:after {
   content: attr(data-lang);
   background-color: #a9a9a9;
@@ -653,14 +664,14 @@ pre:after {
   text-transform: uppercase;
 }
 
-/* line 369, ../sass/default.scss */
+/* line 376, ../sass/default.scss */
 code {
   font-size: 95%;
   font-family: 'Inconsolata', 'Courier New', monospace;
   color: black;
 }
 
-/* line 375, ../sass/default.scss */
+/* line 382, ../sass/default.scss */
 iframe {
   width: 100%;
   height: 530px;
@@ -672,17 +683,17 @@ iframe {
   box-sizing: border-box;
 }
 
-/* line 383, ../sass/default.scss */
+/* line 390, ../sass/default.scss */
 dt {
   font-weight: bold;
 }
 
-/* line 387, ../sass/default.scss */
+/* line 394, ../sass/default.scss */
 h3 + iframe {
   height: 540px;
 }
 
-/* line 391, ../sass/default.scss */
+/* line 398, ../sass/default.scss */
 button {
   display: inline-block;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9), color-stop(70%, #e3e3e3));
@@ -711,12 +722,12 @@ button {
   font-size: 10pt;
 }
 
-/* line 406, ../sass/default.scss */
+/* line 413, ../sass/default.scss */
 button:hover {
   border-color: black;
 }
 
-/* line 410, ../sass/default.scss */
+/* line 417, ../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%);
@@ -726,49 +737,95 @@ button:active {
   background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%);
 }
 
-/* line 414, ../sass/default.scss */
+/* line 421, ../sass/default.scss */
 .blue {
-  color: #0066cc;
+  color: #4387fd;
 }
 
-/* line 417, ../sass/default.scss */
+/* line 424, ../sass/default.scss */
+.blue2 {
+  color: #3c8ef3;
+}
+
+/* line 427, ../sass/default.scss */
+.blue3 {
+  color: #2a7cdf;
+}
+
+/* line 430, ../sass/default.scss */
 .yellow {
-  color: #ffd319;
+  color: #ffd14d;
 }
 
-/* line 420, ../sass/default.scss */
+/* line 433, ../sass/default.scss */
+.yellow2 {
+  color: #f9cc46;
+}
+
+/* line 436, ../sass/default.scss */
+.yellow3 {
+  color: #f6c000;
+}
+
+/* line 439, ../sass/default.scss */
 .green {
-  color: #008a35;
+  color: #0da861;
 }
 
-/* line 423, ../sass/default.scss */
+/* line 442, ../sass/default.scss */
+.green2 {
+  color: #00a86d;
+}
+
+/* line 445, ../sass/default.scss */
+.green3 {
+  color: #009f5d;
+}
+
+/* line 448, ../sass/default.scss */
 .red {
-  color: red;
+  color: #f44a3f;
 }
 
-/* line 426, ../sass/default.scss */
-.black {
-  color: black;
+/* line 451, ../sass/default.scss */
+.red2 {
+  color: #e0543e;
 }
 
-/* line 429, ../sass/default.scss */
-.white {
-  color: white;
+/* line 454, ../sass/default.scss */
+.red3 {
+  color: #d94d3a;
 }
 
-/* line 432, ../sass/default.scss */
-.dark {
-  background-color: rgba(0, 0, 0, 0.2);
-  color: white;
+/* line 457, ../sass/default.scss */
+.gray {
+  color: #e6e6e6;
 }
 
-/* line 437, ../sass/default.scss */
-img.centered {
-  margin: 0 auto;
-  display: block;
+/* line 460, ../sass/default.scss */
+.gray2 {
+  color: #a9a9a9;
 }
 
-/* line 442, ../sass/default.scss */
+/* line 463, ../sass/default.scss */
+.gray3 {
+  color: #797979;
+}
+
+/* line 466, ../sass/default.scss */
+.gray4 {
+  color: #515151;
+}
+
+/* line 470, ../sass/default.scss */
+.columns-2 {
+  -moz-column-count: 2;
+  -webkit-column-count: 2;
+  -o-column-count: 2;
+  column-count: 2;
+}
+
+/* line 474, ../sass/default.scss */
 table {
   width: 100%;
   border-collapse: -moz-initial;
@@ -776,16 +833,16 @@ table {
   border-spacing: 2px;
   border-bottom: 1px solid #797979;
 }
-/* line 449, ../sass/default.scss */
+/* line 481, ../sass/default.scss */
 table tr > td:first-child, table th {
   font-weight: 600;
   color: #515151;
 }
-/* line 454, ../sass/default.scss */
+/* line 486, ../sass/default.scss */
 table tr:nth-child(odd) {
   background-color: #e6e6e6;
 }
-/* line 458, ../sass/default.scss */
+/* line 490, ../sass/default.scss */
 table th {
   color: white;
   font-size: 18px;
@@ -796,12 +853,12 @@ table th {
   background: -ms-linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat;
   background: linear-gradient(top, #4387fd 40%, #2a7cdf 80%) no-repeat;
 }
-/* line 464, ../sass/default.scss */
+/* line 496, ../sass/default.scss */
 table td, table th {
   font-size: 18px;
   padding: 1em 0.5em;
 }
-/* line 469, ../sass/default.scss */
+/* line 501, ../sass/default.scss */
 table td.highlight {
   color: #515151;
   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #ffd14d), color-stop(80%, #f6c000)) no-repeat;
@@ -811,31 +868,31 @@ table td.highlight {
   background: -ms-linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat;
   background: linear-gradient(top, #ffd14d 40%, #f6c000 80%) no-repeat;
 }
-/* line 474, ../sass/default.scss */
+/* line 506, ../sass/default.scss */
 table.rows {
   border-bottom: none;
   border-right: 1px solid #797979;
 }
 
-/* line 480, ../sass/default.scss */
+/* line 512, ../sass/default.scss */
 q {
   font-size: 45px;
   line-height: 72px;
 }
-/* line 484, ../sass/default.scss */
+/* line 516, ../sass/default.scss */
 q:before {
   content: '“';
   position: absolute;
   margin-left: -0.5em;
 }
-/* line 489, ../sass/default.scss */
+/* line 521, ../sass/default.scss */
 q:after {
   content: '”';
   position: absolute;
   margin-left: 0.1em;
 }
 
-/* line 496, ../sass/default.scss */
+/* line 528, ../sass/default.scss */
 slide.fill {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
@@ -844,7 +901,7 @@ slide.fill {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 499, ../sass/default.scss */
+/* line 531, ../sass/default.scss */
 slide.fill h3 {
   background: rgba(255, 255, 255, 0.75);
   padding-top: .2em;
@@ -855,7 +912,7 @@ slide.fill h3 {
   margin-right: -60px;
   padding-right: 60px;
 }
-/* line 510, ../sass/default.scss */
+/* line 542, ../sass/default.scss */
 slide.fill h4 {
   display: inline;
   position: absolute;
@@ -864,89 +921,89 @@ slide.fill h4 {
 }
 
 /* Size variants */
-/* line 521, ../sass/default.scss */
+/* line 553, ../sass/default.scss */
 article.smaller p, article.smaller ul {
   font-size: 20px;
   line-height: 24px;
   letter-spacing: 0;
 }
-/* line 527, ../sass/default.scss */
+/* line 559, ../sass/default.scss */
 article.smaller table td, article.smaller table th {
   font-size: 14px;
 }
-/* line 531, ../sass/default.scss */
+/* line 563, ../sass/default.scss */
 article.smaller pre {
   font-size: 15px;
   line-height: 20px;
   letter-spacing: 0;
 }
-/* line 536, ../sass/default.scss */
+/* line 568, ../sass/default.scss */
 article.smaller q {
   font-size: 40px;
   line-height: 48px;
 }
-/* line 540, ../sass/default.scss */
+/* line 572, ../sass/default.scss */
 article.smaller q:before, article.smaller q:after {
   font-size: 60px;
 }
 
 /* Builds */
-/* line 549, ../sass/default.scss */
+/* line 581, ../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 553, ../sass/default.scss */
+/* line 585, ../sass/default.scss */
 .build .to-build {
   opacity: 0;
 }
-/* line 557, ../sass/default.scss */
+/* line 589, ../sass/default.scss */
 .build .build-fade {
   opacity: 0.3;
 }
-/* line 560, ../sass/default.scss */
+/* line 592, ../sass/default.scss */
 .build .build-fade:hover {
   opacity: 1.0;
 }
 
 /* Pretty print */
-/* line 569, ../sass/default.scss */
+/* line 601, ../sass/default.scss */
 .prettyprint .str,
 .prettyprint .atv {
   /* a markup attribute value */
   color: #009f5d;
 }
 
-/* line 573, ../sass/default.scss */
+/* line 605, ../sass/default.scss */
 .prettyprint .kwd,
 .prettyprint .tag {
   /* a markup tag name */
   color: #0066cc;
 }
 
-/* line 576, ../sass/default.scss */
+/* line 608, ../sass/default.scss */
 .prettyprint .com {
   /* a comment */
   color: #797979;
   font-style: italic;
 }
 
-/* line 580, ../sass/default.scss */
+/* line 612, ../sass/default.scss */
 .prettyprint .lit {
   /* a literal value */
-  color: #f6c000;
+  color: #7f0000;
 }
 
-/* line 585, ../sass/default.scss */
+/* line 617, ../sass/default.scss */
 .prettyprint .pun,
 .prettyprint .opn,
 .prettyprint .clo {
   color: #515151;
 }
 
-/* line 591, ../sass/default.scss */
+/* line 623, ../sass/default.scss */
 .prettyprint .typ,
 .prettyprint .atn,
 .prettyprint .dec,
@@ -955,18 +1012,18 @@ article.smaller q:before, article.smaller q:after {
   color: #d94d3a;
 }
 
-/* line 594, ../sass/default.scss */
+/* line 626, ../sass/default.scss */
 .prettyprint .pln {
   color: #515151;
 }
 
-/* line 598, ../sass/default.scss */
+/* line 630, ../sass/default.scss */
 .with-notes .note {
   opacity: 1;
   pointer-events: auto;
 }
 
-/* line 603, ../sass/default.scss */
+/* line 635, ../sass/default.scss */
 .note {
   position: absolute;
   z-index: 100;
@@ -1005,7 +1062,7 @@ article.smaller q:before, article.smaller q:after {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 620, ../sass/default.scss */
+/* line 652, ../sass/default.scss */
 .note > section {
   background: #fff;
   -moz-border-radius: 5px;
@@ -1022,17 +1079,17 @@ article.smaller q:before, article.smaller q:after {
   padding: 2em;
 }
 
-/* line 629, ../sass/default.scss */
+/* line 661, ../sass/default.scss */
 input, button {
   vertical-align: middle;
 }
 
-/* line 633, ../sass/default.scss */
+/* line 665, ../sass/default.scss */
 .centered {
   text-align: center;
 }
 
-/* line 637, ../sass/default.scss */
+/* line 669, ../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%);
@@ -1041,7 +1098,7 @@ input, button {
   box-reflect: below 3px linear-gradient(rgba(255, 255, 255, 0) 85%, #ffffff 150%);
 }
 
-/* line 645, ../sass/default.scss */
+/* line 677, ../sass/default.scss */
 .flexbox {
   display: -webkit-box !important;
   display: -moz-box !important;
@@ -1050,7 +1107,7 @@ input, button {
   display: box !important;
 }
 
-/* line 649, ../sass/default.scss */
+/* line 681, ../sass/default.scss */
 .flexbox.vcenter {
   -moz-box-orient: vertical;
   -webkit-box-orient: vertical;
@@ -1068,7 +1125,7 @@ input, button {
   width: 100%;
 }
 
-/* line 655, ../sass/default.scss */
+/* line 687, ../sass/default.scss */
 .flexbox.vleft {
   -moz-box-orient: vertical;
   -webkit-box-orient: vertical;
@@ -1086,7 +1143,7 @@ input, button {
   width: 100%;
 }
 
-/* line 661, ../sass/default.scss */
+/* line 693, ../sass/default.scss */
 .auto-fadein {
   -moz-transition: opacity 0.6s ease-in 1s;
   -webkit-transition: opacity 0.6s ease-in 1s;
@@ -1096,52 +1153,52 @@ input, button {
 }
 
 /* ===== SLIDE CONTENT ===== */
-/* line 668, ../sass/default.scss */
+/* line 700, ../sass/default.scss */
 .logoslide img {
   width: 383px;
   height: 92px;
 }
 
-/* line 674, ../sass/default.scss */
+/* line 706, ../sass/default.scss */
 .segue {
   padding: 60px 120px;
 }
-/* line 677, ../sass/default.scss */
+/* line 709, ../sass/default.scss */
 .segue h2 {
   color: #e6e6e6;
   font-size: 60px;
 }
-/* line 681, ../sass/default.scss */
+/* line 713, ../sass/default.scss */
 .segue h3 {
   color: #e6e6e6;
   line-height: 2.8;
 }
-/* line 685, ../sass/default.scss */
+/* line 717, ../sass/default.scss */
 .segue aside {
   width: 215px !important;
 }
-/* line 688, ../sass/default.scss */
+/* line 720, ../sass/default.scss */
 .segue hgroup {
   position: absolute;
   bottom: 225px;
 }
 
-/* line 694, ../sass/default.scss */
+/* line 726, ../sass/default.scss */
 .thank-you-slide {
   background: #4387fd;
   color: white;
 }
-/* line 698, ../sass/default.scss */
+/* line 730, ../sass/default.scss */
 .thank-you-slide h2 {
   font-size: 60px;
   color: inherit;
 }
-/* line 703, ../sass/default.scss */
+/* line 735, ../sass/default.scss */
 .thank-you-slide article > p {
   margin-top: 2em;
   font-size: 20pt;
 }
-/* line 708, ../sass/default.scss */
+/* line 740, ../sass/default.scss */
 .thank-you-slide > p {
   position: absolute;
   bottom: 80px;
@@ -1149,7 +1206,7 @@ input, button {
   line-height: 1.3;
 }
 
-/* line 716, ../sass/default.scss */
+/* line 748, ../sass/default.scss */
 aside.gdbar {
   height: 97px;
   width: 155px;
@@ -1178,7 +1235,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 727, ../sass/default.scss */
+/* line 759, ../sass/default.scss */
 aside.gdbar.right {
   right: 0;
   left: -moz-initial;
@@ -1191,7 +1248,7 @@ aside.gdbar.right {
   -ms-transform: rotateZ(180deg);
   transform: rotateZ(180deg);
 }
-/* line 734, ../sass/default.scss */
+/* line 766, ../sass/default.scss */
 aside.gdbar.right img {
   -moz-transform: rotateZ(180deg);
   -webkit-transform: rotateZ(180deg);
@@ -1199,13 +1256,13 @@ aside.gdbar.right img {
   -ms-transform: rotateZ(180deg);
   transform: rotateZ(180deg);
 }
-/* line 739, ../sass/default.scss */
+/* line 771, ../sass/default.scss */
 aside.gdbar.bottom {
   top: -moz-initial;
   top: initial;
   bottom: 60px;
 }
-/* line 745, ../sass/default.scss */
+/* line 777, ../sass/default.scss */
 aside.gdbar img {
   width: 85px;
   height: 85px;
@@ -1214,24 +1271,24 @@ aside.gdbar img {
   margin: 8px 15px;
 }
 
-/* line 756, ../sass/default.scss */
+/* line 788, ../sass/default.scss */
 .title-slide hgroup {
   bottom: 100px;
 }
-/* line 759, ../sass/default.scss */
+/* line 791, ../sass/default.scss */
 .title-slide hgroup h1 {
   font-size: 65px;
   line-height: 1.4;
   letter-spacing: -3px;
   color: #515151;
 }
-/* line 766, ../sass/default.scss */
+/* line 798, ../sass/default.scss */
 .title-slide hgroup h2 {
   font-size: 34px;
   color: #a9a9a9;
   font-weight: inherit;
 }
-/* line 772, ../sass/default.scss */
+/* line 804, ../sass/default.scss */
 .title-slide hgroup p {
   font-size: 20px;
   color: #797979;
@@ -1239,11 +1296,11 @@ aside.gdbar img {
   margin-top: 2em;
 }
 
-/* line 781, ../sass/default.scss */
+/* line 813, ../sass/default.scss */
 .quote {
   color: #e6e6e6;
 }
-/* line 784, ../sass/default.scss */
+/* line 816, ../sass/default.scss */
 .quote .author {
   font-size: 24px;
   position: absolute;
@@ -1251,12 +1308,12 @@ aside.gdbar img {
   line-height: 1.4;
 }
 
-/* line 793, ../sass/default.scss */
+/* line 825, ../sass/default.scss */
 [data-config-contact] a {
   color: white;
   border-bottom: none;
 }
-/* line 797, ../sass/default.scss */
+/* line 829, ../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 222ac08..271015c 100644
--- a/theme/sass/default.scss
+++ b/theme/sass/default.scss
@@ -1,4 +1,5 @@
 @import "base";
+@import "compass/css3/columns";
 @import "compass/css3/user-interface";
 
 $social-tags: '#io2012';
@@ -172,7 +173,6 @@ slides > slide {
   display: none;
   font-family: 'Open Sans', Arial, sans-serif;
   color: $gray-3;
-
   @include background(linear-gradient(white, white 85%, $gray-1));
 
   $translateX: 1020px;
@@ -280,10 +280,6 @@ a {
   padding-bottom: 2px;
   border-bottom: 1px solid rgba(42, 124, 223, 0.5);
 
-/*  &:visited {
-    color: rgba(0, 102, 204, 0.75);
-  }*/
-
   &:hover {
     color: black !important;
   }
@@ -311,6 +307,7 @@ h3 {
 ul {
   margin-left: 1.2em;
   margin-bottom: 1em;
+  position: relative;
 
   li {
     margin-bottom: 0.5em;
@@ -339,6 +336,16 @@ ul {
   }
 }
 
+.highlight-code {
+  pre > * {
+    opacity: 0.25;
+    @include transition(opacity 0.5s ease-in);
+  }
+  b {
+    opacity: 1;
+  }
+}
+
 pre {
   font-family: 'Inconsolata', 'Courier New', monospace;
   font-size: 20px;
@@ -412,31 +419,56 @@ button:active {
 }
 
 .blue {
-  color: rgb(0, 102, 204);
+  color: $brand-blue;
+}
+.blue2 {
+  color: $brand-blue-secondary;
+}
+.blue3 {
+  color: $brand-blue-secondary2;
 }
 .yellow {
-  color: rgb(255, 211, 25);
+  color: $brand-yellow;
+}
+.yellow2 {
+  color: $brand-yellow-secondary;
+}
+.yellow3 {
+  color: $brand-yellow-secondary2;
 }
 .green {
-  color: rgb(0, 138, 53);
+  color: $brand-green;
+}
+.green2 {
+  color: $brand-green-secondary;
+}
+.green3 {
+  color: $brand-green-secondary2;
 }
 .red {
-  color: rgb(255, 0, 0);
+  color: $brand-red;
 }
-.black {
-  color: black;
+.red2 {
+  color: $brand-red-secondary;
 }
-.white {
-  color: white;
+.red3 {
+  color: $brand-red-secondary2;
 }
-.dark {
-  background-color: rgba(0, 0, 0, 0.2);
-  color: white;
+.gray {
+  color: $gray-1;
+}
+.gray2 {
+  color: $gray-2;
+}
+.gray3 {
+  color: $gray-3;
+}
+.gray4 {
+  color: $gray-4;
 }
 
-img.centered {
-  margin: 0 auto;
-  display: block;
+.columns-2 {
+  @include column-count(2);
 }
 
 table {
@@ -578,7 +610,7 @@ article.smaller {
   font-style: italic;
 }
 .prettyprint .lit { /* a literal value */
-  color: $brand-yellow-secondary2; //rgb(127, 0, 0);
+  color: rgb(127, 0, 0);
 }
 .prettyprint .pun, /* punctuation, lisp open bracket, lisp close bracket */
 .prettyprint .opn,
-- 
cgit v1.2.3