survivalkit 0.2.1 → 0.3

data/templates/project/files/html/survivalkit/elements-common.html

@@ -86,461 +86,461 @@
       <nav class='section-nav'></nav>
       <div id='main' role='main'>
         <!-- Common HTML Elements -->
-        <section class='element-group' id='common'>
-          <h1 class='section-title'>Common Elements</h1>
-          <article class='element' id='headers'>
-            <h2 class='element-title'>Headers</h2>
-            <div class='markup'>
-              <h1>Header 1</h1>
-              <h2>Header 2</h2>
-              <h3>Header 3</h3>
-              <h4>Header 4</h4>
-              <h5>Header 5</h5>
-              <h6>Header 6</h6>
-            </div>
-            <p>Headers with a following paragraph</p>
-            <div class='markup'>
-              <h1>Header 1</h1>
-              <p>How vain and foolish, then, thought I, for timid untravelled man to try to comprehend aright this wondrous whale, by merely poring over his dead attenuated skeleton, stretched in this peaceful wood. No. Only in the heart of quickest perils; only when within the eddyings of his angry flukes; only on the profound unbounded sea, can the fully invested whale be truly and livingly found out.</p>
-              <h2>Header 2</h2>
-              <p>Within Pellucidar one time is as good as another.  There were no nights to mask our attempted escape.  All must be done in broad day-light—all but the work I had to do in the apartment beneath the building.  So we determined to put our plan to an immediate test lest the Mahars who made it possible should awake before I reached them; but we were doomed to disappointment, for no sooner had we reached the main floor of the building on our way to the pits beneath, than we encountered hurrying bands of slaves being hastened under strong Sagoth guard out of the edifice to the avenue beyond.</p>
-              <h3>Header 3</h3>
-              <p>Within Pellucidar one time is as good as another.  There were no nights to mask our attempted escape.  All must be done in broad day-light—all but the work I had to do in the apartment beneath the building.  So we determined to put our plan to an immediate test lest the Mahars who made it possible should awake before I reached them; but we were doomed to disappointment, for no sooner had we reached the main floor of the building on our way to the pits beneath, than we encountered hurrying bands of slaves being hastened under strong Sagoth guard out of the edifice to the avenue beyond.</p>
-              <h4>Header 4</h4>
-              <p>People were watching for Martians here from the church towers.  My brother, very luckily for him as it chanced, preferred to push on at once to the coast rather than wait for food, although all three of them were very hungry.  By midday they passed through Tillingham, which, strangely enough, seemed to be quite silent and deserted, save for a few furtive plunderers hunting for food.  Near Tillingham they suddenly came in sight of the sea, and the most amazing crowd of shipping of all sorts that it is possible to imagine.</p>
-              <h5>Header 5</h5>
-              <p>"The unforeseen does not exist," quietly replied Phileas Fogg.</p>
-              <h6>Header 6</h6>
-              <p>Another man now joined the group, and, after making his formal greetings to his ruler, said:</p>
-            </div>
-          </article>
-          <article class='element' id='characters'>
-            <h2 class='element-title'>Characters</h2>
-            <div class='markup'>
-              <p>0 1 2 3 4 5 6 7 8 9</p>
-              <p>+ - – —  _  = ? ! ~ ( ) [ ] { } * ^ | "" \'\' `´ / \ & @ £ $ § ½ % ¨ ; : . ,</p>
-              <p>a b c d e f g h i j k l m n o p q r s t u v w x y z ö ä å</p>
-              <p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Ö Ä Å</p>
-              <h3>UTF-8 test</h3>
-              <p>Ä, ä, Ö, ö, Ü, ü, ß</p>
-              <p>Š Ť Ž Ľ Č Ě Ď Ň Ř Ů Ĺ</p>
-              <p>ХЦЧШЩЬЫЪЭЮЯ</p>
-            </div>
-          </article>
-          <article class='element' id='paragraphs'>
-            <h2 class='element-title'>Paragraphs</h2>
-            <div class='markup'>
-              <p>
-                I leave a
-                <em>white and turbid</em>
-                wake; pale waters, paler cheeks, where'er I sail. The envious billows sidelong swell to whelm my track; let them; but first I pass.
-              </p>
-              <p>
-                Yonder, by ever-brimming goblet's rim,
-                <strong>the warm waves</strong>
-                blush like wine. The gold brow plumbs the blue. The diver sun—slow dived from noon—goes down; my soul mounts up! she wearies with her endless hill. Is, then, the crown too heavy that I wear? this Iron Crown of Lombardy. Yet is it bright with many a gem; I the wearer, see not its far flashings; but darkly feel that I wear that, that
-                <a href=''>dazzlingly confounds</a>.
-                'Tis iron—that I know—not gold. 'Tis split, too—that I feel; the jagged edge galls me so, my brain seems to beat against the solid metal; aye, steel skull, mine; the sort that needs no helmet in the most brain-battering fight!
-              </p>
-              <p>Dry heat upon my brow? Oh! time was, when as the sunrise nobly spurred me, so the sunset soothed. No more. This lovely light, it lights not me; all loveliness is anguish to me, since I can ne'er enjoy. Gifted with the high perception, I lack the low, enjoying power; damned, most subtly and most malignantly! damned in the midst of Paradise! Good night—good night! (WAVING HIS HAND, HE MOVES FROM THE WINDOW.)</p>
-            </div>
-          </article>
-          <article class='element' id='links'>
-            <h2 class='element-title'>Links</h2>
-            <div class='markup'>
-              <a href='#'>Local link</a>
+<section class='element-group' id='common'>
+  <h1 class='section-title'>Common Elements</h1>
+  <div class='element' id='headers'>
+  <h2 class='element-title'>Headers</h2>
+  <div class='markup'>
+    <h1>Header 1</h1>
+    <h2>Header 2</h2>
+    <h3>Header 3</h3>
+    <h4>Header 4</h4>
+    <h5>Header 5</h5>
+    <h6>Header 6</h6>
+  </div>
+  <p>Headers with a following paragraph</p>
+  <div class='markup'>
+    <h1>Header 1</h1>
+    <p>How vain and foolish, then, thought I, for timid untravelled man to try to comprehend aright this wondrous whale, by merely poring over his dead attenuated skeleton, stretched in this peaceful wood. No. Only in the heart of quickest perils; only when within the eddyings of his angry flukes; only on the profound unbounded sea, can the fully invested whale be truly and livingly found out.</p>
+    <h2>Header 2</h2>
+    <p>Within Pellucidar one time is as good as another.  There were no nights to mask our attempted escape.  All must be done in broad day-light—all but the work I had to do in the apartment beneath the building.  So we determined to put our plan to an immediate test lest the Mahars who made it possible should awake before I reached them; but we were doomed to disappointment, for no sooner had we reached the main floor of the building on our way to the pits beneath, than we encountered hurrying bands of slaves being hastened under strong Sagoth guard out of the edifice to the avenue beyond.</p>
+    <h3>Header 3</h3>
+    <p>Within Pellucidar one time is as good as another.  There were no nights to mask our attempted escape.  All must be done in broad day-light—all but the work I had to do in the apartment beneath the building.  So we determined to put our plan to an immediate test lest the Mahars who made it possible should awake before I reached them; but we were doomed to disappointment, for no sooner had we reached the main floor of the building on our way to the pits beneath, than we encountered hurrying bands of slaves being hastened under strong Sagoth guard out of the edifice to the avenue beyond.</p>
+    <h4>Header 4</h4>
+    <p>People were watching for Martians here from the church towers.  My brother, very luckily for him as it chanced, preferred to push on at once to the coast rather than wait for food, although all three of them were very hungry.  By midday they passed through Tillingham, which, strangely enough, seemed to be quite silent and deserted, save for a few furtive plunderers hunting for food.  Near Tillingham they suddenly came in sight of the sea, and the most amazing crowd of shipping of all sorts that it is possible to imagine.</p>
+    <h5>Header 5</h5>
+    <p>"The unforeseen does not exist," quietly replied Phileas Fogg.</p>
+    <h6>Header 6</h6>
+    <p>Another man now joined the group, and, after making his formal greetings to his ruler, said:</p>
+  </div>
+</div>
+  <div class='element' id='characters'>
+    <h2 class='element-title'>Characters</h2>
+    <div class='markup'>
+      <p>0 1 2 3 4 5 6 7 8 9</p>
+      <p>+ - – —  _  = ? ! ~ ( ) [ ] { } * ^ | "" \'\' `´ / \ & @ £ $ § ½ % ¨ ; : . ,</p>
+      <p>a b c d e f g h i j k l m n o p q r s t u v w x y z ö ä å</p>
+      <p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Ö Ä Å</p>
+      <h3>UTF-8 test</h3>
+      <p>Ä, ä, Ö, ö, Ü, ü, ß</p>
+      <p>Š Ť Ž Ľ Č Ě Ď Ň Ř Ů Ĺ</p>
+      <p>ХЦЧШЩЬЫЪЭЮЯ</p>
+    </div>
+  </div>
+  <div class='element' id='paragraphs'>
+    <h2 class='element-title'>Paragraphs</h2>
+    <div class='markup'>
+      <p>
+        I leave a
+        <em>white and turbid</em>
+        wake; pale waters, paler cheeks, where'er I sail. The envious billows sidelong swell to whelm my track; let them; but first I pass.
+      </p>
+      <p>
+        Yonder, by ever-brimming goblet's rim,
+        <strong>the warm waves</strong>
+        blush like wine. The gold brow plumbs the blue. The diver sun—slow dived from noon—goes down; my soul mounts up! she wearies with her endless hill. Is, then, the crown too heavy that I wear? this Iron Crown of Lombardy. Yet is it bright with many a gem; I the wearer, see not its far flashings; but darkly feel that I wear that, that
+        <a href=''>dazzlingly confounds</a>.
+        'Tis iron—that I know—not gold. 'Tis split, too—that I feel; the jagged edge galls me so, my brain seems to beat against the solid metal; aye, steel skull, mine; the sort that needs no helmet in the most brain-battering fight!
+      </p>
+      <p>Dry heat upon my brow? Oh! time was, when as the sunrise nobly spurred me, so the sunset soothed. No more. This lovely light, it lights not me; all loveliness is anguish to me, since I can ne'er enjoy. Gifted with the high perception, I lack the low, enjoying power; damned, most subtly and most malignantly! damned in the midst of Paradise! Good night—good night! (WAVING HIS HAND, HE MOVES FROM THE WINDOW.)</p>
+    </div>
+  </div>
+  <div class='element' id='links'>
+    <h2 class='element-title'>Links</h2>
+    <div class='markup'>
+      <a href='#'>Local link</a>
+      <br>
+        <a class='external' href='http://www.google.com'>External link</a>
+        <br>
+          <a href='https://www.google.com'>External link with encrypted connection</a>
+          <br>
+            <a href='mailto:test@kiwi-themes.com'>E-mail link</a>
+          </br>
+        </br>
+      </br>
+    </div>
+  </div>
+  <div class='element' id='lists'>
+    <h2 class='element-title'>Lists</h2>
+    <div class='markup'>
+      <h3>Unordered List</h3>
+      <ul>
+        <li>Apple</li>
+        <li>Pear</li>
+        <li>Banana</li>
+        <li>Orange</li>
+        <li>Carrot</li>
+      </ul>
+    </div>
+    <div class='markup'>
+      <h3>Ordered List</h3>
+      <ol>
+        <li>First</li>
+        <li>Second</li>
+        <li>Third</li>
+        <li>Fourth</li>
+      </ol>
+    </div>
+    <div class='markup'>
+      <h3>Definition List</h3>
+      <dl>
+        <dt>Definition List Title</dt>
+        <dd>This is a definition list division.</dd>
+        <dt>Inkscape</dt>
+        <dd>Open Source vector graphics editor</dd>
+        <dt>SVG</dt>
+        <dd>Scalable Vector Graphics</dd>
+        <dd>W3C standard</dd>
+        <dt>GIMP</dt>
+        <dd>GNU Image Manipulation Program</dd>
+        <dt>Drupal</dt>
+        <dd>Content Management System</dd>
+      </dl>
+    </div>
+    <div class='markup'>
+      <h3>Nested lists</h3>
+      <ol>
+        <li>
+          one, two
+          <ol>
+            <li>buckle my shoe</li>
+          </ol>
+        </li>
+        <li>
+          three, four
+          <ol>
+            <li>knock at the door</li>
+          </ol>
+        </li>
+        <li>
+          Five, six
+          <ol>
+            <li>pick up sticks</li>
+          </ol>
+        </li>
+        <li>
+          Seven, eight, lay them straight
+          <ol>
+            <li>Nine, ten, a big fat hen</li>
+            <li>Eleven, twelve, dig and delve</li>
+            <li>Thirteen, fourteen, maids a’courting</li>
+            <li>Fifteen, sixteen, maids in the kitchen</li>
+            <li>Seventeen, eighteen, maids a’waiting</li>
+            <li>Nineteen, twenty, my platter’s empty …</li>
+          </ol>
+        </li>
+      </ol>
+    </div>
+  </div>
+  <div class='element' id='pre'>
+  <h2 class='element-title'>
+    <a href='http://developers.whatwg.org/grouping-content.html#the-pre-element'>pre</a>
+  </h2>
+  <div class='markup'>
+    <p>
+      This is the
+      <code>Panel</code>
+      constructor:
+    </p>
+    <pre><code>function Panel(element, canClose, closeHandler) {&#x000A;              this.element = element;&#x000A;              this.canClose = canClose;&#x000A;              this.closeHandler = function () { if (closeHandler) closeHandler() };&#x000A;            }            .markup</code></pre>
+    <pre>  ()                   o             | |   /|   / o&#x000A;  /\         ,_                 __,  | |    |__/    _|_&#x000A; /  \|   |  /  |  |  |_|  |  |_/  |  |/     | \   |  |&#x000A;/(__/ \_/|_/   |_/ \/  |_/ \/  \_/|_/|__/   |  \_/|_/|_/</pre>
+  </div>
+</div>
+</section>
+<!-- Phrase-level HTML Elements -->
+<section class='element-group' id='phrase-elements'>
+  <h1 class='section-title'>Phrase Elements</h1>
+  <div class='element' id='em'>
+    <h2 class='element-title'>em</h2>
+    <div class='markup'>
+      <p>
+        Element used to
+        <em>put emphasis on certain information</em>
+        Most browsers display emphases text in italics by default.
+        <br>
+          Sample:
+          <em>This is emphasized text</em>
+        </br>
+      </p>
+    </div>
+  </div>
+  <div class='element' id='strong'>
+    <h2 class='element-title'>strong</h2>
+    <div class='markup'>
+      <p>
+        This element stands for "stronger emphasis" and is used for marking more important text.
+        <br>
+          Sample:
+          <strong>This is text with stronger emphasis</strong>
+        </br>
+      </p>
+    </div>
+  </div>
+  <div class='element' id='cite'>
+  <h2 class='element-title'>cite</h2>
+  <div class='markup'>
+    <p>
+      According to
+      <cite>W3C specification,</cite>
+      we use
+      <code>cite</code>
+      element to define source of a quotation or reference.
+      <br>
+        Sample:
+        <cite>This is quotation source</cite>
+      </br>
+    </p>
+  </div>
+</div>
+  <div class='element' id='dfn'>
+    <h2 class='element-title'>dfn</h2>
+    <div class='markup'>
+      <p>
+        Element used to markup inline definition of a single term.
+        <br>
+          Sample:
+          <dfn>This is definition</dfn>
+        </br>
+      </p>
+    </div>
+  </div>
+  <div class='element' id='code'>
+  <h2 class='element-title'>code</h2>
+  <div class='markup'>
+    <p>
+      This element informs the browser that it contains a computer code, such as XHTML markup.
+      <br>
+        Sample:
+        <code>document.write("Hello world");</code>
+      </br>
+    </p>
+  </div>
+</div>
+  <div class='element' id='samp'>
+    <h2 class='element-title'>samp</h2>
+    <div class='markup'>
+      <p>
+        Defines computer output data, for example we can use it to markup error messages.
+        <br>
+          Sample:
+          <samp>Error: no such file or directory</samp>
+        </br>
+      </p>
+    </div>
+  </div>
+  <div class='element' id='kbd'>
+  <h2 class='element-title'>kbd</h2>
+  <div class='markup'>
+    <p>
+      Means information that should be entered by the user.
+      <br>
+        Sample: press
+        <kbd>Alt + F4</kbd>
+        to close this window.
+        <kbd>ESC</kbd>
+      </br>
+    </p>
+  </div>
+</div>
+  <div class='element' id='var'>
+    <h2 class='element-title'>var</h2>
+    <div class='markup'>
+      <p>
+        Means variables used in computer programs or scripts.
+        <br>
+          Sample:
+          <var>counter</var>
+        </br>
+      </p>
+    </div>
+  </div>
+  <div class='element' id='abbr'>
+    <h2 class='element-title'>abbr</h2>
+    <div class='markup'>
+      <p>
+        Abbreviation / a shortened form of a word or phrase.
+        <br>
+          Sample:
+          <abbr title='doctor'>dr</abbr>
+        </br>
+      </p>
+    </div>
+  </div>
+  <div class='element' id='acronym'>
+    <h2 class='element-title'>acronym</h2>
+    <div class='markup'>
+      <p>
+        Acronym / a word formed from the initial letters of other words.
+        <br>
+          Sample acronyms:
+          <acronym title='eXtensible HyperText Markup Language'>XHTML</acronym>
+        </br>
+      </p>
+    </div>
+  </div>
+  <div class='element' id='q'>
+    <h2 class='element-title'>q</h2>
+    <div class='markup'>
+      <p>
+        Inline quotation.
+        <br>
+          Sample:
+          <q>This is sample quotation</q>
+        </br>
+      </p>
+    </div>
+  </div>
+  <div class='element' id='others'>
+  <h2 class='element-title'>Other Elements</h2>
+  <div class='markup'>
+    <h3>Subscript and superscript samples</h3>
+    <p>
+      H<sub>2</sub>O,
+      <br>
+        E = mc<sup>2</sup>,
+        <br>
+          The 14
+          <sup>th</sup>
+          of September
+        </br>
+      </br>
+    </p>
+    <h3>Insertion and deletion samples</h3>
+    <p>
+      <ins datetime='2009-07-12T08:15:30+02:00' title='Added new information according to suggestions'>This information was just added.</ins>
+      <br>
+        <del>Whilte this information is no longer valid.</del>
+      </br>
+    </p>
+    <h3>Presentational elements</h3>
+    <p>
+      <b>Bold text</b>
+      <br>
+        <i>Italic text</i>
+        <br>
+          <tt>Typewriter text</tt>
+          <br>
+            <big>Big</big>
+            <br>
+              <small>Small</small>
               <br>
-                <a class='external' href='http://www.google.com'>External link</a>
-                <br>
-                  <a href='https://www.google.com'>External link with encrypted connection</a>
-                  <br>
-                    <a href='mailto:test@kiwi-themes.com'>E-mail link</a>
-                  </br>
-                </br>
+                Horizontal rule:
               </br>
-            </div>
-          </article>
-          <article class='element' id='lists'>
-            <h2 class='element-title'>Lists</h2>
-            <div class='markup'>
-              <h3>Unordered List</h3>
-              <ul>
-                <li>Apple</li>
-                <li>Pear</li>
-                <li>Banana</li>
-                <li>Orange</li>
-                <li>Carrot</li>
-              </ul>
-            </div>
-            <div class='markup'>
-              <h3>Ordered List</h3>
-              <ol>
-                <li>First</li>
-                <li>Second</li>
-                <li>Third</li>
-                <li>Fourth</li>
-              </ol>
-            </div>
-            <div class='markup'>
-              <h3>Definition List</h3>
-              <dl>
-                <dt>Definition List Title</dt>
-                <dd>This is a definition list division.</dd>
-                <dt>Inkscape</dt>
-                <dd>Open Source vector graphics editor</dd>
-                <dt>SVG</dt>
-                <dd>Scalable Vector Graphics</dd>
-                <dd>W3C standard</dd>
-                <dt>GIMP</dt>
-                <dd>GNU Image Manipulation Program</dd>
-                <dt>Drupal</dt>
-                <dd>Content Management System</dd>
-              </dl>
-            </div>
-            <div class='markup'>
-              <h3>Nested lists</h3>
-              <ol>
-                <li>
-                  one, two
-                  <ol>
-                    <li>buckle my shoe</li>
-                  </ol>
-                </li>
-                <li>
-                  three, four
-                  <ol>
-                    <li>knock at the door</li>
-                  </ol>
-                </li>
-                <li>
-                  Five, six
-                  <ol>
-                    <li>pick up sticks</li>
-                  </ol>
-                </li>
-                <li>
-                  Seven, eight, lay them straight
-                  <ol>
-                    <li>Nine, ten, a big fat hen</li>
-                    <li>Eleven, twelve, dig and delve</li>
-                    <li>Thirteen, fourteen, maids a’courting</li>
-                    <li>Fifteen, sixteen, maids in the kitchen</li>
-                    <li>Seventeen, eighteen, maids a’waiting</li>
-                    <li>Nineteen, twenty, my platter’s empty …</li>
-                  </ol>
-                </li>
-              </ol>
-            </div>
-          </article>
-          <article class='element' id='pre'>
-            <h2 class='element-title'>
-              <a href='http://developers.whatwg.org/grouping-content.html#the-pre-element'>pre</a>
-            </h2>
-            <div class='markup'>
-              <p>
-                This is the
-                <code>Panel</code>
-                constructor:
-              </p>
-              <pre><code>function Panel(element, canClose, closeHandler) {&#x000A;              this.element = element;&#x000A;              this.canClose = canClose;&#x000A;              this.closeHandler = function () { if (closeHandler) closeHandler() };&#x000A;            }            .markup</code></pre>
-              <pre>  ()                   o             | |   /|   / o&#x000A;  /\         ,_                 __,  | |    |__/    _|_&#x000A; /  \|   |  /  |  |  |_|  |  |_/  |  |/     | \   |  |&#x000A;/(__/ \_/|_/   |_/ \/  |_/ \/  \_/|_/|__/   |  \_/|_/|_/</pre>
-            </div>
-          </article>
-        </section>
-        <!-- Phrase-level HTML Elements -->
-        <section class='element-group' id='phrase-elements'>
-          <h1 class='section-title'>Phrase Elements</h1>
-          <article class='element' id='em'>
-            <h2 class='element-title'>em</h2>
-            <div class='markup'>
-              <p>
-                Element used to
-                <em>put emphasis on certain information</em>
-                Most browsers display emphases text in italics by default.
-                <br>
-                  Sample:
-                  <em>This is emphasized text</em>
-                </br>
-              </p>
-            </div>
-          </article>
-          <article class='element' id='strong'>
-            <h2 class='element-title'>strong</h2>
-            <div class='markup'>
-              <p>
-                This element stands for "stronger emphasis" and is used for marking more important text.
-                <br>
-                  Sample:
-                  <strong>This is text with stronger emphasis</strong>
-                </br>
-              </p>
-            </div>
-          </article>
-          <article class='element' id='cite'>
-            <h2 class='element-title'>cite</h2>
-            <div class='markup'>
-              <p>
-                According to
-                <cite>W3C specification,</cite>
-                we use
-                <code>cite</code>
-                element to define source of a quotation or reference.
-                <br>
-                  Sample:
-                  <cite>This is quotation source</cite>
-                </br>
-              </p>
-            </div>
-          </article>
-          <article class='element' id='dfn'>
-            <h2 class='element-title'>dfn</h2>
-            <div class='markup'>
-              <p>
-                Element used to markup inline definition of a single term.
-                <br>
-                  Sample:
-                  <dfn>This is definition</dfn>
-                </br>
-              </p>
-            </div>
-          </article>
-          <article class='element' id='code'>
-            <h2 class='element-title'>code</h2>
-            <div class='markup'>
-              <p>
-                This element informs the browser that it contains a computer code, such as XHTML markup.
-                <br>
-                  Sample:
-                  <code>document.write("Hello world");</code>
-                </br>
-              </p>
-            </div>
-          </article>
-          <article class='element' id='samp'>
-            <h2 class='element-title'>samp</h2>
-            <div class='markup'>
-              <p>
-                Defines computer output data, for example we can use it to markup error messages.
-                <br>
-                  Sample:
-                  <samp>Error: no such file or directory</samp>
-                </br>
-              </p>
-            </div>
-          </article>
-          <article class='element' id='kbd'>
-            <h2 class='element-title'>kbd</h2>
-            <div class='markup'>
-              <p>
-                Means information that should be entered by the user.
-                <br>
-                  Sample: press
-                  <kbd>Alt + F4</kbd>
-                  to close this window.
-                  <kbd>ESC</kbd>
-                </br>
-              </p>
-            </div>
-          </article>
-          <article class='element' id='var'>
-            <h2 class='element-title'>var</h2>
-            <div class='markup'>
-              <p>
-                Means variables used in computer programs or scripts.
-                <br>
-                  Sample:
-                  <var>counter</var>
-                </br>
-              </p>
-            </div>
-          </article>
-          <article class='element' id='abbr'>
-            <h2 class='element-title'>abbr</h2>
-            <div class='markup'>
-              <p>
-                Abbreviation / a shortened form of a word or phrase.
-                <br>
-                  Sample:
-                  <abbr title='doctor'>dr</abbr>
-                </br>
-              </p>
-            </div>
-          </article>
-          <article class='element' id='acronym'>
-            <h2 class='element-title'>acronym</h2>
-            <div class='markup'>
-              <p>
-                Acronym / a word formed from the initial letters of other words.
-                <br>
-                  Sample acronyms:
-                  <acronym title='eXtensible HyperText Markup Language'>XHTML</acronym>
-                </br>
-              </p>
-            </div>
-          </article>
-          <article class='element' id='q'>
-            <h2 class='element-title'>q</h2>
-            <div class='markup'>
-              <p>
-                Inline quotation.
-                <br>
-                  Sample:
-                  <q>This is sample quotation</q>
-                </br>
-              </p>
-            </div>
-          </article>
-          <article class='element' id='others'>
-            <h2 class='element-title'>Other Elements</h2>
-            <div class='markup'>
-              <h3>Subscript and superscript samples</h3>
-              <p>
-                H<sub>2</sub>O,
-                <br>
-                  E = mc<sup>2</sup>,
-                  <br>
-                    The 14
-                    <sup>th</sup>
-                    of September
-                  </br>
-                </br>
-              </p>
-              <h3>Insertion and deletion samples</h3>
-              <p>
-                <ins datetime='2009-07-12T08:15:30+02:00' title='Added new information according to suggestions'>This information was just added.</ins>
-                <br>
-                  <del>Whilte this information is no longer valid.</del>
-                </br>
-              </p>
-              <h3>Presentational elements</h3>
-              <p>
-                <b>Bold text</b>
-                <br>
-                  <i>Italic text</i>
-                  <br>
-                    <tt>Typewriter text</tt>
-                    <br>
-                      <big>Big</big>
-                      <br>
-                        <small>Small</small>
-                        <br>
-                          Horizontal rule:
-                        </br>
-                        <hr />
-                      </br>
-                    </br>
-                  </br>
-                </br>
-              </p>
-            </div>
-          </article>
-        </section>
-        <!-- Simple markup Patterns -->
-        <section class='element-group' id='simple-patterns'>
-          <h1 class='section-title'>Common Patterns</h1>
-          <article class='element' id='inline-images'>
-            <h2 class='element-title'>Inline Images</h2>
-            <div class='markup'>
-              <p><img alt='image floated left' class='left' src='http://dummyimage.com/240x320/000/fff&amp;text=Left+Image' />Who would think, then, that such fine ladies and gentlemen should regale themselves with an essence found in the inglorious bowels of a sick whale! Yet so it is. By some, ambergris is supposed to be the cause, and by others the effect, of the dyspepsia in the whale. How to cure such a dyspepsia it were hard to say, unless by administering three or four boat loads of Brandreth's pills, and then running out of harm's way, as laborers do in blasting rocks.
-              </p>
-              <p><img alt='image floated right' class='right' src='http://dummyimage.com/240x320/000/fff&amp;text=Right+Image' />I have forgotten to say that there were found in this ambergris, certain hard, round, bony plates, which at first Stubb thought might be sailors' trowsers buttons; but it afterwards turned out that they were nothing more than pieces of small squid bones embalmed in that manner.
-              </p>
-            </div>
-          </article>
-          <article class='element' id='tables'>
-            <h2 class='element-title'>Tables</h2>
-            <div class='markup'>
-              <table>
-                <caption>
-                  Table title goes here
-                </caption>
-                <thead>
-                  <tr>
-                    <th>Mauris</th>
-                    <th>Tempor</th>
-                    <th>Praesent lacus nulla</th>
-                    <th>Quis</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr class='odd'>
-                    <td>Mauris</td>
-                    <td>23.000</td>
-                    <td>Suspendisse viverra</td>
-                    <td>Yes</td>
-                  </tr>
-                  <tr class='even'>
-                    <td>Trupis</td>
-                    <td>1.000</td>
-                    <td>Placerat tortor aesent semper</td>
-                    <td>No</td>
-                  </tr>
-                  <tr class='odd'>
-                    <td>Sagittis</td>
-                    <td>122.000</td>
-                    <td>Neque vel condimentum</td>
-                    <td>No</td>
-                  </tr>
-                  <tr class='even'>
-                    <td>Libero</td>
-                    <td>500</td>
-                    <td>Hendrerit, lectus elit pretium</td>
-                    <td>Yes</td>
-                  </tr>
-                  <tr class='odd'>
-                    <td>Tristique</td>
-                    <td>100.000</td>
-                    <td>Ligula nec consequat</td>
-                    <td>Yes</td>
-                  </tr>
-                  <tr class='even'>
-                    <td>Id Neque</td>
-                    <td>600.000</td>
-                    <td>Etiam sodales orci nec</td>
-                    <td>No</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </article>
-          <article class='element' id='forms'>
-            <h2 class='element-title'>Forms</h2>
-            <div class='markup'>
-              <form accept-charset='UTF-8' action='/action' id='form' method='post'>
-                <fieldset>
-                  <legend>Fieldset with legend</legend>
-                  <div>
-                    <label>Label for Radios</label>
-                    <input name='radio' type='radio' value='' />
-                    <input name='Radio' type='radio' value='' />
-                    <input name='Radio' type='radio' value='' />
-                  </div>
-                  <div>
-                    <label>Label for Checkboxes</label>
-                    <input name='checkboxes' type='checkbox' value='' />
-                    <input name='checkboxes' type='checkbox' value='' />
-                    <input name='checkboxes' type='checkbox' value='' />
-                  </div>
-                  <div>
-                    <label>Label for Textfield</label>
-                    <input id='textfield' maxlength='12' size='50' type='text' value='input' />
-                  </div>
-                  <div>
-                    <label>label for Textarea</label>
-                    <textarea cols='50' id='text' rows='5'></textarea>
-                  </div>
-                  <div>
-                    <label>label for Filefield</label>
-                    <input name='files' size='50' type='file' />
-                  </div>
-                  <div>
-                    <input name='button' type='button' value='Button' />
-                  </div>
-                </fieldset>
-              </form>
-            </div>
-          </article>
-        </section>
+              <hr />
+            </br>
+          </br>
+        </br>
+      </br>
+    </p>
+  </div>
+</div>
+</section>
+<!-- Simple markup Patterns -->
+<section class='element-group' id='simple-patterns'>
+  <h1 class='section-title'>Common Patterns</h1>
+  <div class='element' id='inline-images'>
+    <h2 class='element-title'>Inline Images</h2>
+    <div class='markup'>
+      <p><img alt='image floated left' class='left' src='http://dummyimage.com/240x320/000/fff&amp;text=Left+Image' />Who would think, then, that such fine ladies and gentlemen should regale themselves with an essence found in the inglorious bowels of a sick whale! Yet so it is. By some, ambergris is supposed to be the cause, and by others the effect, of the dyspepsia in the whale. How to cure such a dyspepsia it were hard to say, unless by administering three or four boat loads of Brandreth's pills, and then running out of harm's way, as laborers do in blasting rocks.
+      </p>
+      <p><img alt='image floated right' class='right' src='http://dummyimage.com/240x320/000/fff&amp;text=Right+Image' />I have forgotten to say that there were found in this ambergris, certain hard, round, bony plates, which at first Stubb thought might be sailors' trowsers buttons; but it afterwards turned out that they were nothing more than pieces of small squid bones embalmed in that manner.
+      </p>
+    </div>
+  </div>
+  <div class='element' id='tables'>
+  <h2 class='element-title'>Tables</h2>
+  <div class='markup'>
+    <table>
+      <caption>
+        Table title goes here
+      </caption>
+      <thead>
+        <tr>
+          <th>Mauris</th>
+          <th>Tempor</th>
+          <th>Praesent lacus nulla</th>
+          <th>Quis</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class='odd'>
+          <td>Mauris</td>
+          <td>23.000</td>
+          <td>Suspendisse viverra</td>
+          <td>Yes</td>
+        </tr>
+        <tr class='even'>
+          <td>Trupis</td>
+          <td>1.000</td>
+          <td>Placerat tortor aesent semper</td>
+          <td>No</td>
+        </tr>
+        <tr class='odd'>
+          <td>Sagittis</td>
+          <td>122.000</td>
+          <td>Neque vel condimentum</td>
+          <td>No</td>
+        </tr>
+        <tr class='even'>
+          <td>Libero</td>
+          <td>500</td>
+          <td>Hendrerit, lectus elit pretium</td>
+          <td>Yes</td>
+        </tr>
+        <tr class='odd'>
+          <td>Tristique</td>
+          <td>100.000</td>
+          <td>Ligula nec consequat</td>
+          <td>Yes</td>
+        </tr>
+        <tr class='even'>
+          <td>Id Neque</td>
+          <td>600.000</td>
+          <td>Etiam sodales orci nec</td>
+          <td>No</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+  <div class='element' id='forms'>
+  <h2 class='element-title'>Forms</h2>
+  <div class='markup'>
+    <form accept-charset='UTF-8' action='/action' id='form' method='post'>
+      <fieldset>
+        <legend>Fieldset with legend</legend>
+        <div>
+          <label>Label for Radios</label>
+          <input name='radio' type='radio' value='' />
+          <input name='Radio' type='radio' value='' />
+          <input name='Radio' type='radio' value='' />
+        </div>
+        <div>
+          <label>Label for Checkboxes</label>
+          <input name='checkboxes' type='checkbox' value='' />
+          <input name='checkboxes' type='checkbox' value='' />
+          <input name='checkboxes' type='checkbox' value='' />
+        </div>
+        <div>
+          <label>Label for Textfield</label>
+          <input id='textfield' maxlength='12' size='50' type='text' value='input' />
+        </div>
+        <div>
+          <label>label for Textarea</label>
+          <textarea cols='50' id='text' rows='5'></textarea>
+        </div>
+        <div>
+          <label>label for Filefield</label>
+          <input name='files' size='50' type='file' />
+        </div>
+        <div>
+          <input name='button' type='button' value='Button' />
+        </div>
+      </fieldset>
+    </form>
+  </div>
+</div>
+</section>
       </div>
       <footer></footer>
     </div>