<!-- Modifiers -->
                <section class="wrapper style1 align-center" id="reference">
                    <div class="inner">
                        <h2>Elements Reference</h2>
                        <p>Oh, and this: a handy reference to all the modifiers supported by various elements.</p>
                        <div class="index align-left">

                            <!-- Banner -->
                                <section id="reference-banner">
                                    <header>
                                        <h3>Banner</h3>
                                    </header>
                                    <div class="content">

                                        <h4>HTML</h4>
                                        <pre><code>&lt;section class="banner style<em>(N)</em> <em>(optional modifiers)</em>"&gt;
                                        &lt;div class="content"&gt;
                                        <em>(content)</em>
                                        &lt;/div&gt;
                                        &lt;div class="image"&gt;
                                        &lt;img src="<em>(image URL)</em>" alt="Alternate text" /&gt;
                                        &lt;/div&gt;
                                        &lt;/section&gt;</code></pre>

                                        <hr />

                                        <!-- style1 -->
                                            <section>
                                                <h4><code>banner style1</code></h4>
                                                <p>A 50/50 vertical split between content and an image. Supports these modifiers:</p>

                                                <div class="table-wrapper">
                                                    <table class="alt uniform fixed">
                                                        <tbody>
                                                            <tr>
                                                                <td><code>fullscreen</code></td>
                                                                <td>Fills the height of the screen.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-left</code></td>
                                                                <td>Shows content on the left, image on the right.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-right</code></td>
                                                                <td>Shows content on the right, image on the left.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-left</code></td>
                                                                <td>Left-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-center</code></td>
                                                                <td>Center-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-right</code></td>
                                                                <td>Right-aligns content.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-left</code></td>
                                                                <td>Left-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-center</code></td>
                                                                <td>Center-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-right</code></td>
                                                                <td>Right-positions image.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-up</code></td>
                                                                <td>Fades content up on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-down</code></td>
                                                                <td>Fades content down on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-left</code></td>
                                                                <td>Fades content left on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-right</code></td>
                                                                <td>Fades content right on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-in</code></td>
                                                                <td>Fades in content on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-in</code></td>
                                                                <td>Fades in image on page load.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-up</code></td>
                                                                <td>Fades content up on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-down</code></td>
                                                                <td>Fades content down on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-left</code></td>
                                                                <td>Fades content left on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-right</code></td>
                                                                <td>Fades content right on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-in</code></td>
                                                                <td>Fades in content on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-in</code></td>
                                                                <td>Fades in image on page scroll.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>invert</code></td>
                                                                <td>Inverts the color scheme.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color1</code></td>
                                                                <td>Uses background color #1.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color2</code></td>
                                                                <td>Uses background color #2.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color3</code></td>
                                                                <td>Uses background color #3.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color4</code></td>
                                                                <td>Uses background color #4.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color5</code></td>
                                                                <td>Uses background color #5.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color6</code></td>
                                                                <td>Uses background color #6.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color7</code></td>
                                                                <td>Uses background color #7.</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </section>

                                        <hr />

                                        <!-- style2 -->
                                            <section>
                                                <h4><code>banner style2</code></h4>
                                                <p>Boxed-in content set against an image background, and attached to either side of the screen or centered. Supports these modifiers:</p>

                                                <div class="table-wrapper">
                                                    <table class="alt uniform fixed">
                                                        <tbody>
                                                            <tr>
                                                                <td><code>fullscreen</code></td>
                                                                <td>Fills the height of the screen.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-left</code></td>
                                                                <td>Attaches the content box to the left edge of the screen.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-center</code></td>
                                                                <td>Places the content box in the center of the screen.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-right</code></td>
                                                                <td>Attaches the content box to the right edge of the screen.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-left</code></td>
                                                                <td>Left-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-center</code></td>
                                                                <td>Center-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-right</code></td>
                                                                <td>Right-aligns content.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-left</code></td>
                                                                <td>Left-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-center</code></td>
                                                                <td>Center-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-right</code></td>
                                                                <td>Right-positions image.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-up</code></td>
                                                                <td>Fades content up on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-down</code></td>
                                                                <td>Fades content down on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-left</code></td>
                                                                <td>Fades content left on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-right</code></td>
                                                                <td>Fades content right on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-in</code></td>
                                                                <td>Fades in content on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-in</code></td>
                                                                <td>Fades in image on page load.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-up</code></td>
                                                                <td>Fades content up on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-down</code></td>
                                                                <td>Fades content down on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-left</code></td>
                                                                <td>Fades content left on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-right</code></td>
                                                                <td>Fades content right on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-in</code></td>
                                                                <td>Fades in content on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-in</code></td>
                                                                <td>Fades in image on page scroll.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>invert</code></td>
                                                                <td>Inverts the color scheme.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color1</code></td>
                                                                <td>Uses background color #1.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color2</code></td>
                                                                <td>Uses background color #2.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color3</code></td>
                                                                <td>Uses background color #3.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color4</code></td>
                                                                <td>Uses background color #4.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color5</code></td>
                                                                <td>Uses background color #5.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color6</code></td>
                                                                <td>Uses background color #6.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color7</code></td>
                                                                <td>Uses background color #7.</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </section>

                                        <hr />

                                        <!-- style3 -->
                                            <section>
                                                <h4><code>banner style3</code></h4>
                                                <p>An image within a circular frame placed to the side of content. Supports these modifiers:</p>

                                                <div class="table-wrapper">
                                                    <table class="alt uniform fixed">
                                                        <tbody>
                                                            <tr>
                                                                <td><code>fullscreen</code></td>
                                                                <td>Fills the height of the screen.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-left</code></td>
                                                                <td>Places the content on the left, image on the right.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-right</code></td>
                                                                <td>Places the content on the right, image on the left.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-left</code></td>
                                                                <td>Left-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-center</code></td>
                                                                <td>Center-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-right</code></td>
                                                                <td>Right-aligns content.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-left</code></td>
                                                                <td>Left-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-center</code></td>
                                                                <td>Center-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-right</code></td>
                                                                <td>Right-positions image.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-up</code></td>
                                                                <td>Fades content up on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-down</code></td>
                                                                <td>Fades content down on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-left</code></td>
                                                                <td>Fades content left on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-right</code></td>
                                                                <td>Fades content right on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-in</code></td>
                                                                <td>Fades in content on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-up</code></td>
                                                                <td>Fades image up on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-down</code></td>
                                                                <td>Fades image down on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-left</code></td>
                                                                <td>Fades image left on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-right</code></td>
                                                                <td>Fades image right on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-in</code></td>
                                                                <td>Fades in image on page load.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-up</code></td>
                                                                <td>Fades content up on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-down</code></td>
                                                                <td>Fades content down on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-left</code></td>
                                                                <td>Fades content left on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-right</code></td>
                                                                <td>Fades content right on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-in</code></td>
                                                                <td>Fades in content on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-up</code></td>
                                                                <td>Fades image up on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-down</code></td>
                                                                <td>Fades image down on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-left</code></td>
                                                                <td>Fades image left on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-right</code></td>
                                                                <td>Fades image right on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-in</code></td>
                                                                <td>Fades in image on page scroll.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>invert</code></td>
                                                                <td>Inverts the color scheme.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color1</code></td>
                                                                <td>Uses background color #1.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color2</code></td>
                                                                <td>Uses background color #2.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color3</code></td>
                                                                <td>Uses background color #3.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color4</code></td>
                                                                <td>Uses background color #4.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color5</code></td>
                                                                <td>Uses background color #5.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color6</code></td>
                                                                <td>Uses background color #6.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color7</code></td>
                                                                <td>Uses background color #7.</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </section>

                                        <hr />

                                        <!-- style4 -->
                                            <section>
                                                <h4><code>banner style4</code></h4>
                                                <p>An image within a phone-shaped frame placed to the side of content. Supports these modifiers:</p>

                                                <div class="table-wrapper">
                                                    <table class="alt uniform fixed">
                                                        <tbody>
                                                            <tr>
                                                                <td><code>fullscreen</code></td>
                                                                <td>Fills the height of the screen.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>iphone</code></td>
                                                                <td>Uses iPhone styling for image frame.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>android</code></td>
                                                                <td>Uses Android styling for image frame.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-left</code></td>
                                                                <td>Places the content on the left, image on the right.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-right</code></td>
                                                                <td>Places the content on the right, image on the left.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-left</code></td>
                                                                <td>Left-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-center</code></td>
                                                                <td>Center-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-right</code></td>
                                                                <td>Right-aligns content.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-left</code></td>
                                                                <td>Left-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-center</code></td>
                                                                <td>Center-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-right</code></td>
                                                                <td>Right-positions image.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-up</code></td>
                                                                <td>Fades content up on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-down</code></td>
                                                                <td>Fades content down on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-left</code></td>
                                                                <td>Fades content left on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-right</code></td>
                                                                <td>Fades content right on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-in</code></td>
                                                                <td>Fades in content on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-up</code></td>
                                                                <td>Fades image up on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-down</code></td>
                                                                <td>Fades image down on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-left</code></td>
                                                                <td>Fades image left on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-right</code></td>
                                                                <td>Fades image right on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-in</code></td>
                                                                <td>Fades in image on page load.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-up</code></td>
                                                                <td>Fades content up on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-down</code></td>
                                                                <td>Fades content down on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-left</code></td>
                                                                <td>Fades content left on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-right</code></td>
                                                                <td>Fades content right on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-in</code></td>
                                                                <td>Fades in content on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-up</code></td>
                                                                <td>Fades image up on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-down</code></td>
                                                                <td>Fades image down on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-left</code></td>
                                                                <td>Fades image left on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-right</code></td>
                                                                <td>Fades image right on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-in</code></td>
                                                                <td>Fades in image on page scroll.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>invert</code></td>
                                                                <td>Inverts the color scheme.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color1</code></td>
                                                                <td>Uses background color #1.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color2</code></td>
                                                                <td>Uses background color #2.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color3</code></td>
                                                                <td>Uses background color #3.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color4</code></td>
                                                                <td>Uses background color #4.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color5</code></td>
                                                                <td>Uses background color #5.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color6</code></td>
                                                                <td>Uses background color #6.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color7</code></td>
                                                                <td>Uses background color #7.</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </section>

                                        <hr />

                                        <!-- style5 -->
                                            <section>
                                                <h4><code>banner style5</code></h4>
                                                <p>Content set directly against an image background. Supports these modifiers:</p>

                                                <div class="table-wrapper">
                                                    <table class="alt uniform fixed">
                                                        <tbody>
                                                            <tr>
                                                                <td><code>fullscreen</code></td>
                                                                <td>Fills the height of the screen.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-left</code></td>
                                                                <td>Left-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-center</code></td>
                                                                <td>Center-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-right</code></td>
                                                                <td>Right-aligns content.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-left</code></td>
                                                                <td>Left-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-center</code></td>
                                                                <td>Center-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-right</code></td>
                                                                <td>Right-positions image.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-up</code></td>
                                                                <td>Fades content up on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-down</code></td>
                                                                <td>Fades content down on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-left</code></td>
                                                                <td>Fades content left on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-right</code></td>
                                                                <td>Fades content right on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-in</code></td>
                                                                <td>Fades in content on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-in</code></td>
                                                                <td>Fades in image on page load.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-up</code></td>
                                                                <td>Fades content up on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-down</code></td>
                                                                <td>Fades content down on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-left</code></td>
                                                                <td>Fades content left on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-right</code></td>
                                                                <td>Fades content right on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-in</code></td>
                                                                <td>Fades in content on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-in</code></td>
                                                                <td>Fades in image on page scroll.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>invert</code></td>
                                                                <td>Inverts the color scheme.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color1</code></td>
                                                                <td>Uses background color #1.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color2</code></td>
                                                                <td>Uses background color #2.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color3</code></td>
                                                                <td>Uses background color #3.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color4</code></td>
                                                                <td>Uses background color #4.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color5</code></td>
                                                                <td>Uses background color #5.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color6</code></td>
                                                                <td>Uses background color #6.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color7</code></td>
                                                                <td>Uses background color #7.</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </section>

                                    </div>
                                </section>

                            <!-- Spotlight -->
                                <section id="reference-spotlight">
                                    <header>
                                        <h3>Spotlight</h3>
                                    </header>
                                    <div class="content">

                                        <h4>HTML</h4>
                                        <pre><code>&lt;section class="spotlight style<em>(N)</em> <em>(optional modifiers)</em>"&gt;
                                        &lt;div class="content"&gt;
                                        <em>(content)</em>
                                        &lt;/div&gt;
                                        &lt;div class="image"&gt;
                                        &lt;img src="<em>(image URL)</em>" alt="Alternate text" /&gt;
                                        &lt;/div&gt;
                                        &lt;/section&gt;</code></pre>

                                        <hr />

                                        <!-- style1 -->
                                            <section>
                                                <h4><code>spotlight style1</code></h4>
                                                <p>A 30/70 (or 70/30, depending on orientation) vertical split between content and an image. Supports these modifiers:</p>

                                                <div class="table-wrapper">
                                                    <table class="alt uniform fixed">
                                                        <tbody>
                                                            <tr>
                                                                <td><code>orient-left</code></td>
                                                                <td>Shows content on the left, image on the right.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-right</code></td>
                                                                <td>Shows content on the right, image on the left.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-left</code></td>
                                                                <td>Left-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-center</code></td>
                                                                <td>Center-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-right</code></td>
                                                                <td>Right-aligns content.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-left</code></td>
                                                                <td>Left-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-center</code></td>
                                                                <td>Center-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-right</code></td>
                                                                <td>Right-positions image.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-up</code></td>
                                                                <td>Fades content up on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-down</code></td>
                                                                <td>Fades content down on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-left</code></td>
                                                                <td>Fades content left on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-right</code></td>
                                                                <td>Fades content right on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-in</code></td>
                                                                <td>Fades in content on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-in</code></td>
                                                                <td>Fades in image on page load.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-up</code></td>
                                                                <td>Fades content up on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-down</code></td>
                                                                <td>Fades content down on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-left</code></td>
                                                                <td>Fades content left on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-right</code></td>
                                                                <td>Fades content right on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-in</code></td>
                                                                <td>Fades in content on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-in</code></td>
                                                                <td>Fades in image on page scroll.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>invert</code></td>
                                                                <td>Inverts the color scheme.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color1</code></td>
                                                                <td>Uses background color #1.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color2</code></td>
                                                                <td>Uses background color #2.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color3</code></td>
                                                                <td>Uses background color #3.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color4</code></td>
                                                                <td>Uses background color #4.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color5</code></td>
                                                                <td>Uses background color #5.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color6</code></td>
                                                                <td>Uses background color #6.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color7</code></td>
                                                                <td>Uses background color #7.</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </section>

                                        <hr />

                                        <!-- style2 -->
                                            <section>
                                                <h4><code>spotlight style2</code></h4>
                                                <p>An image within a circular frame placed to the side of content. Supports these modifiers:</p>

                                                <div class="table-wrapper">
                                                    <table class="alt uniform fixed">
                                                        <tbody>
                                                            <tr>
                                                                <td><code>orient-left</code></td>
                                                                <td>Places the content on the left, image on the right.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-right</code></td>
                                                                <td>Places the content on the right, image on the left.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-left</code></td>
                                                                <td>Left-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-center</code></td>
                                                                <td>Center-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-right</code></td>
                                                                <td>Right-aligns content.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-left</code></td>
                                                                <td>Left-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-center</code></td>
                                                                <td>Center-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-right</code></td>
                                                                <td>Right-positions image.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-up</code></td>
                                                                <td>Fades content up on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-down</code></td>
                                                                <td>Fades content down on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-left</code></td>
                                                                <td>Fades content left on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-right</code></td>
                                                                <td>Fades content right on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-in</code></td>
                                                                <td>Fades in content on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-up</code></td>
                                                                <td>Fades image up on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-down</code></td>
                                                                <td>Fades image down on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-left</code></td>
                                                                <td>Fades image left on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-right</code></td>
                                                                <td>Fades image right on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-in</code></td>
                                                                <td>Fades in image on page load.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-up</code></td>
                                                                <td>Fades content up on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-down</code></td>
                                                                <td>Fades content down on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-left</code></td>
                                                                <td>Fades content left on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-right</code></td>
                                                                <td>Fades content right on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-in</code></td>
                                                                <td>Fades in content on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-up</code></td>
                                                                <td>Fades image up on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-down</code></td>
                                                                <td>Fades image down on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-left</code></td>
                                                                <td>Fades image left on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-right</code></td>
                                                                <td>Fades image right on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-in</code></td>
                                                                <td>Fades in image on page scroll.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>invert</code></td>
                                                                <td>Inverts the color scheme.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color1</code></td>
                                                                <td>Uses background color #1.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color2</code></td>
                                                                <td>Uses background color #2.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color3</code></td>
                                                                <td>Uses background color #3.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color4</code></td>
                                                                <td>Uses background color #4.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color5</code></td>
                                                                <td>Uses background color #5.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color6</code></td>
                                                                <td>Uses background color #6.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color7</code></td>
                                                                <td>Uses background color #7.</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </section>

                                        <hr />

                                        <!-- style3 -->
                                            <section>
                                                <h4><code>spotlight style3</code></h4>
                                                <p>An image within a phone-shaped frame placed to the side of content. Supports these modifiers:</p>

                                                <div class="table-wrapper">
                                                    <table class="alt uniform fixed">
                                                        <tbody>
                                                            <tr>
                                                                <td><code>orient-left</code></td>
                                                                <td>Places the content on the left, image on the right.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-right</code></td>
                                                                <td>Places the content on the right, image on the left.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-left</code></td>
                                                                <td>Left-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-center</code></td>
                                                                <td>Center-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-right</code></td>
                                                                <td>Right-aligns content.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-left</code></td>
                                                                <td>Left-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-center</code></td>
                                                                <td>Center-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-right</code></td>
                                                                <td>Right-positions image.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-up</code></td>
                                                                <td>Fades content up on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-down</code></td>
                                                                <td>Fades content down on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-left</code></td>
                                                                <td>Fades content left on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-right</code></td>
                                                                <td>Fades content right on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-in</code></td>
                                                                <td>Fades in content on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-up</code></td>
                                                                <td>Fades image up on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-down</code></td>
                                                                <td>Fades image down on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-left</code></td>
                                                                <td>Fades image left on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-right</code></td>
                                                                <td>Fades image right on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-in</code></td>
                                                                <td>Fades in image on page load.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-up</code></td>
                                                                <td>Fades content up on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-down</code></td>
                                                                <td>Fades content down on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-left</code></td>
                                                                <td>Fades content left on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-right</code></td>
                                                                <td>Fades content right on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-in</code></td>
                                                                <td>Fades in content on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-up</code></td>
                                                                <td>Fades image up on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-down</code></td>
                                                                <td>Fades image down on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-left</code></td>
                                                                <td>Fades image left on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-right</code></td>
                                                                <td>Fades image right on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-in</code></td>
                                                                <td>Fades in image on page scroll.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>invert</code></td>
                                                                <td>Inverts the color scheme.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color1</code></td>
                                                                <td>Uses background color #1.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color2</code></td>
                                                                <td>Uses background color #2.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color3</code></td>
                                                                <td>Uses background color #3.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color4</code></td>
                                                                <td>Uses background color #4.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color5</code></td>
                                                                <td>Uses background color #5.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color6</code></td>
                                                                <td>Uses background color #6.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color7</code></td>
                                                                <td>Uses background color #7.</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </section>

                                        <hr />

                                        <!-- style4 -->
                                            <section>
                                                <h4><code>spotlight style4</code></h4>
                                                <p>Boxed-in content set against an image background, and attached to either side of the screen or centered. Supports these modifiers:</p>

                                                <div class="table-wrapper">
                                                    <table class="alt uniform fixed">
                                                        <tbody>
                                                            <tr>
                                                                <td><code>fullscreen</code></td>
                                                                <td>Fills the height of the screen.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>halfscreen</code></td>
                                                                <td>Fills half the height of the screen.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-left</code></td>
                                                                <td>Attaches the content box to the left edge of the screen.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-center</code></td>
                                                                <td>Places the content box in the center of the screen.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-right</code></td>
                                                                <td>Attaches the content box to the right edge of the screen.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-left</code></td>
                                                                <td>Left-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-center</code></td>
                                                                <td>Center-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-right</code></td>
                                                                <td>Right-aligns content.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-left</code></td>
                                                                <td>Left-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-center</code></td>
                                                                <td>Center-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-right</code></td>
                                                                <td>Right-positions image.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-up</code></td>
                                                                <td>Fades content up on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-down</code></td>
                                                                <td>Fades content down on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-left</code></td>
                                                                <td>Fades content left on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-right</code></td>
                                                                <td>Fades content right on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-in</code></td>
                                                                <td>Fades in content on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-in</code></td>
                                                                <td>Fades in image on page load.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-up</code></td>
                                                                <td>Fades content up on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-down</code></td>
                                                                <td>Fades content down on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-left</code></td>
                                                                <td>Fades content left on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-right</code></td>
                                                                <td>Fades content right on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-in</code></td>
                                                                <td>Fades in content on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-in</code></td>
                                                                <td>Fades in image on page scroll.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>invert</code></td>
                                                                <td>Inverts the color scheme.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color1</code></td>
                                                                <td>Uses background color #1.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color2</code></td>
                                                                <td>Uses background color #2.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color3</code></td>
                                                                <td>Uses background color #3.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color4</code></td>
                                                                <td>Uses background color #4.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color5</code></td>
                                                                <td>Uses background color #5.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color6</code></td>
                                                                <td>Uses background color #6.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color7</code></td>
                                                                <td>Uses background color #7.</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </section>

                                        <hr />

                                        <!-- style5 -->
                                            <section>
                                                <h4><code>spotlight style5</code></h4>
                                                <p>Boxed-in content set against an image background. Supports these modifiers:</p>

                                                <div class="table-wrapper">
                                                    <table class="alt uniform fixed">
                                                        <tbody>
                                                            <tr>
                                                                <td><code>fullscreen</code></td>
                                                                <td>Fills the height of the screen.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>halfscreen</code></td>
                                                                <td>Fills half the height of the screen.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-left</code></td>
                                                                <td>Places the content box on the left of the screen.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-center</code></td>
                                                                <td>Places the content box in the center of the screen.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>orient-right</code></td>
                                                                <td>Places the content box on the right side of the screen.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-left</code></td>
                                                                <td>Left-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-center</code></td>
                                                                <td>Center-aligns content.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>content-align-right</code></td>
                                                                <td>Right-aligns content.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-left</code></td>
                                                                <td>Left-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-center</code></td>
                                                                <td>Center-positions image.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>image-position-right</code></td>
                                                                <td>Right-positions image.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-up</code></td>
                                                                <td>Fades content up on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-down</code></td>
                                                                <td>Fades content down on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-left</code></td>
                                                                <td>Fades content left on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-right</code></td>
                                                                <td>Fades content right on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-content-fade-in</code></td>
                                                                <td>Fades in content on page load.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onload-image-fade-in</code></td>
                                                                <td>Fades in image on page load.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-up</code></td>
                                                                <td>Fades content up on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-down</code></td>
                                                                <td>Fades content down on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-left</code></td>
                                                                <td>Fades content left on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-right</code></td>
                                                                <td>Fades content right on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-content-fade-in</code></td>
                                                                <td>Fades in content on page scroll.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>onscroll-image-fade-in</code></td>
                                                                <td>Fades in image on page scroll.</td>
                                                            </tr>
                                                            <tr class="alt">
                                                                <td colspan="2"></td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>invert</code></td>
                                                                <td>Inverts the color scheme.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color1</code></td>
                                                                <td>Uses background color #1.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color2</code></td>
                                                                <td>Uses background color #2.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color3</code></td>
                                                                <td>Uses background color #3.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color4</code></td>
                                                                <td>Uses background color #4.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color5</code></td>
                                                                <td>Uses background color #5.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color6</code></td>
                                                                <td>Uses background color #6.</td>
                                                            </tr>
                                                            <tr>
                                                                <td><code>color7</code></td>
                                                                <td>Uses background color #7.</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </section>

                                    </div>
                                </section>