--- /dev/null
+<div id="helpUnderlay" class="help-underlay">
+ <div id="helpModal" class="help-modal">
+ <h1>Keyboard Shortcuts <kbd class="help-key"><span>?</span></kbd></h1>
+ <div id="helpClose" class="help-close">×</div><!-- .help-close -->
+
+ <div id="helpModalContent" class="help-modal-content">
+
+ <div id="helpListWrap" class="help-list-wrap">
+
+ <!--
+ Each <ul> below creates a column, as long as each has a class of
+ "help-list". Each <li> is a single key/definition pair.
+ The extra nested <span> is to help keep the definitions lined up
+ vertically, for aesthetic reasons.
+ If you hate the extra <span>, just remove it from each key/def pair.
+ -->
+
+ <ul class="help-list">
+
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>space</span></kbd>
+ <span class="help-key-def">Pause/Play</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>r</span></kbd>
+ <span class="help-key-def">Return to start</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>b</span></kbd>
+ <span class="help-key-def">Rewind 10 secs</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>f</span></kbd>
+ <span class="help-key-def">Fast forward 10 secs</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>a</span></kbd>
+ <span class="help-key-def">Mark start</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>c</span></kbd>
+ <span class="help-key-def">Clear start</span>
+ </li>
+
+ </ul><!-- .help-list -->
+
+ </div><!-- .help-list-wrap -->
+
+ </div><!-- .help-modal-content -->
+ </div><!-- .help-modal -->
+</div><!-- .help-underlay -->
\ No newline at end of file