<!-- 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><section class="banner style<em>(N)</em> <em>(optional modifiers)</em>"> <div class="content"> <em>(content)</em> </div> <div class="image"> <img src="<em>(image URL)</em>" alt="Alternate text" /> </div> </section></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><section class="spotlight style<em>(N)</em> <em>(optional modifiers)</em>"> <div class="content"> <em>(content)</em> </div> <div class="image"> <img src="<em>(image URL)</em>" alt="Alternate text" /> </div> </section></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>