1 <div id="helpUnderlay" class="help-underlay">
2 <div id="helpModal" class="help-modal">
3 <h1>Keyboard Shortcuts <kbd class="help-key"><span>?</span></kbd></h1>
4 <div id="helpClose" class="help-close">×</div><!-- .help-close -->
6 <div id="helpModalContent" class="help-modal-content">
8 <div id="helpListWrap" class="help-list-wrap">
11 Each <ul> below creates a column, as long as each has a class of
12 "help-list". Each <li> is a single key/definition pair.
13 The extra nested <span> is to help keep the definitions lined up
14 vertically, for aesthetic reasons.
15 If you hate the extra <span>, just remove it from each key/def pair.
18 <ul class="help-list">
20 <li class="help-key-unit">
21 <kbd class="help-key"><span>space</span></kbd>
22 <span class="help-key-def">Pause/Play</span>
24 <li class="help-key-unit">
25 <kbd class="help-key"><span>r</span></kbd>
26 <span class="help-key-def">Return to start</span>
28 <li class="help-key-unit">
29 <kbd class="help-key"><span><-</span></kbd>
30 <span class="help-key-def">Rewind 10 secs</span>
32 <li class="help-key-unit">
33 <kbd class="help-key"><span>-></span></kbd>
34 <span class="help-key-def">Fast forward 10 secs</span>
36 <li class="help-key-unit">
37 <kbd class="help-key"><span>a</span></kbd>
38 <span class="help-key-def">Set A Marker</span>
40 <li class="help-key-unit">
41 <kbd class="help-key"><span>b</span></kbd>
42 <span class="help-key-def">Set B Marker</span>
44 <li class="help-key-unit">
45 <kbd class="help-key"><span>c</span></kbd>
46 <span class="help-key-def">Clear A/B loop</span>
49 </ul><!-- .help-list -->
51 </div><!-- .help-list-wrap -->
53 </div><!-- .help-modal-content -->
54 </div><!-- .help-modal -->
55 </div><!-- .help-underlay -->