diff --git a/_layouts/default.html b/_layouts/default.html
index f7f901c4c..432f7fbb1 100755
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -133,6 +133,7 @@ <h5>Colophon</h5>
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
+    <!-- <script src="/js/local-storage.js"></script> -->
     <script src="/js/bootstrap-dropdown.js"></script>
     <script src="/js/bootstrap-collapse.js"></script>
     <!--
diff --git a/checklist.html b/checklist.html
index a9050199f..fb3cc8753 100644
--- a/checklist.html
+++ b/checklist.html
@@ -12,58 +12,85 @@ <h2>The Checklist</h2>
         </header>
 
         <div class="row-fluid">
-          <form action="" role="form">
+          <form action="" id="simple-a11y-checklist" role="form">
             <ul>
               <!-- Aria Roles -->
-              <li>
+              <li id="aria-roles">
                 <h3>ARIA Role Attributes</h3>
                 <!-- banner -->
-                <label for=""><h4>&lt;header role="banner"&gt;</h4></label>
-                <input name="" type="checkbox">
-                <p>Region of the page that is site focused</p>
+                <label for="banner-role">&lt;header role="banner"&gt;</label>
+                <input name="aria-banner-role" id="banner-role" type="checkbox">
+                <p>A region of the page that is site focused</p>
+
                 <!-- navigation -->
-                <label for=""><h4>&lt;nav role="navigation"&gt;</h4></label>
-                <input name="" type="checkbox">
+                <label for="navigation-role">&lt;nav role="navigation"&gt;</label>
+                <input name="aria-navigation-role" id="navigation-role" type="checkbox">
                 <p>Contains navigational links</p>
+
                 <!-- main -->
-                <label for=""><h4>&lt;section role="main"&gt;</h4></label>
-                <input name="" type="checkbox">
+                <label for="main-role">&lt;section role="main"&gt;</label>
+                <input name="aria-main-role" id="main-role" type="checkbox">
                 <p>Focal content of document</p>
+
                 <!-- complementary -->
-                <label for=""><h4>&lt;aside role="complementary"&gt;</h4></label>
-                <input name="" type="checkbox">
+                <label for="complementary-role">&lt;aside role="complementary"&gt;</label>
+                <input name="aria-complementary-role" id="complementary-role" type="checkbox">
                 <p>Supporting section related to the main content even when separated</p>
+
                 <!-- complementary -->
-                <label for=""><h4>&lt;footer role="contentinfo"&gt;</h4></label>
-                <input name="" type="checkbox">
-                <p>Contains information about the document (meta info,copyright,company info etc.)</p>
+                <label for="contentinfo-role">&lt;footer role="contentinfo"&gt;</label>
+                <input name="aria-contentinfo-role" id="content-info" type="checkbox">
+                <p>Contains information about the document <b>(meta info,copyright,company info etc.)</b></p>
               </li>
 
               <!-- Images -->
-              <li>
+              <li id="images">
                 <h3>Images</h3>
                 <!-- alt -->
-                <label for=""><h4>Alt Attribute</h4></label>
-                <input name="" type="checkbox">
+                <label for="img-alt"><code class="language-markup">alt</code> Attribute</label>
+                <input name="img-alt-attr" id="img-alt" type="checkbox">
                 <p>Appropriate <code class="language-markup">alt</code> attribute values for images when they're not displayed while leaving text for decorational images blank (e.g. <code class="language-markup">alt=""</code>). Use <code class="language-markup">alt</code> attribute values that convey meaning to your visitors, rather than meaning to you and your colleagues</p>
               </li>
 
               <!-- Javascript -->
-              <li>
+              <li id="js">
                 <h3>Javascript</h3>
-                <label for=""><h4>Unobtrusive Javascript</h4></label>
-                <input name="" type="checkbox">
+                <!-- unobtrusive js -->
+                <label for="unobtrusive-js">Unobtrusive Javascript</label>
+                <input name="unobtrusive-js-input" id="unobtrusive-js" type="checkbox">
                 <p>Use unobtrusive Javascript (Never use inline scripting)</p>
-                <label for=""><h4>Javascript Alternatives</h4></label>
-                <input name="" type="checkbox">
+                <!-- js alts -->
+                <label for="alt-js">Javascript Alternatives</label>
+                <input name="alt-js-fallback" id="alt-js" type="checkbox">
                 <p>Provide alternatives for users without Javascript enabled.</p>
               </li>
 
+              <!-- Hidden Nodes -->
+              <li id="hidden-nodes">
+                <h3>Hidden Nodes</h3>
+                <p>Anytime something is visually hidden within your markup use this role attribute → aria-hidden="true" or aria-hidden="false"</p>
+                <label for="aria-hidden-true">aria-hidden=true</label>
+                <input name="aria-hidden-true-attr" id="aria-hidden-true" type="checkbox">
+                <p>Content that you wan't hidden but accessible</p>
+                <label for="aria-hidden-false">aria-hidden="false"</label>
+                <input name="aria-hidden-false-attr" id="aria-hidden-false" type="checkbox">
+                <p>Content that you don't want hidden</p>
+              </li>
+
+              <!-- Widgets -->
+              <li id="widgets">
+                <h3>Widgets</h3>
+                <label for="application-role">role="application"</label>
+                <input name="aria-application-role" id="application-role" type="checkbox">
+                <p>Add role="application" to your &lt;body&gt; element to instruct screen readers to recognize your site as an application-style widget and not standard content</p>
+              </li>
+
               <!-- Audio -->
-              <li>
+              <li id="audio">
                 <h3>Audio</h3>
                 <!-- text transcript -->
-                <label for=""><h4>Provide a Text Transcript</h4></label><input name="" type="checkbox">
+                <label for="audio">Provide a Text Transcript</label>
+                <input name="audio-input" id="audio" type="checkbox">
                 <p>Providing a text transcript makes the audio information accessible to people who are deaf or hard of hearing. This also goes for Search Engines who are deaf and hard of hearing as well.</p>
               </li>
             </ul>
@@ -78,4 +105,4 @@ <h3>Audio</h3>
 
 
   </div><!--/row-->
-</div>
\ No newline at end of file
+</div>
diff --git a/css/bootstrap.css b/css/bootstrap.css
index c103535d7..dec4aef23 100644
--- a/css/bootstrap.css
+++ b/css/bootstrap.css
@@ -39,7 +39,7 @@ html {
 }
 
 a:focus {
-  outline: thin dotted #333;
+  outline: thin dotted #333333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
@@ -143,7 +143,7 @@ textarea {
 @media print {
   * {
     text-shadow: none !important;
-    color: #000 !important;
+    color: black !important;
     background: transparent !important;
     box-shadow: none !important;
   }
@@ -169,7 +169,7 @@ textarea {
 
   pre,
   blockquote {
-    border: 1px solid #999;
+    border: 1px solid #999999;
     page-break-inside: avoid;
   }
 
@@ -230,7 +230,7 @@ a:hover {
 .img-polaroid {
   padding: 4px;
   background-color: #fff;
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -884,7 +884,7 @@ pre {
   line-height: 20px;
   white-space: pre;
   background-color: #f5f5f5;
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   border: 1px solid rgba(0, 0, 0, 0.15);
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
@@ -1089,7 +1089,7 @@ select:focus,
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted #333;
+  outline: thin dotted #333333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
@@ -1570,7 +1570,7 @@ select:focus:invalid:focus {
   text-align: center;
   text-shadow: 0 1px 0 white;
   background-color: #eeeeee;
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
 }
 .input-append .add-on,
 .input-append .btn,
@@ -2092,7 +2092,7 @@ table th[class*="span"],
 }
 
 .icon-glass {
-  background-position: 0      0;
+  background-position: 0 0;
 }
 
 .icon-music {
@@ -2695,7 +2695,7 @@ table th[class*="span"],
   margin: 2px 0 0;
   list-style: none;
   background-color: white;
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
   *border-right-width: 2px;
   *border-bottom-width: 2px;
@@ -3011,7 +3011,7 @@ button.close {
   transition: background-position 0.1s linear;
 }
 .btn:focus {
-  outline: thin dotted #333;
+  outline: thin dotted #333333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
@@ -3741,7 +3741,7 @@ input[type="submit"].btn.btn-mini {
 }
 
 .nav-tabs {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #dddddd;
 }
 
 .nav-tabs > li {
@@ -3765,7 +3765,7 @@ input[type="submit"].btn.btn-mini {
 .nav-tabs > .active > a:hover {
   color: #555555;
   background-color: white;
-  border: 1px solid #ddd;
+  border: 1px solid #dddddd;
   border-bottom-color: transparent;
   cursor: default;
 }
@@ -3799,7 +3799,7 @@ input[type="submit"].btn.btn-mini {
 }
 
 .nav-tabs.nav-stacked > li > a {
-  border: 1px solid #ddd;
+  border: 1px solid #dddddd;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
@@ -3932,7 +3932,7 @@ input[type="submit"].btn.btn-mini {
 }
 
 .tabs-below > .nav-tabs {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #dddddd;
 }
 
 .tabs-below > .nav-tabs > li {
@@ -3952,7 +3952,7 @@ input[type="submit"].btn.btn-mini {
 
 .tabs-below > .nav-tabs > .active > a,
 .tabs-below > .nav-tabs > .active > a:hover {
-  border-color: transparent #ddd #ddd #ddd;
+  border-color: transparent #dddddd #dddddd #dddddd;
 }
 
 .tabs-left > .nav-tabs > li,
@@ -3970,7 +3970,7 @@ input[type="submit"].btn.btn-mini {
 .tabs-left > .nav-tabs {
   float: left;
   margin-right: 19px;
-  border-right: 1px solid #ddd;
+  border-right: 1px solid #dddddd;
 }
 
 .tabs-left > .nav-tabs > li > a {
@@ -3986,14 +3986,14 @@ input[type="submit"].btn.btn-mini {
 
 .tabs-left > .nav-tabs .active > a,
 .tabs-left > .nav-tabs .active > a:hover {
-  border-color: #ddd transparent #ddd #ddd;
+  border-color: #dddddd transparent #dddddd #dddddd;
   *border-right-color: white;
 }
 
 .tabs-right > .nav-tabs {
   float: right;
   margin-left: 19px;
-  border-left: 1px solid #ddd;
+  border-left: 1px solid #dddddd;
 }
 
 .tabs-right > .nav-tabs > li > a {
@@ -4009,7 +4009,7 @@ input[type="submit"].btn.btn-mini {
 
 .tabs-right > .nav-tabs .active > a,
 .tabs-right > .nav-tabs .active > a:hover {
-  border-color: #ddd #ddd #ddd transparent;
+  border-color: #dddddd #dddddd #dddddd transparent;
   *border-left-color: white;
 }
 
@@ -4343,7 +4343,7 @@ input[type="submit"].btn.btn-mini {
   display: inline-block;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
+  border-bottom: 7px solid #cccccc;
   border-bottom-color: rgba(0, 0, 0, 0.2);
   position: absolute;
   top: -7px;
@@ -4361,7 +4361,7 @@ input[type="submit"].btn.btn-mini {
 }
 
 .navbar-fixed-bottom .nav > li > .dropdown-menu:before {
-  border-top: 7px solid #ccc;
+  border-top: 7px solid #cccccc;
   border-top-color: rgba(0, 0, 0, 0.2);
   border-bottom: 0;
   bottom: -7px;
@@ -4745,7 +4745,7 @@ input[type="submit"].btn.btn-mini {
   display: inline-block;
   padding: 5px 14px;
   background-color: #fff;
-  border: 1px solid #ddd;
+  border: 1px solid #dddddd;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
@@ -4801,9 +4801,9 @@ input[type="submit"].btn.btn-mini {
   width: 560px;
   margin: -250px 0 0 -280px;
   background-color: white;
-  border: 1px solid #999;
+  border: 1px solid #999999;
   border: 1px solid rgba(0, 0, 0, 0.3);
-  *border: 1px solid #999;
+  *border: 1px solid #999999;
   /* IE6-7 */
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
@@ -4829,7 +4829,7 @@ input[type="submit"].btn.btn-mini {
 
 .modal-header {
   padding: 9px 15px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid #eeeeee;
 }
 .modal-header .close {
   margin-top: 2px;
@@ -4855,7 +4855,7 @@ input[type="submit"].btn.btn-mini {
   margin-bottom: 0;
   text-align: right;
   background-color: #f5f5f5;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #dddddd;
   -webkit-border-radius: 0 0 6px 6px;
   -moz-border-radius: 0 0 6px 6px;
   border-radius: 0 0 6px 6px;
@@ -4972,7 +4972,7 @@ input[type="submit"].btn.btn-mini {
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
@@ -5116,7 +5116,7 @@ input[type="submit"].btn.btn-mini {
   display: block;
   padding: 4px;
   line-height: 20px;
-  border: 1px solid #ddd;
+  border: 1px solid #dddddd;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
diff --git a/css/responsive.css b/css/responsive.css
index 553624a7e..d30c480bd 100644
--- a/css/responsive.css
+++ b/css/responsive.css
@@ -938,7 +938,7 @@
 
   input[type="checkbox"],
   input[type="radio"] {
-    border: 1px solid #ccc;
+    border: 1px solid #cccccc;
   }
 
   .form-horizontal .control-label {
@@ -1201,7 +1201,6 @@ h3 code {
   background-image: -webkit-linear-gradient(bottom left, #1a274e, #397c9c 110%);
   background-image: -moz-linear-gradient(bottom left, #1a274e, #397c9c 110%);
   background-image: -o-linear-gradient(bottom left, #1a274e, #397c9c 110%);
-  background-image: -ms-linear-gradient(bottom left, #1a274e, #397c9c 110%);
   background-image: linear-gradient(bottom left, #1a274e, #397c9c 110%);
   -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2), inset 0 -3px 7px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2), inset 0 -3px 7px rgba(0, 0, 0, 0.2);
@@ -1235,9 +1234,9 @@ h3 code {
 .masthead-links a {
   color: #fff;
   color: rgba(255, 255, 255, 0.8);
-  -webkit-transition: all .2s ease-in-out;
-  -moz-transition: all .2s ease-in-out;
-  transition: all .2s ease-in-out;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
 
 .masthead-links a:hover {
diff --git a/js/local-storage.js b/js/local-storage.js
new file mode 100644
index 000000000..65f5214fc
--- /dev/null
+++ b/js/local-storage.js
@@ -0,0 +1,37 @@
+//IndexedDB might be a way to go
+
+//http://www.html5rocks.com/en/tutorials/speed/quick/
+// if localStorage is present, use that
+if (('localStorage' in window) && window.localStorage !== null) {
+  // easy object property API
+  //localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';
+
+  //LocalStorage Article
+  // http://coding.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it
+  // just modify the localStorage Object duh! Stoopid simple
+/*  localStorage.setItem('favoriteflavor','vanilla');
+  // this returns the key's value
+  var taste = localStorage.getItem('favoriteflavor');
+  //this example removes an item
+  localStorage.removeItem('favoriteflavor');
+  var taste = localStorage.getItem('favoriteflavor');
+  console.log(taste); // returns null*/
+
+  //http://playground.html5rocks.com/?codekitCB=379749383.084364#sessionstorage
+  //http://css-tricks.com/video-screencasts/96-localstorage-for-forms/
+  var el = document.querySelector('$el');
+  el.addEventListener( 'click', function() {
+    //alert('clicked');
+    localStorage.setItem('$key','$value');
+    localStorage.setItem('timestamp', (new Date()).getTime());
+  }, false);
+
+} else {
+  // without sessionStorage we'll have to use a far-future cookie
+  // with document.cookie's awkward API :(
+  var date = new Date();
+  date.setTime(date.getTime()+(365*24*60*60*1000));
+  var expires = date.toGMTString();
+  var cookiestr = '$key_value'+ ' expires='+expires+'; path=/';
+  document.cookie = cookiestr;
+}