diff --git a/canvas-grad.html b/canvas-grad.html
index e5da14b..d812f37 100644
--- a/canvas-grad.html
+++ b/canvas-grad.html
@@ -1,77 +1,70 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-<meta charset=utf-8 />
-<title>Canvas Gradient</title>
-<style>
-body {
-  background: #000;
-}
-canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-</style>
+  <meta charset=utf-8 />
+  <title>Canvas Gradient</title>
+  <link rel="stylesheet" href="css/canvas-grad.css">
 </head>
+
 <body>
-<canvas height="600" width="600"></canvas>
-<script>
-var canvas = document.getElementsByTagName('canvas')[0],
-    ctx = null,
-    grad = null,
-    body = document.getElementsByTagName('body')[0],
-    color = 255;
-    
-if (canvas.getContext('2d')) {
-  ctx = canvas.getContext('2d');
-  ctx.clearRect(0, 0, 600, 600);
-  ctx.save();
-  // Create radial gradient
-  grad = ctx.createRadialGradient(0,0,0,0,0,600); 
-  grad.addColorStop(0, '#000');
-  grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
+  <canvas height="600" width="600"></canvas>
+  <script>
+    var canvas = document.getElementsByTagName('canvas')[0],
+      ctx = null,
+      grad = null,
+      body = document.getElementsByTagName('body')[0],
+      color = 255;
+
+    if (canvas.getContext('2d')) {
+      ctx = canvas.getContext('2d');
+      ctx.clearRect(0, 0, 600, 600);
+      ctx.save();
+      // Create radial gradient
+      grad = ctx.createRadialGradient(0, 0, 0, 0, 0, 600);
+      grad.addColorStop(0, '#000');
+      grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
 
-  // assign gradients to fill
-  ctx.fillStyle = grad;
+      // assign gradients to fill
+      ctx.fillStyle = grad;
 
-  // draw 600x600 fill
-  ctx.fillRect(0,0,600,600);
-  ctx.save();
-  
-  body.onmousemove = function (event) {
-    var width = window.innerWidth, 
-        height = window.innerHeight, 
-        x = event.clientX, 
-        y = event.clientY,
-        rx = 600 * x / width,
-        ry = 600 * y / height;
-        
-    var xc = ~~(256 * x / width);
-    var yc = ~~(256 * y / height);
+      // draw 600x600 fill
+      ctx.fillRect(0, 0, 600, 600);
+      ctx.save();
 
-    grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600); 
-    grad.addColorStop(0, '#000');
-    grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
-    // ctx.restore();
-    ctx.fillStyle = grad;
-    ctx.fillRect(0,0,600,600);
-    // ctx.save();
-  };
-}
-</script>
-<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
-<script>
-var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-</script>
-<script>
-try {
-var pageTracker = _gat._getTracker("UA-1656750-18");
-pageTracker._trackPageview();
-} catch(err) {}</script>
+      body.onmousemove = function (event) {
+        var width = window.innerWidth,
+          height = window.innerHeight,
+          x = event.clientX,
+          y = event.clientY,
+          rx = 600 * x / width,
+          ry = 600 * y / height;
+
+        var xc = ~~(256 * x / width);
+        var yc = ~~(256 * y / height);
+
+        grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
+        grad.addColorStop(0, '#000');
+        grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
+        // ctx.restore();
+        ctx.fillStyle = grad;
+        ctx.fillRect(0, 0, 600, 600);
+        // ctx.save();
+      };
+    }
+  </script>
+  <a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;"
+      src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+  <script>
+    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+  </script>
+  <script>
+    try {
+      var pageTracker = _gat._getTracker("UA-1656750-18");
+      pageTracker._trackPageview();
+    } catch (err) { }</script>
 
 </body>
+
 </html>
\ No newline at end of file
diff --git a/css/canvas-grad.css b/css/canvas-grad.css
new file mode 100644
index 0000000..e1dd041
--- /dev/null
+++ b/css/canvas-grad.css
@@ -0,0 +1,11 @@
+body {
+    background: #000;
+  }
+
+  canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/css/drag-orig.css b/css/drag-orig.css
new file mode 100644
index 0000000..d9bf8b6
--- /dev/null
+++ b/css/drag-orig.css
@@ -0,0 +1,44 @@
+#boxA,
+#boxB,
+#boxC {
+    float: left;
+    width: 200px;
+    height: 200px;
+    padding: 10px;
+    margin: 10px;
+}
+
+#boxA {
+    background-color: blue;
+}
+
+#boxB {
+    background-color: green;
+}
+
+#boxC {
+    background-color: yellow;
+}
+
+#drag,
+#drag2,
+#drag3 {
+    width: 50px;
+    height: 50px;
+    padding: 5px;
+    margin: 5px;
+    -moz-user-select: none;
+}
+
+#drag {
+    background-color: red;
+}
+
+#drag2 {
+    background-color: orange;
+}
+
+#drag3 {
+    background-color: purple;
+    border: 3px brown solid;
+}
\ No newline at end of file
diff --git a/css/drag2.css b/css/drag2.css
new file mode 100644
index 0000000..4326228
--- /dev/null
+++ b/css/drag2.css
@@ -0,0 +1,66 @@
+* {
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    margin: 50px;
+    font-family: helvetica, arial;
+  }
+
+  li {
+    list-style: none;
+    /*  padding: 10px;*/
+  }
+
+  li a {
+    text-decoration: none;
+    color: #000;
+    margin: 10px;
+    width: 150px;
+    border: 3px dashed #999;
+    background: #eee;
+    padding: 10px;
+    cursor: pointer;
+    -moz-user-select: none;
+    /*  -webkit-user-drag: element;*/
+    -khtml-user-drag: element;
+    display: block;
+  }
+
+  *:-khtml-drag {
+    background-color: rgba(238, 238, 238, 0.5);
+  }
+
+  a:hover:after {
+    content: ' (drag me)';
+  }
+
+  li.over {
+    border-color: #333;
+    background: #ccc;
+  }
+
+  #bin {
+    background: url(/images/bin.jpg) top right no-repeat;
+    height: 250px;
+    width: 166px;
+    float: right;
+    border: 5px solid #000;
+    position: relative;
+  }
+
+  #bin.over {
+    background: url(/images/bin.jpg) top left no-repeat;
+  }
+
+  #bin p {
+    font-weight: bold;
+    text-align: center;
+    position: absolute;
+    bottom: 20px;
+    width: 166px;
+    font-size: 32px;
+    color: #fff;
+    text-shadow: #000 2px 2px 2px;
+  }
\ No newline at end of file
diff --git a/css/html5demos.css b/css/html5demos.css
index 907e64c..1384900 100644
--- a/css/html5demos.css
+++ b/css/html5demos.css
@@ -29,13 +29,11 @@ h2 {
   font-style: italic;
 }
 
-header,
-article > *,
-footer > * {
+header, article>*, footer>* {
   margin: 20px;
 }
 
-footer > * {
+footer>* {
   margin: 20px;
   color: #999;
 }
@@ -66,6 +64,7 @@ footer > * {
   content: '...quickly';
 }
 */
+
 [contenteditable]:hover:not(:focus) {
   outline: 1px dotted #ccc;
 }
@@ -134,7 +133,7 @@ li {
 
 #ffad .definition {
   font-style: italic;
-  font-family: Georgia,Palatino,Palatino Linotype,Times,Times New Roman,serif;
+  font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
 }
 
 #ffad .url {
@@ -157,7 +156,7 @@ body.view-source {
   padding: 20px;
 }
 
-body.view-source > * {
+body.view-source>* {
   display: none;
 }
 
@@ -189,7 +188,6 @@ body.view-source #view-source {
   border-top: 1px solid #DCDCDC;
 }
 
-
 #demos .demo p {
   margin-top: 0;
   margin-bottom: 5px;
@@ -238,12 +236,12 @@ body.view-source #view-source {
 
 .support span.nightly {
   opacity: 0.5;
-  filter:alpha(opacity=50);
+  filter: alpha(opacity=50);
 }
 
 .support span.none {
   opacity: 0.1;
-  filter:alpha(opacity=10);
+  filter: alpha(opacity=10);
 }
 
 #demos .tags {
@@ -262,8 +260,7 @@ body.view-source #view-source {
   cursor: pointer;
 }
 
-.tags span:hover,
-.tags span.selected {
+.tags span:hover, .tags span.selected {
   border: 1px solid #75784C;
   background: #FF7;
   color: #333521;
@@ -278,7 +275,7 @@ body.view-source #view-source {
 }
 
 #html5badge {
-/*  display: none;*/
+  /*  display: none;*/
   margin-left: -30px;
   border: 0;
 }
@@ -302,24 +299,59 @@ body.view-source #view-source {
 }
 
 /** Pretty printing styles. Used with prettify.js. */
-pre { font-size: 14px; }
-.str { color: #080; }
-.kwd { color: #008; }
-.com { color: #800; }
-.typ { color: #606; }
-.lit { color: #066; }
-.pun { color: #660; }
-.pln { color: #000; }
-.tag { color: #008; }
-.atn { color: #606; }
-.atv { color: #080; }
-.dec { color: #606; }
+
+pre {
+  font-size: 14px;
+}
+
+.str {
+  color: #080;
+}
+
+.kwd {
+  color: #008;
+}
+
+.com {
+  color: #800;
+}
+
+.typ {
+  color: #606;
+}
+
+.lit {
+  color: #066;
+}
+
+.pun {
+  color: #660;
+}
+
+.pln {
+  color: #000;
+}
+
+.tag {
+  color: #008;
+}
+
+.atn {
+  color: #606;
+}
+
+.atv {
+  color: #080;
+}
+
+.dec {
+  color: #606;
+}
 
 #forkme {
   display: none;
 }
 
-
 @media all and (min-width: 768px) {
   body {
     margin-top: 40px;
@@ -327,6 +359,7 @@ pre { font-size: 14px; }
 }
 
 /* Carbon Ads */
+
 #carbonads {
   position: fixed;
   display: block;
@@ -385,7 +418,7 @@ pre { font-size: 14px; }
   #carbonads span {
     position: relative;
   }
-  #carbonads > span {
+  #carbonads>span {
     max-width: none;
   }
   .carbon-img {
@@ -404,4 +437,4 @@ pre { font-size: 14px; }
     bottom: 0;
     display: block;
   }
-}
+}
\ No newline at end of file
diff --git a/css/postmessage-target.css b/css/postmessage-target.css
new file mode 100644
index 0000000..bf19349
--- /dev/null
+++ b/css/postmessage-target.css
@@ -0,0 +1,5 @@
+body {
+    font: normal 16px/20px Helvetica, sans-serif;
+    margin: 0;
+    padding: 20px;
+  }
\ No newline at end of file
diff --git a/css/video-canvas.css b/css/video-canvas.css
new file mode 100644
index 0000000..0dbc915
--- /dev/null
+++ b/css/video-canvas.css
@@ -0,0 +1,17 @@
+* {
+    margin: 0;
+  }
+
+  body {
+    font-family: helvetica;
+    padding: 10px;
+  }
+
+  input {
+    width: 50px;
+  }
+
+  /*video, canvas { display: block; }*/
+  p {
+    margin-top: 20px;
+  }
\ No newline at end of file
diff --git a/drag-orig.html b/drag-orig.html
index 3db8fc3..37c3a82 100644
--- a/drag-orig.html
+++ b/drag-orig.html
@@ -1,116 +1,93 @@
 <!DOCTYPE HTML>
 <html>
+
 <head>
-<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
-<title>HTML5 Drag and drop demonstration</title>
-<style type="text/css">
-#boxA, #boxB, #boxC { 
-  float:left; width:200px; height:200px; padding:10px; margin:10px;
-}
-
-#boxA { background-color: blue; }
-#boxB { background-color: green; }
-#boxC { background-color: yellow; }
-
-#drag, #drag2, #drag3 {
-  width:50px; height:50px; padding:5px; margin:5px;
-  -moz-user-select:none;
-}
-#drag { background-color: red;}
-#drag2 { background-color: orange;}
-#drag3 { background-color: purple; border:3px brown solid;}
-
-</style>
-<script type="text/javascript">
-function dragStart(ev) {
-    ev.dataTransfer.effectAllowed='move';
-    //ev.dataTransfer.dropEffect='move';
-    ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
-    ev.dataTransfer.setDragImage(ev.target,0,0);
-    return true;
-}
-
-function dragEnd(ev) {
-    ev.dataTransfer.clearData("Text");
-    return true
-}
-
-
-function dragEnter(ev) {
-    var idelt = ev.dataTransfer.getData("Text");
-    return true;
-}
-
-function dragOver(ev) {
-    var idelt = ev.dataTransfer.getData("Text");
-    var id = ev.target.getAttribute('id');
-    
-    return false;
-    
-    if( (id =='boxB' || id =='boxA') && (idelt == 'drag' || idelt=='drag2'))
-        return false;
-    else if( id =='boxC' && idelt == 'drag3')
-        return false;
-    else
-        return true;
-}
-
-function dragDrop(ev) {
-  console.log('drop');
-    var idelt = ev.dataTransfer.getData("Text");
-    ev.target.appendChild(document.getElementById(idelt));
-    ev.stopPropagation();
-    return false; // return false so the event will not be propagated to the browser
-}
-
-</script>
+    <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
+    <title>HTML5 Drag and drop demonstration</title>
+    <link rel="stylesheet" href="css/drag-orig.css">
+    <script type="text/javascript">
+        function dragStart(ev) {
+            ev.dataTransfer.effectAllowed = 'move';
+            //ev.dataTransfer.dropEffect='move';
+            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
+            ev.dataTransfer.setDragImage(ev.target, 0, 0);
+            return true;
+        }
+
+        function dragEnd(ev) {
+            ev.dataTransfer.clearData("Text");
+            return true
+        }
+
+
+        function dragEnter(ev) {
+            var idelt = ev.dataTransfer.getData("Text");
+            return true;
+        }
+
+        function dragOver(ev) {
+            var idelt = ev.dataTransfer.getData("Text");
+            var id = ev.target.getAttribute('id');
+
+            return false;
+
+            if ((id == 'boxB' || id == 'boxA') && (idelt == 'drag' || idelt == 'drag2'))
+                return false;
+            else if (id == 'boxC' && idelt == 'drag3')
+                return false;
+            else
+                return true;
+        }
+
+        function dragDrop(ev) {
+            console.log('drop');
+            var idelt = ev.dataTransfer.getData("Text");
+            ev.target.appendChild(document.getElementById(idelt));
+            ev.stopPropagation();
+            return false; // return false so the event will not be propagated to the browser
+        }
+
+    </script>
 </head>
+
 <body>
     <h1>Drag and drop demo in a HTML document, using the HTML5 drag and drop API</h1>
-    <div> The red box and the orange box can be dragged and dropped between 
-    the blue and the green boxes.
-    The purple box can be dragged and dropped only to the yellow box.
+    <div> The red box and the orange box can be dragged and dropped between
+        the blue and the green boxes.
+        The purple box can be dragged and dropped only to the yellow box.
     </div>
 
-    <div id="boxA"
-        ondragenter="return dragEnter(event)"
-        ondrop="return dragDrop(event)"
+    <div id="boxA" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)"
         ondragover="return dragOver(event)">
 
-      <div id="drag" draggable="true"
-            ondragstart="return dragStart(event)"
-            ondragend="return dragEnd(event)">drag me</div>
+        <div id="drag" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">drag me
+        </div>
 
-      <div id="drag2" draggable="true"
-            ondragstart="return dragStart(event)"
-            ondragend="return dragEnd(event)">drag me</div>
+        <div id="drag2" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">drag me
+        </div>
 
-      <div id="drag3" draggable="true"
-            ondragstart="return dragStart(event)"
-            ondragend="return dragEnd(event)">drag me</div>
+        <div id="drag3" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">drag me
+        </div>
 
     </div>
 
-    <div id="boxB"
-        ondragenter="return dragEnter(event)"
-        ondrop="return dragDrop(event)"
+    <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)"
         ondragover="return dragOver(event)">
     </div>
 
-    <div id="boxC"
-        ondragenter="return dragEnter(event)"
-        ondrop="return dragDrop(event)"
+    <div id="boxC" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)"
         ondragover="return dragOver(event)">
     </div>
     <div style="clear:both">Example created by <a href="http://ljouanneau.com/blog/">Laurent Jouanneau</a>.</div>
     <script>
-    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
     </script>
     <script>
-    try {
-    var pageTracker = _gat._getTracker("UA-1656750-18");
-    pageTracker._trackPageview();
-    } catch(err) {}</script>
+        try {
+            var pageTracker = _gat._getTracker("UA-1656750-18");
+            pageTracker._trackPageview();
+        } catch (err) { }</script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/drag2.html b/drag2.html
index 94a7784..c7cf48b 100644
--- a/drag2.html
+++ b/drag2.html
@@ -1,78 +1,12 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
-<title>HTML5 Drag and drop demonstration</title>
-<style type="text/css">
-* {
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  margin: 50px;
-  font-family: helvetica, arial;
-}
-
-li {
-  list-style: none;
-/*  padding: 10px;*/
-}
-
-li a {
-  text-decoration: none;
-  color: #000;
-  margin: 10px;
-  width: 150px;
-  border: 3px dashed #999;
-  background: #eee;
-  padding: 10px;
-  cursor: pointer;
-  -moz-user-select:none;
-/*  -webkit-user-drag: element;*/
-  -khtml-user-drag: element;
-  display: block;
-}
-
-*:-khtml-drag {
-  background-color: rgba(238,238,238, 0.5);
-}
-
-a:hover:after {
-  content: ' (drag me)';
-}
-
-li.over {
-  border-color: #333;
-  background: #ccc;
-}
-
-#bin {
-  background: url(/images/bin.jpg) top right no-repeat;
-  height: 250px;
-  width: 166px;
-  float: right;
-  border: 5px solid #000;
-  position: relative;
-}
-
-#bin.over {
-  background: url(/images/bin.jpg) top left no-repeat;
-}
-
-#bin p {
-  font-weight: bold;
-  text-align: center;
-  position: absolute;
-  bottom: 20px;
-  width: 166px;
-  font-size: 32px;
-  color: #fff;
-  text-shadow: #000 2px 2px 2px;
-}
-
-</style>
+  <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
+  <title>HTML5 Drag and drop demonstration</title>
+  <link rel="stylesheet" href="css/drag2.css">
 </head>
+
 <body>
   <div id="bin"></div>
   <ul>
@@ -85,74 +19,75 @@
   <script src="h5utils.js"></script>
   <script>
 
-  var eat = ['yum!', 'gulp', 'burp!', 'nom'];
-  var yum = document.createElement('p');
-  var msie = /*@cc_on!@*/0;
-  yum.style.opacity = 1;
+    var eat = ['yum!', 'gulp', 'burp!', 'nom'];
+    var yum = document.createElement('p');
+    var msie = /*@cc_on!@*/0;
+    yum.style.opacity = 1;
 
-  var links = document.querySelectorAll('li > a'), el = null;
-  for (var i = 0; i < links.length; i++) {
-    el = links[i];
+    var links = document.querySelectorAll('li > a'), el = null;
+    for (var i = 0; i < links.length; i++) {
+      el = links[i];
 
-    // even required? Spec says yes, browsers say no.
-    el.setAttribute('draggable', 'true');
+      // even required? Spec says yes, browsers say no.
+      el.setAttribute('draggable', 'true');
 
-    addEvent(el, 'dragstart', function (e) {
-      e.dataTransfer.setData('Text', this.id); // set *something* required otherwise doesn't work
-    });
-  }
+      addEvent(el, 'dragstart', function (e) {
+        e.dataTransfer.setData('Text', this.id); // set *something* required otherwise doesn't work
+      });
+    }
 
-  var bin = document.querySelector('#bin');
+    var bin = document.querySelector('#bin');
 
-  addEvent(bin, 'dragover', function (e) {
-    if (e.preventDefault) e.preventDefault(); // allows us to drop
-    this.className = 'over';
-    return false;
-  });
+    addEvent(bin, 'dragover', function (e) {
+      if (e.preventDefault) e.preventDefault(); // allows us to drop
+      this.className = 'over';
+      return false;
+    });
 
-  addEvent(bin, 'dragleave', function () {
-    this.className = '';
-  });
+    addEvent(bin, 'dragleave', function () {
+      this.className = '';
+    });
 
-  addEvent(bin, 'drop', function (e) {
-    if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???
+    addEvent(bin, 'drop', function (e) {
+      if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???
 
-    var el = document.getElementById(e.dataTransfer.getData('Text'));
+      var el = document.getElementById(e.dataTransfer.getData('Text'));
 
-    el.parentNode.removeChild(el);
+      el.parentNode.removeChild(el);
 
-    // stupid nom text + fade effect
-    bin.className = '';
-    yum.innerHTML = eat[parseInt(Math.random() * eat.length)];
+      // stupid nom text + fade effect
+      bin.className = '';
+      yum.innerHTML = eat[parseInt(Math.random() * eat.length)];
 
-    var y = yum.cloneNode(true);
-    bin.appendChild(y);
+      var y = yum.cloneNode(true);
+      bin.appendChild(y);
 
-    setTimeout(function () {
-      var t = setInterval(function () {
-        if (y.style.opacity <= 0) {
-          if (msie) { // don't bother with the animation
-            y.style.display = 'none';
+      setTimeout(function () {
+        var t = setInterval(function () {
+          if (y.style.opacity <= 0) {
+            if (msie) { // don't bother with the animation
+              y.style.display = 'none';
+            }
+            clearInterval(t);
+          } else {
+            y.style.opacity -= 0.1;
           }
-          clearInterval(t);
-        } else {
-          y.style.opacity -= 0.1;
-        }
-      }, 50);
-    }, 250);
+        }, 50);
+      }, 250);
 
-    return false;
-  });
+      return false;
+    });
 
   </script>
   <script>
-  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
   </script>
   <script>
-  try {
-  var pageTracker = _gat._getTracker("UA-1656750-18");
-  pageTracker._trackPageview();
-  } catch(err) {}</script>
+    try {
+      var pageTracker = _gat._getTracker("UA-1656750-18");
+      pageTracker._trackPageview();
+    } catch (err) { }</script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/postmessage-target.html b/postmessage-target.html
index d2f373a..cdcaa49 100644
--- a/postmessage-target.html
+++ b/postmessage-target.html
@@ -1,27 +1,24 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-<title>postMessage target</title>
-<style>
-body { 
-  font: normal 16px/20px Helvetica, sans-serif;
-  margin: 0;
-  padding: 20px;
-}
-</style>
+  <title>postMessage target</title>
+  <link rel="stylesheet" href="css/postmessage-target.css">
 </head>
+
 <body>
-<strong>This iframe is located on the same domain</strong>
-<p id="test">Send me a message!</p>
-<script src="/js/h5utils.js"></script>
-<script>
-addEvent(window, "message", function(e){
-  if ( e.origin !== "http://html5demos.com" ) {
-    document.getElementById("test").innerHTML = 'Ignoring message from ' + e.origin;
-  } else {
-    document.getElementById("test").innerHTML = e.origin + " said: " + e.data;
-  }
-});
-</script>
+  <strong>This iframe is located on the same domain</strong>
+  <p id="test">Send me a message!</p>
+  <script src="/js/h5utils.js"></script>
+  <script>
+    addEvent(window, "message", function (e) {
+      if (e.origin !== "http://html5demos.com") {
+        document.getElementById("test").innerHTML = 'Ignoring message from ' + e.origin;
+      } else {
+        document.getElementById("test").innerHTML = e.origin + " said: " + e.data;
+      }
+    });
+  </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/video-canvas.html b/video-canvas.html
index 73245ba..76eccfe 100644
--- a/video-canvas.html
+++ b/video-canvas.html
@@ -1,16 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-<meta charset="utf-8" />
-<title>Dizzy</title>
-<style>
-* { margin: 0;}
-body { font-family: helvetica; padding: 10px;  }
-input { width: 50px; }
-/*video, canvas { display: block; }*/
-p { margin-top: 20px;}
-</style>
+  <meta charset="utf-8" />
+  <title>Dizzy</title>
+  <link rel="stylesheet" href="css/video-canvas.css">
 </head>
+
 <body>
   <video height="360" width="480">
     <source src="assets/dizzy.mp4" />
@@ -20,76 +16,77 @@
     <input type="button" id="play" value="play">
     <span id="position">00:00</span> / <span id="duration"></span>
   </p>
-<script src="/js/h5utils.js"></script>
-<script>
-var video = document.querySelector('video');
-var togglePlay = document.querySelector('#play');
-var position = document.querySelector('#position');
-var canvas = document.querySelector('canvas');
-var ctx = canvas.getContext('2d');
+  <script src="/js/h5utils.js"></script>
+  <script>
+    var video = document.querySelector('video');
+    var togglePlay = document.querySelector('#play');
+    var position = document.querySelector('#position');
+    var canvas = document.querySelector('canvas');
+    var ctx = canvas.getContext('2d');
+
+    addEvent(togglePlay, 'click', function () {
+      video.playbackRate = 0.5;
+      if (video.paused) {
+        if (video.ended) video.currentTime = 0;
+        video.play();
+        this.value = "pause";
+      } else {
+        video.pause();
+        this.value = "play";
+      }
+    });
 
-addEvent(togglePlay, 'click', function () {
-  video.playbackRate = 0.5;
-  if (video.paused) {
-    if (video.ended) video.currentTime = 0;
-    video.play();
-    this.value = "pause";
-  } else {
-    video.pause();
-    this.value = "play";
-  }
-});
+    setInterval(function () {
+      position.innerHTML = asTime(video.currentTime);
 
-setInterval(function () {
-  position.innerHTML = asTime(video.currentTime);
+      // ctx.restore();
+      ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
+    }, 1000 / 15);
 
-  // ctx.restore();
-  ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
-}, 1000 / 15);
+    addEvent(video, 'ended', function () {
+      togglePlay.value = "play";
+    });
 
-addEvent(video, 'ended', function () {
-  togglePlay.value = "play";
-});
+    addEvent(video, 'canplay', function () {
+      video.muted = true;
+      document.querySelector('#duration').innerHTML = asTime(this.duration);
+      startCanvas();
+    });
 
-addEvent(video, 'canplay', function () {
-  video.muted = true;
-  document.querySelector('#duration').innerHTML = asTime(this.duration);
-  startCanvas();
-});
 
+    function startCanvas() {
+      canvas.setAttribute('height', Math.floor(video.height));
+      canvas.setAttribute('width', Math.floor(video.width));
 
-function startCanvas() {
-  canvas.setAttribute('height', Math.floor(video.height));
-  canvas.setAttribute('width', Math.floor(video.width));
-  
-  ctx.translate(canvas.width/2, canvas.height/2);
-  ctx.scale(-1, 1);
-  ctx.translate(-canvas.width/2, -canvas.height/2);
-  ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
+      ctx.translate(canvas.width / 2, canvas.height / 2);
+      ctx.scale(-1, 1);
+      ctx.translate(-canvas.width / 2, -canvas.height / 2);
+      ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
 
-  // var mirror = canvas.height * 0.6;
-  // var grad = ctx.createLinearGradient(0, 0, 0, mirror);
-  // grad.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
-  // grad.addColorStop(1, 'rgba(0, 0, 0, 1)');
-  // ctx.fillStyle = grad;
-  // ctx.rect(0, 0, canvas.width, mirror);
-  // ctx.fill();
-  // ctx.save();  
-}
+      // var mirror = canvas.height * 0.6;
+      // var grad = ctx.createLinearGradient(0, 0, 0, mirror);
+      // grad.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
+      // grad.addColorStop(1, 'rgba(0, 0, 0, 1)');
+      // ctx.fillStyle = grad;
+      // ctx.rect(0, 0, canvas.width, mirror);
+      // ctx.fill();
+      // ctx.save();  
+    }
 
-function asTime(t) {
-  t = Math.round(t);
-  var s = t % 60;
-  var m = Math.round(t / 60);
-  
-  return two(m) + ':' + two(s);
-}
+    function asTime(t) {
+      t = Math.round(t);
+      var s = t % 60;
+      var m = Math.round(t / 60);
 
-function two(s) {
-  s += "";
-  if (s.length < 2) s = "0" + s;
-  return s;
-}
-</script>
+      return two(m) + ':' + two(s);
+    }
+
+    function two(s) {
+      s += "";
+      if (s.length < 2) s = "0" + s;
+      return s;
+    }
+  </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
