<!-- 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>