source: spip-zone/_squelettes_/html5up_story/_patron.html @ 112446

Last change on this file since 112446 was 110281, checked in by erational@…, 14 months ago

Dans la famulle HTML5up, je voudrais le thème Story
Thème hypersimple de type onepage
L'emballage est largement pompé du boulot de chankalan

File size: 107.8 KB
Line 
1<!DOCTYPE HTML>
2<!--
3        Story by HTML5 UP
4        html5up.net | @ajlkn
5        Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
6
7        Note: Only needed for demo purposes. Delete for production sites.
8
9    URL officiel du theme:      https://html5up.net/story
10-->
11<html>
12        <head>
13                <title>Story by HTML5 UP</title>
14                <meta charset="utf-8" />
15                [(#REM) ne pas indexer, c'est une page demo]
16                <meta name="robots" content="none" >
17                <meta name="viewport" content="width=device-width, initial-scale=1" />
18                #INSERT_HEAD_CSS
19                <link rel="stylesheet" href="#CHEMIN{css/main.css}" />
20
21                [(#REM)
22                        on prend le jquery libre et non le jquery de SPIP
23                        car le jquery demo.js ne marche pas avec un jquery recent
24
25                        le reste semble passer
26
27                ]
28                <!-- INSERT_HEAD -->
29
30                <!-- Scripts -->
31                <script src="#CHEMIN{js/jquery.min.js}"></script>
32                <script src="#CHEMIN{js/jquery.scrollex.min.js}"></script>
33                <script src="#CHEMIN{js/jquery.scrolly.min.js}"></script>
34                <script src="#CHEMIN{js/skel.min.js}"></script>
35                <script src="#CHEMIN{js/util.js}"></script>
36                <script src="#CHEMIN{js/main.js}"></script>
37
38
39
40
41        </head>
42        <body>
43
44                <!-- Wrapper -->
45                        <div id="wrapper" class="divided">
46
47                                <!-- Banner -->
48                                        <section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right">
49                                                <div class="content">
50                                                        <h1>Story</h1>
51                                                        <p class="major">A (modular, highly tweakable) responsive one-page template designed by <a href="https://html5up.net">HTML5 UP</a> and released for free under the <a href="https://html5up.net/license">Creative Commons</a>.</p>
52                                                        <p>This is a <strong>Banner</strong> element, and it's generally used as an introduction or opening statement. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-banner">details</a>).</p>
53                                                        <ul class="actions vertical">
54                                                                <li><a href="#first" class="button big wide smooth-scroll-middle">Get Started</a></li>
55                                                        </ul>
56                                                </div>
57                                                <div class="image">
58                                                        <img src="#CHEMIN{images/banner.jpg}" alt="" />
59                                                </div>
60                                        </section>
61
62                                <!-- Spotlight -->
63                                        <section class="spotlight style1 orient-right content-align-left image-position-center onscroll-image-fade-in" id="first">
64                                                <div class="content">
65                                                        <h2>Spotlight</h2>
66                                                        <p>This is a <strong>Spotlight</strong> element, and it's generally used &ndash; as its name implies &ndash; to spotlight a particular feature, subject, or pretty much whatever. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-spotlight">details</a>).</p>
67                                                        <ul class="actions vertical">
68                                                                <li><a href="#" class="button">Learn More</a></li>
69                                                        </ul>
70                                                </div>
71                                                <div class="image">
72                                                        <img src="#CHEMIN{images/spotlight01.jpg}" alt="" />
73                                                </div>
74                                        </section>
75
76                                <!-- Spotlight -->
77                                        <section class="spotlight style1 orient-left content-align-left image-position-center onscroll-image-fade-in">
78                                                <div class="content">
79                                                        <h2>Spotlight</h2>
80                                                        <p>This is also a <strong>Spotlight</strong> element, and it's here because this demo would look a bit empty with just one spotlight. Like all spotlights, you can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-spotlight">details</a>).</p>
81                                                        <ul class="actions vertical">
82                                                                <li><a href="#" class="button">Learn More</a></li>
83                                                        </ul>
84                                                </div>
85                                                <div class="image">
86                                                        <img src="#CHEMIN{images/spotlight02.jpg}" alt="" />
87                                                </div>
88                                        </section>
89
90                                <!-- Spotlight -->
91                                        <section class="spotlight style1 orient-right content-align-left image-position-center onscroll-image-fade-in">
92                                                <div class="content">
93                                                        <h2>Spotlight</h2>
94                                                        <p>And yes, this is another <strong>Spotlight</strong> element, and it's also here because I need to fill a bit of space. Naturally, like any other spotlight, you can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-spotlight">details</a>).</p>
95                                                        <ul class="actions vertical">
96                                                                <li><a href="#" class="button">Learn More</a></li>
97                                                        </ul>
98                                                </div>
99                                                <div class="image">
100                                                        <img src="#CHEMIN{images/spotlight03.jpg}" alt="" />
101                                                </div>
102                                        </section>
103
104                                <!-- Gallery -->
105                                        <section class="wrapper style1 align-center">
106                                                <div class="inner">
107                                                        <h2>Gallery</h2>
108                                                        <p>This is a <strong>Gallery</strong> element. It can behave as a lightbox (when given the <code>lightbox</code> class), and you can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-gallery">details</a>).</p>
109                                                </div>
110
111                                                <!-- Gallery -->
112                                                        <div class="gallery style2 medium lightbox onscroll-fade-in">
113                                                                <article>
114                                                                        <a href="#CHEMIN{images/gallery/fulls/01.jpg}" class="image">
115                                                                                <img src="#CHEMIN{images/gallery/thumbs/01.jpg}" alt="" />
116                                                                        </a>
117                                                                        <div class="caption">
118                                                                                <h3>Title</h3>
119                                                                                <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
120                                                                                <ul class="actions">
121                                                                                        <li><span class="button small">Details</span></li>
122                                                                                </ul>
123                                                                        </div>
124                                                                </article>
125                                                                <article>
126                                                                        <a href="#CHEMIN{images/gallery/fulls/02.jpg}" class="image">
127                                                                                <img src="#CHEMIN{images/gallery/thumbs/02.jpg}" alt="" />
128                                                                        </a>
129                                                                        <div class="caption">
130                                                                                <h3>Title</h3>
131                                                                                <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
132                                                                                <ul class="actions">
133                                                                                        <li><span class="button small">Details</span></li>
134                                                                                </ul>
135                                                                        </div>
136                                                                </article>
137                                                                <article>
138                                                                        <a href="#CHEMIN{images/gallery/fulls/03.jpg}" class="image">
139                                                                                <img src="#CHEMIN{images/gallery/thumbs/03.jpg}" alt="" />
140                                                                        </a>
141                                                                        <div class="caption">
142                                                                                <h3>Title</h3>
143                                                                                <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
144                                                                                <ul class="actions">
145                                                                                        <li><span class="button small">Details</span></li>
146                                                                                </ul>
147                                                                        </div>
148                                                                </article>
149                                                                <article>
150                                                                        <a href="#CHEMIN{images/gallery/fulls/04.jpg}" class="image">
151                                                                                <img src="#CHEMIN{images/gallery/thumbs/04.jpg}" alt="" />
152                                                                        </a>
153                                                                        <div class="caption">
154                                                                                <h3>Title</h3>
155                                                                                <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
156                                                                                <ul class="actions">
157                                                                                        <li><span class="button small">Details</span></li>
158                                                                                </ul>
159                                                                        </div>
160                                                                </article>
161                                                                <article>
162                                                                        <a href="#CHEMIN{images/gallery/fulls/05.jpg}" class="image">
163                                                                                <img src="#CHEMIN{images/gallery/thumbs/05.jpg}" alt="" />
164                                                                        </a>
165                                                                        <div class="caption">
166                                                                                <h3>Title</h3>
167                                                                                <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
168                                                                                <ul class="actions">
169                                                                                        <li><span class="button small">Details</span></li>
170                                                                                </ul>
171                                                                        </div>
172                                                                </article>
173                                                                <article>
174                                                                        <a href="#CHEMIN{images/gallery/fulls/06.jpg}" class="image">
175                                                                                <img src="#CHEMIN{images/gallery/thumbs/06.jpg}" alt="" />
176                                                                        </a>
177                                                                        <div class="caption">
178                                                                                <h3>Title</h3>
179                                                                                <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
180                                                                                <ul class="actions">
181                                                                                        <li><span class="button small">Details</span></li>
182                                                                                </ul>
183                                                                        </div>
184                                                                </article>
185                                                                <article>
186                                                                        <a href="#CHEMIN{images/gallery/fulls/07.jpg}" class="image">
187                                                                                <img src="#CHEMIN{images/gallery/thumbs/07.jpg}" alt="" />
188                                                                        </a>
189                                                                        <div class="caption">
190                                                                                <h3>Title</h3>
191                                                                                <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
192                                                                                <ul class="actions">
193                                                                                        <li><span class="button small">Details</span></li>
194                                                                                </ul>
195                                                                        </div>
196                                                                </article>
197                                                                <article>
198                                                                        <a href="#CHEMIN{images/gallery/fulls/08.jpg}" class="image">
199                                                                                <img src="#CHEMIN{images/gallery/thumbs/08.jpg}" alt="" />
200                                                                        </a>
201                                                                        <div class="caption">
202                                                                                <h3>Title</h3>
203                                                                                <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
204                                                                                <ul class="actions">
205                                                                                        <li><span class="button small">Details</span></li>
206                                                                                </ul>
207                                                                        </div>
208                                                                </article>
209                                                                <article>
210                                                                        <a href="#CHEMIN{images/gallery/fulls/09.jpg}" class="image">
211                                                                                <img src="#CHEMIN{images/gallery/thumbs/09.jpg}" alt="" />
212                                                                        </a>
213                                                                        <div class="caption">
214                                                                                <h3>Title</h3>
215                                                                                <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
216                                                                                <ul class="actions">
217                                                                                        <li><span class="button small">Details</span></li>
218                                                                                </ul>
219                                                                        </div>
220                                                                </article>
221                                                                <article>
222                                                                        <a href="#CHEMIN{images/gallery/fulls/10.jpg}" class="image">
223                                                                                <img src="#CHEMIN{images/gallery/thumbs/10.jpg}" alt="" />
224                                                                        </a>
225                                                                        <div class="caption">
226                                                                                <h3>Title</h3>
227                                                                                <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
228                                                                                <ul class="actions">
229                                                                                        <li><span class="button small">Details</span></li>
230                                                                                </ul>
231                                                                        </div>
232                                                                </article>
233                                                                <article>
234                                                                        <a href="#CHEMIN{images/gallery/fulls/11.jpg}" class="image">
235                                                                                <img src="#CHEMIN{images/gallery/thumbs/11.jpg}" alt="" />
236                                                                        </a>
237                                                                        <div class="caption">
238                                                                                <h3>Title</h3>
239                                                                                <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
240                                                                                <ul class="actions">
241                                                                                        <li><span class="button small">Details</span></li>
242                                                                                </ul>
243                                                                        </div>
244                                                                </article>
245                                                                <article>
246                                                                        <a href="#CHEMIN{images/gallery/fulls/12.jpg}" class="image">
247                                                                                <img src="#CHEMIN{images/gallery/thumbs/12.jpg}" alt="" />
248                                                                        </a>
249                                                                        <div class="caption">
250                                                                                <h3>Title</h3>
251                                                                                <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
252                                                                                <ul class="actions">
253                                                                                        <li><span class="button small">Details</span></li>
254                                                                                </ul>
255                                                                        </div>
256                                                                </article>
257                                                        </div>
258
259                                        </section>
260
261                                <!-- Items -->
262                                        <section class="wrapper style1 align-center">
263                                                <div class="inner">
264                                                        <h2>Items</h2>
265                                                        <p>This is an <strong>Items</strong> element, and it's basically just a grid for organizing items of various types. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-items">details</a>).</p>
266                                                        <div class="items style1 medium onscroll-fade-in">
267                                                                <section>
268                                                                        <span class="icon style2 major fa-diamond"></span>
269                                                                        <h3>One</h3>
270                                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
271                                                                </section>
272                                                                <section>
273                                                                        <span class="icon style2 major fa-save"></span>
274                                                                        <h3>Two</h3>
275                                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
276                                                                </section>
277                                                                <section>
278                                                                        <span class="icon style2 major fa-bar-chart"></span>
279                                                                        <h3>Three</h3>
280                                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
281                                                                </section>
282                                                                <section>
283                                                                        <span class="icon style2 major fa-wifi"></span>
284                                                                        <h3>Four</h3>
285                                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
286                                                                </section>
287                                                                <section>
288                                                                        <span class="icon style2 major fa-cog"></span>
289                                                                        <h3>Five</h3>
290                                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
291                                                                </section>
292                                                                <section>
293                                                                        <span class="icon style2 major fa-paper-plane"></span>
294                                                                        <h3>Six</h3>
295                                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
296                                                                </section>
297                                                                <section>
298                                                                        <span class="icon style2 major fa-desktop"></span>
299                                                                        <h3>Seven</h3>
300                                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
301                                                                </section>
302                                                                <section>
303                                                                        <span class="icon style2 major fa-refresh"></span>
304                                                                        <h3>Eight</h3>
305                                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
306                                                                </section>
307                                                                <section>
308                                                                        <span class="icon style2 major fa-hashtag"></span>
309                                                                        <h3>Nine</h3>
310                                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
311                                                                </section>
312                                                                <section>
313                                                                        <span class="icon style2 major fa-bolt"></span>
314                                                                        <h3>Ten</h3>
315                                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
316                                                                </section>
317                                                                <section>
318                                                                        <span class="icon style2 major fa-envelope"></span>
319                                                                        <h3>Eleven</h3>
320                                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
321                                                                </section>
322                                                                <section>
323                                                                        <span class="icon style2 major fa-leaf"></span>
324                                                                        <h3>Twelve</h3>
325                                                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
326                                                                </section>
327                                                        </div>
328                                                </div>
329                                        </section>
330
331                                <!-- Additional Elements -->
332                                        <section class="wrapper style1 align-center">
333                                                <div class="inner">
334                                                        <h2>Additional Elements</h2>
335                                                        <p>Finally, here are some additional elements you <em>might</em> find useful (and yup, they look fine with any <span class="demo-controls">appearance</span>).</p>
336                                                        <div class="index align-left">
337
338                                                                <!-- Text -->
339                                                                        <section>
340                                                                                <header>
341                                                                                        <h3>Text</h3>
342                                                                                </header>
343                                                                                <div class="content">
344
345                                                                                        <p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
346                                                                                        This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
347                                                                                        This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>.
348                                                                                        Finally, this is a <a href="#">link</a>.</p>
349
350                                                                                </div>
351                                                                        </section>
352
353                                                                <!-- Heading -->
354                                                                        <section>
355                                                                                <header>
356                                                                                        <h3>Headings</h3>
357                                                                                </header>
358                                                                                <div class="content">
359
360                                                                                        <h1>Heading Level 1</h1>
361                                                                                        <h2>Heading Level 2</h2>
362                                                                                        <h3>Heading Level 3</h3>
363                                                                                        <h4>Heading Level 4</h4>
364                                                                                        <h5>Heading Level 5</h5>
365                                                                                        <h6>Heading Level 6</h6>
366
367                                                                                        <hr />
368
369                                                                                        <header>
370                                                                                                <h1>Heading with a Subtitle</h1>
371                                                                                                <p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
372                                                                                        </header>
373                                                                                        <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
374
375                                                                                        <hr />
376
377                                                                                        <header>
378                                                                                                <h2>Heading with a Subtitle</h2>
379                                                                                                <p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
380                                                                                        </header>
381                                                                                        <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
382
383                                                                                        <hr />
384
385                                                                                        <header>
386                                                                                                <h3>Heading with a Subtitle</h3>
387                                                                                                <p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
388                                                                                        </header>
389                                                                                        <p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
390
391                                                                                </div>
392                                                                        </section>
393
394                                                                <!-- Unordered List -->
395                                                                        <section>
396                                                                                <header>
397                                                                                        <h3>Unordered List</h3>
398                                                                                </header>
399                                                                                <div class="content">
400
401                                                                                        <h4>Default</h4>
402                                                                                        <ul>
403                                                                                                <li>Lorem ipsum dolor sit amet</li>
404                                                                                                <li>Interdum adipiscing gravida odio</li>
405                                                                                                <li>Porttitor sem non integer</li>
406                                                                                                <li>Non faucibus ornare mi ut ante</li>
407                                                                                                <li>Sagittis adipiscing eleifend</li>
408                                                                                                <li>Felis amet dolore viverra</li>
409                                                                                        </ul>
410
411                                                                                        <h4>Alternate</h4>
412                                                                                        <ul class="alt">
413                                                                                                <li>Lorem ipsum dolor sit amet</li>
414                                                                                                <li>Interdum adipiscing gravida odio</li>
415                                                                                                <li>Porttitor sem non integer</li>
416                                                                                                <li>Non faucibus ornare mi ut ante</li>
417                                                                                                <li>Sagittis adipiscing eleifend</li>
418                                                                                                <li>Felis amet dolore viverra</li>
419                                                                                        </ul>
420
421                                                                                </div>
422                                                                        </section>
423
424                                                                <!-- Ordered List -->
425                                                                        <section>
426                                                                                <header>
427                                                                                        <h3>Ordered List</h3>
428                                                                                </header>
429                                                                                <div class="content">
430
431                                                                                        <ol>
432                                                                                                <li>Lorem ipsum dolor sit amet</li>
433                                                                                                <li>Interdum adipiscing gravida odio</li>
434                                                                                                <li>Porttitor sem non integer</li>
435                                                                                                <li>Non faucibus ornare mi ut ante</li>
436                                                                                                <li>Sagittis adipiscing eleifend</li>
437                                                                                                <li>Felis amet dolore viverra</li>
438                                                                                        </ol>
439
440                                                                                </div>
441                                                                        </section>
442
443                                                                <!-- Definition List -->
444                                                                        <section>
445                                                                                <header>
446                                                                                        <h3>Definition List</h3>
447                                                                                </header>
448                                                                                <div class="content">
449
450                                                                                        <dl>
451                                                                                                <dt>Interdum adipiscing odio</dt>
452                                                                                                <dd>
453                                                                                                        <p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent fringilla quis tincidunt felis sagittis eget tempus euismod. Ante ipsum primis vestibulum.</p>
454                                                                                                </dd>
455                                                                                                <dt>Non faucibus ornare mi ut ante</dt>
456                                                                                                <dd>
457                                                                                                        <p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent fringilla quis tincidunt felis sagittis eget tempus euismod. Ante ipsum primis vestibulum.</p>
458                                                                                                </dd>
459                                                                                                <dt>Felis amet dolore viverra</dt>
460                                                                                                <dd>
461                                                                                                        <p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent fringilla quis tincidunt felis sagittis eget tempus euismod. Ante ipsum primis vestibulum.</p>
462                                                                                                </dd>
463                                                                                        </dl>
464
465                                                                                </div>
466                                                                        </section>
467
468                                                                <!-- Blockquote -->
469                                                                        <section>
470                                                                                <header>
471                                                                                        <h3>Blockquote</h3>
472                                                                                </header>
473                                                                                <div class="content">
474
475                                                                                        <blockquote>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent fringilla quis tincidunt felis sagittis eget tempus euismod. Ante ipsum primis vestibulum.</blockquote>
476
477                                                                                </div>
478                                                                        </section>
479
480                                                                <!-- Code -->
481                                                                        <section>
482                                                                                <header>
483                                                                                        <h3>Code</h3>
484                                                                                </header>
485                                                                                <div class="content">
486
487                                                                                        <pre><code>i = 0;
488
489while (!deck.isInOrder()) {
490    print 'Iteration ' + i;
491    deck.shuffle();
492    i++;
493}
494
495print 'It took ' + i + ' iterations to sort the deck.';
496</code></pre>
497
498                                                                                </div>
499                                                                        </section>
500
501                                                                <!-- Icons -->
502                                                                        <section>
503                                                                                <header>
504                                                                                        <h3>Icons</h3>
505                                                                                </header>
506                                                                                <div class="content">
507
508                                                                                        <h4>Style #1</h4>
509                                                                                        <ul class="icons">
510                                                                                                <li><a href="#" class="icon style1 fa-twitter"><span class="label">Twitter</span></a></li>
511                                                                                                <li><a href="#" class="icon style1 fa-facebook"><span class="label">Facebook</span></a></li>
512                                                                                                <li><a href="#" class="icon style1 fa-instagram"><span class="label">Instagram</span></a></li>
513                                                                                                <li><a href="#" class="icon style1 fa-github"><span class="label">Github</span></a></li>
514                                                                                                <li><a href="#" class="icon style1 fa-dribbble"><span class="label">Dribbble</span></a></li>
515                                                                                        </ul>
516
517                                                                                        <h4>Style #2</h4>
518                                                                                        <ul class="icons">
519                                                                                                <li><a href="#" class="icon style2 fa-twitter"><span class="label">Twitter</span></a></li>
520                                                                                                <li><a href="#" class="icon style2 fa-facebook"><span class="label">Facebook</span></a></li>
521                                                                                                <li><a href="#" class="icon style2 fa-instagram"><span class="label">Instagram</span></a></li>
522                                                                                                <li><a href="#" class="icon style2 fa-github"><span class="label">Github</span></a></li>
523                                                                                                <li><a href="#" class="icon style2 fa-dribbble"><span class="label">Dribbble</span></a></li>
524                                                                                        </ul>
525
526                                                                                </div>
527                                                                        </section>
528
529                                                                <!-- Buttons -->
530                                                                        <section>
531                                                                                <header>
532                                                                                        <h3>Buttons</h3>
533                                                                                </header>
534                                                                                <div class="content">
535
536                                                                                        <ul class="actions">
537                                                                                                <li><a href="#" class="button special">Special</a></li>
538                                                                                                <li><a href="#" class="button">Default</a></li>
539                                                                                        </ul>
540                                                                                        <ul class="actions">
541                                                                                                <li><a href="#" class="button special big">Big</a></li>
542                                                                                                <li><a href="#" class="button">Default</a></li>
543                                                                                                <li><a href="#" class="button small">Small</a></li>
544                                                                                        </ul>
545                                                                                        <ul class="actions fit">
546                                                                                                <li><a href="#" class="button special fit">Fit</a></li>
547                                                                                                <li><a href="#" class="button fit">Fit</a></li>
548                                                                                                <li><a href="#" class="button special fit">Fit</a></li>
549                                                                                                <li><a href="#" class="button fit">Fit</a></li>
550                                                                                        </ul>
551                                                                                        <ul class="actions fit small">
552                                                                                                <li><a href="#" class="button special fit small">Fit + Small</a></li>
553                                                                                                <li><a href="#" class="button fit small">Fit + Small</a></li>
554                                                                                                <li><a href="#" class="button special fit small">Fit + Small</a></li>
555                                                                                                <li><a href="#" class="button fit small">Fit + Small</a></li>
556                                                                                        </ul>
557                                                                                        <ul class="actions">
558                                                                                                <li><a href="#" class="button special icon fa-search">Icon</a></li>
559                                                                                                <li><a href="#" class="button icon fa-download">Icon</a></li>
560                                                                                        </ul>
561                                                                                        <ul class="actions">
562                                                                                                <li><span class="button special disabled">Special</span></li>
563                                                                                                <li><span class="button disabled">Default</span></li>
564                                                                                        </ul>
565
566                                                                                </div>
567                                                                        </section>
568
569                                                                <!-- Actions -->
570                                                                        <section>
571                                                                                <header>
572                                                                                        <h3>Actions</h3>
573                                                                                </header>
574                                                                                <div class="content">
575
576                                                                                        <h4>Default</h4>
577                                                                                        <ul class="actions">
578                                                                                                <li><a href="#" class="button special">Default</a></li>
579                                                                                                <li><a href="#" class="button">Default</a></li>
580                                                                                        </ul>
581
582                                                                                        <h4>Small</h4>
583                                                                                        <ul class="actions small">
584                                                                                                <li><a href="#" class="button special small">Small</a></li>
585                                                                                                <li><a href="#" class="button small">Small</a></li>
586                                                                                        </ul>
587
588                                                                                        <h4>Vertical</h4>
589                                                                                        <ul class="actions vertical">
590                                                                                                <li><a href="#" class="button special">Default</a></li>
591                                                                                                <li><a href="#" class="button">Default</a></li>
592                                                                                        </ul>
593
594                                                                                        <h4>Vertical + Small</h4>
595                                                                                        <ul class="actions vertical small">
596                                                                                                <li><a href="#" class="button special small">Small</a></li>
597                                                                                                <li><a href="#" class="button small">Small</a></li>
598                                                                                        </ul>
599
600                                                                                        <h4>Vertical + Fit</h4>
601                                                                                        <ul class="actions vertical">
602                                                                                                <li><a href="#" class="button special fit">Default</a></li>
603                                                                                                <li><a href="#" class="button fit">Default</a></li>
604                                                                                        </ul>
605
606                                                                                        <h4>Vertical + Small + Fit</h4>
607                                                                                        <ul class="actions vertical small">
608                                                                                                <li><a href="#" class="button special small fit">Small</a></li>
609                                                                                                <li><a href="#" class="button small fit">Small</a></li>
610                                                                                        </ul>
611
612                                                                                </div>
613                                                                        </section>
614
615                                                                <!-- Form -->
616                                                                        <section>
617                                                                                <header>
618                                                                                        <h3>Form</h3>
619                                                                                </header>
620                                                                                <div class="content">
621
622                                                                                        <form method="post" action="#">
623                                                                                                <div class="field half first">
624                                                                                                        <label for="name">Name</label>
625                                                                                                        <input type="text" name="name" id="name" value="" />
626                                                                                                </div>
627                                                                                                <div class="field half">
628                                                                                                        <label for="email">Email</label>
629                                                                                                        <input type="email" name="email" id="email" value="" />
630                                                                                                </div>
631                                                                                                <div class="field">
632                                                                                                        <label for="department">Department</label>
633                                                                                                        <div class="select-wrapper">
634                                                                                                                <select name="department" id="department">
635                                                                                                                        <option value="">- Category -</option>
636                                                                                                                        <option value="1">Manufacturing</option>
637                                                                                                                        <option value="2">Shipping</option>
638                                                                                                                        <option value="3">Administration</option>
639                                                                                                                        <option value="4">Human Resources</option>
640                                                                                                                </select>
641                                                                                                        </div>
642                                                                                                </div>
643                                                                                                <div class="field third first">
644                                                                                                        <input type="radio" id="priority-low" name="priority" checked />
645                                                                                                        <label for="priority-low">Low Priority</label>
646                                                                                                </div>
647                                                                                                <div class="field third">
648                                                                                                        <input type="radio" id="priority-normal" name="priority" />
649                                                                                                        <label for="priority-normal">Normal Priority</label>
650                                                                                                </div>
651                                                                                                <div class="field third">
652                                                                                                        <input type="radio" id="priority-high" name="priority" />
653                                                                                                        <label for="priority-high">High Priority</label>
654                                                                                                </div>
655                                                                                                <div class="field">
656                                                                                                        <label for="message">Message</label>
657                                                                                                        <textarea name="message" id="message" rows="6"></textarea>
658                                                                                                </div>
659                                                                                                <div class="field half first">
660                                                                                                        <input type="checkbox" id="copy" name="copy" />
661                                                                                                        <label for="copy">Email me a copy of this message</label>
662                                                                                                </div>
663                                                                                                <div class="field half">
664                                                                                                        <input type="checkbox" id="human" name="human" checked />
665                                                                                                        <label for="human">I am a human and not a robot</label>
666                                                                                                </div>
667                                                                                                <ul class="actions">
668                                                                                                        <li><input type="submit" name="submit" id="submit" value="Send Message" /></li>
669                                                                                                </ul>
670                                                                                        </form>
671
672                                                                                </div>
673                                                                        </section>
674
675                                                                <!-- Table -->
676                                                                        <section>
677                                                                                <header>
678                                                                                        <h3>Table</h3>
679                                                                                </header>
680                                                                                <div class="content">
681
682                                                                                        <h4>Default</h4>
683                                                                                        <div class="table-wrapper">
684                                                                                                <table>
685                                                                                                        <thead>
686                                                                                                                <tr>
687                                                                                                                        <th>Name</th>
688                                                                                                                        <th>Description</th>
689                                                                                                                        <th>Price</th>
690                                                                                                                </tr>
691                                                                                                        </thead>
692                                                                                                        <tbody>
693                                                                                                                <tr>
694                                                                                                                        <td>Item 1</td>
695                                                                                                                        <td>Ante turpis integer aliquet porttitor.</td>
696                                                                                                                        <td>29.99</td>
697                                                                                                                </tr>
698                                                                                                                <tr>
699                                                                                                                        <td>Item 2</td>
700                                                                                                                        <td>Vis ac commodo adipiscing arcu aliquet.</td>
701                                                                                                                        <td>19.99</td>
702                                                                                                                </tr>
703                                                                                                                <tr>
704                                                                                                                        <td>Item 3</td>
705                                                                                                                        <td> Morbi faucibus arcu accumsan lorem.</td>
706                                                                                                                        <td>29.99</td>
707                                                                                                                </tr>
708                                                                                                                <tr>
709                                                                                                                        <td>Item 4</td>
710                                                                                                                        <td>Vitae integer tempus condimentum.</td>
711                                                                                                                        <td>19.99</td>
712                                                                                                                </tr>
713                                                                                                                <tr>
714                                                                                                                        <td>Item 5</td>
715                                                                                                                        <td>Ante turpis integer aliquet porttitor.</td>
716                                                                                                                        <td>29.99</td>
717                                                                                                                </tr>
718                                                                                                        </tbody>
719                                                                                                        <tfoot>
720                                                                                                                <tr>
721                                                                                                                        <td colspan="2"></td>
722                                                                                                                        <td>100.00</td>
723                                                                                                                </tr>
724                                                                                                        </tfoot>
725                                                                                                </table>
726                                                                                        </div>
727
728                                                                                        <h4>Alternate</h4>
729                                                                                        <div class="table-wrapper">
730                                                                                                <table class="alt">
731                                                                                                        <thead>
732                                                                                                                <tr>
733                                                                                                                        <th>Name</th>
734                                                                                                                        <th>Description</th>
735                                                                                                                        <th>Price</th>
736                                                                                                                </tr>
737                                                                                                        </thead>
738                                                                                                        <tbody>
739                                                                                                                <tr>
740                                                                                                                        <td>Item 1</td>
741                                                                                                                        <td>Ante turpis integer aliquet porttitor.</td>
742                                                                                                                        <td>29.99</td>
743                                                                                                                </tr>
744                                                                                                                <tr>
745                                                                                                                        <td>Item 2</td>
746                                                                                                                        <td>Vis ac commodo adipiscing arcu aliquet.</td>
747                                                                                                                        <td>19.99</td>
748                                                                                                                </tr>
749                                                                                                                <tr>
750                                                                                                                        <td>Item 3</td>
751                                                                                                                        <td> Morbi faucibus arcu accumsan lorem.</td>
752                                                                                                                        <td>29.99</td>
753                                                                                                                </tr>
754                                                                                                                <tr>
755                                                                                                                        <td>Item 4</td>
756                                                                                                                        <td>Vitae integer tempus condimentum.</td>
757                                                                                                                        <td>19.99</td>
758                                                                                                                </tr>
759                                                                                                                <tr>
760                                                                                                                        <td>Item 5</td>
761                                                                                                                        <td>Ante turpis integer aliquet porttitor.</td>
762                                                                                                                        <td>29.99</td>
763                                                                                                                </tr>
764                                                                                                        </tbody>
765                                                                                                        <tfoot>
766                                                                                                                <tr>
767                                                                                                                        <td colspan="2"></td>
768                                                                                                                        <td>100.00</td>
769                                                                                                                </tr>
770                                                                                                        </tfoot>
771                                                                                                </table>
772                                                                                        </div>
773
774                                                                                </div>
775                                                                        </section>
776
777                                                                <!-- Images -->
778                                                                        <section>
779                                                                                <header>
780                                                                                        <h3>Images</h3>
781                                                                                </header>
782                                                                                <div class="content">
783
784                                                                                        <h4>Fit</h4>
785                                                                                        <span class="image fit"><img src="#CHEMIN{images/banner.jpg}" alt="" /></span>
786
787                                                                                        <h4>Left</h4>
788                                                                                        <p><span class="image left"><img src="#CHEMIN{images/pic01.jpg}" alt="" /></span>Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis volutpat lorem ipsum dolor sit amet dolor consequat.</p>
789
790                                                                                        <h4>Right</h4>
791                                                                                        <p><span class="image right"><img src="#CHEMIN{images/pic02.jpg}" alt="" /></span>Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis volutpat lorem ipsum dolor sit amet dolor consequat.</p>
792
793                                                                                </div>
794                                                                        </section>
795
796                                                                <!-- Box -->
797                                                                        <section>
798                                                                                <header>
799                                                                                        <h3>Box</h3>
800                                                                                </header>
801                                                                                <div class="content">
802
803                                                                                        <div class="box">
804                                                                                                <p>Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.</p>
805                                                                                        </div>
806
807                                                                                </div>
808                                                                        </section>
809
810                                                        </div>
811
812
813                                                </div>
814                                        </section>
815
816                                <!-- Modifiers -->
817                                        <section class="wrapper style1 align-center" id="reference">
818                                                <div class="inner">
819                                                        <h2>Elements Reference</h2>
820                                                        <p>Oh, and this: a handy reference to all the modifiers supported by various elements.</p>
821                                                        <div class="index align-left">
822
823                                                                <!-- Banner -->
824                                                                        <section id="reference-banner">
825                                                                                <header>
826                                                                                        <h3>Banner</h3>
827                                                                                </header>
828                                                                                <div class="content">
829
830                                                                                        <h4>HTML</h4>
831<pre><code>&lt;section class="banner style<em>(N)</em> <em>(optional modifiers)</em>"&gt;
832  &lt;div class="content"&gt;
833    <em>(content)</em>
834  &lt;/div&gt;
835  &lt;div class="image"&gt;
836    &lt;img src="<em>(image URL)</em>" alt="Alternate text" /&gt;
837  &lt;/div&gt;
838&lt;/section&gt;</code></pre>
839
840                                                                                        <hr />
841
842                                                                                        <!-- style1 -->
843                                                                                                <section>
844                                                                                                        <h4><code>banner style1</code></h4>
845                                                                                                        <p>A 50/50 vertical split between content and an image. Supports these modifiers:</p>
846
847                                                                                                        <div class="table-wrapper">
848                                                                                                                <table class="alt uniform fixed">
849                                                                                                                        <tbody>
850                                                                                                                                <tr>
851                                                                                                                                        <td><code>fullscreen</code></td>
852                                                                                                                                        <td>Fills the height of the screen.</td>
853                                                                                                                                </tr>
854                                                                                                                                <tr class="alt">
855                                                                                                                                        <td colspan="2"></td>
856                                                                                                                                </tr>
857                                                                                                                                <tr>
858                                                                                                                                        <td><code>orient-left</code></td>
859                                                                                                                                        <td>Shows content on the left, image on the right.</td>
860                                                                                                                                </tr>
861                                                                                                                                <tr>
862                                                                                                                                        <td><code>orient-right</code></td>
863                                                                                                                                        <td>Shows content on the right, image on the left.</td>
864                                                                                                                                </tr>
865                                                                                                                                <tr class="alt">
866                                                                                                                                        <td colspan="2"></td>
867                                                                                                                                </tr>
868                                                                                                                                <tr>
869                                                                                                                                        <td><code>content-align-left</code></td>
870                                                                                                                                        <td>Left-aligns content.</td>
871                                                                                                                                </tr>
872                                                                                                                                <tr>
873                                                                                                                                        <td><code>content-align-center</code></td>
874                                                                                                                                        <td>Center-aligns content.</td>
875                                                                                                                                </tr>
876                                                                                                                                <tr>
877                                                                                                                                        <td><code>content-align-right</code></td>
878                                                                                                                                        <td>Right-aligns content.</td>
879                                                                                                                                </tr>
880                                                                                                                                <tr class="alt">
881                                                                                                                                        <td colspan="2"></td>
882                                                                                                                                </tr>
883                                                                                                                                <tr>
884                                                                                                                                        <td><code>image-position-left</code></td>
885                                                                                                                                        <td>Left-positions image.</td>
886                                                                                                                                </tr>
887                                                                                                                                <tr>
888                                                                                                                                        <td><code>image-position-center</code></td>
889                                                                                                                                        <td>Center-positions image.</td>
890                                                                                                                                </tr>
891                                                                                                                                <tr>
892                                                                                                                                        <td><code>image-position-right</code></td>
893                                                                                                                                        <td>Right-positions image.</td>
894                                                                                                                                </tr>
895                                                                                                                                <tr class="alt">
896                                                                                                                                        <td colspan="2"></td>
897                                                                                                                                </tr>
898                                                                                                                                <tr>
899                                                                                                                                        <td><code>onload-content-fade-up</code></td>
900                                                                                                                                        <td>Fades content up on page load.</td>
901                                                                                                                                </tr>
902                                                                                                                                <tr>
903                                                                                                                                        <td><code>onload-content-fade-down</code></td>
904                                                                                                                                        <td>Fades content down on page load.</td>
905                                                                                                                                </tr>
906                                                                                                                                <tr>
907                                                                                                                                        <td><code>onload-content-fade-left</code></td>
908                                                                                                                                        <td>Fades content left on page load.</td>
909                                                                                                                                </tr>
910                                                                                                                                <tr>
911                                                                                                                                        <td><code>onload-content-fade-right</code></td>
912                                                                                                                                        <td>Fades content right on page load.</td>
913                                                                                                                                </tr>
914                                                                                                                                <tr>
915                                                                                                                                        <td><code>onload-content-fade-in</code></td>
916                                                                                                                                        <td>Fades in content on page load.</td>
917                                                                                                                                </tr>
918                                                                                                                                <tr>
919                                                                                                                                        <td><code>onload-image-fade-in</code></td>
920                                                                                                                                        <td>Fades in image on page load.</td>
921                                                                                                                                </tr>
922                                                                                                                                <tr class="alt">
923                                                                                                                                        <td colspan="2"></td>
924                                                                                                                                </tr>
925                                                                                                                                <tr>
926                                                                                                                                        <td><code>onscroll-content-fade-up</code></td>
927                                                                                                                                        <td>Fades content up on page scroll.</td>
928                                                                                                                                </tr>
929                                                                                                                                <tr>
930                                                                                                                                        <td><code>onscroll-content-fade-down</code></td>
931                                                                                                                                        <td>Fades content down on page scroll.</td>
932                                                                                                                                </tr>
933                                                                                                                                <tr>
934                                                                                                                                        <td><code>onscroll-content-fade-left</code></td>
935                                                                                                                                        <td>Fades content left on page scroll.</td>
936                                                                                                                                </tr>
937                                                                                                                                <tr>
938                                                                                                                                        <td><code>onscroll-content-fade-right</code></td>
939                                                                                                                                        <td>Fades content right on page scroll.</td>
940                                                                                                                                </tr>
941                                                                                                                                <tr>
942                                                                                                                                        <td><code>onscroll-content-fade-in</code></td>
943                                                                                                                                        <td>Fades in content on page scroll.</td>
944                                                                                                                                </tr>
945                                                                                                                                <tr>
946                                                                                                                                        <td><code>onscroll-image-fade-in</code></td>
947                                                                                                                                        <td>Fades in image on page scroll.</td>
948                                                                                                                                </tr>
949                                                                                                                                <tr class="alt">
950                                                                                                                                        <td colspan="2"></td>
951                                                                                                                                </tr>
952                                                                                                                                <tr>
953                                                                                                                                        <td><code>invert</code></td>
954                                                                                                                                        <td>Inverts the color scheme.</td>
955                                                                                                                                </tr>
956                                                                                                                                <tr>
957                                                                                                                                        <td><code>color1</code></td>
958                                                                                                                                        <td>Uses background color #1.</td>
959                                                                                                                                </tr>
960                                                                                                                                <tr>
961                                                                                                                                        <td><code>color2</code></td>
962                                                                                                                                        <td>Uses background color #2.</td>
963                                                                                                                                </tr>
964                                                                                                                                <tr>
965                                                                                                                                        <td><code>color3</code></td>
966                                                                                                                                        <td>Uses background color #3.</td>
967                                                                                                                                </tr>
968                                                                                                                                <tr>
969                                                                                                                                        <td><code>color4</code></td>
970                                                                                                                                        <td>Uses background color #4.</td>
971                                                                                                                                </tr>
972                                                                                                                                <tr>
973                                                                                                                                        <td><code>color5</code></td>
974                                                                                                                                        <td>Uses background color #5.</td>
975                                                                                                                                </tr>
976                                                                                                                                <tr>
977                                                                                                                                        <td><code>color6</code></td>
978                                                                                                                                        <td>Uses background color #6.</td>
979                                                                                                                                </tr>
980                                                                                                                                <tr>
981                                                                                                                                        <td><code>color7</code></td>
982                                                                                                                                        <td>Uses background color #7.</td>
983                                                                                                                                </tr>
984                                                                                                                        </tbody>
985                                                                                                                </table>
986                                                                                                        </div>
987                                                                                                </section>
988
989                                                                                        <hr />
990
991                                                                                        <!-- style2 -->
992                                                                                                <section>
993                                                                                                        <h4><code>banner style2</code></h4>
994                                                                                                        <p>Boxed-in content set against an image background, and attached to either side of the screen or centered. Supports these modifiers:</p>
995
996                                                                                                        <div class="table-wrapper">
997                                                                                                                <table class="alt uniform fixed">
998                                                                                                                        <tbody>
999                                                                                                                                <tr>
1000                                                                                                                                        <td><code>fullscreen</code></td>
1001                                                                                                                                        <td>Fills the height of the screen.</td>
1002                                                                                                                                </tr>
1003                                                                                                                                <tr class="alt">
1004                                                                                                                                        <td colspan="2"></td>
1005                                                                                                                                </tr>
1006                                                                                                                                <tr>
1007                                                                                                                                        <td><code>orient-left</code></td>
1008                                                                                                                                        <td>Attaches the content box to the left edge of the screen.</td>
1009                                                                                                                                </tr>
1010                                                                                                                                <tr>
1011                                                                                                                                        <td><code>orient-center</code></td>
1012                                                                                                                                        <td>Places the content box in the center of the screen.</td>
1013                                                                                                                                </tr>
1014                                                                                                                                <tr>
1015                                                                                                                                        <td><code>orient-right</code></td>
1016                                                                                                                                        <td>Attaches the content box to the right edge of the screen.</td>
1017                                                                                                                                </tr>
1018                                                                                                                                <tr class="alt">
1019                                                                                                                                        <td colspan="2"></td>
1020                                                                                                                                </tr>
1021                                                                                                                                <tr>
1022                                                                                                                                        <td><code>content-align-left</code></td>
1023                                                                                                                                        <td>Left-aligns content.</td>
1024                                                                                                                                </tr>
1025                                                                                                                                <tr>
1026                                                                                                                                        <td><code>content-align-center</code></td>
1027                                                                                                                                        <td>Center-aligns content.</td>
1028                                                                                                                                </tr>
1029                                                                                                                                <tr>
1030                                                                                                                                        <td><code>content-align-right</code></td>
1031                                                                                                                                        <td>Right-aligns content.</td>
1032                                                                                                                                </tr>
1033                                                                                                                                <tr class="alt">
1034                                                                                                                                        <td colspan="2"></td>
1035                                                                                                                                </tr>
1036                                                                                                                                <tr>
1037                                                                                                                                        <td><code>image-position-left</code></td>
1038                                                                                                                                        <td>Left-positions image.</td>
1039                                                                                                                                </tr>
1040                                                                                                                                <tr>
1041                                                                                                                                        <td><code>image-position-center</code></td>
1042                                                                                                                                        <td>Center-positions image.</td>
1043                                                                                                                                </tr>
1044                                                                                                                                <tr>
1045                                                                                                                                        <td><code>image-position-right</code></td>
1046                                                                                                                                        <td>Right-positions image.</td>
1047                                                                                                                                </tr>
1048                                                                                                                                <tr class="alt">
1049                                                                                                                                        <td colspan="2"></td>
1050                                                                                                                                </tr>
1051                                                                                                                                <tr>
1052                                                                                                                                        <td><code>onload-content-fade-up</code></td>
1053                                                                                                                                        <td>Fades content up on page load.</td>
1054                                                                                                                                </tr>
1055                                                                                                                                <tr>
1056                                                                                                                                        <td><code>onload-content-fade-down</code></td>
1057                                                                                                                                        <td>Fades content down on page load.</td>
1058                                                                                                                                </tr>
1059                                                                                                                                <tr>
1060                                                                                                                                        <td><code>onload-content-fade-left</code></td>
1061                                                                                                                                        <td>Fades content left on page load.</td>
1062                                                                                                                                </tr>
1063                                                                                                                                <tr>
1064                                                                                                                                        <td><code>onload-content-fade-right</code></td>
1065                                                                                                                                        <td>Fades content right on page load.</td>
1066                                                                                                                                </tr>
1067                                                                                                                                <tr>
1068                                                                                                                                        <td><code>onload-content-fade-in</code></td>
1069                                                                                                                                        <td>Fades in content on page load.</td>
1070                                                                                                                                </tr>
1071                                                                                                                                <tr>
1072                                                                                                                                        <td><code>onload-image-fade-in</code></td>
1073                                                                                                                                        <td>Fades in image on page load.</td>
1074                                                                                                                                </tr>
1075                                                                                                                                <tr class="alt">
1076                                                                                                                                        <td colspan="2"></td>
1077                                                                                                                                </tr>
1078                                                                                                                                <tr>
1079                                                                                                                                        <td><code>onscroll-content-fade-up</code></td>
1080                                                                                                                                        <td>Fades content up on page scroll.</td>
1081                                                                                                                                </tr>
1082                                                                                                                                <tr>
1083                                                                                                                                        <td><code>onscroll-content-fade-down</code></td>
1084                                                                                                                                        <td>Fades content down on page scroll.</td>
1085                                                                                                                                </tr>
1086                                                                                                                                <tr>
1087                                                                                                                                        <td><code>onscroll-content-fade-left</code></td>
1088                                                                                                                                        <td>Fades content left on page scroll.</td>
1089                                                                                                                                </tr>
1090                                                                                                                                <tr>
1091                                                                                                                                        <td><code>onscroll-content-fade-right</code></td>
1092                                                                                                                                        <td>Fades content right on page scroll.</td>
1093                                                                                                                                </tr>
1094                                                                                                                                <tr>
1095                                                                                                                                        <td><code>onscroll-content-fade-in</code></td>
1096                                                                                                                                        <td>Fades in content on page scroll.</td>
1097                                                                                                                                </tr>
1098                                                                                                                                <tr>
1099                                                                                                                                        <td><code>onscroll-image-fade-in</code></td>
1100                                                                                                                                        <td>Fades in image on page scroll.</td>
1101                                                                                                                                </tr>
1102                                                                                                                                <tr class="alt">
1103                                                                                                                                        <td colspan="2"></td>
1104                                                                                                                                </tr>
1105                                                                                                                                <tr>
1106                                                                                                                                        <td><code>invert</code></td>
1107                                                                                                                                        <td>Inverts the color scheme.</td>
1108                                                                                                                                </tr>
1109                                                                                                                                <tr>
1110                                                                                                                                        <td><code>color1</code></td>
1111                                                                                                                                        <td>Uses background color #1.</td>
1112                                                                                                                                </tr>
1113                                                                                                                                <tr>
1114                                                                                                                                        <td><code>color2</code></td>
1115                                                                                                                                        <td>Uses background color #2.</td>
1116                                                                                                                                </tr>
1117                                                                                                                                <tr>
1118                                                                                                                                        <td><code>color3</code></td>
1119                                                                                                                                        <td>Uses background color #3.</td>
1120                                                                                                                                </tr>
1121                                                                                                                                <tr>
1122                                                                                                                                        <td><code>color4</code></td>
1123                                                                                                                                        <td>Uses background color #4.</td>
1124                                                                                                                                </tr>
1125                                                                                                                                <tr>
1126                                                                                                                                        <td><code>color5</code></td>
1127                                                                                                                                        <td>Uses background color #5.</td>
1128                                                                                                                                </tr>
1129                                                                                                                                <tr>
1130                                                                                                                                        <td><code>color6</code></td>
1131                                                                                                                                        <td>Uses background color #6.</td>
1132                                                                                                                                </tr>
1133                                                                                                                                <tr>
1134                                                                                                                                        <td><code>color7</code></td>
1135                                                                                                                                        <td>Uses background color #7.</td>
1136                                                                                                                                </tr>
1137                                                                                                                        </tbody>
1138                                                                                                                </table>
1139                                                                                                        </div>
1140                                                                                                </section>
1141
1142                                                                                        <hr />
1143
1144                                                                                        <!-- style3 -->
1145                                                                                                <section>
1146                                                                                                        <h4><code>banner style3</code></h4>
1147                                                                                                        <p>An image within a circular frame placed to the side of content. Supports these modifiers:</p>
1148
1149                                                                                                        <div class="table-wrapper">
1150                                                                                                                <table class="alt uniform fixed">
1151                                                                                                                        <tbody>
1152                                                                                                                                <tr>
1153                                                                                                                                        <td><code>fullscreen</code></td>
1154                                                                                                                                        <td>Fills the height of the screen.</td>
1155                                                                                                                                </tr>
1156                                                                                                                                <tr class="alt">
1157                                                                                                                                        <td colspan="2"></td>
1158                                                                                                                                </tr>
1159                                                                                                                                <tr>
1160                                                                                                                                        <td><code>orient-left</code></td>
1161                                                                                                                                        <td>Places the content on the left, image on the right.</td>
1162                                                                                                                                </tr>
1163                                                                                                                                <tr>
1164                                                                                                                                        <td><code>orient-right</code></td>
1165                                                                                                                                        <td>Places the content on the right, image on the left.</td>
1166                                                                                                                                </tr>
1167                                                                                                                                <tr class="alt">
1168                                                                                                                                        <td colspan="2"></td>
1169                                                                                                                                </tr>
1170                                                                                                                                <tr>
1171                                                                                                                                        <td><code>content-align-left</code></td>
1172                                                                                                                                        <td>Left-aligns content.</td>
1173                                                                                                                                </tr>
1174                                                                                                                                <tr>
1175                                                                                                                                        <td><code>content-align-center</code></td>
1176                                                                                                                                        <td>Center-aligns content.</td>
1177                                                                                                                                </tr>
1178                                                                                                                                <tr>
1179                                                                                                                                        <td><code>content-align-right</code></td>
1180                                                                                                                                        <td>Right-aligns content.</td>
1181                                                                                                                                </tr>
1182                                                                                                                                <tr class="alt">
1183                                                                                                                                        <td colspan="2"></td>
1184                                                                                                                                </tr>
1185                                                                                                                                <tr>
1186                                                                                                                                        <td><code>image-position-left</code></td>
1187                                                                                                                                        <td>Left-positions image.</td>
1188                                                                                                                                </tr>
1189                                                                                                                                <tr>
1190                                                                                                                                        <td><code>image-position-center</code></td>
1191                                                                                                                                        <td>Center-positions image.</td>
1192                                                                                                                                </tr>
1193                                                                                                                                <tr>
1194                                                                                                                                        <td><code>image-position-right</code></td>
1195                                                                                                                                        <td>Right-positions image.</td>
1196                                                                                                                                </tr>
1197                                                                                                                                <tr class="alt">
1198                                                                                                                                        <td colspan="2"></td>
1199                                                                                                                                </tr>
1200                                                                                                                                <tr>
1201                                                                                                                                        <td><code>onload-content-fade-up</code></td>
1202                                                                                                                                        <td>Fades content up on page load.</td>
1203                                                                                                                                </tr>
1204                                                                                                                                <tr>
1205                                                                                                                                        <td><code>onload-content-fade-down</code></td>
1206                                                                                                                                        <td>Fades content down on page load.</td>
1207                                                                                                                                </tr>
1208                                                                                                                                <tr>
1209                                                                                                                                        <td><code>onload-content-fade-left</code></td>
1210                                                                                                                                        <td>Fades content left on page load.</td>
1211                                                                                                                                </tr>
1212                                                                                                                                <tr>
1213                                                                                                                                        <td><code>onload-content-fade-right</code></td>
1214                                                                                                                                        <td>Fades content right on page load.</td>
1215                                                                                                                                </tr>
1216                                                                                                                                <tr>
1217                                                                                                                                        <td><code>onload-content-fade-in</code></td>
1218                                                                                                                                        <td>Fades in content on page load.</td>
1219                                                                                                                                </tr>
1220                                                                                                                                <tr>
1221                                                                                                                                        <td><code>onload-image-fade-up</code></td>
1222                                                                                                                                        <td>Fades image up on page load.</td>
1223                                                                                                                                </tr>
1224                                                                                                                                <tr>
1225                                                                                                                                        <td><code>onload-image-fade-down</code></td>
1226                                                                                                                                        <td>Fades image down on page load.</td>
1227                                                                                                                                </tr>
1228                                                                                                                                <tr>
1229                                                                                                                                        <td><code>onload-image-fade-left</code></td>
1230                                                                                                                                        <td>Fades image left on page load.</td>
1231                                                                                                                                </tr>
1232                                                                                                                                <tr>
1233                                                                                                                                        <td><code>onload-image-fade-right</code></td>
1234                                                                                                                                        <td>Fades image right on page load.</td>
1235                                                                                                                                </tr>
1236                                                                                                                                <tr>
1237                                                                                                                                        <td><code>onload-image-fade-in</code></td>
1238                                                                                                                                        <td>Fades in image on page load.</td>
1239                                                                                                                                </tr>
1240                                                                                                                                <tr class="alt">
1241                                                                                                                                        <td colspan="2"></td>
1242                                                                                                                                </tr>
1243                                                                                                                                <tr>
1244                                                                                                                                        <td><code>onscroll-content-fade-up</code></td>
1245                                                                                                                                        <td>Fades content up on page scroll.</td>
1246                                                                                                                                </tr>
1247                                                                                                                                <tr>
1248                                                                                                                                        <td><code>onscroll-content-fade-down</code></td>
1249                                                                                                                                        <td>Fades content down on page scroll.</td>
1250                                                                                                                                </tr>
1251                                                                                                                                <tr>
1252                                                                                                                                        <td><code>onscroll-content-fade-left</code></td>
1253                                                                                                                                        <td>Fades content left on page scroll.</td>
1254                                                                                                                                </tr>
1255                                                                                                                                <tr>
1256                                                                                                                                        <td><code>onscroll-content-fade-right</code></td>
1257                                                                                                                                        <td>Fades content right on page scroll.</td>
1258                                                                                                                                </tr>
1259                                                                                                                                <tr>
1260                                                                                                                                        <td><code>onscroll-content-fade-in</code></td>
1261                                                                                                                                        <td>Fades in content on page scroll.</td>
1262                                                                                                                                </tr>
1263                                                                                                                                <tr>
1264                                                                                                                                        <td><code>onscroll-image-fade-up</code></td>
1265                                                                                                                                        <td>Fades image up on page scroll.</td>
1266                                                                                                                                </tr>
1267                                                                                                                                <tr>
1268                                                                                                                                        <td><code>onscroll-image-fade-down</code></td>
1269                                                                                                                                        <td>Fades image down on page scroll.</td>
1270                                                                                                                                </tr>
1271                                                                                                                                <tr>
1272                                                                                                                                        <td><code>onscroll-image-fade-left</code></td>
1273                                                                                                                                        <td>Fades image left on page scroll.</td>
1274                                                                                                                                </tr>
1275                                                                                                                                <tr>
1276                                                                                                                                        <td><code>onscroll-image-fade-right</code></td>
1277                                                                                                                                        <td>Fades image right on page scroll.</td>
1278                                                                                                                                </tr>
1279                                                                                                                                <tr>
1280                                                                                                                                        <td><code>onscroll-image-fade-in</code></td>
1281                                                                                                                                        <td>Fades in image on page scroll.</td>
1282                                                                                                                                </tr>
1283                                                                                                                                <tr class="alt">
1284                                                                                                                                        <td colspan="2"></td>
1285                                                                                                                                </tr>
1286                                                                                                                                <tr>
1287                                                                                                                                        <td><code>invert</code></td>
1288                                                                                                                                        <td>Inverts the color scheme.</td>
1289                                                                                                                                </tr>
1290                                                                                                                                <tr>
1291                                                                                                                                        <td><code>color1</code></td>
1292                                                                                                                                        <td>Uses background color #1.</td>
1293                                                                                                                                </tr>
1294                                                                                                                                <tr>
1295                                                                                                                                        <td><code>color2</code></td>
1296                                                                                                                                        <td>Uses background color #2.</td>
1297                                                                                                                                </tr>
1298                                                                                                                                <tr>
1299                                                                                                                                        <td><code>color3</code></td>
1300                                                                                                                                        <td>Uses background color #3.</td>
1301                                                                                                                                </tr>
1302                                                                                                                                <tr>
1303                                                                                                                                        <td><code>color4</code></td>
1304                                                                                                                                        <td>Uses background color #4.</td>
1305                                                                                                                                </tr>
1306                                                                                                                                <tr>
1307                                                                                                                                        <td><code>color5</code></td>
1308                                                                                                                                        <td>Uses background color #5.</td>
1309                                                                                                                                </tr>
1310                                                                                                                                <tr>
1311                                                                                                                                        <td><code>color6</code></td>
1312                                                                                                                                        <td>Uses background color #6.</td>
1313                                                                                                                                </tr>
1314                                                                                                                                <tr>
1315                                                                                                                                        <td><code>color7</code></td>
1316                                                                                                                                        <td>Uses background color #7.</td>
1317                                                                                                                                </tr>
1318                                                                                                                        </tbody>
1319                                                                                                                </table>
1320                                                                                                        </div>
1321                                                                                                </section>
1322
1323                                                                                        <hr />
1324
1325                                                                                        <!-- style4 -->
1326                                                                                                <section>
1327                                                                                                        <h4><code>banner style4</code></h4>
1328                                                                                                        <p>An image within a phone-shaped frame placed to the side of content. Supports these modifiers:</p>
1329
1330                                                                                                        <div class="table-wrapper">
1331                                                                                                                <table class="alt uniform fixed">
1332                                                                                                                        <tbody>
1333                                                                                                                                <tr>
1334                                                                                                                                        <td><code>fullscreen</code></td>
1335                                                                                                                                        <td>Fills the height of the screen.</td>
1336                                                                                                                                </tr>
1337                                                                                                                                <tr class="alt">
1338                                                                                                                                        <td colspan="2"></td>
1339                                                                                                                                </tr>
1340                                                                                                                                <tr>
1341                                                                                                                                        <td><code>iphone</code></td>
1342                                                                                                                                        <td>Uses iPhone styling for image frame.</td>
1343                                                                                                                                </tr>
1344                                                                                                                                <tr>
1345                                                                                                                                        <td><code>android</code></td>
1346                                                                                                                                        <td>Uses Android styling for image frame.</td>
1347                                                                                                                                </tr>
1348                                                                                                                                <tr class="alt">
1349                                                                                                                                        <td colspan="2"></td>
1350                                                                                                                                </tr>
1351                                                                                                                                <tr>
1352                                                                                                                                        <td><code>orient-left</code></td>
1353                                                                                                                                        <td>Places the content on the left, image on the right.</td>
1354                                                                                                                                </tr>
1355                                                                                                                                <tr>
1356                                                                                                                                        <td><code>orient-right</code></td>
1357                                                                                                                                        <td>Places the content on the right, image on the left.</td>
1358                                                                                                                                </tr>
1359                                                                                                                                <tr class="alt">
1360                                                                                                                                        <td colspan="2"></td>
1361                                                                                                                                </tr>
1362                                                                                                                                <tr>
1363                                                                                                                                        <td><code>content-align-left</code></td>
1364                                                                                                                                        <td>Left-aligns content.</td>
1365                                                                                                                                </tr>
1366                                                                                                                                <tr>
1367                                                                                                                                        <td><code>content-align-center</code></td>
1368                                                                                                                                        <td>Center-aligns content.</td>
1369                                                                                                                                </tr>
1370                                                                                                                                <tr>
1371                                                                                                                                        <td><code>content-align-right</code></td>
1372                                                                                                                                        <td>Right-aligns content.</td>
1373                                                                                                                                </tr>
1374                                                                                                                                <tr class="alt">
1375                                                                                                                                        <td colspan="2"></td>
1376                                                                                                                                </tr>
1377                                                                                                                                <tr>
1378                                                                                                                                        <td><code>image-position-left</code></td>
1379                                                                                                                                        <td>Left-positions image.</td>
1380                                                                                                                                </tr>
1381                                                                                                                                <tr>
1382                                                                                                                                        <td><code>image-position-center</code></td>
1383                                                                                                                                        <td>Center-positions image.</td>
1384                                                                                                                                </tr>
1385                                                                                                                                <tr>
1386                                                                                                                                        <td><code>image-position-right</code></td>
1387                                                                                                                                        <td>Right-positions image.</td>
1388                                                                                                                                </tr>
1389                                                                                                                                <tr class="alt">
1390                                                                                                                                        <td colspan="2"></td>
1391                                                                                                                                </tr>
1392                                                                                                                                <tr>
1393                                                                                                                                        <td><code>onload-content-fade-up</code></td>
1394                                                                                                                                        <td>Fades content up on page load.</td>
1395                                                                                                                                </tr>
1396                                                                                                                                <tr>
1397                                                                                                                                        <td><code>onload-content-fade-down</code></td>
1398                                                                                                                                        <td>Fades content down on page load.</td>
1399                                                                                                                                </tr>
1400                                                                                                                                <tr>
1401                                                                                                                                        <td><code>onload-content-fade-left</code></td>
1402                                                                                                                                        <td>Fades content left on page load.</td>
1403                                                                                                                                </tr>
1404                                                                                                                                <tr>
1405                                                                                                                                        <td><code>onload-content-fade-right</code></td>
1406                                                                                                                                        <td>Fades content right on page load.</td>
1407                                                                                                                                </tr>
1408                                                                                                                                <tr>
1409                                                                                                                                        <td><code>onload-content-fade-in</code></td>
1410                                                                                                                                        <td>Fades in content on page load.</td>
1411                                                                                                                                </tr>
1412                                                                                                                                <tr>
1413                                                                                                                                        <td><code>onload-image-fade-up</code></td>
1414                                                                                                                                        <td>Fades image up on page load.</td>
1415                                                                                                                                </tr>
1416                                                                                                                                <tr>
1417                                                                                                                                        <td><code>onload-image-fade-down</code></td>
1418                                                                                                                                        <td>Fades image down on page load.</td>
1419                                                                                                                                </tr>
1420                                                                                                                                <tr>
1421                                                                                                                                        <td><code>onload-image-fade-left</code></td>
1422                                                                                                                                        <td>Fades image left on page load.</td>
1423                                                                                                                                </tr>
1424                                                                                                                                <tr>
1425                                                                                                                                        <td><code>onload-image-fade-right</code></td>
1426                                                                                                                                        <td>Fades image right on page load.</td>
1427                                                                                                                                </tr>
1428                                                                                                                                <tr>
1429                                                                                                                                        <td><code>onload-image-fade-in</code></td>
1430                                                                                                                                        <td>Fades in image on page load.</td>
1431                                                                                                                                </tr>
1432                                                                                                                                <tr class="alt">
1433                                                                                                                                        <td colspan="2"></td>
1434                                                                                                                                </tr>
1435                                                                                                                                <tr>
1436                                                                                                                                        <td><code>onscroll-content-fade-up</code></td>
1437                                                                                                                                        <td>Fades content up on page scroll.</td>
1438                                                                                                                                </tr>
1439                                                                                                                                <tr>
1440                                                                                                                                        <td><code>onscroll-content-fade-down</code></td>
1441                                                                                                                                        <td>Fades content down on page scroll.</td>
1442                                                                                                                                </tr>
1443                                                                                                                                <tr>
1444                                                                                                                                        <td><code>onscroll-content-fade-left</code></td>
1445                                                                                                                                        <td>Fades content left on page scroll.</td>
1446                                                                                                                                </tr>
1447                                                                                                                                <tr>
1448                                                                                                                                        <td><code>onscroll-content-fade-right</code></td>
1449                                                                                                                                        <td>Fades content right on page scroll.</td>
1450                                                                                                                                </tr>
1451                                                                                                                                <tr>
1452                                                                                                                                        <td><code>onscroll-content-fade-in</code></td>
1453                                                                                                                                        <td>Fades in content on page scroll.</td>
1454                                                                                                                                </tr>
1455                                                                                                                                <tr>
1456                                                                                                                                        <td><code>onscroll-image-fade-up</code></td>
1457                                                                                                                                        <td>Fades image up on page scroll.</td>
1458                                                                                                                                </tr>
1459                                                                                                                                <tr>
1460                                                                                                                                        <td><code>onscroll-image-fade-down</code></td>
1461                                                                                                                                        <td>Fades image down on page scroll.</td>
1462                                                                                                                                </tr>
1463                                                                                                                                <tr>
1464                                                                                                                                        <td><code>onscroll-image-fade-left</code></td>
1465                                                                                                                                        <td>Fades image left on page scroll.</td>
1466                                                                                                                                </tr>
1467                                                                                                                                <tr>
1468                                                                                                                                        <td><code>onscroll-image-fade-right</code></td>
1469                                                                                                                                        <td>Fades image right on page scroll.</td>
1470                                                                                                                                </tr>
1471                                                                                                                                <tr>
1472                                                                                                                                        <td><code>onscroll-image-fade-in</code></td>
1473                                                                                                                                        <td>Fades in image on page scroll.</td>
1474                                                                                                                                </tr>
1475                                                                                                                                <tr class="alt">
1476                                                                                                                                        <td colspan="2"></td>
1477                                                                                                                                </tr>
1478                                                                                                                                <tr>
1479                                                                                                                                        <td><code>invert</code></td>
1480                                                                                                                                        <td>Inverts the color scheme.</td>
1481                                                                                                                                </tr>
1482                                                                                                                                <tr>
1483                                                                                                                                        <td><code>color1</code></td>
1484                                                                                                                                        <td>Uses background color #1.</td>
1485                                                                                                                                </tr>
1486                                                                                                                                <tr>
1487                                                                                                                                        <td><code>color2</code></td>
1488                                                                                                                                        <td>Uses background color #2.</td>
1489                                                                                                                                </tr>
1490                                                                                                                                <tr>
1491                                                                                                                                        <td><code>color3</code></td>
1492                                                                                                                                        <td>Uses background color #3.</td>
1493                                                                                                                                </tr>
1494                                                                                                                                <tr>
1495                                                                                                                                        <td><code>color4</code></td>
1496                                                                                                                                        <td>Uses background color #4.</td>
1497                                                                                                                                </tr>
1498                                                                                                                                <tr>
1499                                                                                                                                        <td><code>color5</code></td>
1500                                                                                                                                        <td>Uses background color #5.</td>
1501                                                                                                                                </tr>
1502                                                                                                                                <tr>
1503                                                                                                                                        <td><code>color6</code></td>
1504                                                                                                                                        <td>Uses background color #6.</td>
1505                                                                                                                                </tr>
1506                                                                                                                                <tr>
1507                                                                                                                                        <td><code>color7</code></td>
1508                                                                                                                                        <td>Uses background color #7.</td>
1509                                                                                                                                </tr>
1510                                                                                                                        </tbody>
1511                                                                                                                </table>
1512                                                                                                        </div>
1513                                                                                                </section>
1514
1515                                                                                        <hr />
1516
1517                                                                                        <!-- style5 -->
1518                                                                                                <section>
1519                                                                                                        <h4><code>banner style5</code></h4>
1520                                                                                                        <p>Content set directly against an image background. Supports these modifiers:</p>
1521
1522                                                                                                        <div class="table-wrapper">
1523                                                                                                                <table class="alt uniform fixed">
1524                                                                                                                        <tbody>
1525                                                                                                                                <tr>
1526                                                                                                                                        <td><code>fullscreen</code></td>
1527                                                                                                                                        <td>Fills the height of the screen.</td>
1528                                                                                                                                </tr>
1529                                                                                                                                <tr class="alt">
1530                                                                                                                                        <td colspan="2"></td>
1531                                                                                                                                </tr>
1532                                                                                                                                <tr>
1533                                                                                                                                        <td><code>content-align-left</code></td>
1534                                                                                                                                        <td>Left-aligns content.</td>
1535                                                                                                                                </tr>
1536                                                                                                                                <tr>
1537                                                                                                                                        <td><code>content-align-center</code></td>
1538                                                                                                                                        <td>Center-aligns content.</td>
1539                                                                                                                                </tr>
1540                                                                                                                                <tr>
1541                                                                                                                                        <td><code>content-align-right</code></td>
1542                                                                                                                                        <td>Right-aligns content.</td>
1543                                                                                                                                </tr>
1544                                                                                                                                <tr class="alt">
1545                                                                                                                                        <td colspan="2"></td>
1546                                                                                                                                </tr>
1547                                                                                                                                <tr>
1548                                                                                                                                        <td><code>image-position-left</code></td>
1549                                                                                                                                        <td>Left-positions image.</td>
1550                                                                                                                                </tr>
1551                                                                                                                                <tr>
1552                                                                                                                                        <td><code>image-position-center</code></td>
1553                                                                                                                                        <td>Center-positions image.</td>
1554                                                                                                                                </tr>
1555                                                                                                                                <tr>
1556                                                                                                                                        <td><code>image-position-right</code></td>
1557                                                                                                                                        <td>Right-positions image.</td>
1558                                                                                                                                </tr>
1559                                                                                                                                <tr class="alt">
1560                                                                                                                                        <td colspan="2"></td>
1561                                                                                                                                </tr>
1562                                                                                                                                <tr>
1563                                                                                                                                        <td><code>onload-content-fade-up</code></td>
1564                                                                                                                                        <td>Fades content up on page load.</td>
1565                                                                                                                                </tr>
1566                                                                                                                                <tr>
1567                                                                                                                                        <td><code>onload-content-fade-down</code></td>
1568                                                                                                                                        <td>Fades content down on page load.</td>
1569                                                                                                                                </tr>
1570                                                                                                                                <tr>
1571                                                                                                                                        <td><code>onload-content-fade-left</code></td>
1572                                                                                                                                        <td>Fades content left on page load.</td>
1573                                                                                                                                </tr>
1574                                                                                                                                <tr>
1575                                                                                                                                        <td><code>onload-content-fade-right</code></td>
1576                                                                                                                                        <td>Fades content right on page load.</td>
1577                                                                                                                                </tr>
1578                                                                                                                                <tr>
1579                                                                                                                                        <td><code>onload-content-fade-in</code></td>
1580                                                                                                                                        <td>Fades in content on page load.</td>
1581                                                                                                                                </tr>
1582                                                                                                                                <tr>
1583                                                                                                                                        <td><code>onload-image-fade-in</code></td>
1584                                                                                                                                        <td>Fades in image on page load.</td>
1585                                                                                                                                </tr>
1586                                                                                                                                <tr class="alt">
1587                                                                                                                                        <td colspan="2"></td>
1588                                                                                                                                </tr>
1589                                                                                                                                <tr>
1590                                                                                                                                        <td><code>onscroll-content-fade-up</code></td>
1591                                                                                                                                        <td>Fades content up on page scroll.</td>
1592                                                                                                                                </tr>
1593                                                                                                                                <tr>
1594                                                                                                                                        <td><code>onscroll-content-fade-down</code></td>
1595                                                                                                                                        <td>Fades content down on page scroll.</td>
1596                                                                                                                                </tr>
1597                                                                                                                                <tr>
1598                                                                                                                                        <td><code>onscroll-content-fade-left</code></td>
1599                                                                                                                                        <td>Fades content left on page scroll.</td>
1600                                                                                                                                </tr>
1601                                                                                                                                <tr>
1602                                                                                                                                        <td><code>onscroll-content-fade-right</code></td>
1603                                                                                                                                        <td>Fades content right on page scroll.</td>
1604                                                                                                                                </tr>
1605                                                                                                                                <tr>
1606                                                                                                                                        <td><code>onscroll-content-fade-in</code></td>
1607                                                                                                                                        <td>Fades in content on page scroll.</td>
1608                                                                                                                                </tr>
1609                                                                                                                                <tr>
1610                                                                                                                                        <td><code>onscroll-image-fade-in</code></td>
1611                                                                                                                                        <td>Fades in image on page scroll.</td>
1612                                                                                                                                </tr>
1613                                                                                                                                <tr class="alt">
1614                                                                                                                                        <td colspan="2"></td>
1615                                                                                                                                </tr>
1616                                                                                                                                <tr>
1617                                                                                                                                        <td><code>invert</code></td>
1618                                                                                                                                        <td>Inverts the color scheme.</td>
1619                                                                                                                                </tr>
1620                                                                                                                                <tr>
1621                                                                                                                                        <td><code>color1</code></td>
1622                                                                                                                                        <td>Uses background color #1.</td>
1623                                                                                                                                </tr>
1624                                                                                                                                <tr>
1625                                                                                                                                        <td><code>color2</code></td>
1626                                                                                                                                        <td>Uses background color #2.</td>
1627                                                                                                                                </tr>
1628                                                                                                                                <tr>
1629                                                                                                                                        <td><code>color3</code></td>
1630                                                                                                                                        <td>Uses background color #3.</td>
1631                                                                                                                                </tr>
1632                                                                                                                                <tr>
1633                                                                                                                                        <td><code>color4</code></td>
1634                                                                                                                                        <td>Uses background color #4.</td>
1635                                                                                                                                </tr>
1636                                                                                                                                <tr>
1637                                                                                                                                        <td><code>color5</code></td>
1638                                                                                                                                        <td>Uses background color #5.</td>
1639                                                                                                                                </tr>
1640                                                                                                                                <tr>
1641                                                                                                                                        <td><code>color6</code></td>
1642                                                                                                                                        <td>Uses background color #6.</td>
1643                                                                                                                                </tr>
1644                                                                                                                                <tr>
1645                                                                                                                                        <td><code>color7</code></td>
1646                                                                                                                                        <td>Uses background color #7.</td>
1647                                                                                                                                </tr>
1648                                                                                                                        </tbody>
1649                                                                                                                </table>
1650                                                                                                        </div>
1651                                                                                                </section>
1652
1653                                                                                </div>
1654                                                                        </section>
1655
1656                                                                <!-- Spotlight -->
1657                                                                        <section id="reference-spotlight">
1658                                                                                <header>
1659                                                                                        <h3>Spotlight</h3>
1660                                                                                </header>
1661                                                                                <div class="content">
1662
1663                                                                                        <h4>HTML</h4>
1664<pre><code>&lt;section class="spotlight style<em>(N)</em> <em>(optional modifiers)</em>"&gt;
1665  &lt;div class="content"&gt;
1666    <em>(content)</em>
1667  &lt;/div&gt;
1668  &lt;div class="image"&gt;
1669    &lt;img src="<em>(image URL)</em>" alt="Alternate text" /&gt;
1670  &lt;/div&gt;
1671&lt;/section&gt;</code></pre>
1672
1673                                                                                        <hr />
1674
1675                                                                                        <!-- style1 -->
1676                                                                                                <section>
1677                                                                                                        <h4><code>spotlight style1</code></h4>
1678                                                                                                        <p>A 30/70 (or 70/30, depending on orientation) vertical split between content and an image. Supports these modifiers:</p>
1679
1680                                                                                                        <div class="table-wrapper">
1681                                                                                                                <table class="alt uniform fixed">
1682                                                                                                                        <tbody>
1683                                                                                                                                <tr>
1684                                                                                                                                        <td><code>orient-left</code></td>
1685                                                                                                                                        <td>Shows content on the left, image on the right.</td>
1686                                                                                                                                </tr>
1687                                                                                                                                <tr>
1688                                                                                                                                        <td><code>orient-right</code></td>
1689                                                                                                                                        <td>Shows content on the right, image on the left.</td>
1690                                                                                                                                </tr>
1691                                                                                                                                <tr class="alt">
1692                                                                                                                                        <td colspan="2"></td>
1693                                                                                                                                </tr>
1694                                                                                                                                <tr>
1695                                                                                                                                        <td><code>content-align-left</code></td>
1696                                                                                                                                        <td>Left-aligns content.</td>
1697                                                                                                                                </tr>
1698                                                                                                                                <tr>
1699                                                                                                                                        <td><code>content-align-center</code></td>
1700                                                                                                                                        <td>Center-aligns content.</td>
1701                                                                                                                                </tr>
1702                                                                                                                                <tr>
1703                                                                                                                                        <td><code>content-align-right</code></td>
1704                                                                                                                                        <td>Right-aligns content.</td>
1705                                                                                                                                </tr>
1706                                                                                                                                <tr class="alt">
1707                                                                                                                                        <td colspan="2"></td>
1708                                                                                                                                </tr>
1709                                                                                                                                <tr>
1710                                                                                                                                        <td><code>image-position-left</code></td>
1711                                                                                                                                        <td>Left-positions image.</td>
1712                                                                                                                                </tr>
1713                                                                                                                                <tr>
1714                                                                                                                                        <td><code>image-position-center</code></td>
1715                                                                                                                                        <td>Center-positions image.</td>
1716                                                                                                                                </tr>
1717                                                                                                                                <tr>
1718                                                                                                                                        <td><code>image-position-right</code></td>
1719                                                                                                                                        <td>Right-positions image.</td>
1720                                                                                                                                </tr>
1721                                                                                                                                <tr class="alt">
1722                                                                                                                                        <td colspan="2"></td>
1723                                                                                                                                </tr>
1724                                                                                                                                <tr>
1725                                                                                                                                        <td><code>onload-content-fade-up</code></td>
1726                                                                                                                                        <td>Fades content up on page load.</td>
1727                                                                                                                                </tr>
1728                                                                                                                                <tr>
1729                                                                                                                                        <td><code>onload-content-fade-down</code></td>
1730                                                                                                                                        <td>Fades content down on page load.</td>
1731                                                                                                                                </tr>
1732                                                                                                                                <tr>
1733                                                                                                                                        <td><code>onload-content-fade-left</code></td>
1734                                                                                                                                        <td>Fades content left on page load.</td>
1735                                                                                                                                </tr>
1736                                                                                                                                <tr>
1737                                                                                                                                        <td><code>onload-content-fade-right</code></td>
1738                                                                                                                                        <td>Fades content right on page load.</td>
1739                                                                                                                                </tr>
1740                                                                                                                                <tr>
1741                                                                                                                                        <td><code>onload-content-fade-in</code></td>
1742                                                                                                                                        <td>Fades in content on page load.</td>
1743                                                                                                                                </tr>
1744                                                                                                                                <tr>
1745                                                                                                                                        <td><code>onload-image-fade-in</code></td>
1746                                                                                                                                        <td>Fades in image on page load.</td>
1747                                                                                                                                </tr>
1748                                                                                                                                <tr class="alt">
1749                                                                                                                                        <td colspan="2"></td>
1750                                                                                                                                </tr>
1751                                                                                                                                <tr>
1752                                                                                                                                        <td><code>onscroll-content-fade-up</code></td>
1753                                                                                                                                        <td>Fades content up on page scroll.</td>
1754                                                                                                                                </tr>
1755                                                                                                                                <tr>
1756                                                                                                                                        <td><code>onscroll-content-fade-down</code></td>
1757                                                                                                                                        <td>Fades content down on page scroll.</td>
1758                                                                                                                                </tr>
1759                                                                                                                                <tr>
1760                                                                                                                                        <td><code>onscroll-content-fade-left</code></td>
1761                                                                                                                                        <td>Fades content left on page scroll.</td>
1762                                                                                                                                </tr>
1763                                                                                                                                <tr>
1764                                                                                                                                        <td><code>onscroll-content-fade-right</code></td>
1765                                                                                                                                        <td>Fades content right on page scroll.</td>
1766                                                                                                                                </tr>
1767                                                                                                                                <tr>
1768                                                                                                                                        <td><code>onscroll-content-fade-in</code></td>
1769                                                                                                                                        <td>Fades in content on page scroll.</td>
1770                                                                                                                                </tr>
1771                                                                                                                                <tr>
1772                                                                                                                                        <td><code>onscroll-image-fade-in</code></td>
1773                                                                                                                                        <td>Fades in image on page scroll.</td>
1774                                                                                                                                </tr>
1775                                                                                                                                <tr class="alt">
1776                                                                                                                                        <td colspan="2"></td>
1777                                                                                                                                </tr>
1778                                                                                                                                <tr>
1779                                                                                                                                        <td><code>invert</code></td>
1780                                                                                                                                        <td>Inverts the color scheme.</td>
1781                                                                                                                                </tr>
1782                                                                                                                                <tr>
1783                                                                                                                                        <td><code>color1</code></td>
1784                                                                                                                                        <td>Uses background color #1.</td>
1785                                                                                                                                </tr>
1786                                                                                                                                <tr>
1787                                                                                                                                        <td><code>color2</code></td>
1788                                                                                                                                        <td>Uses background color #2.</td>
1789                                                                                                                                </tr>
1790                                                                                                                                <tr>
1791                                                                                                                                        <td><code>color3</code></td>
1792                                                                                                                                        <td>Uses background color #3.</td>
1793                                                                                                                                </tr>
1794                                                                                                                                <tr>
1795                                                                                                                                        <td><code>color4</code></td>
1796                                                                                                                                        <td>Uses background color #4.</td>
1797                                                                                                                                </tr>
1798                                                                                                                                <tr>
1799                                                                                                                                        <td><code>color5</code></td>
1800                                                                                                                                        <td>Uses background color #5.</td>
1801                                                                                                                                </tr>
1802                                                                                                                                <tr>
1803                                                                                                                                        <td><code>color6</code></td>
1804                                                                                                                                        <td>Uses background color #6.</td>
1805                                                                                                                                </tr>
1806                                                                                                                                <tr>
1807                                                                                                                                        <td><code>color7</code></td>
1808                                                                                                                                        <td>Uses background color #7.</td>
1809                                                                                                                                </tr>
1810                                                                                                                        </tbody>
1811                                                                                                                </table>
1812                                                                                                        </div>
1813                                                                                                </section>
1814
1815                                                                                        <hr />
1816
1817                                                                                        <!-- style2 -->
1818                                                                                                <section>
1819                                                                                                        <h4><code>spotlight style2</code></h4>
1820                                                                                                        <p>An image within a circular frame placed to the side of content. Supports these modifiers:</p>
1821
1822                                                                                                        <div class="table-wrapper">
1823                                                                                                                <table class="alt uniform fixed">
1824                                                                                                                        <tbody>
1825                                                                                                                                <tr>
1826                                                                                                                                        <td><code>orient-left</code></td>
1827                                                                                                                                        <td>Places the content on the left, image on the right.</td>
1828                                                                                                                                </tr>
1829                                                                                                                                <tr>
1830                                                                                                                                        <td><code>orient-right</code></td>
1831                                                                                                                                        <td>Places the content on the right, image on the left.</td>
1832                                                                                                                                </tr>
1833                                                                                                                                <tr class="alt">
1834                                                                                                                                        <td colspan="2"></td>
1835                                                                                                                                </tr>
1836                                                                                                                                <tr>
1837                                                                                                                                        <td><code>content-align-left</code></td>
1838                                                                                                                                        <td>Left-aligns content.</td>
1839                                                                                                                                </tr>
1840                                                                                                                                <tr>
1841                                                                                                                                        <td><code>content-align-center</code></td>
1842                                                                                                                                        <td>Center-aligns content.</td>
1843                                                                                                                                </tr>
1844                                                                                                                                <tr>
1845                                                                                                                                        <td><code>content-align-right</code></td>
1846                                                                                                                                        <td>Right-aligns content.</td>
1847                                                                                                                                </tr>
1848                                                                                                                                <tr class="alt">
1849                                                                                                                                        <td colspan="2"></td>
1850                                                                                                                                </tr>
1851                                                                                                                                <tr>
1852                                                                                                                                        <td><code>image-position-left</code></td>
1853                                                                                                                                        <td>Left-positions image.</td>
1854                                                                                                                                </tr>
1855                                                                                                                                <tr>
1856                                                                                                                                        <td><code>image-position-center</code></td>
1857                                                                                                                                        <td>Center-positions image.</td>
1858                                                                                                                                </tr>
1859                                                                                                                                <tr>
1860                                                                                                                                        <td><code>image-position-right</code></td>
1861                                                                                                                                        <td>Right-positions image.</td>
1862                                                                                                                                </tr>
1863                                                                                                                                <tr class="alt">
1864                                                                                                                                        <td colspan="2"></td>
1865                                                                                                                                </tr>
1866                                                                                                                                <tr>
1867                                                                                                                                        <td><code>onload-content-fade-up</code></td>
1868                                                                                                                                        <td>Fades content up on page load.</td>
1869                                                                                                                                </tr>
1870                                                                                                                                <tr>
1871                                                                                                                                        <td><code>onload-content-fade-down</code></td>
1872                                                                                                                                        <td>Fades content down on page load.</td>
1873                                                                                                                                </tr>
1874                                                                                                                                <tr>
1875                                                                                                                                        <td><code>onload-content-fade-left</code></td>
1876                                                                                                                                        <td>Fades content left on page load.</td>
1877                                                                                                                                </tr>
1878                                                                                                                                <tr>
1879                                                                                                                                        <td><code>onload-content-fade-right</code></td>
1880                                                                                                                                        <td>Fades content right on page load.</td>
1881                                                                                                                                </tr>
1882                                                                                                                                <tr>
1883                                                                                                                                        <td><code>onload-content-fade-in</code></td>
1884                                                                                                                                        <td>Fades in content on page load.</td>
1885                                                                                                                                </tr>
1886                                                                                                                                <tr>
1887                                                                                                                                        <td><code>onload-image-fade-up</code></td>
1888                                                                                                                                        <td>Fades image up on page load.</td>
1889                                                                                                                                </tr>
1890                                                                                                                                <tr>
1891                                                                                                                                        <td><code>onload-image-fade-down</code></td>
1892                                                                                                                                        <td>Fades image down on page load.</td>
1893                                                                                                                                </tr>
1894                                                                                                                                <tr>
1895                                                                                                                                        <td><code>onload-image-fade-left</code></td>
1896                                                                                                                                        <td>Fades image left on page load.</td>
1897                                                                                                                                </tr>
1898                                                                                                                                <tr>
1899                                                                                                                                        <td><code>onload-image-fade-right</code></td>
1900                                                                                                                                        <td>Fades image right on page load.</td>
1901                                                                                                                                </tr>
1902                                                                                                                                <tr>
1903                                                                                                                                        <td><code>onload-image-fade-in</code></td>
1904                                                                                                                                        <td>Fades in image on page load.</td>
1905                                                                                                                                </tr>
1906                                                                                                                                <tr class="alt">
1907                                                                                                                                        <td colspan="2"></td>
1908                                                                                                                                </tr>
1909                                                                                                                                <tr>
1910                                                                                                                                        <td><code>onscroll-content-fade-up</code></td>
1911                                                                                                                                        <td>Fades content up on page scroll.</td>
1912                                                                                                                                </tr>
1913                                                                                                                                <tr>
1914                                                                                                                                        <td><code>onscroll-content-fade-down</code></td>
1915                                                                                                                                        <td>Fades content down on page scroll.</td>
1916                                                                                                                                </tr>
1917                                                                                                                                <tr>
1918                                                                                                                                        <td><code>onscroll-content-fade-left</code></td>
1919                                                                                                                                        <td>Fades content left on page scroll.</td>
1920                                                                                                                                </tr>
1921                                                                                                                                <tr>
1922                                                                                                                                        <td><code>onscroll-content-fade-right</code></td>
1923                                                                                                                                        <td>Fades content right on page scroll.</td>
1924                                                                                                                                </tr>
1925                                                                                                                                <tr>
1926                                                                                                                                        <td><code>onscroll-content-fade-in</code></td>
1927                                                                                                                                        <td>Fades in content on page scroll.</td>
1928                                                                                                                                </tr>
1929                                                                                                                                <tr>
1930                                                                                                                                        <td><code>onscroll-image-fade-up</code></td>
1931                                                                                                                                        <td>Fades image up on page scroll.</td>
1932                                                                                                                                </tr>
1933                                                                                                                                <tr>
1934                                                                                                                                        <td><code>onscroll-image-fade-down</code></td>
1935                                                                                                                                        <td>Fades image down on page scroll.</td>
1936                                                                                                                                </tr>
1937                                                                                                                                <tr>
1938                                                                                                                                        <td><code>onscroll-image-fade-left</code></td>
1939                                                                                                                                        <td>Fades image left on page scroll.</td>
1940                                                                                                                                </tr>
1941                                                                                                                                <tr>
1942                                                                                                                                        <td><code>onscroll-image-fade-right</code></td>
1943                                                                                                                                        <td>Fades image right on page scroll.</td>
1944                                                                                                                                </tr>
1945                                                                                                                                <tr>
1946                                                                                                                                        <td><code>onscroll-image-fade-in</code></td>
1947                                                                                                                                        <td>Fades in image on page scroll.</td>
1948                                                                                                                                </tr>
1949                                                                                                                                <tr class="alt">
1950                                                                                                                                        <td colspan="2"></td>
1951                                                                                                                                </tr>
1952                                                                                                                                <tr>
1953                                                                                                                                        <td><code>invert</code></td>
1954                                                                                                                                        <td>Inverts the color scheme.</td>
1955                                                                                                                                </tr>
1956                                                                                                                                <tr>
1957                                                                                                                                        <td><code>color1</code></td>
1958                                                                                                                                        <td>Uses background color #1.</td>
1959                                                                                                                                </tr>
1960                                                                                                                                <tr>
1961                                                                                                                                        <td><code>color2</code></td>
1962                                                                                                                                        <td>Uses background color #2.</td>
1963                                                                                                                                </tr>
1964                                                                                                                                <tr>
1965                                                                                                                                        <td><code>color3</code></td>
1966                                                                                                                                        <td>Uses background color #3.</td>
1967                                                                                                                                </tr>
1968                                                                                                                                <tr>
1969                                                                                                                                        <td><code>color4</code></td>
1970                                                                                                                                        <td>Uses background color #4.</td>
1971                                                                                                                                </tr>
1972                                                                                                                                <tr>
1973                                                                                                                                        <td><code>color5</code></td>
1974                                                                                                                                        <td>Uses background color #5.</td>
1975                                                                                                                                </tr>
1976                                                                                                                                <tr>
1977                                                                                                                                        <td><code>color6</code></td>
1978                                                                                                                                        <td>Uses background color #6.</td>
1979                                                                                                                                </tr>
1980                                                                                                                                <tr>
1981                                                                                                                                        <td><code>color7</code></td>
1982                                                                                                                                        <td>Uses background color #7.</td>
1983                                                                                                                                </tr>
1984                                                                                                                        </tbody>
1985                                                                                                                </table>
1986                                                                                                        </div>
1987                                                                                                </section>
1988
1989                                                                                        <hr />
1990
1991                                                                                        <!-- style3 -->
1992                                                                                                <section>
1993                                                                                                        <h4><code>spotlight style3</code></h4>
1994                                                                                                        <p>An image within a phone-shaped frame placed to the side of content. Supports these modifiers:</p>
1995
1996                                                                                                        <div class="table-wrapper">
1997                                                                                                                <table class="alt uniform fixed">
1998                                                                                                                        <tbody>
1999                                                                                                                                <tr>
2000                                                                                                                                        <td><code>orient-left</code></td>
2001                                                                                                                                        <td>Places the content on the left, image on the right.</td>
2002                                                                                                                                </tr>
2003                                                                                                                                <tr>
2004                                                                                                                                        <td><code>orient-right</code></td>
2005                                                                                                                                        <td>Places the content on the right, image on the left.</td>
2006                                                                                                                                </tr>
2007                                                                                                                                <tr class="alt">
2008                                                                                                                                        <td colspan="2"></td>
2009                                                                                                                                </tr>
2010                                                                                                                                <tr>
2011                                                                                                                                        <td><code>content-align-left</code></td>
2012                                                                                                                                        <td>Left-aligns content.</td>
2013                                                                                                                                </tr>
2014                                                                                                                                <tr>
2015                                                                                                                                        <td><code>content-align-center</code></td>
2016                                                                                                                                        <td>Center-aligns content.</td>
2017                                                                                                                                </tr>
2018                                                                                                                                <tr>
2019                                                                                                                                        <td><code>content-align-right</code></td>
2020                                                                                                                                        <td>Right-aligns content.</td>
2021                                                                                                                                </tr>
2022                                                                                                                                <tr class="alt">
2023                                                                                                                                        <td colspan="2"></td>
2024                                                                                                                                </tr>
2025                                                                                                                                <tr>
2026                                                                                                                                        <td><code>image-position-left</code></td>
2027                                                                                                                                        <td>Left-positions image.</td>
2028                                                                                                                                </tr>
2029                                                                                                                                <tr>
2030                                                                                                                                        <td><code>image-position-center</code></td>
2031                                                                                                                                        <td>Center-positions image.</td>
2032                                                                                                                                </tr>
2033                                                                                                                                <tr>
2034                                                                                                                                        <td><code>image-position-right</code></td>
2035                                                                                                                                        <td>Right-positions image.</td>
2036                                                                                                                                </tr>
2037                                                                                                                                <tr class="alt">
2038                                                                                                                                        <td colspan="2"></td>
2039                                                                                                                                </tr>
2040                                                                                                                                <tr>
2041                                                                                                                                        <td><code>onload-content-fade-up</code></td>
2042                                                                                                                                        <td>Fades content up on page load.</td>
2043                                                                                                                                </tr>
2044                                                                                                                                <tr>
2045                                                                                                                                        <td><code>onload-content-fade-down</code></td>
2046                                                                                                                                        <td>Fades content down on page load.</td>
2047                                                                                                                                </tr>
2048                                                                                                                                <tr>
2049                                                                                                                                        <td><code>onload-content-fade-left</code></td>
2050                                                                                                                                        <td>Fades content left on page load.</td>
2051                                                                                                                                </tr>
2052                                                                                                                                <tr>
2053                                                                                                                                        <td><code>onload-content-fade-right</code></td>
2054                                                                                                                                        <td>Fades content right on page load.</td>
2055                                                                                                                                </tr>
2056                                                                                                                                <tr>
2057                                                                                                                                        <td><code>onload-content-fade-in</code></td>
2058                                                                                                                                        <td>Fades in content on page load.</td>
2059                                                                                                                                </tr>
2060                                                                                                                                <tr>
2061                                                                                                                                        <td><code>onload-image-fade-up</code></td>
2062                                                                                                                                        <td>Fades image up on page load.</td>
2063                                                                                                                                </tr>
2064                                                                                                                                <tr>
2065                                                                                                                                        <td><code>onload-image-fade-down</code></td>
2066                                                                                                                                        <td>Fades image down on page load.</td>
2067                                                                                                                                </tr>
2068                                                                                                                                <tr>
2069                                                                                                                                        <td><code>onload-image-fade-left</code></td>
2070                                                                                                                                        <td>Fades image left on page load.</td>
2071                                                                                                                                </tr>
2072                                                                                                                                <tr>
2073                                                                                                                                        <td><code>onload-image-fade-right</code></td>
2074                                                                                                                                        <td>Fades image right on page load.</td>
2075                                                                                                                                </tr>
2076                                                                                                                                <tr>
2077                                                                                                                                        <td><code>onload-image-fade-in</code></td>
2078                                                                                                                                        <td>Fades in image on page load.</td>
2079                                                                                                                                </tr>
2080                                                                                                                                <tr class="alt">
2081                                                                                                                                        <td colspan="2"></td>
2082                                                                                                                                </tr>
2083                                                                                                                                <tr>
2084                                                                                                                                        <td><code>onscroll-content-fade-up</code></td>
2085                                                                                                                                        <td>Fades content up on page scroll.</td>
2086                                                                                                                                </tr>
2087                                                                                                                                <tr>
2088                                                                                                                                        <td><code>onscroll-content-fade-down</code></td>
2089                                                                                                                                        <td>Fades content down on page scroll.</td>
2090                                                                                                                                </tr>
2091                                                                                                                                <tr>
2092                                                                                                                                        <td><code>onscroll-content-fade-left</code></td>
2093                                                                                                                                        <td>Fades content left on page scroll.</td>
2094                                                                                                                                </tr>
2095                                                                                                                                <tr>
2096                                                                                                                                        <td><code>onscroll-content-fade-right</code></td>
2097                                                                                                                                        <td>Fades content right on page scroll.</td>
2098                                                                                                                                </tr>
2099                                                                                                                                <tr>
2100                                                                                                                                        <td><code>onscroll-content-fade-in</code></td>
2101                                                                                                                                        <td>Fades in content on page scroll.</td>
2102                                                                                                                                </tr>
2103                                                                                                                                <tr>
2104                                                                                                                                        <td><code>onscroll-image-fade-up</code></td>
2105                                                                                                                                        <td>Fades image up on page scroll.</td>
2106                                                                                                                                </tr>
2107                                                                                                                                <tr>
2108                                                                                                                                        <td><code>onscroll-image-fade-down</code></td>
2109                                                                                                                                        <td>Fades image down on page scroll.</td>
2110                                                                                                                                </tr>
2111                                                                                                                                <tr>
2112                                                                                                                                        <td><code>onscroll-image-fade-left</code></td>
2113                                                                                                                                        <td>Fades image left on page scroll.</td>
2114                                                                                                                                </tr>
2115                                                                                                                                <tr>
2116                                                                                                                                        <td><code>onscroll-image-fade-right</code></td>
2117                                                                                                                                        <td>Fades image right on page scroll.</td>
2118                                                                                                                                </tr>
2119                                                                                                                                <tr>
2120                                                                                                                                        <td><code>onscroll-image-fade-in</code></td>
2121                                                                                                                                        <td>Fades in image on page scroll.</td>
2122                                                                                                                                </tr>
2123                                                                                                                                <tr class="alt">
2124                                                                                                                                        <td colspan="2"></td>
2125                                                                                                                                </tr>
2126                                                                                                                                <tr>
2127                                                                                                                                        <td><code>invert</code></td>
2128                                                                                                                                        <td>Inverts the color scheme.</td>
2129                                                                                                                                </tr>
2130                                                                                                                                <tr>
2131                                                                                                                                        <td><code>color1</code></td>
2132                                                                                                                                        <td>Uses background color #1.</td>
2133                                                                                                                                </tr>
2134                                                                                                                                <tr>
2135                                                                                                                                        <td><code>color2</code></td>
2136                                                                                                                                        <td>Uses background color #2.</td>
2137                                                                                                                                </tr>
2138                                                                                                                                <tr>
2139                                                                                                                                        <td><code>color3</code></td>
2140                                                                                                                                        <td>Uses background color #3.</td>
2141                                                                                                                                </tr>
2142                                                                                                                                <tr>
2143                                                                                                                                        <td><code>color4</code></td>
2144                                                                                                                                        <td>Uses background color #4.</td>
2145                                                                                                                                </tr>
2146                                                                                                                                <tr>
2147                                                                                                                                        <td><code>color5</code></td>
2148                                                                                                                                        <td>Uses background color #5.</td>
2149                                                                                                                                </tr>
2150                                                                                                                                <tr>
2151                                                                                                                                        <td><code>color6</code></td>
2152                                                                                                                                        <td>Uses background color #6.</td>
2153                                                                                                                                </tr>
2154                                                                                                                                <tr>
2155                                                                                                                                        <td><code>color7</code></td>
2156                                                                                                                                        <td>Uses background color #7.</td>
2157                                                                                                                                </tr>
2158                                                                                                                        </tbody>
2159                                                                                                                </table>
2160                                                                                                        </div>
2161                                                                                                </section>
2162
2163                                                                                        <hr />
2164
2165                                                                                        <!-- style4 -->
2166                                                                                                <section>
2167                                                                                                        <h4><code>spotlight style4</code></h4>
2168                                                                                                        <p>Boxed-in content set against an image background, and attached to either side of the screen or centered. Supports these modifiers:</p>
2169
2170                                                                                                        <div class="table-wrapper">
2171                                                                                                                <table class="alt uniform fixed">
2172                                                                                                                        <tbody>
2173                                                                                                                                <tr>
2174                                                                                                                                        <td><code>fullscreen</code></td>
2175                                                                                                                                        <td>Fills the height of the screen.</td>
2176                                                                                                                                </tr>
2177                                                                                                                                <tr>
2178                                                                                                                                        <td><code>halfscreen</code></td>
2179                                                                                                                                        <td>Fills half the height of the screen.</td>
2180                                                                                                                                </tr>
2181                                                                                                                                <tr class="alt">
2182                                                                                                                                        <td colspan="2"></td>
2183                                                                                                                                </tr>
2184                                                                                                                                <tr>
2185                                                                                                                                        <td><code>orient-left</code></td>
2186                                                                                                                                        <td>Attaches the content box to the left edge of the screen.</td>
2187                                                                                                                                </tr>
2188                                                                                                                                <tr>
2189                                                                                                                                        <td><code>orient-center</code></td>
2190                                                                                                                                        <td>Places the content box in the center of the screen.</td>
2191                                                                                                                                </tr>
2192                                                                                                                                <tr>
2193                                                                                                                                        <td><code>orient-right</code></td>
2194                                                                                                                                        <td>Attaches the content box to the right edge of the screen.</td>
2195                                                                                                                                </tr>
2196                                                                                                                                <tr class="alt">
2197                                                                                                                                        <td colspan="2"></td>
2198                                                                                                                                </tr>
2199                                                                                                                                <tr>
2200                                                                                                                                        <td><code>content-align-left</code></td>
2201                                                                                                                                        <td>Left-aligns content.</td>
2202                                                                                                                                </tr>
2203                                                                                                                                <tr>
2204                                                                                                                                        <td><code>content-align-center</code></td>
2205                                                                                                                                        <td>Center-aligns content.</td>
2206                                                                                                                                </tr>
2207                                                                                                                                <tr>
2208                                                                                                                                        <td><code>content-align-right</code></td>
2209                                                                                                                                        <td>Right-aligns content.</td>
2210                                                                                                                                </tr>
2211                                                                                                                                <tr class="alt">
2212                                                                                                                                        <td colspan="2"></td>
2213                                                                                                                                </tr>
2214                                                                                                                                <tr>
2215                                                                                                                                        <td><code>image-position-left</code></td>
2216                                                                                                                                        <td>Left-positions image.</td>
2217                                                                                                                                </tr>
2218                                                                                                                                <tr>
2219                                                                                                                                        <td><code>image-position-center</code></td>
2220                                                                                                                                        <td>Center-positions image.</td>
2221                                                                                                                                </tr>
2222                                                                                                                                <tr>
2223                                                                                                                                        <td><code>image-position-right</code></td>
2224                                                                                                                                        <td>Right-positions image.</td>
2225                                                                                                                                </tr>
2226                                                                                                                                <tr class="alt">
2227                                                                                                                                        <td colspan="2"></td>
2228                                                                                                                                </tr>
2229                                                                                                                                <tr>
2230                                                                                                                                        <td><code>onload-content-fade-up</code></td>
2231                                                                                                                                        <td>Fades content up on page load.</td>
2232                                                                                                                                </tr>
2233                                                                                                                                <tr>
2234                                                                                                                                        <td><code>onload-content-fade-down</code></td>
2235                                                                                                                                        <td>Fades content down on page load.</td>
2236                                                                                                                                </tr>
2237                                                                                                                                <tr>
2238                                                                                                                                        <td><code>onload-content-fade-left</code></td>
2239                                                                                                                                        <td>Fades content left on page load.</td>
2240                                                                                                                                </tr>
2241                                                                                                                                <tr>
2242                                                                                                                                        <td><code>onload-content-fade-right</code></td>
2243                                                                                                                                        <td>Fades content right on page load.</td>
2244                                                                                                                                </tr>
2245                                                                                                                                <tr>
2246                                                                                                                                        <td><code>onload-content-fade-in</code></td>
2247                                                                                                                                        <td>Fades in content on page load.</td>
2248                                                                                                                                </tr>
2249                                                                                                                                <tr>
2250                                                                                                                                        <td><code>onload-image-fade-in</code></td>
2251                                                                                                                                        <td>Fades in image on page load.</td>
2252                                                                                                                                </tr>
2253                                                                                                                                <tr class="alt">
2254                                                                                                                                        <td colspan="2"></td>
2255                                                                                                                                </tr>
2256                                                                                                                                <tr>
2257                                                                                                                                        <td><code>onscroll-content-fade-up</code></td>
2258                                                                                                                                        <td>Fades content up on page scroll.</td>
2259                                                                                                                                </tr>
2260                                                                                                                                <tr>
2261                                                                                                                                        <td><code>onscroll-content-fade-down</code></td>
2262                                                                                                                                        <td>Fades content down on page scroll.</td>
2263                                                                                                                                </tr>
2264                                                                                                                                <tr>
2265                                                                                                                                        <td><code>onscroll-content-fade-left</code></td>
2266                                                                                                                                        <td>Fades content left on page scroll.</td>
2267                                                                                                                                </tr>
2268                                                                                                                                <tr>
2269                                                                                                                                        <td><code>onscroll-content-fade-right</code></td>
2270                                                                                                                                        <td>Fades content right on page scroll.</td>
2271                                                                                                                                </tr>
2272                                                                                                                                <tr>
2273                                                                                                                                        <td><code>onscroll-content-fade-in</code></td>
2274                                                                                                                                        <td>Fades in content on page scroll.</td>
2275                                                                                                                                </tr>
2276                                                                                                                                <tr>
2277                                                                                                                                        <td><code>onscroll-image-fade-in</code></td>
2278                                                                                                                                        <td>Fades in image on page scroll.</td>
2279                                                                                                                                </tr>
2280                                                                                                                                <tr class="alt">
2281                                                                                                                                        <td colspan="2"></td>
2282                                                                                                                                </tr>
2283                                                                                                                                <tr>
2284                                                                                                                                        <td><code>invert</code></td>
2285                                                                                                                                        <td>Inverts the color scheme.</td>
2286                                                                                                                                </tr>
2287                                                                                                                                <tr>
2288                                                                                                                                        <td><code>color1</code></td>
2289                                                                                                                                        <td>Uses background color #1.</td>
2290                                                                                                                                </tr>
2291                                                                                                                                <tr>
2292                                                                                                                                        <td><code>color2</code></td>
2293                                                                                                                                        <td>Uses background color #2.</td>
2294                                                                                                                                </tr>
2295                                                                                                                                <tr>
2296                                                                                                                                        <td><code>color3</code></td>
2297                                                                                                                                        <td>Uses background color #3.</td>
2298                                                                                                                                </tr>
2299                                                                                                                                <tr>
2300                                                                                                                                        <td><code>color4</code></td>
2301                                                                                                                                        <td>Uses background color #4.</td>
2302                                                                                                                                </tr>
2303                                                                                                                                <tr>
2304                                                                                                                                        <td><code>color5</code></td>
2305                                                                                                                                        <td>Uses background color #5.</td>
2306                                                                                                                                </tr>
2307                                                                                                                                <tr>
2308                                                                                                                                        <td><code>color6</code></td>
2309                                                                                                                                        <td>Uses background color #6.</td>
2310                                                                                                                                </tr>
2311                                                                                                                                <tr>
2312                                                                                                                                        <td><code>color7</code></td>
2313                                                                                                                                        <td>Uses background color #7.</td>
2314                                                                                                                                </tr>
2315                                                                                                                        </tbody>
2316                                                                                                                </table>
2317                                                                                                        </div>
2318                                                                                                </section>
2319
2320                                                                                        <hr />
2321
2322                                                                                        <!-- style5 -->
2323                                                                                                <section>
2324                                                                                                        <h4><code>spotlight style5</code></h4>
2325                                                                                                        <p>Boxed-in content set against an image background. Supports these modifiers:</p>
2326
2327                                                                                                        <div class="table-wrapper">
2328                                                                                                                <table class="alt uniform fixed">
2329                                                                                                                        <tbody>
2330                                                                                                                                <tr>
2331                                                                                                                                        <td><code>fullscreen</code></td>
2332                                                                                                                                        <td>Fills the height of the screen.</td>
2333                                                                                                                                </tr>
2334                                                                                                                                <tr>
2335                                                                                                                                        <td><code>halfscreen</code></td>
2336                                                                                                                                        <td>Fills half the height of the screen.</td>
2337                                                                                                                                </tr>
2338                                                                                                                                <tr class="alt">
2339                                                                                                                                        <td colspan="2"></td>
2340                                                                                                                                </tr>
2341                                                                                                                                <tr>
2342                                                                                                                                        <td><code>orient-left</code></td>
2343                                                                                                                                        <td>Places the content box on the left of the screen.</td>
2344                                                                                                                                </tr>
2345                                                                                                                                <tr>
2346                                                                                                                                        <td><code>orient-center</code></td>
2347                                                                                                                                        <td>Places the content box in the center of the screen.</td>
2348                                                                                                                                </tr>
2349                                                                                                                                <tr>
2350                                                                                                                                        <td><code>orient-right</code></td>
2351                                                                                                                                        <td>Places the content box on the right side of the screen.</td>
2352                                                                                                                                </tr>
2353                                                                                                                                <tr class="alt">
2354                                                                                                                                        <td colspan="2"></td>
2355                                                                                                                                </tr>
2356                                                                                                                                <tr>
2357                                                                                                                                        <td><code>content-align-left</code></td>
2358                                                                                                                                        <td>Left-aligns content.</td>
2359                                                                                                                                </tr>
2360                                                                                                                                <tr>
2361                                                                                                                                        <td><code>content-align-center</code></td>
2362                                                                                                                                        <td>Center-aligns content.</td>
2363                                                                                                                                </tr>
2364                                                                                                                                <tr>
2365                                                                                                                                        <td><code>content-align-right</code></td>
2366                                                                                                                                        <td>Right-aligns content.</td>
2367                                                                                                                                </tr>
2368                                                                                                                                <tr class="alt">
2369                                                                                                                                        <td colspan="2"></td>
2370                                                                                                                                </tr>
2371                                                                                                                                <tr>
2372                                                                                                                                        <td><code>image-position-left</code></td>
2373                                                                                                                                        <td>Left-positions image.</td>
2374                                                                                                                                </tr>
2375                                                                                                                                <tr>
2376                                                                                                                                        <td><code>image-position-center</code></td>
2377                                                                                                                                        <td>Center-positions image.</td>
2378                                                                                                                                </tr>
2379                                                                                                                                <tr>
2380                                                                                                                                        <td><code>image-position-right</code></td>
2381                                                                                                                                        <td>Right-positions image.</td>
2382                                                                                                                                </tr>
2383                                                                                                                                <tr class="alt">
2384                                                                                                                                        <td colspan="2"></td>
2385                                                                                                                                </tr>
2386                                                                                                                                <tr>
2387                                                                                                                                        <td><code>onload-content-fade-up</code></td>
2388                                                                                                                                        <td>Fades content up on page load.</td>
2389                                                                                                                                </tr>
2390                                                                                                                                <tr>
2391                                                                                                                                        <td><code>onload-content-fade-down</code></td>
2392                                                                                                                                        <td>Fades content down on page load.</td>
2393                                                                                                                                </tr>
2394                                                                                                                                <tr>
2395                                                                                                                                        <td><code>onload-content-fade-left</code></td>
2396                                                                                                                                        <td>Fades content left on page load.</td>
2397                                                                                                                                </tr>
2398                                                                                                                                <tr>
2399                                                                                                                                        <td><code>onload-content-fade-right</code></td>
2400                                                                                                                                        <td>Fades content right on page load.</td>
2401                                                                                                                                </tr>
2402                                                                                                                                <tr>
2403                                                                                                                                        <td><code>onload-content-fade-in</code></td>
2404                                                                                                                                        <td>Fades in content on page load.</td>
2405                                                                                                                                </tr>
2406                                                                                                                                <tr>
2407                                                                                                                                        <td><code>onload-image-fade-in</code></td>
2408                                                                                                                                        <td>Fades in image on page load.</td>
2409                                                                                                                                </tr>
2410                                                                                                                                <tr class="alt">
2411                                                                                                                                        <td colspan="2"></td>
2412                                                                                                                                </tr>
2413                                                                                                                                <tr>
2414                                                                                                                                        <td><code>onscroll-content-fade-up</code></td>
2415                                                                                                                                        <td>Fades content up on page scroll.</td>
2416                                                                                                                                </tr>
2417                                                                                                                                <tr>
2418                                                                                                                                        <td><code>onscroll-content-fade-down</code></td>
2419                                                                                                                                        <td>Fades content down on page scroll.</td>
2420                                                                                                                                </tr>
2421                                                                                                                                <tr>
2422                                                                                                                                        <td><code>onscroll-content-fade-left</code></td>
2423                                                                                                                                        <td>Fades content left on page scroll.</td>
2424                                                                                                                                </tr>
2425                                                                                                                                <tr>
2426                                                                                                                                        <td><code>onscroll-content-fade-right</code></td>
2427                                                                                                                                        <td>Fades content right on page scroll.</td>
2428                                                                                                                                </tr>
2429                                                                                                                                <tr>
2430                                                                                                                                        <td><code>onscroll-content-fade-in</code></td>
2431                                                                                                                                        <td>Fades in content on page scroll.</td>
2432                                                                                                                                </tr>
2433                                                                                                                                <tr>
2434                                                                                                                                        <td><code>onscroll-image-fade-in</code></td>
2435                                                                                                                                        <td>Fades in image on page scroll.</td>
2436                                                                                                                                </tr>
2437                                                                                                                                <tr class="alt">
2438                                                                                                                                        <td colspan="2"></td>
2439                                                                                                                                </tr>
2440                                                                                                                                <tr>
2441                                                                                                                                        <td><code>invert</code></td>
2442                                                                                                                                        <td>Inverts the color scheme.</td>
2443                                                                                                                                </tr>
2444                                                                                                                                <tr>
2445                                                                                                                                        <td><code>color1</code></td>
2446                                                                                                                                        <td>Uses background color #1.</td>
2447                                                                                                                                </tr>
2448                                                                                                                                <tr>
2449                                                                                                                                        <td><code>color2</code></td>
2450                                                                                                                                        <td>Uses background color #2.</td>
2451                                                                                                                                </tr>
2452                                                                                                                                <tr>
2453                                                                                                                                        <td><code>color3</code></td>
2454                                                                                                                                        <td>Uses background color #3.</td>
2455                                                                                                                                </tr>
2456                                                                                                                                <tr>
2457                                                                                                                                        <td><code>color4</code></td>
2458                                                                                                                                        <td>Uses background color #4.</td>
2459                                                                                                                                </tr>
2460                                                                                                                                <tr>
2461                                                                                                                                        <td><code>color5</code></td>
2462                                                                                                                                        <td>Uses background color #5.</td>
2463                                                                                                                                </tr>
2464                                                                                                                                <tr>
2465                                                                                                                                        <td><code>color6</code></td>
2466                                                                                                                                        <td>Uses background color #6.</td>
2467                                                                                                                                </tr>
2468                                                                                                                                <tr>
2469                                                                                                                                        <td><code>color7</code></td>
2470                                                                                                                                        <td>Uses background color #7.</td>
2471                                                                                                                                </tr>
2472                                                                                                                        </tbody>
2473                                                                                                                </table>
2474                                                                                                        </div>
2475                                                                                                </section>
2476
2477                                                                                </div>
2478                                                                        </section>
2479
2480                                                                <!-- Gallery -->
2481                                                                        <section id="reference-gallery">
2482                                                                                <header>
2483                                                                                        <h3>Gallery</h3>
2484                                                                                </header>
2485                                                                                <div class="content">
2486
2487                                                                                        <h4>HTML</h4>
2488<pre><code>&lt;div class="gallery style<em>(N)</em> <em>(optional modifiers)</em>"&gt;
2489  &lt;article&gt;
2490    &lt;a href="<em>(full image URL)</em>" class="image"&gt;
2491      &lt;img src="<em>(thumbnail image URL)</em>" alt="Alternate text" /&gt;
2492    &lt;/a&gt;
2493    &lt;div class="caption"&gt;
2494      <em>(caption)</em>
2495    &lt;/div&gt;
2496  &lt;/article&gt;
2497  &lt;article&gt;
2498    &lt;a href="<em>(full image URL)</em>" class="image"&gt;
2499      &lt;img src="<em>(thumbnail image URL)</em>" alt="Alternate text" /&gt;
2500    &lt;/a&gt;
2501    &lt;div class="caption"&gt;
2502      <em>(caption)</em>
2503    &lt;/div&gt;
2504  &lt;/article&gt;
2505  &lt;article&gt;
2506    &lt;a href="<em>(full image URL)</em>" class="image"&gt;
2507      &lt;img src="<em>(thumbnail image URL)</em>" alt="Alternate text" /&gt;
2508    &lt;/a&gt;
2509    &lt;div class="caption"&gt;
2510      <em>(caption)</em>
2511    &lt;/div&gt;
2512  &lt;/article&gt;
2513  <em>...</em>
2514&lt;/div&gt;</code></pre>
2515
2516                                                                                        <hr />
2517
2518                                                                                        <!-- style1 -->
2519                                                                                                <section>
2520                                                                                                        <h4><code>gallery style1</code></h4>
2521                                                                                                        <p>A grid of thumbnails with optional lightbox support. Supports these modifiers:</p>
2522
2523                                                                                                        <div class="table-wrapper">
2524                                                                                                                <table class="alt uniform fixed">
2525                                                                                                                        <tbody>
2526                                                                                                                                <tr>
2527                                                                                                                                        <td><code>small</code></td>
2528                                                                                                                                        <td>Uses small thumbnails.</td>
2529                                                                                                                                </tr>
2530                                                                                                                                <tr>
2531                                                                                                                                        <td><code>medium</code></td>
2532                                                                                                                                        <td>Uses medium thumbnails.</td>
2533                                                                                                                                </tr>
2534                                                                                                                                <tr>
2535                                                                                                                                        <td><code>big</code></td>
2536                                                                                                                                        <td>Uses big thumbnails.</td>
2537                                                                                                                                </tr>
2538                                                                                                                                <tr class="alt">
2539                                                                                                                                        <td colspan="2"></td>
2540                                                                                                                                </tr>
2541                                                                                                                                <tr>
2542                                                                                                                                        <td><code>lightbox</code></td>
2543                                                                                                                                        <td>Enables lightbox behavior.</td>
2544                                                                                                                                </tr>
2545                                                                                                                                <tr class="alt">
2546                                                                                                                                        <td colspan="2"></td>
2547                                                                                                                                </tr>
2548                                                                                                                                <tr>
2549                                                                                                                                        <td><code>onload-fade-in</code></td>
2550                                                                                                                                        <td>Fades in thumbnails on page load.</td>
2551                                                                                                                                </tr>
2552                                                                                                                                <tr class="alt">
2553                                                                                                                                        <td colspan="2"></td>
2554                                                                                                                                </tr>
2555                                                                                                                                <tr>
2556                                                                                                                                        <td><code>onscroll-fade-in</code></td>
2557                                                                                                                                        <td>Fades in thumbnails on page scroll.</td>
2558                                                                                                                                </tr>
2559                                                                                                                        </tbody>
2560                                                                                                                </table>
2561                                                                                                        </div>
2562                                                                                                </section>
2563
2564                                                                                        <hr />
2565
2566                                                                                        <!-- style2 -->
2567                                                                                                <section>
2568                                                                                                        <h4><code>gallery style2</code></h4>
2569                                                                                                        <p>A carousel of thumbnails with optional lightbox support. Supports these modifiers:</p>
2570
2571                                                                                                        <div class="table-wrapper">
2572                                                                                                                <table class="alt uniform fixed">
2573                                                                                                                        <tbody>
2574                                                                                                                                <tr>
2575                                                                                                                                        <td><code>small</code></td>
2576                                                                                                                                        <td>Uses small thumbnails.</td>
2577                                                                                                                                </tr>
2578                                                                                                                                <tr>
2579                                                                                                                                        <td><code>medium</code></td>
2580                                                                                                                                        <td>Uses medium thumbnails.</td>
2581                                                                                                                                </tr>
2582                                                                                                                                <tr>
2583                                                                                                                                        <td><code>big</code></td>
2584                                                                                                                                        <td>Uses big thumbnails.</td>
2585                                                                                                                                </tr>
2586                                                                                                                                <tr class="alt">
2587                                                                                                                                        <td colspan="2"></td>
2588                                                                                                                                </tr>
2589                                                                                                                                <tr>
2590                                                                                                                                        <td><code>lightbox</code></td>
2591                                                                                                                                        <td>Enables lightbox behavior.</td>
2592                                                                                                                                </tr>
2593                                                                                                                                <tr class="alt">
2594                                                                                                                                        <td colspan="2"></td>
2595                                                                                                                                </tr>
2596                                                                                                                                <tr>
2597                                                                                                                                        <td><code>onload-fade-in</code></td>
2598                                                                                                                                        <td>Fades in thumbnails on page load.</td>
2599                                                                                                                                </tr>
2600                                                                                                                                <tr class="alt">
2601                                                                                                                                        <td colspan="2"></td>
2602                                                                                                                                </tr>
2603                                                                                                                                <tr>
2604                                                                                                                                        <td><code>onscroll-fade-in</code></td>
2605                                                                                                                                        <td>Fades in thumbnails on page scroll.</td>
2606                                                                                                                                </tr>
2607                                                                                                                        </tbody>
2608                                                                                                                </table>
2609                                                                                                        </div>
2610                                                                                                </section>
2611
2612                                                                                </div>
2613                                                                        </section>
2614
2615                                                                <!-- Items -->
2616                                                                        <section id="reference-items">
2617                                                                                <header>
2618                                                                                        <h3>Items</h3>
2619                                                                                </header>
2620                                                                                <div class="content">
2621
2622                                                                                        <h4>HTML</h4>
2623<pre><code>&lt;div class="items style<em>(N)</em> <em>(size modifier)</em> <em>(optional modifiers)</em>"&gt;
2624  &lt;section&gt;
2625    <em>(content)</em>
2626  &lt;/section&gt;
2627  &lt;section&gt;
2628    <em>(content)</em>
2629  &lt;/section&gt;
2630  &lt;section&gt;
2631    <em>(content)</em>
2632  &lt;/section&gt;
2633  &lt;section&gt;
2634    <em>(content)</em>
2635  &lt;/section&gt;
2636  <em>...</em>
2637&lt;/div&gt;</code></pre>
2638
2639                                                                                        <hr />
2640
2641                                                                                        <!-- style1 -->
2642                                                                                                <section>
2643                                                                                                        <h4><code>items style1</code></h4>
2644                                                                                                        <p>A grid of items separated by borders.</p>
2645
2646                                                                                                        <div class="table-wrapper">
2647                                                                                                                <table class="alt uniform fixed">
2648                                                                                                                        <tbody>
2649                                                                                                                                <tr>
2650                                                                                                                                        <td><code>small</code></td>
2651                                                                                                                                        <td>Uses small items.</td>
2652                                                                                                                                </tr>
2653                                                                                                                                <tr>
2654                                                                                                                                        <td><code>medium</code></td>
2655                                                                                                                                        <td>Uses medium items.</td>
2656                                                                                                                                </tr>
2657                                                                                                                                <tr>
2658                                                                                                                                        <td><code>big</code></td>
2659                                                                                                                                        <td>Uses big items.</td>
2660                                                                                                                                </tr>
2661                                                                                                                                <tr class="alt">
2662                                                                                                                                        <td colspan="2"></td>
2663                                                                                                                                </tr>
2664                                                                                                                                <tr>
2665                                                                                                                                        <td><code>onload-fade-in</code></td>
2666                                                                                                                                        <td>Fades in items on page load.</td>
2667                                                                                                                                </tr>
2668                                                                                                                                <tr class="alt">
2669                                                                                                                                        <td colspan="2"></td>
2670                                                                                                                                </tr>
2671                                                                                                                                <tr>
2672                                                                                                                                        <td><code>onscroll-fade-in</code></td>
2673                                                                                                                                        <td>Fades in items on page scroll.</td>
2674                                                                                                                                </tr>
2675                                                                                                                        </tbody>
2676                                                                                                                </table>
2677                                                                                                        </div>
2678                                                                                                </section>
2679
2680                                                                                        <hr />
2681
2682                                                                                        <!-- style2 -->
2683                                                                                                <section>
2684                                                                                                        <h4><code>items style2</code></h4>
2685                                                                                                        <p>An outlined grid of items separated by borders.</p>
2686
2687                                                                                                        <div class="table-wrapper">
2688                                                                                                                <table class="alt uniform fixed">
2689                                                                                                                        <tbody>
2690                                                                                                                                <tr>
2691                                                                                                                                        <td><code>small</code></td>
2692                                                                                                                                        <td>Uses small items.</td>
2693                                                                                                                                </tr>
2694                                                                                                                                <tr>
2695                                                                                                                                        <td><code>medium</code></td>
2696                                                                                                                                        <td>Uses medium items.</td>
2697                                                                                                                                </tr>
2698                                                                                                                                <tr>
2699                                                                                                                                        <td><code>big</code></td>
2700                                                                                                                                        <td>Uses big items.</td>
2701                                                                                                                                </tr>
2702                                                                                                                                <tr class="alt">
2703                                                                                                                                        <td colspan="2"></td>
2704                                                                                                                                </tr>
2705                                                                                                                                <tr>
2706                                                                                                                                        <td><code>onload-fade-in</code></td>
2707                                                                                                                                        <td>Fades in items on page load.</td>
2708                                                                                                                                </tr>
2709                                                                                                                                <tr class="alt">
2710                                                                                                                                        <td colspan="2"></td>
2711                                                                                                                                </tr>
2712                                                                                                                                <tr>
2713                                                                                                                                        <td><code>onscroll-fade-in</code></td>
2714                                                                                                                                        <td>Fades in items on page scroll.</td>
2715                                                                                                                                </tr>
2716                                                                                                                        </tbody>
2717                                                                                                                </table>
2718                                                                                                        </div>
2719                                                                                                </section>
2720
2721                                                                                        <hr />
2722
2723                                                                                        <!-- style3 -->
2724                                                                                                <section>
2725                                                                                                        <h4><code>items style3</code></h4