<%inherit file="/template.html" />
<%block name="main">
    <h2>Typography</h2>
    <table>
        <tr>
            <th>Heading 1</th>
            <td><h1>Example Text</h1></td>
        </tr>
        <tr>
            <th>Heading 2</th>
            <td><h2>Example Text</h2></td>
        </tr>
        <tr>
            <th>Heading 3</th>
            <td><h3>Example Text</h3></td>
        </tr>
        <tr>
            <th>Heading 4</th>
            <td><h4>Example Text</h4></td>
        </tr>
        <tr>
            <th>Heading 5</th>
            <td><h5>Example Text</h5></td>
        </tr>
        <tr>
            <th>Heading 6</th>
            <td><h6>Example Text</h6></td>
        </tr>
        <tr>
            <th>Paragraph</th>
            <td>
                <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>
                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            </td>
        </tr>
        <tr>
            <th>Link</a></th>
            <td><a href="#">link</a></td>
        </tr>
        <tr>
            <th>Emphazised</a></th>
            <td><em>Example Text</em></td>
        </tr>
        <tr>
            <th>Strong</a></th>
            <td><strong>Example Text</strong></td>
        </tr>
        <tr>
            <th>Inserted</a></th>
            <td><ins>Example Text</ins></td>
        </tr>
        <tr>
            <th>Deleted</a></th>
            <td><del>Example Text</del></td>
        </tr>
        <tr>
            <th>Code</a></th>
            <td><code>Example Text</code></td>
        </tr>
        <tr>
            <th>Citation</a></th>
            <td><cite>Example Text</cite></td>
        </tr>
        <tr>
            <th>Horizontal Line</th>
            <td><hr/></td>
        </tr>
        <tr>
            <th>Ordered List</th>
            <td>
                <ol>
                    <li>Larry</li>
                    <li>Moe</li>
                    <li>Curly</li>
                </ol>
            </td>
        </tr>
        <tr>
            <th>Unordered List</th>
            <td>
                <ul>
                    <li>Larry</li>
                    <li>Moe</li>
                    <li>Curly</li>
                </ul>
            <ul>
        </tr>
        <tr>
            <th>Definition List</th>
            <td>
                <dl>
                    <dt>Defintion Term</dt><dd>Definition data defining the previous term</dd>
                    <dt>Another Definition Term</dt><dd>Definition data defining the previous term</dd>
                </dl>
            </td>
        </tr>
        <tr>
            <th>Address</th>
            <td>
                <address>John Q. Public<br />123 Main Street<br />Anywhere, ST 12345</address>
            </td>
        </tr>
        <tr>
            <th>Time</th>
            <td>
                <time datetime="2013-04-18T13:50:47+02:00">18. April 2013 13:50</time>
            </td>
        </tr>
        <tr>
            <th>Blockquote</th>
            <td>
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>
                </blockquote>
            </td>
        </tr>
        <tr>
            <th>Preformated</th>
            <td>
                <pre>def hello_world(name):
    s = "Hello %s!" % name
    print s</pre>
            </td>
        </tr>
        <tr>
            <th>Table</th>
            <td><table>
                <caption>This is a table caption, made with caption</caption>
                <thead>
                    <tr>
                        <th>Table Header 1</th>
                        <th>Table Header 2</th>
                        <th>Table Header 3</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Table Footer 1</th>
                        <td>Table Footer 2</td>
                        <td>Table Footer 3</td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <th>TD 1.1</th>
                        <td>TD 1.2</td>
                        <td>TD 1.3</td>
                    </tr>
                    <tr>
                        <th>TD 2.1</th>
                        <td>TD 2.2</td>
                        <td>TD 2.3</td>
                    </tr>
                </tbody>
            </table></td>
        </tr>
        <tr>
            <th>Morelink</th>
            <td>
                <a class="more">Example Text</a>
            </td>
        </tr>
        <tr>
            <th>Small Morelink</th>
            <td>
                <a class="more_link">Example Text</a>
            </td>
        </tr>
    </table>


    <h2>Forms</h2>

    <table>
        <tr>
            <th>Text Input</th>
            <td>
                <input type="text" value="Example Text"/>
            </td>
        </tr>
        <tr>
            <th>Password Input</th>
            <td>
                <input type="password" placeholder="password"/>
            </td>
        </tr>
        <tr>
            <th>Checkbox Input</th>
            <td>
                <label><input type="checkbox" name="CheckTest"/>Example Text 1</label>
                <label><input type="checkbox" name="CheckTest"/>Example Text 2</label>
                <label><input type="checkbox" name="CheckTest" checked="checked"/>Example Text 3</label>
            </td>
        </tr>
        <tr>
            <th>Radiobutton Input</th>
            <td>
                <label><input type="radio" name="RadioTest"/>Example Text 1</label>
                <label><input type="radio" name="RadioTest"/>Example Text 2</label>
                <label><input type="radio" name="RadioTest" checked="checked"/>Example Text 3</label>
            </td>
        </tr>
        <tr>
            <th>Submit Input</th>
            <td>
                <input type="submit" value="Example Text"/>
            </td>
        </tr>
        <tr>
            <th>Reset Input</th>
            <td>
                <input type="reset" value="Example Text"/>
            </td>
        </tr>
        <tr>
            <th>Button Input</th>
            <td>
                <input type="button" value="Example Text"/>
            </td>
        </tr>
        <tr>
            <th>File Input</th>
            <td>
                <input type="file"/>
            </td>
        </tr>
        <tr>
            <th>Email Input</th>
            <td>
                <input type="email" value="info@liqd.de"/>
            </td>
        </tr>
        <tr>
            <th>URL Input</th>
            <td>
                <input type="url" value="adhocracy.de"/>
            </td>
        </tr>
        <tr>
            <th>Number Input</th>
            <td>
                <input type="number" value="42"/>
            </td>
        </tr>
        <tr>
            <th>Time Input</th>
            <td>
                <input type="time"/>
            </td>
        </tr>
        <tr>
            <th>Date Input</th>
            <td>
                <input type="date"/>
            </td>
        </tr>
        <tr>
            <th>Color Input</th>
            <td>
                <input type="color"/>
            </td>
        </tr>
        <tr>
            <th></th>
            <td>
            </td>
        </tr>
        <tr>
            <th>Form</th>
            <td>
                <div id="col1">
                <div class="form_wrapper">
                    <form>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<p>
                        <div class="savebox">
                            <button type="submit" class="button" value="save">Speichern</button>
                            <span class="cancel">oder <a>Abbrechen</a></span>
                        </div>
                    </form>
                </div>
                </div>
            </td>
        </tr>
        <tr>
            <th>Searchbox</th>
            <td>
                <div id="searchbox">
                  <form action="/i/test/search" id="searchform" method="get">
                    <input type="text" id="s" name="serp_q" placeholder="Suchen in “asdasdasd”…" />
                    <input type="submit" value="Suchen" id="searchsubmit" />
                  </form>
                </div>
            </td>
        </tr>
    </table>


    <h2>Buttons</h2>

    <table>
        <tr>
            <th>Button (Class)</th>
            <td>
                <a class="button">Example Text</a>
            </td>
        </tr>
        <tr>
            <th>Button (Element)</th>
            <td>
                <button>Example Text</button>
            </td>
        </tr>
        <tr>
            <th>Highlight Button</th>
            <td>
                <a class="button highlight">Example Text</a>
            </td>
        </tr>
        <tr>
            <th>Register Button</th>
            <td>
                <div class="register"><a class="button">Example Text</a></div>
            </td>
        </tr>
        <tr>
            <th>Small Button</th>
            <td>
                <a class="button_small">Example Text</a>
            </td>
        </tr>
        <tr>
            <th>Active Small Button</th>
            <td>
                <a class="button_small active">Example Text</a>
            </td>
        </tr>
        <tr>
            <th>Inactive Small Button</th>
            <td>
                <div class="inactive"><a class="button_small">Example Text</a></div>
            </td>
        </tr>
        <tr>
            <th>Delegate Button</th>
            <td>
                <a class="button delegate">Delegate Button</a>
            </td>
        </tr>
        <tr>
            <th>Follow Button</th>
            <td>
                <a class="follow_paper">Example Text</a>
            </td>
        </tr>
        <tr>
            <th>Active Follow Button</th>
            <td>
                <a class="follow_paper active">Example Text</a>
            </td>
        </tr>
        <tr>
            <th>Message Button</th>
            <td>
                <a class="message_button">Example Text</a>
            </td>
        </tr>
        <tr>
            <th>Vote</th>
            <td>
                <div class="vote_wrapper">
                    <div class="vote">
                        <a class="vote_count positive">+1</a><a class="vote_up"><span></span></a><a class="vote_down"><span></span></a>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <th>Big Vote</th>
            <td>
                <div class="vote_wrapper">
                    <div class="vote big">
                        <a class="vote_count positive">+1</a><a class="vote_up"><span></span></a><a class="vote_down"><span></span></a>
                    </div>
                </div>
            </td>
        </tr>
    </table>


    <h2>Modals</h2>

    <table>
        <tr>
            <th>Flash</th>
            <td><div id="flash_message">Example Text</div></td>
        </tr>
        <tr>
            <th>Overlay</th>
            <td><div class="overlay" style="display: block"><a class="close">close</a>Example Text</div></td>
        </tr>
        <tr>
            <th>Alert</th>
            <td><div class="alert"><a class="close">close</a>Example Text</div></td>
        </tr>
        <tr>
            <th>Success Alert</th>
            <td><div class="alert alert-success"><a class="close">close</a>Example Text</div></td>
        </tr>
        <tr>
            <th>Error Alert</th>
            <td><div class="alert alert-error"><a class="close">close</a>Example Text</div></td>
        </tr>
    </table>


    <h2>HTML 5</h2>

    <table>
        <tr>
            <th>Details/Summary</th>
            <td>
                <details>
                    <summary>Lorem ipsum...</summary>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>
                </details>
            </td>
        </tr>
    </table>


    <h2>Misc</h2>

    <table>
        <tr>
            <th>Tooltip (as element)</th>
            <td>
                <div class="tooltip" style="display: inline-block">Example Text</div>
            </td>
        </tr>
        <tr>
            <th>Tooltip (as tooltip)</th>
            <td>
                <a title="Example Text" class="ttip">Hover</a>
            </td>
        </tr>
        <tr>
            <th>Badge</th>
            <td>
                <span class="abadge">Example Text</span>
            </td>
        </tr>
        <tr>
            <th>Pager</th>
            <td>
                <div class="pager">
                    <div class="prev_page">
                        <span>« vorherige</span>
                    </div>
                    <span class="current">1</span>
                    <a>2</a>
                    <div class="next_page">
                        <a>nächste »</a>
                     </div>
                </div>
            </td>
        </tr>
        <tr>
            <th>Facets</th>
            <td>
                <div class="facet">
                    <ul>
                        <li class="expanded">
                            <span class="disabled">
                                <span class="facet_item_text">Space Vehicles</span>
                                <span>(26)</span>
                            </span>
                            <a class="expand_arrow" href="#"></a>

                            <ul class="noindent">
                                <li>
                                    <span>
                                        <input type="checkbox" class="facet_check" />
                                            <a class="facet_item_text">Fake</a>
                                            <span>(21)</span>
                                    </span>
                                    <a class="expand_arrow" href="#"></a>

                                    <ul>
                                        <li class="expanded">
                                            <span class="selected">
                                                <input type="checkbox" class="facet_check" />
                                                    <a class="facet_item_text">Phone Box</a>
                                                    <span>(1)</span>
                                            </span>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <span>
                                        <input type="checkbox" class="facet_check" />
                                            <a class="facet_item_text">Real</a>
                                            <span>(5)</span>
                                    </span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <th>Content Box (in Main)</th>
            <td>
                <div id="col1">
                <ul class="content_list">
                    <li class="content_box">
                        <h3>
                            <a class="link" href="/i/test/instance/test">asdasdasd</a>
                        </h3>
                        <div class="meta">
                            <time class="ts" datetime="2013-04-18T13:50:47+02:00">18. April 2013 13:50</time> angelegt · 11 Vorschläge · 1 Beschluss
                        </div>
                    </li>

                    <li class="tile text history">
                        <h3>lkjsalkdjaslkjd</h3>
                        <div>
                            von <a href="/user/admin" class="user">admin</a>
                            <time class="ts" datetime="2013-05-16T17:21:19+02:00">16. Mai 2013 17:21</time> angelegt
                            <a href="/i/test/page/lkjsalkdjaslkjd;26/ask_purge_history">(delete version)</a>
                        </div>
                    </li>
                </ul>
                </div>
            </td>
        </tr>
        <tr>
            <th>Content Box (in Sidebar)</th>
            <td>
                <div id="col3">
                <ul class="content_list">
                    <li class="content_box">
                        <h3>
                            <a class="link" href="/i/test/instance/test">asdasdasd</a>
                        </h3>
                        <div class="meta">
                            <time class="ts" datetime="2013-04-18T13:50:47+02:00">18. April 2013 13:50</time> angelegt · 11 Vorschläge · 1 Beschluss
                        </div>
                    </li>

                    <li class="tile text history">
                        <h3>lkjsalkdjaslkjd</h3>
                        <div>
                            von <a href="/user/admin" class="user">admin</a>
                            <time class="ts" datetime="2013-05-16T17:21:19+02:00">16. Mai 2013 17:21</time> angelegt
                            <a href="/i/test/page/lkjsalkdjaslkjd;26/ask_purge_history">(delete version)</a>
                        </div>
                    </li>
                </ul>
                </div>
            </td>
        </tr>
        <tr>
            <th>Paper Navigation</th>
            <td>
                <div id="sidebar_nav" class="paper_selection">
                    <ul>
                        <li>
                            <a class="current">
                                <span class="truncate">Originalversion</span>
                                <span class="count"></span>
                            </a>
                        </li>
                        <li>
                            <a>
                                <span class="truncate">test1</span>
                                <span class="count">-1</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <th>Tutorial</th>
            <td>
                <% h.need.joyride %>
                <div class="joyride-tip-guide" style="position: relative;">
                    <span class="joyride-nub bottom right" style=""></span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<p>
                    <a href="#" class="joyride-prev-tip button">Zurück</a>&nbsp;<a href="#" class="joyride-next-tip small nice radius yellow button">Weiter</a>
                    <a href="#close" class="joyride-close-tip">X</a>
                </div>
            </td>
        </tr>
        <tr>
            <th>Tiles</th>
            <td>
                <div class="tile-table">
                    <div class="tile-row">
                        <a class="tile">
                            <img class="tile-image" alt="" src="/user/admin_256x128.png" />
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac
                            quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et
                            diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue
                            enim, ut porta lorem lacinia consectetur.</p>
                            <span class="button tile-button">Learn More</span>
                        </a>
                        <a class="tile">
                            <img class="tile-image" alt="" src="/user/admin_256x128.png" />
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac
                            quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et
                            diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue
                            quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et
                            diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue
                            enim, ut porta lorem lacinia consectetur.</p>
                            <span class="button tile-button">Learn More</span>
                        </a>
                        <a class="tile">
                            <img class="tile-image" alt="" src="/user/admin_256x128.png" />
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac
                            quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et
                            diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue
                            enim, ut porta lorem lacinia consectetur.</p>
                            <span class="button tile-button">Learn More</span>
                        </a>
                    </div>
                    <div class="tile-row">
                        <a class="tile">
                            <img class="tile-image" alt="" src="/user/admin_256x128.png" />
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac
                            quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et
                            diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue
                            enim, ut porta lorem lacinia consectetur.</p>
                            <span class="button tile-button">Learn More</span>
                        </a>
                        <a class="tile">
                            <img class="tile-image" alt="" src="/user/admin_256x128.png" />
                            <h3>Lorem Ipsum</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac
                            enim, ut porta lorem lacinia consectetur.</p>
                            <span class="button tile-button">Learn More</span>
                        </a>
                    </div>
                </div>
            </td>
        </tr>
    </table>

</%block>
