d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<div class="intro">
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly <p>In this example, we'll use a snapshot of the <a href="http://www.w3.org/TR/html401/present/styles.html">W3C HTML 4.01 specification for Style Sheets</a> and add a custom dynamic StyleSheet to apply some color and font size changes.</p>
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly <p>A Progressive enhancement strategy is used to extract a static form on the page into a draggable Overlay. Additionally, one of the form inputs is replaced with a Slider. Enter any valid CSS color value into the other inputs (e.g. `#123456`, `#135`, `rgb(0,0,0)`, or `red`).</p>
b74d811b9bafa0e084478e420f658bf8a6397984Jenny Donnelly<div class="example newwindow">
b74d811b9bafa0e084478e420f658bf8a6397984Jenny Donnelly <a href="stylesheet-theme-example.html" target="_blank" class="button">
b74d811b9bafa0e084478e420f658bf8a6397984Jenny Donnelly View Example in New Window
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<h3 class="first">Full code listing</h3>
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<h4 id="markup">Markup</h4>
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<p>The markup as stated above is a local snapshot of the HTML 4.01 spec, but with the following markup added to the end of the <code><body></code> to show a progressive enhancement model.</p>
b74d811b9bafa0e084478e420f658bf8a6397984Jenny Donnelly{{>stylesheet-theme-markup}}
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<h4>JavaScript</h4>
b74d811b9bafa0e084478e420f658bf8a6397984Jenny Donnelly{{>stylesheet-theme-js}}
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<p>This is the CSS added to the page to skin the Overlay and its content.</p>
b74d811b9bafa0e084478e420f658bf8a6397984Jenny Donnelly{{>stylesheet-theme-css}}