infynyxx/html5_slides.html

## html5_slides.html
<!DOCTYPE html>

<!--
  Copyright 2010 Google Inc.
  All rights reserved.
  Original slides:
                 Marcin Wichary
  Modifications:
                 Ernest Delgado
                 Alex Russell
                 Annie Sullivan
                 Andy Martone

  Extracted from http://en.oreilly.com/velocity2010/public/schedule/detail/14334
-->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    <title>Velocity 2010: Forcing Gzip Compression</title>

    <style>
      .notes { display: none; }
      .stroke {
        -webkit-text-stroke-color: red;
        -webkit-text-stroke-width: 1px;
        -moz-text-stroke-color: red;
        -moz-text-stroke-width: 1px;
      }

      body {
        font: 21px Arial, Helvetica, "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
        background: #090909;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px; top: 0px;
      }

      .presentation {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0px;
        top: 0px;
        display: block;
        overflow: hidden;
        background: -webkit-gradient(linear, left top, left bottom, from(#444), to(black));
        background: -moz-linear-gradient(top, #444, black);
      }

      .slides {
        width: 100%;
        height: 100%;
        overflow: hidden;
        left: 0;
        top: 0;
        position: absolute;
        display: block;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
        -moz-transition: -moz-transform 0.5s ease-in-out;
        -o-transition: -o-transform 0.5s ease-in-out;
      }

      .slide {
        display: none;
        position: absolute;
        overflow: hidden;
        width: 900px;
        height: 700px;
        left: 50%;
        top: 50%;
        margin-top: -350px;
        border-radius: 10px;
        -moz-border-radius: 10px;

        opacity: 0.7;

        -webkit-transform: scale(0.9) translateZ(0);
        -moz-transform: scale(0.9);
        -o-transform: scale(0.9);

        -webkit-transition-property: margin, -webkit-transform, opacity;
        -webkit-transition-duration: 0.4s, 0.4s, 0.4s;
        -webkit-transition-timing-function: ease-in-out;

        -moz-transition-property: margin, -moz-transform, opacity;
        -moz-transition-duration: 0.4s, 0.4s, 0.4s;
        -moz-transition-timing-function: ease-in-out;

        -o-transition-property: margin, -moz-transform, opacity;
        -o-transition-duration: 0.4s, 0.4s, 0.4s;
        -o-transition-timing-function: ease-in-out;

        /* NOTE(slightlyoff): simpler animations for slower boxes */
        /*
        -webkit-transition: margin 0.3s ease-in-out;
        -moz-transition: margin 0.3s ease-in-out;
        -o-transition: margin 0.3s ease-in-out;
        */
      }

      .slide p,
      .slide div,
      .slide code {
        font-size: 35px;
        margin: 0.3em 0;
        line-height: 1.2em;
      }

      button {
        font-size: 20px;
      }

      .summary {
        font-size: 30px;
      }

      section > ul,
      section > ol,
      .bullets {
        font-size: 40px;
      }

      /*
      .slide.distant-past {
        margin-left: -3400px;
      }
      */

      .slide.far-past {
        display: block;
        margin-left: -2400px;
      }

      .slide.past {
        display: block;
        margin-left: -1400px;
      }

      .slide.current {
        display: block;
        margin-left: -450px;

        -webkit-transform: scale(1.0);
        -moz-transform: scale(1.0);
        -o-transform: scale(1.0);
        opacity: 1.0;
      }

      .slide.future {
        display: block;
        margin-left: 500px;
      }

      .slide.far-future {
        display: block;
        margin-left: 1500px;
      }

      /*
      .slide.distant-future {
        margin-left: 2500px;
      }
      */

      /* Content */

      [data-build] > * {
        -webkit-transition: opacity 0.5s ease-in-out 0.2s;
        -moz-transition: opacity 0.5s ease-in-out 0.2s;
        -o-transition: opacity 0.5s ease-in-out 0.2s;
      }

      [data-build] > *.to-build {
        opacity: 0;
      }

      header {
        font-family: Arial, Helvetica, 'Junction';
        font-weight: normal;
        font-size: 50px;
        letter-spacing: -.05em;
        color: #3c3c3c;
        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
        position: absolute;
        left: 40px;
        top: 85px;
        margin: 0;
        padding: 0;
      }

      h1 {
        color: #3c3c3c;
        display: block;
        font-size: 100%;
      	font-weight: normal;
      	padding: 0;
      	margin: 0;
        height: 1.2em;
        line-height: 1.2em;
      }

      h2 {
        font-weight: normal;
        line-height: 1.3em;
        color: #999999;
        font-size: 30px;
        margin-left: 20px;
        margin-top: 50px;
        padding: 0;
        margin: 15px 0 5px 0;
      }

      h2:first-child {
        margin-top: 0;
        padding: 0;
        margin: 15px 0 5px 0;
      }

      h3 {
        font-size: 0.4em;
        font-weight: normal;
        line-height: 1.2em;
        margin: 15px 0 5px 0;
      }

      section {
        font-family: Arial, Helvetica, 'Junction';
        font-size: 50px;
        color: #999999;
        margin-left: 40px;
        margin-right: 40px;
        margin-top: 150px;
        display: block;
        overflow: hidden;
      }

      section > pre {
        color: #3f3f3f;
      }

      a {
        color: inherit;
        display: inline-block;
        text-decoration: none;
        line-height: 110%;
        border-bottom: 2px solid #3f3f3f;
      }

      #wmap a {
        line-height: 100%;
        border-bottom: none;
      }

      section.left {
        float: left;
        width: 390px;
      }

      section.small {
        font-size: 24px;
      }

      section.small ul {
        margin: 0 0 0 15px;
        padding: 0;
      }

      section.small li {
        padding-bottom: 0;
      }

      section.center {
        line-height: 180%;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        height: 700px;
        width: 900px;
      }

      section.centerLeft {
        padding-left: 1em;
        padding-right: 1em;
        line-height: 180%;
        text-align: left;
        display: table-cell;
        vertical-align: middle;
        height: 700px;
        width: 900px;
      }

      /* Assumes we're inside a .segue */
      section.bottomLeft {
        line-height: 180%;
        padding-bottom: 24%;
      }

      pre {
        text-align: left;
        font-size: 24px;
        font-family: Monaco, Courier;
        color: #333333;
        padding-bottom: 10px;

        padding: 10px 20px;
        background: rgba(255, 0, 0, 0.05);
        background: #edf3fb;

        border-radius: 8px;
        -moz-border-radius: 8px;
        border: 1px solid rgba(255, 0, 0, 0.2);
      }

      .two-column {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        -o-column-count: 2;
      }

      .three-column {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        -o-column-count: 3;
      }

      .three-column h1.break {
        padding: 30px;
        -webkit-column-break-before: always;
        -moz-column-break-before: always;
        -o-column-break-before: always;
      }

      pre select {
        font-size: 16px;
        font-family: Monaco, Courier;
        border: 1px solid #c61800;
      }

      input {
        font-size: 16px;
        font-family: Arial, Helvetica;
        padding: 3px;
      }

      input[type="range"] {
        width: 100%;
      }

      button {
        font-family: Verdana;
      }

      button.large {
        font-size: 32px;
      }

      pre b {
        font-weight: normal;
        color: #c61800;
        text-shadow: #c61800 0 0 1px;
        /*letter-spacing: -1px;*/
      }

      pre em {
        font-weight: normal;
        font-style: normal;
        color: #18a600;
        /* text-shadow: #18a600 0 0 1px;  */
      }

      pre input[type="range"] {
        height: 6px;
        cursor: pointer;
        width: auto;
      }

      example {
        font-size: 16px;
        display: block;
        padding: 10px 20px;
        color: #090909;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 8px;
        -moz-border-radius: 8px;
        margin-bottom: 10px;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }

      video {
        border-radius: 8px;
        -moz-border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }

      li {
        line-height: 1.5em;
      }

      .bullets,
      section > ul {
        margin: 0;
        -webkit-padding-start: 1em;
        list-style: disc;
        list-style-position: outside;
      }

      section > ul > li > ul,
      section > ol > li > ul {
        margin: 0;
        -webkit-padding-start: 1em;
        list-style: circle;
        list-style-position: outside;
      }

      .numbers,
      section > ol,
      section > ol > li > ol,
      section > ul > li > ol {
        margin: 0;
        -webkit-padding-start: 1.5em;
        list-style: decimal;
        list-style-position: outside;
      }

      section > ol > li > ol {
        -webkit-padding-start: 1em;
        font-size: 0.8em;
        list-style-position: outside;
        list-style: lower-alpha;
      }

      info {
        display: block;
        font-size: 50%;
        text-align: center;
      }

      .quote em {
        color: #215594;
      }

      /* Theme Colors:

          lighter body text: #999999
          darker body text: #777777
          headline (dark): #3c3c3c
          headline (light): #999999
          i/o logo color: #215594
          color bars colors (in order):

            #2868b0
            #ebab8c
            #cb263e
            #ae1e36
            #f7d157
            #e6b324
            #4eb6e7
            #2868b0
            #21557f
            #2e6e4a
            #44a14d
            #bbd68e

      */

      /* Slide Sub-Types and Configuration */

      .slide {
        background: url(files/velocity_speaker.004.png) 0px top no-repeat,
                    white;
        background-size: contain, 15%;
        -moz-background-size: contain, 15%;
      }

      .slide .counter {
        color: #999999;
        position: absolute;
        left: 50px;
        bottom: 50px;
        display: block;
        font-size: 12px;
      }

      .slide.title,
      .slide.segue,
      .slide.mainTitle {
        text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
      }

      .slide.mainTitle h1,
      .slide.mainTitle h2 {
        margin-left: 260px;
      }

      .slide.mainTitle > .counter {
        display: none;
      }

      .slide.title {
        background: url(files/velocity_speaker.004.png) 0px top no-repeat,
                    white;
        background-size: contain, 15%;
        -moz-background-size: contain, 15%;
      }

      .slide.title h1,
      .slide.mainTitle h1 {
        font-weight: bold;
        font-size: 40px;
      }

      .slide.title h2 {
        font-weight: normal;
        font-size: 27px;
        margin: 0;
      }

      .slide.current.segue,
      .slide.future.segue,
      .slide.far-future.segue,
      .slide.past.segue,
      .slide.far-past.segue {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-align: stretch;

        display: -moz-box;
        -moz-box-orient: vertical;
        -moz-box-align: stretch;

        -webkit-box-pack: end;
        -moz-box-pack: end;
        box-pack: end;

        background: url(files/bottom_bar.png) 0px 90% no-repeat,
                    url(files/velocity_logo_small.gif) 100% 100% no-repeat,
                    white;
        background-size: contain, 15%;
        -moz-background-size: contain, 15%;
      }

      div.slide.segue h1,
      div.slide.segue h2 {
        color: #999999;
      }

      div.slide.mainTitle {
        background: url(files/velocity_speaker.003.png) left top no-repeat,
                    white;
        background-size: contain, 100%;
        -moz-background-size: contain, 100%;
      }

      div.slide.title sup {
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <div class="presentation">
      <div class="slides">
        <div class="slide mainTitle">
          <section class="centerLeft">
          <hgroup data-build>
            <h1 data-auto>Slide Title</h1>
            <h2 data-auto style="margin-top: 3em;">
              Prajwal Tuladhar praj@infynyxx.com<br>
              June 23, 2010
            </h2>
          </hgroup>
          </section>
        </div>

        <div class="slide title">
          <section class="centerLeft">
            <hgroup data-build>
              <h1 data-auto>Unix is great!</h1>
              <h2 data-build>List 1</h2>
              <h2 data-build>List 2</h2>
              <h2 data-build>List 3</h2>
            </hgroup>
          </section>
        </div>
        <!-- slides -->

    </div> <!-- presentation -->

    <script>
      (function() {
        // bail in IE
        var doc = document;
        if (doc.all) { return; }

        var disableBuilds = false; //true;

        var ctr = 0;
        var spaces = /\s+/, a1 = [""];

        var toArray = function(list) {
          return Array.prototype.slice.call(list||[], 0);
        };

        var byId = function(id) {
          if (typeof id == "string") { return doc.getElementById(id); }
          return id;
        };

        var query = function(query, root) {
          if (!query) { return []; }
          if (typeof query != "string") { return toArray(query); }
          if (typeof root == "string"){
            root = byId(root);
            if(!root){ return []; }
          }

          root = root||document;
          var rootIsDoc = (root.nodeType == 9);
          var doc = rootIsDoc ? root : (root.ownerDocument||document);

          // rewrite the query to be ID rooted
          if (!rootIsDoc || (">~+".indexOf(query.charAt(0)) >= 0)) {
            root.id = root.id||("qUnique"+(ctr++));
            query = "#"+root.id+" "+query;
          }
          // don't choke on something like ".yada.yada >"
          if (">~+".indexOf(query.slice(-1)) >= 0) { query += " *"; }

          return toArray(doc.querySelectorAll(query));
        };

        var strToArray = function(s) {
          if (typeof s == "string" || s instanceof String) {
            if (s.indexOf(" ") < 0) {
              a1[0] = s;
              return a1;
            } else {
              return s.split(spaces);
            }
          }
          return s;
        };

        var trim = function(str) {
          return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        };

        var addClass = function(node, classStr) {
          classStr = strToArray(classStr);
          var cls = " " + node.className + " ";
          for (var i = 0, len = classStr.length, c; i < len; ++i) {
            c = classStr[i];
            if (c && cls.indexOf(" " + c + " ") < 0) {
              cls += c + " ";
            }
          }
          node.className = trim(cls);
        };

        var removeClass = function(node, classStr) {
          var cls;
          if (classStr !== undefined) {
            classStr = strToArray(classStr);
            cls = " " + node.className + " ";
            for (var i = 0, len = classStr.length; i < len; ++i) {
              cls = cls.replace(" " + classStr[i] + " ", " ");
            }
            cls = trim(cls);
          } else {
            cls = "";
          }
          if (node.className != cls) {
            node.className = cls;
          }
        };

        var toggleClass = function(node, classStr) {
          var cls = " " + node.className + " ";
          if (cls.indexOf(" " + trim(classStr) + " ") >= 0) {
            removeClass(node, classStr);
          } else {
            addClass(node, classStr);
          }
        };

        var ua = navigator.userAgent;
        var isFF = parseFloat(ua.split("Firefox/")[1]) || undefined;
        var isWK = parseFloat(ua.split("WebKit/")[1]) || undefined;
        var isOpera = parseFloat(ua.split("Opera/")[1]) || undefined;

        var canTransition = (function() {
          var ver = parseFloat(ua.split("Version/")[1]) || undefined;
          // test to determine if this browser can handle CSS transitions.
          var cachedCanTransition =
            (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));
          return function() { return cachedCanTransition; }
        })();

        //
        // Slide class
        //
        var Slide = function(node, idx) {
          this._node = node;
          if (idx >= 0) {
            this._count = idx+1;
          }
          if (this._node) {
            addClass(this._node, "slide distant-future");
          }
          this._makeCounter();
          this._makeBuildList();
        };

        Slide.prototype = {
          _node: null,
          _count: 0,
          _buildList: [],
          _visited: false,
          _currentState: "",
          _states: [ "distant-past", "far-past",
                     "past", "current", "future",
                     "far-future", "distant-future" ],
          setState: function(state) {
            if (typeof state != "string") {
              state = this._states[state];
            }
            if (state == "current" && !this._visited) {
              this._visited = true;
              this._makeBuildList();
            }
            removeClass(this._node, this._states);
            addClass(this._node, state);
            this._currentState = state;

            // delay first auto run. Really wish this were in CSS.
            /*
            this._runAutos();
            */
            var _t = this;
            setTimeout(function(){ _t._runAutos(); } , 400);
          },
          _makeCounter: function() {
            if(!this._count || !this._node) { return; }
            var c = doc.createElement("span");
            c.innerHTML = this._count;
            c.className = "counter";
            this._node.appendChild(c);
          },
          _makeBuildList: function() {
            this._buildList = [];
            if (disableBuilds) { return; }
            if (this._node) {
              this._buildList = query("[data-build] > *", this._node);
            }
            this._buildList.forEach(function(el) {
              addClass(el, "to-build");
            });
          },
          _runAutos: function() {
            if (this._currentState != "current") {
              return;
            }
            // find the next auto, slice it out of the list, and run it
            var idx = -1;
            this._buildList.some(function(n, i) {
              if (n.hasAttribute("data-auto")) {
                idx = i;
                return true;
              }
              return false;
            });
            if (idx >= 0) {
              var elem = this._buildList.splice(idx, 1)[0];
              var transitionEnd = isWK ? "webkitTransitionEnd" : (isFF ? "mozTransitionEnd" : "oTransitionEnd");
              var _t = this;
              if (canTransition()) {
                var l = function(evt) {
                  elem.parentNode.removeEventListener(transitionEnd, l, false);
                  _t._runAutos();
                };
                elem.parentNode.addEventListener(transitionEnd, l, false);
                removeClass(elem, "to-build");
              } else {
                setTimeout(function() {
                  removeClass(elem, "to-build");
                  _t._runAutos();
                }, 400);
              }
            }
          },
          buildNext: function() {
            if (!this._buildList.length) {
              return false;
            }
            removeClass(this._buildList.shift(), "to-build");
            return true;
          },
        };

        //
        // SlideShow class
        //
        var SlideShow = function(slides) {
          this._slides = (slides||[]).map(function(el, idx) {
            return new Slide(el, idx);
          });

          var h = window.location.hash;
          try {
            this.current = parseInt(h.split('#slide')[1], 10);
          }catch (e) { /* squeltch */ }
          this.current = isNaN(this.current) ? 1 : this.current;
          var _t = this;
          doc.addEventListener('keydown',
              function(e) { _t.handleKeys(e); }, false);
          doc.addEventListener('mousewheel',
              function(e) { _t.handleWheel(e); }, false);
          doc.addEventListener('DOMMouseScroll',
              function(e) { _t.handleWheel(e); }, false);
          doc.addEventListener('touchstart',
              function(e) { _t.handleTouchStart(e); }, false);
          doc.addEventListener('touchend',
              function(e) { _t.handleTouchEnd(e); }, false);
          window.addEventListener('popstate',
              function(e) { _t.go(e.state); }, false);
          this._update();
        };

        SlideShow.prototype = {
          _slides: [],
          _update: function(dontPush) {
            if (history.pushState) {
              if (!dontPush) {
                history.pushState(this.current, "Slide " + this.current, "#slide" + this.current);
              }
            } else {
              window.location.hash = "slide" + this.current;
            }
            for (var x = this.current-1; x < this.current+7; x++) {
              if (this._slides[x-4]) {
                this._slides[x-4].setState(Math.max(0, x-this.current));
              }
            }
          },

          current: 0,
          next: function() {
            if (!this._slides[this.current-1].buildNext()) {
              this.current = Math.min(this.current+1, this._slides.length);
              this._update();
            }
          },
          prev: function() {
            this.current = Math.max(this.current-1, 1);
            this._update();
          },
          go: function(num) {
            if (history.pushState && this.current != num) {
              history.replaceState(this.current, "Slide " + this.current, "#slide" + this.current);
            }
            this.current = num;
            this._update(true);
          },

          _notesOn: false,
          showNotes: function() {
            var isOn = this._notesOn = !this._notesOn;
            query(".notes").forEach(function(el) {
              el.style.display = (notesOn) ? "block" : "none";
            });
          },
          switch3D: function() {
            toggleClass(document.body, "three-d");
          },
          handleWheel: function(e) {
            var delta = 0;
            if (e.wheelDelta) {
              delta = e.wheelDelta/120;
              if (isOpera) {
                delta = -delta;
              }
            } else if (e.detail) {
              delta = -e.detail/3;
            }

            if (delta > 0 ) {
              this.prev();
              return;
            }
            if (delta < 0 ) {
              this.next();
              return;
            }
          },
          handleKeys: function(e) {
            switch (e.keyCode) {
              case 37: // left arrow
                this.prev(); break;
              case 39: // right arrow
              case 32: // space
                this.next(); break;
              case 50: // 2
                this.showNotes(); break;
              case 51: // 3
                this.switch3D(); break;
            }
          },
          _touchStartX: 0,
          handleTouchStart: function(e) {
            this._touchStartX = e.touches[0].pageX;
          },
          handleTouchEnd: function(e) {
            var delta = this._touchStartX - e.changedTouches[0].pageX;
            var SWIPE_SIZE = 150;
            if (delta > SWIPE_SIZE) {
              this.next();
            } else if (delta< -SWIPE_SIZE) {
              this.prev();
            }
          },
        };

        // Initialize
        var slideshow = new SlideShow(query(".slide"));
      })();
    </script>

    <!--[if IE]>
    <script
      src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
    </script>
		<script>CFInstall.check({ mode: "overlay" });</script>
    <![endif]-->
</body>
</html>
	<!DOCTYPE html>

	<!--
	Copyright 2010 Google Inc.
	All rights reserved.
	Original slides:
	Marcin Wichary
	Modifications:
	Ernest Delgado
	Alex Russell
	Annie Sullivan
	Andy Martone

	Extracted from http://en.oreilly.com/velocity2010/public/schedule/detail/14334
	-->
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="chrome=1">

	<title>Velocity 2010: Forcing Gzip Compression</title>

	<style>
	.notes { display: none; }
	.stroke {
	-webkit-text-stroke-color: red;
	-webkit-text-stroke-width: 1px;
	-moz-text-stroke-color: red;
	-moz-text-stroke-width: 1px;
	}

	body {
	font: 21px Arial, Helvetica, "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	background: #090909;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px; top: 0px;
	}

	.presentation {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	display: block;
	overflow: hidden;
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(black));
	background: -moz-linear-gradient(top, #444, black);
	}

	.slides {
	width: 100%;
	height: 100%;
	overflow: hidden;
	left: 0;
	top: 0;
	position: absolute;
	display: block;
	-webkit-transition: -webkit-transform 0.5s ease-in-out;
	-moz-transition: -moz-transform 0.5s ease-in-out;
	-o-transition: -o-transform 0.5s ease-in-out;
	}

	.slide {
	display: none;
	position: absolute;
	overflow: hidden;
	width: 900px;
	height: 700px;
	left: 50%;
	top: 50%;
	margin-top: -350px;
	border-radius: 10px;
	-moz-border-radius: 10px;

	opacity: 0.7;

	-webkit-transform: scale(0.9) translateZ(0);
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9);

	-webkit-transition-property: margin, -webkit-transform, opacity;
	-webkit-transition-duration: 0.4s, 0.4s, 0.4s;
	-webkit-transition-timing-function: ease-in-out;

	-moz-transition-property: margin, -moz-transform, opacity;
	-moz-transition-duration: 0.4s, 0.4s, 0.4s;
	-moz-transition-timing-function: ease-in-out;

	-o-transition-property: margin, -moz-transform, opacity;
	-o-transition-duration: 0.4s, 0.4s, 0.4s;
	-o-transition-timing-function: ease-in-out;

	/* NOTE(slightlyoff): simpler animations for slower boxes */
	/*
	-webkit-transition: margin 0.3s ease-in-out;
	-moz-transition: margin 0.3s ease-in-out;
	-o-transition: margin 0.3s ease-in-out;
	*/
	}

	.slide p,
	.slide div,
	.slide code {
	font-size: 35px;
	margin: 0.3em 0;
	line-height: 1.2em;
	}

	button {
	font-size: 20px;
	}

	.summary {
	font-size: 30px;
	}

	section > ul,
	section > ol,
	.bullets {
	font-size: 40px;
	}

	/*
	.slide.distant-past {
	margin-left: -3400px;
	}
	*/

	.slide.far-past {
	display: block;
	margin-left: -2400px;
	}

	.slide.past {
	display: block;
	margin-left: -1400px;
	}

	.slide.current {
	display: block;
	margin-left: -450px;

	-webkit-transform: scale(1.0);
	-moz-transform: scale(1.0);
	-o-transform: scale(1.0);
	opacity: 1.0;
	}

	.slide.future {
	display: block;
	margin-left: 500px;
	}

	.slide.far-future {
	display: block;
	margin-left: 1500px;
	}

	/*
	.slide.distant-future {
	margin-left: 2500px;
	}
	*/

	/* Content */

	[data-build] > * {
	-webkit-transition: opacity 0.5s ease-in-out 0.2s;
	-moz-transition: opacity 0.5s ease-in-out 0.2s;
	-o-transition: opacity 0.5s ease-in-out 0.2s;
	}

	[data-build] > *.to-build {
	opacity: 0;
	}

	header {
	font-family: Arial, Helvetica, 'Junction';
	font-weight: normal;
	font-size: 50px;
	letter-spacing: -.05em;
	color: #3c3c3c;
	text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
	position: absolute;
	left: 40px;
	top: 85px;
	margin: 0;
	padding: 0;
	}

	h1 {
	color: #3c3c3c;
	display: block;
	font-size: 100%;
	font-weight: normal;
	padding: 0;
	margin: 0;
	height: 1.2em;
	line-height: 1.2em;
	}

	h2 {
	font-weight: normal;
	line-height: 1.3em;
	color: #999999;
	font-size: 30px;
	margin-left: 20px;
	margin-top: 50px;
	padding: 0;
	margin: 15px 0 5px 0;
	}

	h2:first-child {
	margin-top: 0;
	padding: 0;
	margin: 15px 0 5px 0;
	}

	h3 {
	font-size: 0.4em;
	font-weight: normal;
	line-height: 1.2em;
	margin: 15px 0 5px 0;
	}

	section {
	font-family: Arial, Helvetica, 'Junction';
	font-size: 50px;
	color: #999999;
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 150px;
	display: block;
	overflow: hidden;
	}

	section > pre {
	color: #3f3f3f;
	}

	a {
	color: inherit;
	display: inline-block;
	text-decoration: none;
	line-height: 110%;
	border-bottom: 2px solid #3f3f3f;
	}

	#wmap a {
	line-height: 100%;
	border-bottom: none;
	}

	section.left {
	float: left;
	width: 390px;
	}

	section.small {
	font-size: 24px;
	}

	section.small ul {
	margin: 0 0 0 15px;
	padding: 0;
	}

	section.small li {
	padding-bottom: 0;
	}

	section.center {
	line-height: 180%;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	height: 700px;
	width: 900px;
	}

	section.centerLeft {
	padding-left: 1em;
	padding-right: 1em;
	line-height: 180%;
	text-align: left;
	display: table-cell;
	vertical-align: middle;
	height: 700px;
	width: 900px;
	}

	/* Assumes we're inside a .segue */
	section.bottomLeft {
	line-height: 180%;
	padding-bottom: 24%;
	}

	pre {
	text-align: left;
	font-size: 24px;
	font-family: Monaco, Courier;
	color: #333333;
	padding-bottom: 10px;

	padding: 10px 20px;
	background: rgba(255, 0, 0, 0.05);
	background: #edf3fb;

	border-radius: 8px;
	-moz-border-radius: 8px;
	border: 1px solid rgba(255, 0, 0, 0.2);
	}

	.two-column {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	-o-column-count: 2;
	}

	.three-column {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	-o-column-count: 3;
	}

	.three-column h1.break {
	padding: 30px;
	-webkit-column-break-before: always;
	-moz-column-break-before: always;
	-o-column-break-before: always;
	}

	pre select {
	font-size: 16px;
	font-family: Monaco, Courier;
	border: 1px solid #c61800;
	}

	input {
	font-size: 16px;
	font-family: Arial, Helvetica;
	padding: 3px;
	}

	input[type="range"] {
	width: 100%;
	}

	button {
	font-family: Verdana;
	}

	button.large {
	font-size: 32px;
	}

	pre b {
	font-weight: normal;
	color: #c61800;
	text-shadow: #c61800 0 0 1px;
	/letter-spacing: -1px;/
	}

	pre em {
	font-weight: normal;
	font-style: normal;
	color: #18a600;
	/* text-shadow: #18a600 0 0 1px; */
	}

	pre input[type="range"] {
	height: 6px;
	cursor: pointer;
	width: auto;
	}

	example {
	font-size: 16px;
	display: block;
	padding: 10px 20px;
	color: #090909;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 8px;
	-moz-border-radius: 8px;
	margin-bottom: 10px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	}

	video {
	border-radius: 8px;
	-moz-border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	}

	li {
	line-height: 1.5em;
	}

	.bullets,
	section > ul {
	margin: 0;
	-webkit-padding-start: 1em;
	list-style: disc;
	list-style-position: outside;
	}

	section > ul > li > ul,
	section > ol > li > ul {
	margin: 0;
	-webkit-padding-start: 1em;
	list-style: circle;
	list-style-position: outside;
	}

	.numbers,
	section > ol,
	section > ol > li > ol,
	section > ul > li > ol {
	margin: 0;
	-webkit-padding-start: 1.5em;
	list-style: decimal;
	list-style-position: outside;
	}

	section > ol > li > ol {
	-webkit-padding-start: 1em;
	font-size: 0.8em;
	list-style-position: outside;
	list-style: lower-alpha;
	}

	info {
	display: block;
	font-size: 50%;
	text-align: center;
	}

	.quote em {
	color: #215594;
	}

	/* Theme Colors:

	lighter body text: #999999
	darker body text: #777777
	headline (dark): #3c3c3c
	headline (light): #999999
	i/o logo color: #215594
	color bars colors (in order):

	#2868b0
	#ebab8c
	#cb263e
	#ae1e36
	#f7d157
	#e6b324
	#4eb6e7
	#2868b0
	#21557f
	#2e6e4a
	#44a14d
	#bbd68e

	*/

	/* Slide Sub-Types and Configuration */

	.slide {
	background: url(files/velocity_speaker.004.png) 0px top no-repeat,
	white;
	background-size: contain, 15%;
	-moz-background-size: contain, 15%;
	}

	.slide .counter {
	color: #999999;
	position: absolute;
	left: 50px;
	bottom: 50px;
	display: block;
	font-size: 12px;
	}

	.slide.title,
	.slide.segue,
	.slide.mainTitle {
	text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
	}

	.slide.mainTitle h1,
	.slide.mainTitle h2 {
	margin-left: 260px;
	}

	.slide.mainTitle > .counter {
	display: none;
	}

	.slide.title {
	background: url(files/velocity_speaker.004.png) 0px top no-repeat,
	white;
	background-size: contain, 15%;
	-moz-background-size: contain, 15%;
	}

	.slide.title h1,
	.slide.mainTitle h1 {
	font-weight: bold;
	font-size: 40px;
	}

	.slide.title h2 {
	font-weight: normal;
	font-size: 27px;
	margin: 0;
	}

	.slide.current.segue,
	.slide.future.segue,
	.slide.far-future.segue,
	.slide.past.segue,
	.slide.far-past.segue {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-box-align: stretch;

	display: -moz-box;
	-moz-box-orient: vertical;
	-moz-box-align: stretch;

	-webkit-box-pack: end;
	-moz-box-pack: end;
	box-pack: end;

	background: url(files/bottom_bar.png) 0px 90% no-repeat,
	url(files/velocity_logo_small.gif) 100% 100% no-repeat,
	white;
	background-size: contain, 15%;
	-moz-background-size: contain, 15%;
	}

	div.slide.segue h1,
	div.slide.segue h2 {
	color: #999999;
	}

	div.slide.mainTitle {
	background: url(files/velocity_speaker.003.png) left top no-repeat,
	white;
	background-size: contain, 100%;
	-moz-background-size: contain, 100%;
	}

	div.slide.title sup {
	vertical-align: top;
	}
	</style>
	</head>
	<body>
	<div class="presentation">
	<div class="slides">
	<div class="slide mainTitle">
	<section class="centerLeft">
	<hgroup data-build>
	<h1 data-auto>Slide Title</h1>
	<h2 data-auto style="margin-top: 3em;">
	Prajwal Tuladhar praj@infynyxx.com<br>
	June 23, 2010
	</h2>
	</hgroup>
	</section>
	</div>

	<div class="slide title">
	<section class="centerLeft">
	<hgroup data-build>
	<h1 data-auto>Unix is great!</h1>
	<h2 data-build>List 1</h2>
	<h2 data-build>List 2</h2>
	<h2 data-build>List 3</h2>
	</hgroup>
	</section>
	</div>
	<!-- slides -->

	</div> <!-- presentation -->

	<script>
	(function() {
	// bail in IE
	var doc = document;
	if (doc.all) { return; }

	var disableBuilds = false; //true;

	var ctr = 0;
	var spaces = /\s+/, a1 = [""];

	var toArray = function(list) {
	return Array.prototype.slice.call(list\|\|[], 0);
	};

	var byId = function(id) {
	if (typeof id == "string") { return doc.getElementById(id); }
	return id;
	};

	var query = function(query, root) {
	if (!query) { return []; }
	if (typeof query != "string") { return toArray(query); }
	if (typeof root == "string"){
	root = byId(root);
	if(!root){ return []; }
	}

	root = root\|\|document;
	var rootIsDoc = (root.nodeType == 9);
	var doc = rootIsDoc ? root : (root.ownerDocument\|\|document);

	// rewrite the query to be ID rooted
	if (!rootIsDoc \|\| (">~+".indexOf(query.charAt(0)) >= 0)) {
	root.id = root.id\|\|("qUnique"+(ctr++));
	query = "#"+root.id+" "+query;
	}
	// don't choke on something like ".yada.yada >"
	if (">~+".indexOf(query.slice(-1)) >= 0) { query += " *"; }

	return toArray(doc.querySelectorAll(query));
	};

	var strToArray = function(s) {
	if (typeof s == "string" \|\| s instanceof String) {
	if (s.indexOf(" ") < 0) {
	a1[0] = s;
	return a1;
	} else {
	return s.split(spaces);
	}
	}
	return s;
	};

	var trim = function(str) {
	return str.replace(/^\s\s/, '').replace(/\s\s$/, '');
	};

	var addClass = function(node, classStr) {
	classStr = strToArray(classStr);
	var cls = " " + node.className + " ";
	for (var i = 0, len = classStr.length, c; i < len; ++i) {
	c = classStr[i];
	if (c && cls.indexOf(" " + c + " ") < 0) {
	cls += c + " ";
	}
	}
	node.className = trim(cls);
	};

	var removeClass = function(node, classStr) {
	var cls;
	if (classStr !== undefined) {
	classStr = strToArray(classStr);
	cls = " " + node.className + " ";
	for (var i = 0, len = classStr.length; i < len; ++i) {
	cls = cls.replace(" " + classStr[i] + " ", " ");
	}
	cls = trim(cls);
	} else {
	cls = "";
	}
	if (node.className != cls) {
	node.className = cls;
	}
	};

	var toggleClass = function(node, classStr) {
	var cls = " " + node.className + " ";
	if (cls.indexOf(" " + trim(classStr) + " ") >= 0) {
	removeClass(node, classStr);
	} else {
	addClass(node, classStr);
	}
	};

	var ua = navigator.userAgent;
	var isFF = parseFloat(ua.split("Firefox/")[1]) \|\| undefined;
	var isWK = parseFloat(ua.split("WebKit/")[1]) \|\| undefined;
	var isOpera = parseFloat(ua.split("Opera/")[1]) \|\| undefined;

	var canTransition = (function() {
	var ver = parseFloat(ua.split("Version/")[1]) \|\| undefined;
	// test to determine if this browser can handle CSS transitions.
	var cachedCanTransition =
	(isWK \|\| (isFF && isFF > 3.6 ) \|\| (isOpera && ver >= 10.5));
	return function() { return cachedCanTransition; }
	})();

	//
	// Slide class
	//
	var Slide = function(node, idx) {
	this._node = node;
	if (idx >= 0) {
	this._count = idx+1;
	}
	if (this._node) {
	addClass(this._node, "slide distant-future");
	}
	this._makeCounter();
	this._makeBuildList();
	};

	Slide.prototype = {
	_node: null,
	_count: 0,
	_buildList: [],
	_visited: false,
	_currentState: "",
	_states: [ "distant-past", "far-past",
	"past", "current", "future",
	"far-future", "distant-future" ],
	setState: function(state) {
	if (typeof state != "string") {
	state = this._states[state];
	}
	if (state == "current" && !this._visited) {
	this._visited = true;
	this._makeBuildList();
	}
	removeClass(this._node, this._states);
	addClass(this._node, state);
	this._currentState = state;

	// delay first auto run. Really wish this were in CSS.
	/*
	this._runAutos();
	*/
	var _t = this;
	setTimeout(function(){ _t._runAutos(); } , 400);
	},
	_makeCounter: function() {
	if(!this._count \|\| !this._node) { return; }
	var c = doc.createElement("span");
	c.innerHTML = this._count;
	c.className = "counter";
	this._node.appendChild(c);
	},
	_makeBuildList: function() {
	this._buildList = [];
	if (disableBuilds) { return; }
	if (this._node) {
	this._buildList = query("[data-build] > *", this._node);
	}
	this._buildList.forEach(function(el) {
	addClass(el, "to-build");
	});
	},
	_runAutos: function() {
	if (this._currentState != "current") {
	return;
	}
	// find the next auto, slice it out of the list, and run it
	var idx = -1;
	this._buildList.some(function(n, i) {
	if (n.hasAttribute("data-auto")) {
	idx = i;
	return true;
	}
	return false;
	});
	if (idx >= 0) {
	var elem = this._buildList.splice(idx, 1)[0];
	var transitionEnd = isWK ? "webkitTransitionEnd" : (isFF ? "mozTransitionEnd" : "oTransitionEnd");
	var _t = this;
	if (canTransition()) {
	var l = function(evt) {
	elem.parentNode.removeEventListener(transitionEnd, l, false);
	_t._runAutos();
	};
	elem.parentNode.addEventListener(transitionEnd, l, false);
	removeClass(elem, "to-build");
	} else {
	setTimeout(function() {
	removeClass(elem, "to-build");
	_t._runAutos();
	}, 400);
	}
	}
	},
	buildNext: function() {
	if (!this._buildList.length) {
	return false;
	}
	removeClass(this._buildList.shift(), "to-build");
	return true;
	},
	};

	//
	// SlideShow class
	//
	var SlideShow = function(slides) {
	this._slides = (slides\|\|[]).map(function(el, idx) {
	return new Slide(el, idx);
	});

	var h = window.location.hash;
	try {
	this.current = parseInt(h.split('#slide')[1], 10);
	}catch (e) { /* squeltch */ }
	this.current = isNaN(this.current) ? 1 : this.current;
	var _t = this;
	doc.addEventListener('keydown',
	function(e) { _t.handleKeys(e); }, false);
	doc.addEventListener('mousewheel',
	function(e) { _t.handleWheel(e); }, false);
	doc.addEventListener('DOMMouseScroll',
	function(e) { _t.handleWheel(e); }, false);
	doc.addEventListener('touchstart',
	function(e) { _t.handleTouchStart(e); }, false);
	doc.addEventListener('touchend',
	function(e) { _t.handleTouchEnd(e); }, false);
	window.addEventListener('popstate',
	function(e) { _t.go(e.state); }, false);
	this._update();
	};

	SlideShow.prototype = {
	_slides: [],
	_update: function(dontPush) {
	if (history.pushState) {
	if (!dontPush) {
	history.pushState(this.current, "Slide " + this.current, "#slide" + this.current);
	}
	} else {
	window.location.hash = "slide" + this.current;
	}
	for (var x = this.current-1; x < this.current+7; x++) {
	if (this._slides[x-4]) {
	this._slides[x-4].setState(Math.max(0, x-this.current));
	}
	}
	},

	current: 0,
	next: function() {
	if (!this._slides[this.current-1].buildNext()) {
	this.current = Math.min(this.current+1, this._slides.length);
	this._update();
	}
	},
	prev: function() {
	this.current = Math.max(this.current-1, 1);
	this._update();
	},
	go: function(num) {
	if (history.pushState && this.current != num) {
	history.replaceState(this.current, "Slide " + this.current, "#slide" + this.current);
	}
	this.current = num;
	this._update(true);
	},

	_notesOn: false,
	showNotes: function() {
	var isOn = this._notesOn = !this._notesOn;
	query(".notes").forEach(function(el) {
	el.style.display = (notesOn) ? "block" : "none";
	});
	},
	switch3D: function() {
	toggleClass(document.body, "three-d");
	},
	handleWheel: function(e) {
	var delta = 0;
	if (e.wheelDelta) {
	delta = e.wheelDelta/120;
	if (isOpera) {
	delta = -delta;
	}
	} else if (e.detail) {
	delta = -e.detail/3;
	}

	if (delta > 0 ) {
	this.prev();
	return;
	}
	if (delta < 0 ) {
	this.next();
	return;
	}
	},
	handleKeys: function(e) {
	switch (e.keyCode) {
	case 37: // left arrow
	this.prev(); break;
	case 39: // right arrow
	case 32: // space
	this.next(); break;
	case 50: // 2
	this.showNotes(); break;
	case 51: // 3
	this.switch3D(); break;
	}
	},
	_touchStartX: 0,
	handleTouchStart: function(e) {
	this._touchStartX = e.touches[0].pageX;
	},
	handleTouchEnd: function(e) {
	var delta = this._touchStartX - e.changedTouches[0].pageX;
	var SWIPE_SIZE = 150;
	if (delta > SWIPE_SIZE) {
	this.next();
	} else if (delta< -SWIPE_SIZE) {
	this.prev();
	}
	},
	};

	// Initialize
	var slideshow = new SlideShow(query(".slide"));
	})();
	</script>

	<!--[if IE]>
	<script
	src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
	</script>
	<script>CFInstall.check({ mode: "overlay" });</script>
	<![endif]-->
	</body>
	</html>