RubyGems - survivalkit - Versions diffs - 0.2.0 → 0.2.1 - Mend

survivalkit 0.2.0 → 0.2.1

Files changed (1295) hide show

data/templates/project/files/html/survivalkit/elements-ui-patterns-drupal.html CHANGED Viewed

@@ -7,40 +7,62 @@
   <!--<![endif]-->
   <head>
     <meta charset='utf-8' />
-    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
-    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
     <title>Drupal 7 UI Patterns</title>
     <meta content='' name='description' />
     <meta content='' name='author' />
-    <meta content='woodcock, washburn, intellectual property law, ip, law' name='Keywords' />
     <!-- Mobile viewport optimized: j.mp/bplateviewport -->
-    <meta content='width=device-width, initial-scale=1.0' name='viewport' />
-    <link href='/favicon.ico' rel='shortcut icon' type='image/x-icon' />
+    <meta content='True' name='HandheldFriendly' />
+    <meta content='320' name='MobileOptimized' />
+    <meta content='width=device-width, target-densitydpi=160, initial-scale=1.0' name='viewport' />
+    <!-- For iPhone 4 with high-resolution Retina display: -->
+    <link href='/apple-touch-icon-114x114-precomposed.png' rel='apple-touch-icon-precomposed' sizes='114x114' />
+    <!-- For first-generation iPad: -->
+    <link href='/apple-touch-icon-72x72-precomposed.png' rel='apple-touch-icon-precomposed' sizes='72x72' />
+    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+    <link href='/apple-touch-icon-precomposed.png' rel='apple-touch-icon-precomposed' />
+    <!-- For Nokia -->
+    <link href='/apple-touch-icon.png' rel='shortcut icon' />
+    <!-- For everything else -->
+    <link href='/favicon.ico' rel='shortcut icon' />
+    <!-- iOS. Delete if not required -->
+    <meta content='yes' name='apple-mobile-web-app-capable' />
+    <meta content='black-translucent' name='apple-mobile-web-app-status-bar-style' />
+    <link href='splash.png' rel='apple-touch-startup-image' />
+    <!-- Microsoft. Delete if not required -->
+    <meta content='on' http-equiv='cleartype' />
+    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
+    <!--[if lt IE 7 ]> <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script><script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script> <![endif]-->
     <!-- CSS -->
     <link href='/css/style.css?v=1' rel='stylesheet' />
+    <link href='/css/survivalkit/survivalkit.css?v=1' rel='stylesheet' />
     <!-- All JavaScript at the bottom, except for Modernizr and Respond. -->
+    <!--[if (lt IE 9) & (!IEMobile)]>
+      <script src="/js/libs/selectivizr-min.js"></script>
+    <![endif]-->
     <script src='/js/libs/modernizr-2.0.min.js'></script>
     <script src='/js/libs/respond.min.js'></script>
     <!-- Typekit -->
-    <script src='http://use.typekit.com/xxxxxxx.js' type='text/javascript'></script>
-    <script type='text/javascript'>
-      //<![CDATA[
-        try{Typekit.load();}catch(e){}
-      //]]>
-    </script>
+    <!--
+      <script src='http://use.typekit.com/xxxxxxx.js' type='text/javascript'></script>
+      <script type='text/javascript'>
+        //<![CDATA[
+          try{Typekit.load();}catch(e){}
+        //]]>
+      </script>
+    -->
   </head>
   <body class='survival-kit'>
     <div id='page'>
       <header>
         <hgroup>
           <h1>
-            <a href='/survivalkit/'>The Coding Designer's Survival Guide</a>
+            <a href='/survivalkit/'>The Coding Designer's Survival Kit</a>
           </h1>
           <h2>Drupal 7 UI Patterns</h2>
         </hgroup>
-        Based on the default markup from Drupal 7
+        <div class="intro">Based on the default markup from Drupal 7 <a href='elements-ui-patterns-drupal-css.html'>Show default Drupal 7 CSS</a></div>
       </header>
-      <nav>
+      <nav class='kit-nav'>
         <ul>
           <li>
             <a href='/survivalkit/elements-common.html'>Common Markup</a>
@@ -54,16 +76,17 @@
           <li>
             <a href='/survivalkit/elements-ui-patterns-drupal.html'>Drupal UI Patterns</a>
           </li>
-          <li>
-            <a href='/survivalkit/elements-ui-patterns.html'>UI Patterns</a>
-          </li>
+          <!-- %li -->
+          <!-- %a{:href => "/survivalkit/elements-ui-patterns.html"} UI Patterns -->
           <li>
             <a href='/survivalkit/styletile/styletile.html'>Style Tile</a>
           </li>
         </ul>
       </nav>
+      <nav class='section-nav'></nav>
       <div id='main' role='main'>
-        <section id='elements'>
+        <section class='element-group' id='drupal-patterns'>
+          <h1 class='section-title'>Drupal Patterns</h1>
           <article class='element' id='site-name'>
             <h2 class='element-title'>Site Name</h2>
             <div class='markup'>
@@ -74,32 +97,6 @@
               </h1>
             </div>
           </article>
-          <article class='element' id='menu'>
-            <h2 class='element-title'>Menus</h2>
-            <div class='markup'>
-              <ul class='links inline clearfix' id='main-menu'>
-                <li class='menu-201 first'>
-                  <a href='/'>Home</a>
-                </li>
-                <li class='menu-365 active-trail active'>
-                  <a class='active-trail active' href='/blog' title='Blog'>Blog</a>
-                </li>
-                <li class='menu-366 last'>
-                  <a href='/my-page' title='My Page'>My Page</a>
-                </li>
-              </ul>
-            </div>
-          </article>
-          <article class='element' id='breadcrumbs'>
-            <h2 class='element-title'>Breadcrumbs</h2>
-            <div class='markup'>
-              <div class='breadcrumb'>
-                <a href='/'>Home</a>
-                »
-                <a href='/blog' title='Blog'>Blog</a>
-              </div>
-            </div>
-          </article>
           <article class='element' id='search'>
             <h2 class='element-title'>Search Field</h2>
             <div class='markup'>
@@ -163,164 +160,75 @@
               </div>
             </div>
           </article>
-          <article class='element' id='tabs'>
-            <h2 class='element-title'>Tabs</h2>
-            <div class='markup'>
-              <div class='tabs'>
-                <h2 class='element-invisible'>Primary tabs</h2>
-                <ul class='tabs primary'>
-                  <li class='active'>
-                    <a class='active' href='/blog/about'>
-                      View
-                      <span class='element-invisible'>(active tab)</span>
-                    </a>
-                  </li>
-                  <li>
-                    <a href='/node/52/edit'>Edit</a>
-                  </li>
-                  <li>
-                    <a href='/node/52/devel'>Devel</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </article>
-          <article class='element' id='form-new-account'>
-            <h2 class='element-title'>New User Form</h2>
-            <div class='markup'>
-              <div class='block block-system' id='block-system-main'>
-                <div class='content'>
-                  <form accept-charset='UTF-8' action='/user/register' class='user-info-from-cookie' enctype='multipart/form-data' id='user-register-form' method='post'>
-                    <div>
-                      <div class='form-item form-type-textfield form-item-name'>
-                        <label for='edit-name'>
-                          Username
-                          <span class='form-required' title='This field is required.'>*</span>
-                        </label>
-                        <input class='username form-text required' id='edit-name' maxlength='60' name='name' size='60' type='text' value=''>
-                          <div class='description'>Spaces are allowed; punctuation is not allowed except for periods, hyphens, apostrophes, and underscores.</div>
-                        </input>
-                      </div>
-                      <div class='form-item form-type-emailfield form-item-mail'>
-                        <label for='edit-mail'>
-                          E-mail address
-                          <span class='form-required' title='This field is required.'>*</span>
-                        </label>
-                        <input class='form-text form-email required' id='edit-mail' maxlength='254' name='mail' size='60' type='email' value=''>
-                          <div class='description'>A valid e-mail address. All e-mails from the system will be sent to this address. The e-mail address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by e-mail.</div>
-                        </input>
-                      </div>
-                      <input name='timezone' type='hidden' value='America/New_York'>
-                        <input name='form_build_id' type='hidden' value='form-5ZOqvNO7BiBFYWgXdre26qBbXM5YuyRLfOsdc1Kx9KU'>
-                          <input name='form_id' type='hidden' value='user_register_form'>
-                            <div class='form-actions form-wrapper' id='edit-actions'>
-                              <input class='form-submit' id='edit-submit' name='op' type='submit' value='Create new account' />
-                            </div>
-                          </input>
-                        </input>
-                      </input>
-                    </div>
-                  </form>
-                </div>
-              </div>
-            </div>
-          </article>
-          <article class='element' id='form-login'>
-            <h2 class='element-title'>Log In Form</h2>
-            <div class='markup'>
-              <div class='block block-system' id='block-system-main'>
-                <div class='content'>
-                  <form accept-charset='UTF-8' action='/user' id='user-login' method='post'>
-                    <div>
-                      <div class='form-item form-type-textfield form-item-name'>
-                        <label for='edit-name'>
-                          Username
-                          <span class='form-required' title='This field is required.'>*</span>
-                        </label>
-                        <input class='form-text required' id='edit-name' maxlength='60' name='name' size='60' type='text' value=''>
-                          <div class='description'>Enter your d7 username.</div>
-                        </input>
-                      </div>
-                      <div class='form-item form-type-password form-item-pass'>
-                        <label for='edit-pass'>
-                          Password
-                          <span class='form-required' title='This field is required.'>*</span>
-                        </label>
-                        <input class='form-text required' id='edit-pass' maxlength='128' name='pass' size='60' type='password' value=''>
-                          <div class='description'>Enter the password that accompanies your username.</div>
-                        </input>
-                      </div>
-                      <input name='form_build_id' type='hidden' value='form-XW71tLWvMNpumkgW-wKMOpDRUN0cPt62fr5Q0M7KNzo'>
-                        <input name='form_id' type='hidden' value='user_login'>
-                          <div class='form-actions form-wrapper' id='edit-actions'>
-                            <input class='form-submit' id='edit-submit' name='op' type='submit' value='Log in' />
-                          </div>
-                        </input>
-                      </input>
-                    </div>
-                  </form>
-                </div>
-              </div>
-            </div>
-          </article>
-          <article class='element' id='form-new-password'>
-            <h2 class='element-title'>New Password Form</h2>
-            <div class='markup'>
-              <div class='block block-system' id='block-system-main'>
-                <div class='content'>
-                  <form accept-charset='UTF-8' action='/user/password' id='user-pass' method='post'>
-                    <div>
-                      <div class='form-item form-type-textfield form-item-name'>
-                        <label for='edit-name'>
-                          Username or e-mail address
-                          <span class='form-required' title='This field is required.'>*</span>
-                        </label>
-                        <input class='form-text required' id='edit-name' maxlength='254' name='name' size='60' type='text' value='' />
-                      </div>
-                      <input name='form_build_id' type='hidden' value='form-P9tzA7PRYI8Y3TxPo9aBfFXR3hVb38lqzMLrZE1O9VE'>
-                        <input name='form_id' type='hidden' value='user_pass'>
-                          <div class='form-actions form-wrapper' id='edit-actions'>
-                            <input class='form-submit' id='edit-submit' name='op' type='submit' value='E-mail new password' />
-                          </div>
-                        </input>
-                      </input>
-                    </div>
-                  </form>
-                </div>
-              </div>
-            </div>
-          </article>
-          <article class='element' id='pager'>
-            <h2 class='element-title'>Pager</h2>
+          <article class='element' id='tables'>
+            <h2 class='element-title'>Tables</h2>
             <div class='markup'>
-              <ul class='pager'>
-                <li class='pager-first first'>
-                  <a class='active' href='/node' title='Go to first page'>« first</a>
-                </li>
-                <li class='pager-previous'>
-                  <a class='active' href='/node' title='Go to previous page'>‹ previous</a>
-                </li>
-                <li class='pager-item'>
-                  <a class='active' href='/node' title='Go to page 1'>1</a>
-                </li>
-                <li class='pager-current'>2</li>
-                <li class='pager-item'>
-                  <a class='active' href='/node?page=2' title='Go to page 3'>3</a>
-                </li>
-                <li class='pager-next'>
-                  <a class='active' href='/node?page=2' title='Go to next page'>next ›</a>
-                </li>
-                <li class='pager-last last'>
-                  <a class='active' href='/node?page=2' title='Go to last page'>last »</a>
-                </li>
-              </ul>
+              <table class='sticky-header' style='position: fixed; top: 0px; left: 13px; visibility: hidden; '>
+                <thead style=''>
+                  <tr>
+                    <th>vitae</th>
+                    <th>tempor</th>
+                    <th>gravida</th>
+                    <th>in</th>
+                    <th>nec</th>
+                  </tr>
+                </thead>
+              </table>
+              <table class='sticky-enabled tableheader-processed sticky-table'>
+                <thead>
+                  <tr>
+                    <th>vitae</th>
+                    <th>tempor</th>
+                    <th>gravida</th>
+                    <th>in</th>
+                    <th>nec</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr class='odd'>
+                    <td>eget</td>
+                    <td>ac</td>
+                    <td>fusce</td>
+                    <td>et</td>
+                    <td>in</td>
+                  </tr>
+                  <tr class='even'>
+                    <td>tempor</td>
+                    <td>luctus</td>
+                    <td>lacus</td>
+                    <td>eget</td>
+                    <td>ac</td>
+                  </tr>
+                  <tr class='odd'>
+                    <td>amet</td>
+                    <td>convallis</td>
+                    <td>dignissim</td>
+                    <td>iaculis</td>
+                    <td>elit</td>
+                  </tr>
+                  <tr class='even'>
+                    <td>lorem</td>
+                    <td>enim</td>
+                    <td>porta</td>
+                    <td>iaculis</td>
+                    <td>eros</td>
+                  </tr>
+                  <tr class='odd'>
+                    <td>in</td>
+                    <td>iaculis</td>
+                    <td>nam</td>
+                    <td>luctus</td>
+                    <td>sed</td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
           </article>
           <article class='element' id='rss-link'>
             <h2 class='element-title'>RSS Link</h2>
             <div class='markup'>
               <a class='feed-icon' href='/rss.xml' title='Subscribe to d7 RSS'>
-                <img alt='Subscribe to d7 RSS' src='http://d7/misc/feed.png' />
+                <img alt='Subscribe to d7 RSS' src='/images/drupal/feed.png' />
               </a>
             </div>
           </article>
@@ -560,7 +468,7 @@
                                 <h3 style='display: none; '>Filtered HTML</h3>
                                 <ul class='tips'>
                                   <li>Web page addresses and e-mail addresses turn into links automatically.</li>
-                                  <li>Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd></li>
+                                  <li>Allowed HTML tags: &lt;a&gt; &lt;em&gt; &lt;strong&gt; &lt;cite&gt; &lt;blockquote&gt; &lt;code&gt; &lt;ul&gt; &lt;ol&gt; &lt;li&gt; &lt;dl&gt; &lt;dt&gt; &lt;dd&gt;</li>
                                   <li>Lines and paragraphs break automatically.</li>
                                 </ul>
                               </div>
@@ -595,22 +503,1370 @@
             </div>
           </article>
         </section>
-      </div>
-      <footer></footer>
-    </div>
-    <!--
-      Javascript at the bottom for fast page loading
-      Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary
-    -->
-    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js'></script>
-    <script type='text/javascript'>
-      //<![CDATA[
-        window.jQuery || document.write("<script src='js/libs/jquery-1.6.min.js'>\x3C/script>")
-      //]]>
-    </script>
-    <script src='/js/libs/plugins.js?v=1'></script>
-    <script src='/js/script.js?v=1'></script>
-    <script src='/js/kit/kit-source.jquery.js?v=1'></script>
+        <section class='element-group' id='drupal-navigation'>
+          <h1 class='section-title'>Drupal Navigation</h1>
+          <article class='element' id='menu'>
+            <h2 class='element-title'>Menus</h2>
+            <div class='markup'>
+              <ul class='links inline clearfix' id='main-menu'>
+                <li class='menu-201 first'>
+                  <a href='/'>Home</a>
+                </li>
+                <li class='menu-365 active-trail active'>
+                  <a class='active-trail active' href='/blog' title='Blog'>Blog</a>
+                </li>
+                <li class='menu-366 last'>
+                  <a href='/my-page' title='My Page'>My Page</a>
+                </li>
+              </ul>
+            </div>
+          </article>
+          <article class='element' id='menu-tree'>
+            <h2 class='element-title'>Menu Tree</h2>
+            <div class='markup'>
+              <ul class='menu'>
+                <li class='first last expanded active-trail'>
+                  <a class='active-trail' href='/admin'>Administration</a>
+                  <ul class='menu'>
+                    <li class='first collapsed'>
+                      <a href='/admin/content' title='Administer content and comments.'>Content</a>
+                    </li>
+                    <li class='collapsed'>
+                      <a href='/admin/structure' title='Administer blocks, content types, menus, etc.'>Structure</a>
+                    </li>
+                    <li class='expanded active-trail'>
+                      <a class='active-trail' href='/admin/appearance' title='Select and configure your themes.'>Appearance</a>
+                      <ul class='menu'>
+                        <li class='first last leaf active-trail'>
+                          <a class='active-trail active' href='/admin/appearance/styleguide'>Style guide</a>
+                        </li>
+                      </ul>
+                    </li>
+                    <li class='leaf'>
+                      <a href='/admin/people' title='Manage user accounts, roles, and permissions.'>People</a>
+                    </li>
+                    <li class='leaf'>
+                      <a href='/admin/modules' title='Extend site functionality.'>Modules</a>
+                    </li>
+                    <li class='collapsed'>
+                      <a href='/admin/config' title='Administer settings.'>Configuration</a>
+                    </li>
+                    <li class='collapsed'>
+                      <a href='/admin/reports' title='View reports, updates, and errors.'>Reports</a>
+                    </li>
+                    <li class='last leaf'>
+                      <a href='/admin/help' title='Reference for usage, configuration, and modules.'>Help</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </article>
+          <article class='element' id='tabs'>
+            <h2 class='element-title'>Tabs</h2>
+            <div class='markup'>
+              <div class='tabs'>
+                <h2 class='element-invisible'>Primary tabs</h2>
+                <ul class='tabs primary'>
+                  <li class='active'>
+                    <a class='active' href='/blog/about'>
+                      View
+                      <span class='element-invisible'>(active tab)</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href='/node/52/edit'>Edit</a>
+                  </li>
+                  <li>
+                    <a href='/node/52/devel'>Devel</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='breadcrumbs'>
+            <h2 class='element-title'>Breadcrumbs</h2>
+            <div class='markup'>
+              <div class='breadcrumb'>
+                <a href='/'>Home</a>
+                »
+                <a href='/blog' title='Blog'>Blog</a>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='pager'>
+            <h2 class='element-title'>Pager</h2>
+            <div class='markup'>
+              <ul class='pager'>
+                <li class='pager-first first'>
+                  <a class='active' href='/node' title='Go to first page'>« first</a>
+                </li>
+                <li class='pager-previous'>
+                  <a class='active' href='/node' title='Go to previous page'>‹ previous</a>
+                </li>
+                <li class='pager-item'>
+                  <a class='active' href='/node' title='Go to page 1'>1</a>
+                </li>
+                <li class='pager-current'>2</li>
+                <li class='pager-item'>
+                  <a class='active' href='/node?page=2' title='Go to page 3'>3</a>
+                </li>
+                <li class='pager-next'>
+                  <a class='active' href='/node?page=2' title='Go to next page'>next ›</a>
+                </li>
+                <li class='pager-last last'>
+                  <a class='active' href='/node?page=2' title='Go to last page'>last »</a>
+                </li>
+              </ul>
+            </div>
+          </article>
+        </section>
+        <section class='element-group' id='drupal-forms'>
+          <h1 class='section-title'>Drupal Forms</h1>
+          <article class='element' id='form-basic'>
+            <h2 class='element-title'>Form, Basic</h2>
+            <div class='markup'>
+              <form accept-charset='UTF-8' action='' enctype='multipart/form-data' id='styleguide-form' method='post'>
+                <div>
+                  <div class='form-item form-type-select form-item-select'>
+                    <label for='edit-select'>Select</label>
+                    <select class='form-select' id='edit-select' name='select'>
+                      <option value='eget'>eget</option>
+                      <option value='venenatis'>venenatis</option>
+                      <option value='aliquam'>aliquam</option>
+                      <option value='consequat'>consequat</option>
+                      <option value='dignissim'>dignissim</option>
+                    </select>
+                    <div class='description'>Duis orci nunc, lacinia in malesuada et, euismod id turpis.</div>
+                  </div>
+                  <div class='form-item form-type-checkbox form-item-checkbox'>
+                    <input checked='checked' class='form-checkbox' id='edit-checkbox' name='checkbox' type='checkbox' value='1'>
+                      <label class='option' for='edit-checkbox'>Checkbox</label>
+                      <div class='description'>Fusce dignissim tempor elementum.</div>
+                    </input>
+                  </div>
+                  <div class='form-item form-type-checkboxes form-item-checkboxes'>
+                    <label for='edit-checkboxes'>Checkboxes</label>
+                    <div class='form-checkboxes' id='edit-checkboxes'>
+                      <div class='form-item form-type-checkbox form-item-checkboxes-eget'>
+                        <input class='form-checkbox' id='edit-checkboxes-eget' name='checkboxes[eget]' type='checkbox' value='eget'>
+                          <label class='option' for='edit-checkboxes-eget'>eget</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-checkbox form-item-checkboxes-venenatis'>
+                        <input class='form-checkbox' id='edit-checkboxes-venenatis' name='checkboxes[venenatis]' type='checkbox' value='venenatis'>
+                          <label class='option' for='edit-checkboxes-venenatis'>venenatis</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-checkbox form-item-checkboxes-aliquam'>
+                        <input class='form-checkbox' id='edit-checkboxes-aliquam' name='checkboxes[aliquam]' type='checkbox' value='aliquam'>
+                          <label class='option' for='edit-checkboxes-aliquam'>aliquam</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-checkbox form-item-checkboxes-consequat'>
+                        <input class='form-checkbox' id='edit-checkboxes-consequat' name='checkboxes[consequat]' type='checkbox' value='consequat'>
+                          <label class='option' for='edit-checkboxes-consequat'>consequat</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-checkbox form-item-checkboxes-dignissim'>
+                        <input class='form-checkbox' id='edit-checkboxes-dignissim' name='checkboxes[dignissim]' type='checkbox' value='dignissim'>
+                          <label class='option' for='edit-checkboxes-dignissim'>dignissim</label>
+                        </input>
+                      </div>
+                    </div>
+                    <div class='description'>Phasellus ac eleifend magna.</div>
+                  </div>
+                  <div class='form-item form-type-radios form-item-radios'>
+                    <label for='edit-radios'>Radios</label>
+                    <div class='form-radios' id='edit-radios'>
+                      <div class='form-item form-type-radio form-item-radios'>
+                        <input class='form-radio' id='edit-radios-eget' name='radios' type='radio' value='eget'>
+                          <label class='option' for='edit-radios-eget'>eget</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-radio form-item-radios'>
+                        <input class='form-radio' id='edit-radios-venenatis' name='radios' type='radio' value='venenatis'>
+                          <label class='option' for='edit-radios-venenatis'>venenatis</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-radio form-item-radios'>
+                        <input class='form-radio' id='edit-radios-aliquam' name='radios' type='radio' value='aliquam'>
+                          <label class='option' for='edit-radios-aliquam'>aliquam</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-radio form-item-radios'>
+                        <input class='form-radio' id='edit-radios-consequat' name='radios' type='radio' value='consequat'>
+                          <label class='option' for='edit-radios-consequat'>consequat</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-radio form-item-radios'>
+                        <input class='form-radio' id='edit-radios-dignissim' name='radios' type='radio' value='dignissim'>
+                          <label class='option' for='edit-radios-dignissim'>dignissim</label>
+                        </input>
+                      </div>
+                    </div>
+                    <div class='description'>Suspendisse lectus erat, commodo nec fringilla quis, interdum non leo.</div>
+                  </div>
+                  <div class='form-item form-type-textfield form-item-textfield'>
+                    <label for='edit-textfield'>Textfield</label>
+                    <input class='form-text' id='edit-textfield' maxlength='128' name='textfield' size='60' type='text' value='euismod'>
+                      <div class='description'>Vestibulum ut ligula dolor, in placerat tortor.</div>
+                    </input>
+                  </div>
+                  <div class='form-item form-type-textfield form-item-autocomplete' role='application'>
+                    <label for='edit-autocomplete'>Autocomplete textfield</label>
+                    <input aria-autocomplete='list' autocomplete='OFF' class='form-text form-autocomplete' id='edit-autocomplete' maxlength='128' name='autocomplete' size='60' type='text' value='nunc'>
+                      <input class='autocomplete autocomplete-processed' disabled='disabled' id='edit-autocomplete-autocomplete' type='hidden' value='http://roadside.local/user/autocomplete'>
+                        <div class='description'>Nam auctor dui a neque iaculis in aliquam erat viverra.</div>
+                        <span aria-live='assertive' class='element-invisible' id='edit-autocomplete-autocomplete-aria-live'></span>
+                      </input>
+                    </input>
+                  </div>
+                  <div class='form-item form-type-textfield form-item-textfield-machine'>
+                    <label for='edit-textfield-machine'>Textfield, with machine name</label>
+                    <input class='form-text machine-name-source' id='edit-textfield-machine' maxlength='128' name='textfield-machine' size='60' type='text' value='velit convallis consectetur'>
+                      <span class='field-suffix'>
+                        <small id='edit-textfield-machine-machine-name-suffix'>
+                          <span class='machine-name-label'>Machine name:</span>
+                          <span class='machine-name-value'>velit_convallis_consectetur</span>
+                          <span class='admin-link'>
+                            <a href='#'>Edit</a>
+                          </span>
+                        </small>
+                      </span>
+                      <div class='description'>Aenean sit amet tellus sit amet ante congue faucibus.</div>
+                    </input>
+                  </div>
+                  <div class='form-item form-type-machine-name form-item-machine-name' style='display: none; '>
+                    <label for='edit-machine-name'>
+                      Machine name
+                      <span class='form-required' title='This field is required.'>*</span>
+                    </label>
+                    <input class='form-text required machine-name-target' id='edit-machine-name' maxlength='64' name='machine_name' size='60' type='text' value=''>
+                      <div class='description'>Morbi congue nulla vel tortor aliquet imperdiet.</div>
+                    </input>
+                  </div>
+                  <div class='form-item form-type-textarea form-item-textarea'>
+                    <label for='edit-textarea'>Textarea</label>
+                    <div class='form-textarea-wrapper resizable textarea-processed resizable-textarea'>
+                      <textarea class='form-textarea' cols='60' id='edit-textarea' name='textarea' rows='5'><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p><p>Vivamus pretium placerat lorem, in tempor massa convallis sit amet. Aliquam sed quam eget ligula luctus aliquam sed vitae nulla. Aliquam dui dolor, ullamcorper eget rutrum ut, hendrerit ac lorem. Donec magna est, sollicitudin vel ultrices vel, mattis ut odio. Integer vel felis laoreet purus sollicitudin varius sed id ipsum. Suspendisse potenti. Praesent ut justo vitae metus luctus vehicula a et purus. Suspendisse potenti. Sed viverra, quam non hendrerit laoreet, massa odio blandit arcu, ac molestie metus diam eu tortor. Donec erat arcu, ultrices sit amet placerat non, feugiat in arcu. Mauris eros quam, varius eget volutpat vel, tristique sed est. In faucibus feugiat urna sit amet elementum. Integer consequat rhoncus libero, in molestie augue posuere et. Phasellus ac eleifend magna. Proin vulputate dui ac justo pharetra consequat. In vel iaculis ligula.</p><p>Cras vestibulum lacus sit amet sem commodo ullamcorper aliquet eros vestibulum. Sed fermentum nulla quis risus suscipit dapibus. Sed vitae velit ut dolor varius semper at id lectus. Aenean quis leo sit amet tellus tempus cursus. Vivamus semper vehicula ante eget semper. In ac ipsum erat. Suspendisse lectus erat, commodo nec fringilla quis, interdum non leo. Vivamus et lectus vitae risus porta sollicitudin luctus eget est. Etiam quis elit vel est suscipit tristique. Nullam fringilla purus ac velit gravida ullamcorper. Praesent porttitor ante non lacus suscipit porta. Nunc fermentum sem et metus aliquam ultricies non sollicitudin nibh. Vestibulum ut ligula dolor, in placerat tortor. Sed nec lacus sed nibh iaculis luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur rutrum, diam vel tempor commodo, augue nunc viverra risus, in pellentesque neque justo eget dolor. Maecenas quis odio leo, a auctor lorem.</p><p>Curabitur dapibus odio quis enim hendrerit eu placerat lorem accumsan. Phasellus sagittis, orci vel laoreet molestie, urna orci imperdiet elit, quis ultricies orci mauris vel ante. Cras pharetra, nisl a sagittis feugiat, turpis magna placerat sem, sed euismod erat elit in magna. Phasellus blandit ullamcorper diam vel porta. Vivamus mollis, metus nec tincidunt venenatis, risus odio sodales risus, vitae ultrices est nisi eget ante. Aenean eget nisi mi. Nulla non nulla nec metus rhoncus congue. Curabitur quis nunc nibh. Cras metus lorem, euismod ornare mattis sagittis, ultrices eget turpis. Integer quis dui tellus. Morbi vel dolor sit amet metus eleifend fringilla. Fusce nunc neque, ultricies et commodo semper, dignissim vitae tortor. Phasellus et ipsum quis sapien accumsan auctor. Morbi congue nulla vel tortor aliquet imperdiet. Morbi eget odio elit, et cursus odio. Quisque a velit diam. Duis urna libero, tempus non mattis a, convallis ac erat. Etiam vel dui posuere lectus auctor viverra vitae id eros. Maecenas mollis eros non elit sollicitudin quis fermentum diam lacinia. Quisque at ante nibh, a molestie ligula.</p><p>Sed et enim nunc, nec vehicula sem. Sed risus orci, auctor et dictum at, hendrerit eu augue. Curabitur sed ante non quam fermentum vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt dictum molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus nec urna ut lorem tempus aliquet eget nec lectus. Phasellus quis venenatis tortor. Integer elementum, sapien at feugiat cursus, tortor sapien adipiscing massa, non molestie elit lacus vel velit. Suspendisse sit amet sem id libero auctor pharetra sit amet ut dui. Aenean sit amet tellus sit amet ante congue faucibus. Nullam hendrerit, justo et iaculis tristique, ligula risus pretium erat, sed tempus lacus felis ut nulla.</p></textarea>
+                      <div class='grippie'></div>
+                    </div>
+                    <div class='description'>Sed risus orci, auctor et dictum at, hendrerit eu augue.</div>
+                  </div>
+                  <div class='form-item form-type-date form-item-date'>
+                    <label for='edit-date'>Date</label>
+                    <div class='container-inline'>
+                      <div class='form-item form-type-select form-item-date-year'>
+                        <label class='element-invisible' for='edit-date-year'>Year</label>
+                        <select class='form-select' id='edit-date-year' name='date[year]'>
+                          <option value='1900'>1900</option>
+                          <option value='1901'>1901</option>
+                          <option value='1902'>1902</option>
+                          <option value='1903'>1903</option>
+                          <option value='1904'>1904</option>
+                          <option value='1905'>1905</option>
+                          <option value='1906'>1906</option>
+                          <option value='1907'>1907</option>
+                          <option value='1908'>1908</option>
+                          <option value='1909'>1909</option>
+                          <option value='1910'>1910</option>
+                          <option value='1911'>1911</option>
+                          <option value='1912'>1912</option>
+                          <option value='1913'>1913</option>
+                          <option value='1914'>1914</option>
+                          <option value='1915'>1915</option>
+                          <option value='1916'>1916</option>
+                          <option value='1917'>1917</option>
+                          <option value='1918'>1918</option>
+                          <option value='1919'>1919</option>
+                          <option value='1920'>1920</option>
+                          <option value='1921'>1921</option>
+                          <option value='1922'>1922</option>
+                          <option value='1923'>1923</option>
+                          <option value='1924'>1924</option>
+                          <option value='1925'>1925</option>
+                          <option value='1926'>1926</option>
+                          <option value='1927'>1927</option>
+                          <option value='1928'>1928</option>
+                          <option value='1929'>1929</option>
+                          <option value='1930'>1930</option>
+                          <option value='1931'>1931</option>
+                          <option value='1932'>1932</option>
+                          <option value='1933'>1933</option>
+                          <option value='1934'>1934</option>
+                          <option value='1935'>1935</option>
+                          <option value='1936'>1936</option>
+                          <option value='1937'>1937</option>
+                          <option value='1938'>1938</option>
+                          <option value='1939'>1939</option>
+                          <option value='1940'>1940</option>
+                          <option value='1941'>1941</option>
+                          <option value='1942'>1942</option>
+                          <option value='1943'>1943</option>
+                          <option value='1944'>1944</option>
+                          <option value='1945'>1945</option>
+                          <option value='1946'>1946</option>
+                          <option value='1947'>1947</option>
+                          <option value='1948'>1948</option>
+                          <option value='1949'>1949</option>
+                          <option value='1950'>1950</option>
+                          <option value='1951'>1951</option>
+                          <option value='1952'>1952</option>
+                          <option value='1953'>1953</option>
+                          <option value='1954'>1954</option>
+                          <option value='1955'>1955</option>
+                          <option value='1956'>1956</option>
+                          <option value='1957'>1957</option>
+                          <option value='1958'>1958</option>
+                          <option value='1959'>1959</option>
+                          <option value='1960'>1960</option>
+                          <option value='1961'>1961</option>
+                          <option value='1962'>1962</option>
+                          <option value='1963'>1963</option>
+                          <option value='1964'>1964</option>
+                          <option value='1965'>1965</option>
+                          <option value='1966'>1966</option>
+                          <option value='1967'>1967</option>
+                          <option value='1968'>1968</option>
+                          <option value='1969'>1969</option>
+                          <option value='1970'>1970</option>
+                          <option value='1971'>1971</option>
+                          <option value='1972'>1972</option>
+                          <option value='1973'>1973</option>
+                          <option value='1974'>1974</option>
+                          <option value='1975'>1975</option>
+                          <option value='1976'>1976</option>
+                          <option value='1977'>1977</option>
+                          <option value='1978'>1978</option>
+                          <option value='1979'>1979</option>
+                          <option value='1980'>1980</option>
+                          <option value='1981'>1981</option>
+                          <option value='1982'>1982</option>
+                          <option value='1983'>1983</option>
+                          <option value='1984'>1984</option>
+                          <option value='1985'>1985</option>
+                          <option value='1986'>1986</option>
+                          <option value='1987'>1987</option>
+                          <option value='1988'>1988</option>
+                          <option value='1989'>1989</option>
+                          <option value='1990'>1990</option>
+                          <option value='1991'>1991</option>
+                          <option value='1992'>1992</option>
+                          <option value='1993'>1993</option>
+                          <option value='1994'>1994</option>
+                          <option value='1995'>1995</option>
+                          <option value='1996'>1996</option>
+                          <option value='1997'>1997</option>
+                          <option value='1998'>1998</option>
+                          <option value='1999'>1999</option>
+                          <option value='2000'>2000</option>
+                          <option value='2001'>2001</option>
+                          <option value='2002'>2002</option>
+                          <option value='2003'>2003</option>
+                          <option value='2004'>2004</option>
+                          <option value='2005'>2005</option>
+                          <option value='2006'>2006</option>
+                          <option value='2007'>2007</option>
+                          <option value='2008'>2008</option>
+                          <option value='2009'>2009</option>
+                          <option value='2010'>2010</option>
+                          <option value='2011'>2011</option>
+                          <option selected='selected' value='2012'>2012</option>
+                          <option value='2013'>2013</option>
+                          <option value='2014'>2014</option>
+                          <option value='2015'>2015</option>
+                          <option value='2016'>2016</option>
+                          <option value='2017'>2017</option>
+                          <option value='2018'>2018</option>
+                          <option value='2019'>2019</option>
+                          <option value='2020'>2020</option>
+                          <option value='2021'>2021</option>
+                          <option value='2022'>2022</option>
+                          <option value='2023'>2023</option>
+                          <option value='2024'>2024</option>
+                          <option value='2025'>2025</option>
+                          <option value='2026'>2026</option>
+                          <option value='2027'>2027</option>
+                          <option value='2028'>2028</option>
+                          <option value='2029'>2029</option>
+                          <option value='2030'>2030</option>
+                          <option value='2031'>2031</option>
+                          <option value='2032'>2032</option>
+                          <option value='2033'>2033</option>
+                          <option value='2034'>2034</option>
+                          <option value='2035'>2035</option>
+                          <option value='2036'>2036</option>
+                          <option value='2037'>2037</option>
+                          <option value='2038'>2038</option>
+                          <option value='2039'>2039</option>
+                          <option value='2040'>2040</option>
+                          <option value='2041'>2041</option>
+                          <option value='2042'>2042</option>
+                          <option value='2043'>2043</option>
+                          <option value='2044'>2044</option>
+                          <option value='2045'>2045</option>
+                          <option value='2046'>2046</option>
+                          <option value='2047'>2047</option>
+                          <option value='2048'>2048</option>
+                          <option value='2049'>2049</option>
+                          <option value='2050'>2050</option>
+                        </select>
+                      </div>
+                      <div class='form-item form-type-select form-item-date-month'>
+                        <label class='element-invisible' for='edit-date-month'>Month</label>
+                        <select class='form-select' id='edit-date-month' name='date[month]'>
+                          <option selected='selected' value='1'>Jan</option>
+                          <option value='2'>Feb</option>
+                          <option value='3'>Mar</option>
+                          <option value='4'>Apr</option>
+                          <option value='5'>May</option>
+                          <option value='6'>Jun</option>
+                          <option value='7'>Jul</option>
+                          <option value='8'>Aug</option>
+                          <option value='9'>Sep</option>
+                          <option value='10'>Oct</option>
+                          <option value='11'>Nov</option>
+                          <option value='12'>Dec</option>
+                        </select>
+                      </div>
+                      <div class='form-item form-type-select form-item-date-day'>
+                        <label class='element-invisible' for='edit-date-day'>Day</label>
+                        <select class='form-select' id='edit-date-day' name='date[day]'>
+                          <option value='1'>1</option>
+                          <option value='2'>2</option>
+                          <option value='3'>3</option>
+                          <option value='4'>4</option>
+                          <option value='5'>5</option>
+                          <option value='6'>6</option>
+                          <option value='7'>7</option>
+                          <option value='8'>8</option>
+                          <option value='9'>9</option>
+                          <option value='10'>10</option>
+                          <option value='11'>11</option>
+                          <option value='12'>12</option>
+                          <option value='13'>13</option>
+                          <option value='14'>14</option>
+                          <option value='15'>15</option>
+                          <option value='16'>16</option>
+                          <option value='17'>17</option>
+                          <option value='18'>18</option>
+                          <option selected='selected' value='19'>19</option>
+                          <option value='20'>20</option>
+                          <option value='21'>21</option>
+                          <option value='22'>22</option>
+                          <option value='23'>23</option>
+                          <option value='24'>24</option>
+                          <option value='25'>25</option>
+                          <option value='26'>26</option>
+                          <option value='27'>27</option>
+                          <option value='28'>28</option>
+                          <option value='29'>29</option>
+                          <option value='30'>30</option>
+                          <option value='31'>31</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div class='description'>Sed feugiat velit sed magna aliquam accumsan.</div>
+                  </div>
+                  <div class='form-item form-type-file form-item-files-file'>
+                    <label for='edit-file'>File</label>
+                    <input class='form-file' id='edit-file' name='files[file]' size='60' type='file'>
+                      <div class='description'>Sed feugiat velit sed magna aliquam accumsan.</div>
+                    </input>
+                  </div>
+                  <div id='edit-managed-file-ajax-wrapper'>
+                    <div class='form-item form-type-managed-file form-item-managed-file'>
+                      <label for='edit-managed-file'>Managed file</label>
+                      <div class='form-managed-file'>
+                        <input class='form-file' id='edit-managed-file-upload' name='files[managed_file]' size='22' type='file'>
+                          <input class='form-submit ajax-processed' id='edit-managed-file-upload-button' name='managed_file_upload_button' type='submit' value='Upload'>
+                            <input name='managed_file[fid]' type='hidden' value='0' />
+                          </input>
+                        </input>
+                      </div>
+                      <div class='description'>Morbi congue nulla vel tortor aliquet imperdiet.</div>
+                    </div>
+                  </div>
+                  <div class='form-item form-type-password form-item-password'>
+                    <label for='edit-password'>Password</label>
+                    <input class='form-text' id='edit-password' maxlength='128' name='password' size='60' type='password'>
+                      <div class='description'>Sed vitae velit ut dolor varius semper at id lectus.</div>
+                    </input>
+                  </div>
+                  <div class='form-item form-type-password-confirm form-item-password-confirm'>
+                    <label for='edit-password-confirm'>Password confirm</label>
+                    <div class='form-item form-type-password form-item-password-confirm-pass1 password-parent'>
+                      <div class='password-strength'>
+                        <div aria-live='assertive' class='password-strength-text'></div>
+                        <div class='password-strength-title'>Password strength:</div>
+                        <div class='password-indicator'>
+                          <div class='indicator'></div>
+                        </div>
+                      </div>
+                      <label for='edit-password-confirm-pass1'>Password</label>
+                      <input class='password-field form-text password-processed' id='edit-password-confirm-pass1' maxlength='128' name='password_confirm[pass1]' size='60' type='password' />
+                    </div>
+                    <div class='form-item form-type-password form-item-password-confirm-pass2 confirm-parent'>
+                      <div class='password-confirm'>
+                        Passwords match:
+                        <span></span>
+                      </div>
+                      <label for='edit-password-confirm-pass2'>Confirm password</label>
+                      <input class='password-confirm form-text' id='edit-password-confirm-pass2' maxlength='128' name='password_confirm[pass2]' size='60' type='password' />
+                    </div>
+                    <div class='password-suggestions description' style='display: none; '></div>
+                  </div>
+                  <div class='form-item form-type-select form-item-weight'>
+                    <label for='edit-weight'>Weight</label>
+                    <select class='form-select' id='edit-weight' name='weight'>
+                      <option value='-10'>-10</option>
+                      <option value='-9'>-9</option>
+                      <option value='-8'>-8</option>
+                      <option value='-7'>-7</option>
+                      <option value='-6'>-6</option>
+                      <option value='-5'>-5</option>
+                      <option value='-4'>-4</option>
+                      <option value='-3'>-3</option>
+                      <option value='-2'>-2</option>
+                      <option value='-1'>-1</option>
+                      <option selected='selected' value='0'>0</option>
+                      <option value='1'>1</option>
+                      <option value='2'>2</option>
+                      <option value='3'>3</option>
+                      <option value='4'>4</option>
+                      <option value='5'>5</option>
+                      <option value='6'>6</option>
+                      <option value='7'>7</option>
+                      <option value='8'>8</option>
+                      <option value='9'>9</option>
+                      <option value='10'>10</option>
+                    </select>
+                    <div class='description'>Phasellus blandit ullamcorper diam vel porta.</div>
+                  </div>
+                  <input name='form_build_id' type='hidden' value='form-x-0vcWL95UYhYJdScM5FciQVI2fEZT78IOFQaqNkpFE'>
+                    <input name='form_token' type='hidden' value='JgHDsNA3K2wOnE1ML25JvEfxbCUwElNU2YFSdWy0Ivk'>
+                      <input name='form_id' type='hidden' value='styleguide_form' />
+                    </input>
+                  </input>
+                </div>
+              </form>
+            </div>
+          </article>
+          <article class='element' id='form-submit'>
+            <h2 class='element-title'>Form, Submit</h2>
+            <div class='markup'>
+              <form accept-charset='UTF-8' action='' id='styleguide-form--2' method='post'>
+                <div>
+                  <input class='form-submit' id='edit-submit' name='op' type='submit' value='Submit'>
+                    <input name='form_build_id' type='hidden' value='form-mDodr4jjbAa-YW-l9feHHiRv2hXgvcUmRf3FR8ujoTc'>
+                      <input name='form_token' type='hidden' value='JgHDsNA3K2wOnE1ML25JvEfxbCUwElNU2YFSdWy0Ivk'>
+                        <input name='form_id' type='hidden' value='styleguide_form' />
+                      </input>
+                    </input>
+                  </input>
+                </div>
+              </form>
+            </div>
+          </article>
+          <article class='element' id='form-button'>
+            <h2 class='element-title'>Form, Button</h2>
+            <div class='markup'>
+              <form accept-charset='UTF-8' action='' id='styleguide-form--3' method='post'>
+                <div>
+                  <input class='form-submit' id='edit-button' name='op' type='submit' value='Button'>
+                    <input name='form_build_id' type='hidden' value='form-b0QLOJq3TiHtz9tcQQJplikA4r0lj4SeF4_0AfuMMT8'>
+                      <input name='form_token' type='hidden' value='JgHDsNA3K2wOnE1ML25JvEfxbCUwElNU2YFSdWy0Ivk'>
+                        <input name='form_id' type='hidden' value='styleguide_form' />
+                      </input>
+                    </input>
+                  </input>
+                </div>
+              </form>
+            </div>
+          </article>
+          <article class='element' id='form-image-button'>
+            <h2 class='element-title'>Form, Image Button</h2>
+            <div class='markup'>
+              <form accept-charset='UTF-8' action='' id='styleguide-form--4' method='post'>
+                <div>
+                  <input class='form-submit' height='20' id='edit-image-button' name='Image button' src='/images/drupal/druplicon.png' type='image'>
+                    <input name='form_build_id' type='hidden' value='form-p1dsmzCRyryNpAJqK_wY6xAdvKCseCEa2tWVhNUwKBE'>
+                      <input name='form_token' type='hidden' value='JgHDsNA3K2wOnE1ML25JvEfxbCUwElNU2YFSdWy0Ivk'>
+                        <input name='form_id' type='hidden' value='styleguide_form' />
+                      </input>
+                    </input>
+                  </input>
+                </div>
+              </form>
+            </div>
+          </article>
+          <article class='element' id='form-markup'>
+            <h2 class='element-title'>Form, Markup</h2>
+            <div class='markup'>
+              <form accept-charset='UTF-8' action='' id='styleguide-form--5' method='post'>
+                <div>
+                  <p><em>Markup</em>: Note that markup does not allow titles or descriptions. Use "item" for those options.
+                  </p>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
+                  <div class='form-item form-type-item' id='edit-item'>
+                    <label for='edit-item'>Item</label>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p>
+                    <div class='description'>Sed et enim nunc, nec vehicula sem.</div>
+                  </div>
+                  <input name='form_build_id' type='hidden' value='form-F69bjQ5UK6Fgait9vlHpQ2bbr8qFS7N3E9E9NgX7RZs'>
+                    <input name='form_token' type='hidden' value='JgHDsNA3K2wOnE1ML25JvEfxbCUwElNU2YFSdWy0Ivk'>
+                      <input name='form_id' type='hidden' value='styleguide_form' />
+                    </input>
+                  </input>
+                </div>
+              </form>
+            </div>
+          </article>
+          <article class='element' id='form-fieldsets'>
+            <h2 class='element-title'>Form, Fieldsets</h2>
+            <div class='markup'>
+              <form accept-charset='UTF-8' action='' id='styleguide-form--6' method='post'>
+                <div>
+                  <fieldset class='collapsible collapsed form-wrapper collapse-processed' id='edit-fieldset-collapsed'>
+                    <legend>
+                      <span class='fieldset-legend'>
+                        <a class='fieldset-title' href='#'>
+                          <span class='fieldset-legend-prefix element-invisible'>Show</span>
+                          Fieldset collapsed
+                        </a>
+                        <span class='summary'></span>
+                      </span>
+                    </legend>
+                    <div class='fieldset-wrapper'>
+                      <div class='fieldset-description'>Suspendisse potenti.</div>
+                      <div class='form-item form-type-select form-item-select-fieldset-collapsed'>
+                        <label for='edit-select-fieldset-collapsed'>Select</label>
+                        <select class='form-select' id='edit-select-fieldset-collapsed' name='select-fieldset-collapsed'>
+                          <option value='velit'>velit</option>
+                          <option value='dictum'>dictum</option>
+                          <option value='nunc'>nunc</option>
+                          <option value='lacus'>lacus</option>
+                          <option value='urna'>urna</option>
+                        </select>
+                        <div class='description'>Pellentesque ac dictum ante.</div>
+                      </div>
+                      <div class='form-item form-type-checkboxes form-item-checkboxes-fieldset-collapsed'>
+                        <label for='edit-checkboxes-fieldset-collapsed'>Checkboxes</label>
+                        <div class='form-checkboxes' id='edit-checkboxes-fieldset-collapsed'>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-collapsed-velit'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-collapsed-velit' name='checkboxes-fieldset-collapsed[velit]' type='checkbox' value='velit'>
+                              <label class='option' for='edit-checkboxes-fieldset-collapsed-velit'>velit</label>
+                            </input>
+                          </div>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-collapsed-dictum'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-collapsed-dictum' name='checkboxes-fieldset-collapsed[dictum]' type='checkbox' value='dictum'>
+                              <label class='option' for='edit-checkboxes-fieldset-collapsed-dictum'>dictum</label>
+                            </input>
+                          </div>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-collapsed-nunc'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-collapsed-nunc' name='checkboxes-fieldset-collapsed[nunc]' type='checkbox' value='nunc'>
+                              <label class='option' for='edit-checkboxes-fieldset-collapsed-nunc'>nunc</label>
+                            </input>
+                          </div>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-collapsed-lacus'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-collapsed-lacus' name='checkboxes-fieldset-collapsed[lacus]' type='checkbox' value='lacus'>
+                              <label class='option' for='edit-checkboxes-fieldset-collapsed-lacus'>lacus</label>
+                            </input>
+                          </div>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-collapsed-urna'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-collapsed-urna' name='checkboxes-fieldset-collapsed[urna]' type='checkbox' value='urna'>
+                              <label class='option' for='edit-checkboxes-fieldset-collapsed-urna'>urna</label>
+                            </input>
+                          </div>
+                        </div>
+                        <div class='description'>Vestibulum sit amet massa est.</div>
+                      </div>
+                    </div>
+                  </fieldset>
+                  <fieldset class='collapsible form-wrapper collapse-processed' id='edit-fieldset-collapsible'>
+                    <legend>
+                      <span class='fieldset-legend'>
+                        <a class='fieldset-title' href='#'>
+                          <span class='fieldset-legend-prefix element-invisible'>Hide</span>
+                          Fieldset collapsible
+                        </a>
+                        <span class='summary'></span>
+                      </span>
+                    </legend>
+                    <div class='fieldset-wrapper'>
+                      <div class='fieldset-description'>Phasellus sagittis, orci vel laoreet molestie, urna orci imperdiet elit, quis ultricies orci mauris vel ante.</div>
+                      <div class='form-item form-type-select form-item-select-fieldset-collapsible'>
+                        <label for='edit-select-fieldset-collapsible'>Select</label>
+                        <select class='form-select' id='edit-select-fieldset-collapsible' name='select-fieldset-collapsible'>
+                          <option value='velit'>velit</option>
+                          <option value='dictum'>dictum</option>
+                          <option value='nunc'>nunc</option>
+                          <option value='lacus'>lacus</option>
+                          <option value='urna'>urna</option>
+                        </select>
+                        <div class='description'>Pellentesque ac dictum ante.</div>
+                      </div>
+                      <div class='form-item form-type-checkboxes form-item-checkboxes-fieldset-collapsible'>
+                        <label for='edit-checkboxes-fieldset-collapsible'>Checkboxes</label>
+                        <div class='form-checkboxes' id='edit-checkboxes-fieldset-collapsible'>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-collapsible-velit'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-collapsible-velit' name='checkboxes-fieldset-collapsible[velit]' type='checkbox' value='velit'>
+                              <label class='option' for='edit-checkboxes-fieldset-collapsible-velit'>velit</label>
+                            </input>
+                          </div>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-collapsible-dictum'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-collapsible-dictum' name='checkboxes-fieldset-collapsible[dictum]' type='checkbox' value='dictum'>
+                              <label class='option' for='edit-checkboxes-fieldset-collapsible-dictum'>dictum</label>
+                            </input>
+                          </div>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-collapsible-nunc'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-collapsible-nunc' name='checkboxes-fieldset-collapsible[nunc]' type='checkbox' value='nunc'>
+                              <label class='option' for='edit-checkboxes-fieldset-collapsible-nunc'>nunc</label>
+                            </input>
+                          </div>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-collapsible-lacus'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-collapsible-lacus' name='checkboxes-fieldset-collapsible[lacus]' type='checkbox' value='lacus'>
+                              <label class='option' for='edit-checkboxes-fieldset-collapsible-lacus'>lacus</label>
+                            </input>
+                          </div>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-collapsible-urna'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-collapsible-urna' name='checkboxes-fieldset-collapsible[urna]' type='checkbox' value='urna'>
+                              <label class='option' for='edit-checkboxes-fieldset-collapsible-urna'>urna</label>
+                            </input>
+                          </div>
+                        </div>
+                        <div class='description'>Vestibulum sit amet massa est.</div>
+                      </div>
+                    </div>
+                  </fieldset>
+                  <fieldset class='form-wrapper' id='edit-fieldset'>
+                    <legend>
+                      <span class='fieldset-legend'>Fieldset</span>
+                    </legend>
+                    <div class='fieldset-wrapper'>
+                      <div class='fieldset-description'>Phasellus blandit ullamcorper diam vel porta.</div>
+                      <div class='form-item form-type-select form-item-select-fieldset'>
+                        <label for='edit-select-fieldset'>Select</label>
+                        <select class='form-select' id='edit-select-fieldset' name='select-fieldset'>
+                          <option value='velit'>velit</option>
+                          <option value='dictum'>dictum</option>
+                          <option value='nunc'>nunc</option>
+                          <option value='lacus'>lacus</option>
+                          <option value='urna'>urna</option>
+                        </select>
+                        <div class='description'>Pellentesque ac dictum ante.</div>
+                      </div>
+                      <div class='form-item form-type-checkboxes form-item-checkboxes-fieldset'>
+                        <label for='edit-checkboxes-fieldset'>Checkboxes</label>
+                        <div class='form-checkboxes' id='edit-checkboxes-fieldset'>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-velit'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-velit' name='checkboxes-fieldset[velit]' type='checkbox' value='velit'>
+                              <label class='option' for='edit-checkboxes-fieldset-velit'>velit</label>
+                            </input>
+                          </div>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-dictum'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-dictum' name='checkboxes-fieldset[dictum]' type='checkbox' value='dictum'>
+                              <label class='option' for='edit-checkboxes-fieldset-dictum'>dictum</label>
+                            </input>
+                          </div>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-nunc'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-nunc' name='checkboxes-fieldset[nunc]' type='checkbox' value='nunc'>
+                              <label class='option' for='edit-checkboxes-fieldset-nunc'>nunc</label>
+                            </input>
+                          </div>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-lacus'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-lacus' name='checkboxes-fieldset[lacus]' type='checkbox' value='lacus'>
+                              <label class='option' for='edit-checkboxes-fieldset-lacus'>lacus</label>
+                            </input>
+                          </div>
+                          <div class='form-item form-type-checkbox form-item-checkboxes-fieldset-urna'>
+                            <input class='form-checkbox' id='edit-checkboxes-fieldset-urna' name='checkboxes-fieldset[urna]' type='checkbox' value='urna'>
+                              <label class='option' for='edit-checkboxes-fieldset-urna'>urna</label>
+                            </input>
+                          </div>
+                        </div>
+                        <div class='description'>Vestibulum sit amet massa est.</div>
+                      </div>
+                    </div>
+                  </fieldset>
+                  <input name='form_build_id' type='hidden' value='form-gi6SpKK3VOnnH-PGQIoE7IoT2c03RBzHEdVeGo8rv3o'>
+                    <input name='form_token' type='hidden' value='JgHDsNA3K2wOnE1ML25JvEfxbCUwElNU2YFSdWy0Ivk'>
+                      <input name='form_id' type='hidden' value='styleguide_form' />
+                    </input>
+                  </input>
+                </div>
+              </form>
+            </div>
+          </article>
+          <article class='element' id='form-vertical-tabs'>
+            <h2 class='element-title'>form, Vertical Tabs</h2>
+            <div class='markup'>
+              <form accept-charset='UTF-8' action='' enctype='multipart/form-data' id='styleguide-form' method='post'>
+                <div>
+                  <div class='form-item form-type-select form-item-select'>
+                    <label for='edit-select'>Select</label>
+                    <select class='form-select' id='edit-select' name='select'>
+                      <option value='eget'>eget</option>
+                      <option value='venenatis'>venenatis</option>
+                      <option value='aliquam'>aliquam</option>
+                      <option value='consequat'>consequat</option>
+                      <option value='dignissim'>dignissim</option>
+                    </select>
+                    <div class='description'>Duis orci nunc, lacinia in malesuada et, euismod id turpis.</div>
+                  </div>
+                  <div class='form-item form-type-checkbox form-item-checkbox'>
+                    <input checked='checked' class='form-checkbox' id='edit-checkbox' name='checkbox' type='checkbox' value='1'>
+                      <label class='option' for='edit-checkbox'>Checkbox</label>
+                      <div class='description'>Fusce dignissim tempor elementum.</div>
+                    </input>
+                  </div>
+                  <div class='form-item form-type-checkboxes form-item-checkboxes'>
+                    <label for='edit-checkboxes'>Checkboxes</label>
+                    <div class='form-checkboxes' id='edit-checkboxes'>
+                      <div class='form-item form-type-checkbox form-item-checkboxes-eget'>
+                        <input class='form-checkbox' id='edit-checkboxes-eget' name='checkboxes[eget]' type='checkbox' value='eget'>
+                          <label class='option' for='edit-checkboxes-eget'>eget</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-checkbox form-item-checkboxes-venenatis'>
+                        <input class='form-checkbox' id='edit-checkboxes-venenatis' name='checkboxes[venenatis]' type='checkbox' value='venenatis'>
+                          <label class='option' for='edit-checkboxes-venenatis'>venenatis</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-checkbox form-item-checkboxes-aliquam'>
+                        <input class='form-checkbox' id='edit-checkboxes-aliquam' name='checkboxes[aliquam]' type='checkbox' value='aliquam'>
+                          <label class='option' for='edit-checkboxes-aliquam'>aliquam</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-checkbox form-item-checkboxes-consequat'>
+                        <input class='form-checkbox' id='edit-checkboxes-consequat' name='checkboxes[consequat]' type='checkbox' value='consequat'>
+                          <label class='option' for='edit-checkboxes-consequat'>consequat</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-checkbox form-item-checkboxes-dignissim'>
+                        <input class='form-checkbox' id='edit-checkboxes-dignissim' name='checkboxes[dignissim]' type='checkbox' value='dignissim'>
+                          <label class='option' for='edit-checkboxes-dignissim'>dignissim</label>
+                        </input>
+                      </div>
+                    </div>
+                    <div class='description'>Phasellus ac eleifend magna.</div>
+                  </div>
+                  <div class='form-item form-type-radios form-item-radios'>
+                    <label for='edit-radios'>Radios</label>
+                    <div class='form-radios' id='edit-radios'>
+                      <div class='form-item form-type-radio form-item-radios'>
+                        <input class='form-radio' id='edit-radios-eget' name='radios' type='radio' value='eget'>
+                          <label class='option' for='edit-radios-eget'>eget</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-radio form-item-radios'>
+                        <input class='form-radio' id='edit-radios-venenatis' name='radios' type='radio' value='venenatis'>
+                          <label class='option' for='edit-radios-venenatis'>venenatis</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-radio form-item-radios'>
+                        <input class='form-radio' id='edit-radios-aliquam' name='radios' type='radio' value='aliquam'>
+                          <label class='option' for='edit-radios-aliquam'>aliquam</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-radio form-item-radios'>
+                        <input class='form-radio' id='edit-radios-consequat' name='radios' type='radio' value='consequat'>
+                          <label class='option' for='edit-radios-consequat'>consequat</label>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-radio form-item-radios'>
+                        <input class='form-radio' id='edit-radios-dignissim' name='radios' type='radio' value='dignissim'>
+                          <label class='option' for='edit-radios-dignissim'>dignissim</label>
+                        </input>
+                      </div>
+                    </div>
+                    <div class='description'>Suspendisse lectus erat, commodo nec fringilla quis, interdum non leo.</div>
+                  </div>
+                  <div class='form-item form-type-textfield form-item-textfield'>
+                    <label for='edit-textfield'>Textfield</label>
+                    <input class='form-text' id='edit-textfield' maxlength='128' name='textfield' size='60' type='text' value='euismod'>
+                      <div class='description'>Vestibulum ut ligula dolor, in placerat tortor.</div>
+                    </input>
+                  </div>
+                  <div class='form-item form-type-textfield form-item-autocomplete' role='application'>
+                    <label for='edit-autocomplete'>Autocomplete textfield</label>
+                    <input aria-autocomplete='list' autocomplete='OFF' class='form-text form-autocomplete' id='edit-autocomplete' maxlength='128' name='autocomplete' size='60' type='text' value='nunc'>
+                      <input class='autocomplete autocomplete-processed' disabled='disabled' id='edit-autocomplete-autocomplete' type='hidden' value='http://roadside.local/user/autocomplete'>
+                        <div class='description'>Nam auctor dui a neque iaculis in aliquam erat viverra.</div>
+                        <span aria-live='assertive' class='element-invisible' id='edit-autocomplete-autocomplete-aria-live'></span>
+                      </input>
+                    </input>
+                  </div>
+                  <div class='form-item form-type-textfield form-item-textfield-machine'>
+                    <label for='edit-textfield-machine'>Textfield, with machine name</label>
+                    <input class='form-text machine-name-source' id='edit-textfield-machine' maxlength='128' name='textfield-machine' size='60' type='text' value='velit convallis consectetur'>
+                      <span class='field-suffix'>
+                        <small id='edit-textfield-machine-machine-name-suffix'>
+                          <span class='machine-name-label'>Machine name:</span>
+                          <span class='machine-name-value'>velit_convallis_consectetur</span>
+                          <span class='admin-link'>
+                            <a href='#'>Edit</a>
+                          </span>
+                        </small>
+                      </span>
+                      <div class='description'>Aenean sit amet tellus sit amet ante congue faucibus.</div>
+                    </input>
+                  </div>
+                  <div class='form-item form-type-machine-name form-item-machine-name' style='display: none; '>
+                    <label for='edit-machine-name'>
+                      Machine name
+                      <span class='form-required' title='This field is required.'>*</span>
+                    </label>
+                    <input class='form-text required machine-name-target' id='edit-machine-name' maxlength='64' name='machine_name' size='60' type='text' value=''>
+                      <div class='description'>Morbi congue nulla vel tortor aliquet imperdiet.</div>
+                    </input>
+                  </div>
+                  <div class='form-item form-type-textarea form-item-textarea'>
+                    <label for='edit-textarea'>Textarea</label>
+                    <div class='form-textarea-wrapper resizable textarea-processed resizable-textarea'>
+                      <textarea class='form-textarea' cols='60' id='edit-textarea' name='textarea' rows='5'><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.</p><p>Vivamus pretium placerat lorem, in tempor massa convallis sit amet. Aliquam sed quam eget ligula luctus aliquam sed vitae nulla. Aliquam dui dolor, ullamcorper eget rutrum ut, hendrerit ac lorem. Donec magna est, sollicitudin vel ultrices vel, mattis ut odio. Integer vel felis laoreet purus sollicitudin varius sed id ipsum. Suspendisse potenti. Praesent ut justo vitae metus luctus vehicula a et purus. Suspendisse potenti. Sed viverra, quam non hendrerit laoreet, massa odio blandit arcu, ac molestie metus diam eu tortor. Donec erat arcu, ultrices sit amet placerat non, feugiat in arcu. Mauris eros quam, varius eget volutpat vel, tristique sed est. In faucibus feugiat urna sit amet elementum. Integer consequat rhoncus libero, in molestie augue posuere et. Phasellus ac eleifend magna. Proin vulputate dui ac justo pharetra consequat. In vel iaculis ligula.</p><p>Cras vestibulum lacus sit amet sem commodo ullamcorper aliquet eros vestibulum. Sed fermentum nulla quis risus suscipit dapibus. Sed vitae velit ut dolor varius semper at id lectus. Aenean quis leo sit amet tellus tempus cursus. Vivamus semper vehicula ante eget semper. In ac ipsum erat. Suspendisse lectus erat, commodo nec fringilla quis, interdum non leo. Vivamus et lectus vitae risus porta sollicitudin luctus eget est. Etiam quis elit vel est suscipit tristique. Nullam fringilla purus ac velit gravida ullamcorper. Praesent porttitor ante non lacus suscipit porta. Nunc fermentum sem et metus aliquam ultricies non sollicitudin nibh. Vestibulum ut ligula dolor, in placerat tortor. Sed nec lacus sed nibh iaculis luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur rutrum, diam vel tempor commodo, augue nunc viverra risus, in pellentesque neque justo eget dolor. Maecenas quis odio leo, a auctor lorem.</p><p>Curabitur dapibus odio quis enim hendrerit eu placerat lorem accumsan. Phasellus sagittis, orci vel laoreet molestie, urna orci imperdiet elit, quis ultricies orci mauris vel ante. Cras pharetra, nisl a sagittis feugiat, turpis magna placerat sem, sed euismod erat elit in magna. Phasellus blandit ullamcorper diam vel porta. Vivamus mollis, metus nec tincidunt venenatis, risus odio sodales risus, vitae ultrices est nisi eget ante. Aenean eget nisi mi. Nulla non nulla nec metus rhoncus congue. Curabitur quis nunc nibh. Cras metus lorem, euismod ornare mattis sagittis, ultrices eget turpis. Integer quis dui tellus. Morbi vel dolor sit amet metus eleifend fringilla. Fusce nunc neque, ultricies et commodo semper, dignissim vitae tortor. Phasellus et ipsum quis sapien accumsan auctor. Morbi congue nulla vel tortor aliquet imperdiet. Morbi eget odio elit, et cursus odio. Quisque a velit diam. Duis urna libero, tempus non mattis a, convallis ac erat. Etiam vel dui posuere lectus auctor viverra vitae id eros. Maecenas mollis eros non elit sollicitudin quis fermentum diam lacinia. Quisque at ante nibh, a molestie ligula.</p><p>Sed et enim nunc, nec vehicula sem. Sed risus orci, auctor et dictum at, hendrerit eu augue. Curabitur sed ante non quam fermentum vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt dictum molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus nec urna ut lorem tempus aliquet eget nec lectus. Phasellus quis venenatis tortor. Integer elementum, sapien at feugiat cursus, tortor sapien adipiscing massa, non molestie elit lacus vel velit. Suspendisse sit amet sem id libero auctor pharetra sit amet ut dui. Aenean sit amet tellus sit amet ante congue faucibus. Nullam hendrerit, justo et iaculis tristique, ligula risus pretium erat, sed tempus lacus felis ut nulla.</p></textarea>
+                      <div class='grippie'></div>
+                    </div>
+                    <div class='description'>Sed risus orci, auctor et dictum at, hendrerit eu augue.</div>
+                  </div>
+                  <div class='form-item form-type-date form-item-date'>
+                    <label for='edit-date'>Date</label>
+                    <div class='container-inline'>
+                      <div class='form-item form-type-select form-item-date-year'>
+                        <label class='element-invisible' for='edit-date-year'>Year</label>
+                        <select class='form-select' id='edit-date-year' name='date[year]'>
+                          <option value='1900'>1900</option>
+                          <option value='1901'>1901</option>
+                          <option value='1902'>1902</option>
+                          <option value='1903'>1903</option>
+                          <option value='1904'>1904</option>
+                          <option value='1905'>1905</option>
+                          <option value='1906'>1906</option>
+                          <option value='1907'>1907</option>
+                          <option value='1908'>1908</option>
+                          <option value='1909'>1909</option>
+                          <option value='1910'>1910</option>
+                          <option value='1911'>1911</option>
+                          <option value='1912'>1912</option>
+                          <option value='1913'>1913</option>
+                          <option value='1914'>1914</option>
+                          <option value='1915'>1915</option>
+                          <option value='1916'>1916</option>
+                          <option value='1917'>1917</option>
+                          <option value='1918'>1918</option>
+                          <option value='1919'>1919</option>
+                          <option value='1920'>1920</option>
+                          <option value='1921'>1921</option>
+                          <option value='1922'>1922</option>
+                          <option value='1923'>1923</option>
+                          <option value='1924'>1924</option>
+                          <option value='1925'>1925</option>
+                          <option value='1926'>1926</option>
+                          <option value='1927'>1927</option>
+                          <option value='1928'>1928</option>
+                          <option value='1929'>1929</option>
+                          <option value='1930'>1930</option>
+                          <option value='1931'>1931</option>
+                          <option value='1932'>1932</option>
+                          <option value='1933'>1933</option>
+                          <option value='1934'>1934</option>
+                          <option value='1935'>1935</option>
+                          <option value='1936'>1936</option>
+                          <option value='1937'>1937</option>
+                          <option value='1938'>1938</option>
+                          <option value='1939'>1939</option>
+                          <option value='1940'>1940</option>
+                          <option value='1941'>1941</option>
+                          <option value='1942'>1942</option>
+                          <option value='1943'>1943</option>
+                          <option value='1944'>1944</option>
+                          <option value='1945'>1945</option>
+                          <option value='1946'>1946</option>
+                          <option value='1947'>1947</option>
+                          <option value='1948'>1948</option>
+                          <option value='1949'>1949</option>
+                          <option value='1950'>1950</option>
+                          <option value='1951'>1951</option>
+                          <option value='1952'>1952</option>
+                          <option value='1953'>1953</option>
+                          <option value='1954'>1954</option>
+                          <option value='1955'>1955</option>
+                          <option value='1956'>1956</option>
+                          <option value='1957'>1957</option>
+                          <option value='1958'>1958</option>
+                          <option value='1959'>1959</option>
+                          <option value='1960'>1960</option>
+                          <option value='1961'>1961</option>
+                          <option value='1962'>1962</option>
+                          <option value='1963'>1963</option>
+                          <option value='1964'>1964</option>
+                          <option value='1965'>1965</option>
+                          <option value='1966'>1966</option>
+                          <option value='1967'>1967</option>
+                          <option value='1968'>1968</option>
+                          <option value='1969'>1969</option>
+                          <option value='1970'>1970</option>
+                          <option value='1971'>1971</option>
+                          <option value='1972'>1972</option>
+                          <option value='1973'>1973</option>
+                          <option value='1974'>1974</option>
+                          <option value='1975'>1975</option>
+                          <option value='1976'>1976</option>
+                          <option value='1977'>1977</option>
+                          <option value='1978'>1978</option>
+                          <option value='1979'>1979</option>
+                          <option value='1980'>1980</option>
+                          <option value='1981'>1981</option>
+                          <option value='1982'>1982</option>
+                          <option value='1983'>1983</option>
+                          <option value='1984'>1984</option>
+                          <option value='1985'>1985</option>
+                          <option value='1986'>1986</option>
+                          <option value='1987'>1987</option>
+                          <option value='1988'>1988</option>
+                          <option value='1989'>1989</option>
+                          <option value='1990'>1990</option>
+                          <option value='1991'>1991</option>
+                          <option value='1992'>1992</option>
+                          <option value='1993'>1993</option>
+                          <option value='1994'>1994</option>
+                          <option value='1995'>1995</option>
+                          <option value='1996'>1996</option>
+                          <option value='1997'>1997</option>
+                          <option value='1998'>1998</option>
+                          <option value='1999'>1999</option>
+                          <option value='2000'>2000</option>
+                          <option value='2001'>2001</option>
+                          <option value='2002'>2002</option>
+                          <option value='2003'>2003</option>
+                          <option value='2004'>2004</option>
+                          <option value='2005'>2005</option>
+                          <option value='2006'>2006</option>
+                          <option value='2007'>2007</option>
+                          <option value='2008'>2008</option>
+                          <option value='2009'>2009</option>
+                          <option value='2010'>2010</option>
+                          <option value='2011'>2011</option>
+                          <option selected='selected' value='2012'>2012</option>
+                          <option value='2013'>2013</option>
+                          <option value='2014'>2014</option>
+                          <option value='2015'>2015</option>
+                          <option value='2016'>2016</option>
+                          <option value='2017'>2017</option>
+                          <option value='2018'>2018</option>
+                          <option value='2019'>2019</option>
+                          <option value='2020'>2020</option>
+                          <option value='2021'>2021</option>
+                          <option value='2022'>2022</option>
+                          <option value='2023'>2023</option>
+                          <option value='2024'>2024</option>
+                          <option value='2025'>2025</option>
+                          <option value='2026'>2026</option>
+                          <option value='2027'>2027</option>
+                          <option value='2028'>2028</option>
+                          <option value='2029'>2029</option>
+                          <option value='2030'>2030</option>
+                          <option value='2031'>2031</option>
+                          <option value='2032'>2032</option>
+                          <option value='2033'>2033</option>
+                          <option value='2034'>2034</option>
+                          <option value='2035'>2035</option>
+                          <option value='2036'>2036</option>
+                          <option value='2037'>2037</option>
+                          <option value='2038'>2038</option>
+                          <option value='2039'>2039</option>
+                          <option value='2040'>2040</option>
+                          <option value='2041'>2041</option>
+                          <option value='2042'>2042</option>
+                          <option value='2043'>2043</option>
+                          <option value='2044'>2044</option>
+                          <option value='2045'>2045</option>
+                          <option value='2046'>2046</option>
+                          <option value='2047'>2047</option>
+                          <option value='2048'>2048</option>
+                          <option value='2049'>2049</option>
+                          <option value='2050'>2050</option>
+                        </select>
+                      </div>
+                      <div class='form-item form-type-select form-item-date-month'>
+                        <label class='element-invisible' for='edit-date-month'>Month</label>
+                        <select class='form-select' id='edit-date-month' name='date[month]'>
+                          <option selected='selected' value='1'>Jan</option>
+                          <option value='2'>Feb</option>
+                          <option value='3'>Mar</option>
+                          <option value='4'>Apr</option>
+                          <option value='5'>May</option>
+                          <option value='6'>Jun</option>
+                          <option value='7'>Jul</option>
+                          <option value='8'>Aug</option>
+                          <option value='9'>Sep</option>
+                          <option value='10'>Oct</option>
+                          <option value='11'>Nov</option>
+                          <option value='12'>Dec</option>
+                        </select>
+                      </div>
+                      <div class='form-item form-type-select form-item-date-day'>
+                        <label class='element-invisible' for='edit-date-day'>Day</label>
+                        <select class='form-select' id='edit-date-day' name='date[day]'>
+                          <option value='1'>1</option>
+                          <option value='2'>2</option>
+                          <option value='3'>3</option>
+                          <option value='4'>4</option>
+                          <option value='5'>5</option>
+                          <option value='6'>6</option>
+                          <option value='7'>7</option>
+                          <option value='8'>8</option>
+                          <option value='9'>9</option>
+                          <option value='10'>10</option>
+                          <option value='11'>11</option>
+                          <option value='12'>12</option>
+                          <option value='13'>13</option>
+                          <option value='14'>14</option>
+                          <option value='15'>15</option>
+                          <option value='16'>16</option>
+                          <option value='17'>17</option>
+                          <option value='18'>18</option>
+                          <option selected='selected' value='19'>19</option>
+                          <option value='20'>20</option>
+                          <option value='21'>21</option>
+                          <option value='22'>22</option>
+                          <option value='23'>23</option>
+                          <option value='24'>24</option>
+                          <option value='25'>25</option>
+                          <option value='26'>26</option>
+                          <option value='27'>27</option>
+                          <option value='28'>28</option>
+                          <option value='29'>29</option>
+                          <option value='30'>30</option>
+                          <option value='31'>31</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div class='description'>Sed feugiat velit sed magna aliquam accumsan.</div>
+                  </div>
+                  <div class='form-item form-type-file form-item-files-file'>
+                    <label for='edit-file'>File</label>
+                    <input class='form-file' id='edit-file' name='files[file]' size='60' type='file'>
+                      <div class='description'>Sed feugiat velit sed magna aliquam accumsan.</div>
+                    </input>
+                  </div>
+                  <div id='edit-managed-file-ajax-wrapper'>
+                    <div class='form-item form-type-managed-file form-item-managed-file'>
+                      <label for='edit-managed-file'>Managed file</label>
+                      <div class='form-managed-file'>
+                        <input class='form-file' id='edit-managed-file-upload' name='files[managed_file]' size='22' type='file'>
+                          <input class='form-submit ajax-processed' id='edit-managed-file-upload-button' name='managed_file_upload_button' type='submit' value='Upload'>
+                            <input name='managed_file[fid]' type='hidden' value='0' />
+                          </input>
+                        </input>
+                      </div>
+                      <div class='description'>Morbi congue nulla vel tortor aliquet imperdiet.</div>
+                    </div>
+                  </div>
+                  <div class='form-item form-type-password form-item-password'>
+                    <label for='edit-password'>Password</label>
+                    <input class='form-text' id='edit-password' maxlength='128' name='password' size='60' type='password'>
+                      <div class='description'>Sed vitae velit ut dolor varius semper at id lectus.</div>
+                    </input>
+                  </div>
+                  <div class='form-item form-type-password-confirm form-item-password-confirm'>
+                    <label for='edit-password-confirm'>Password confirm</label>
+                    <div class='form-item form-type-password form-item-password-confirm-pass1 password-parent'>
+                      <div class='password-strength'>
+                        <div aria-live='assertive' class='password-strength-text'></div>
+                        <div class='password-strength-title'>Password strength:</div>
+                        <div class='password-indicator'>
+                          <div class='indicator'></div>
+                        </div>
+                      </div>
+                      <label for='edit-password-confirm-pass1'>Password</label>
+                      <input class='password-field form-text password-processed' id='edit-password-confirm-pass1' maxlength='128' name='password_confirm[pass1]' size='60' type='password' />
+                    </div>
+                    <div class='form-item form-type-password form-item-password-confirm-pass2 confirm-parent'>
+                      <div class='password-confirm'>
+                        Passwords match:
+                        <span></span>
+                      </div>
+                      <label for='edit-password-confirm-pass2'>Confirm password</label>
+                      <input class='password-confirm form-text' id='edit-password-confirm-pass2' maxlength='128' name='password_confirm[pass2]' size='60' type='password' />
+                    </div>
+                    <div class='password-suggestions description' style='display: none; '></div>
+                  </div>
+                  <div class='form-item form-type-select form-item-weight'>
+                    <label for='edit-weight'>Weight</label>
+                    <select class='form-select' id='edit-weight' name='weight'>
+                      <option value='-10'>-10</option>
+                      <option value='-9'>-9</option>
+                      <option value='-8'>-8</option>
+                      <option value='-7'>-7</option>
+                      <option value='-6'>-6</option>
+                      <option value='-5'>-5</option>
+                      <option value='-4'>-4</option>
+                      <option value='-3'>-3</option>
+                      <option value='-2'>-2</option>
+                      <option value='-1'>-1</option>
+                      <option selected='selected' value='0'>0</option>
+                      <option value='1'>1</option>
+                      <option value='2'>2</option>
+                      <option value='3'>3</option>
+                      <option value='4'>4</option>
+                      <option value='5'>5</option>
+                      <option value='6'>6</option>
+                      <option value='7'>7</option>
+                      <option value='8'>8</option>
+                      <option value='9'>9</option>
+                      <option value='10'>10</option>
+                    </select>
+                    <div class='description'>Phasellus blandit ullamcorper diam vel porta.</div>
+                  </div>
+                  <input name='form_build_id' type='hidden' value='form-x-0vcWL95UYhYJdScM5FciQVI2fEZT78IOFQaqNkpFE'>
+                    <input name='form_token' type='hidden' value='JgHDsNA3K2wOnE1ML25JvEfxbCUwElNU2YFSdWy0Ivk'>
+                      <input name='form_id' type='hidden' value='styleguide_form' />
+                    </input>
+                  </input>
+                </div>
+              </form>
+            </div>
+          </article>
+          <article class='element' id='form-new-account'>
+            <h2 class='element-title'>New User Form</h2>
+            <div class='markup'>
+              <div class='block block-system' id='block-system-main'>
+                <div class='content'>
+                  <form accept-charset='UTF-8' action='/user/register' class='user-info-from-cookie' enctype='multipart/form-data' id='user-register-form' method='post'>
+                    <div>
+                      <div class='form-item form-type-textfield form-item-name'>
+                        <label for='edit-name'>
+                          Username
+                          <span class='form-required' title='This field is required.'>*</span>
+                        </label>
+                        <input class='username form-text required' id='edit-name' maxlength='60' name='name' size='60' type='text' value=''>
+                          <div class='description'>Spaces are allowed; punctuation is not allowed except for periods, hyphens, apostrophes, and underscores.</div>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-emailfield form-item-mail'>
+                        <label for='edit-mail'>
+                          E-mail address
+                          <span class='form-required' title='This field is required.'>*</span>
+                        </label>
+                        <input class='form-text form-email required' id='edit-mail' maxlength='254' name='mail' size='60' type='email' value=''>
+                          <div class='description'>A valid e-mail address. All e-mails from the system will be sent to this address. The e-mail address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by e-mail.</div>
+                        </input>
+                      </div>
+                      <input name='timezone' type='hidden' value='America/New_York'>
+                        <input name='form_build_id' type='hidden' value='form-5ZOqvNO7BiBFYWgXdre26qBbXM5YuyRLfOsdc1Kx9KU'>
+                          <input name='form_id' type='hidden' value='user_register_form'>
+                            <div class='form-actions form-wrapper' id='edit-actions'>
+                              <input class='form-submit' id='edit-submit' name='op' type='submit' value='Create new account' />
+                            </div>
+                          </input>
+                        </input>
+                      </input>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='form-login'>
+            <h2 class='element-title'>Log In Form</h2>
+            <div class='markup'>
+              <div class='block block-system' id='block-system-main'>
+                <div class='content'>
+                  <form accept-charset='UTF-8' action='/user' id='user-login' method='post'>
+                    <div>
+                      <div class='form-item form-type-textfield form-item-name'>
+                        <label for='edit-name'>
+                          Username
+                          <span class='form-required' title='This field is required.'>*</span>
+                        </label>
+                        <input class='form-text required' id='edit-name' maxlength='60' name='name' size='60' type='text' value=''>
+                          <div class='description'>Enter your d7 username.</div>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-password form-item-pass'>
+                        <label for='edit-pass'>
+                          Password
+                          <span class='form-required' title='This field is required.'>*</span>
+                        </label>
+                        <input class='form-text required' id='edit-pass' maxlength='128' name='pass' size='60' type='password' value=''>
+                          <div class='description'>Enter the password that accompanies your username.</div>
+                        </input>
+                      </div>
+                      <input name='form_build_id' type='hidden' value='form-XW71tLWvMNpumkgW-wKMOpDRUN0cPt62fr5Q0M7KNzo'>
+                        <input name='form_id' type='hidden' value='user_login'>
+                          <div class='form-actions form-wrapper' id='edit-actions'>
+                            <input class='form-submit' id='edit-submit' name='op' type='submit' value='Log in' />
+                          </div>
+                        </input>
+                      </input>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='form-new-password'>
+            <h2 class='element-title'>New Password Form</h2>
+            <div class='markup'>
+              <div class='block block-system' id='block-system-main'>
+                <div class='content'>
+                  <form accept-charset='UTF-8' action='/user/password' id='user-pass' method='post'>
+                    <div>
+                      <div class='form-item form-type-textfield form-item-name'>
+                        <label for='edit-name'>
+                          Username or e-mail address
+                          <span class='form-required' title='This field is required.'>*</span>
+                        </label>
+                        <input class='form-text required' id='edit-name' maxlength='254' name='name' size='60' type='text' value='' />
+                      </div>
+                      <input name='form_build_id' type='hidden' value='form-P9tzA7PRYI8Y3TxPo9aBfFXR3hVb38lqzMLrZE1O9VE'>
+                        <input name='form_id' type='hidden' value='user_pass'>
+                          <div class='form-actions form-wrapper' id='edit-actions'>
+                            <input class='form-submit' id='edit-submit' name='op' type='submit' value='E-mail new password' />
+                          </div>
+                        </input>
+                      </input>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </article>
+        </section>
+      </div>
+      <footer></footer>
+    </div>
+    <!--
+      Javascript at the bottom for fast page loading
+      Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary
+    -->
+    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js'></script>
+    <script type='text/javascript'>
+      //<![CDATA[
+        window.jQuery || document.write("<script src='js/libs/jquery-1.6.min.js'>\x3C/script>")
+      //]]>
+    </script>
+    <script src='/js/libs/plugins.js?v=1'></script>
+    <script src='/js/script.js?v=1'></script>
+    <script src='/js/libs/320-up/helper.js?v=1'></script>
+    <script src='/js/kit/kit-source.jquery.js?v=1'></script>
+    <!--[if (lt IE 9) & (!IEMobile)]>
+      <script src="/js/libs/imgsizer.js"></script>
+    <![endif]-->
+    <script type='text/javascript'>
+      //<![CDATA[
+        // iOS scale bug fix
+        MBP.scaleFix();
+        // Respond.js
+        yepnope({
+          test : Modernizr.mq('(only all)'),
+          nope : ['/js/libs/respond.min.js']
+        });
+      //]]>
+    </script>
     <!-- asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet -->
     <!-- change the UA-XXXXX-X to be your site's ID -->
     <script type='text/javascript'>