https://polydrill.com/index.php/home1 2020-09-11T03:55:18+00:00 Joomla! - Open Source Content Management 2014-09-06T13:59:34+00:00 2014-09-06T13:59:34+00:00 https://polydrill.com/index.php/home1/121-hse-manual-backup Super User admin@admin.com

<div class="feed-description"><script type="text/javascript" src="virtualpaginate.js"> </script> <style type="text/css"> .paginationstyle{ width: 900px; text-align: center; padding: 2px 0; margin: 10px 0; } .paginationstyle select{ border: 1px solid navy; margin: 0 15px; } .paginationstyle a{ padding: 0 5px; text-decoration: none; border: 1px solid black; color: navy; background-color: white; } .paginationstyle a:hover, .paginationstyle a.selected{ color: #000; background-color: #FEE496; } .paginationstyle a.disabled, .paginationstyle a.disabled:hover{ background-color: white; cursor: default; color: #929292; border-color: transparent; } .paginationstyle a.imglinks{ border: 0; padding: 0; } .paginationstyle a.imglinks img{ vertical-align: bottom; border: 0; } .paginationstyle a.imglinks a:hover{ background: none; } .paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected{ /*Pagination div "flatview" links style*/ color: #000; background-color: cyan; } </style> <div id="gallerypaginate2" class="paginationstyle"></div> <div style="width: 300px;"> <div class="virtualpage hidepiece"> <img src="http://polydrill.com/new/images/HSE/HSE%20Manual_Page_1.jpg" width=900px/> </div> <div class="virtualpage hidepiece"> <img src="http://polydrill.com/new/images/HSE/HSE%20Manual_Page_2.jpg" width=900px/> </div> <div class="virtualpage hidepiece"> <img src="http://polydrill.com/new/images/HSE/HSE%20Manual_Page_3.jpg" width=900px/> </div> </div> <div id="gallerypaginate" class="paginationstyle"> <a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a> </div> <script type="text/javascript"> var gallery=new virtualpaginate({ piececlass: "virtualpage", piececontainer: 'div', pieces_per_page: 1, defaultpage: 0, wraparound: false, persist: false }) gallery.buildpagination(["gallerypaginate", "gallerypaginate2"]) </script> </div>

<div class="feed-description"><script type="text/javascript" src="virtualpaginate.js"> </script> <style type="text/css"> .paginationstyle{ width: 900px; text-align: center; padding: 2px 0; margin: 10px 0; } .paginationstyle select{ border: 1px solid navy; margin: 0 15px; } .paginationstyle a{ padding: 0 5px; text-decoration: none; border: 1px solid black; color: navy; background-color: white; } .paginationstyle a:hover, .paginationstyle a.selected{ color: #000; background-color: #FEE496; } .paginationstyle a.disabled, .paginationstyle a.disabled:hover{ background-color: white; cursor: default; color: #929292; border-color: transparent; } .paginationstyle a.imglinks{ border: 0; padding: 0; } .paginationstyle a.imglinks img{ vertical-align: bottom; border: 0; } .paginationstyle a.imglinks a:hover{ background: none; } .paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected{ /*Pagination div "flatview" links style*/ color: #000; background-color: cyan; } </style> <div id="gallerypaginate2" class="paginationstyle"></div> <div style="width: 300px;"> <div class="virtualpage hidepiece"> <img src="http://polydrill.com/new/images/HSE/HSE%20Manual_Page_1.jpg" width=900px/> </div> <div class="virtualpage hidepiece"> <img src="http://polydrill.com/new/images/HSE/HSE%20Manual_Page_2.jpg" width=900px/> </div> <div class="virtualpage hidepiece"> <img src="http://polydrill.com/new/images/HSE/HSE%20Manual_Page_3.jpg" width=900px/> </div> </div> <div id="gallerypaginate" class="paginationstyle"> <a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a> </div> <script type="text/javascript"> var gallery=new virtualpaginate({ piececlass: "virtualpage", piececontainer: 'div', pieces_per_page: 1, defaultpage: 0, wraparound: false, persist: false }) gallery.buildpagination(["gallerypaginate", "gallerypaginate2"]) </script> </div> 2014-08-26T21:17:28+00:00 2014-08-26T21:17:28+00:00 https://polydrill.com/index.php/2014-09-06-08-27-18/hse/hse-policy Super User admin@admin.com

<div class="feed-description"><table><tr><td width="100%"><img src="images/HSE/QHSE POLICY.jpg" alt="" width="90%" /></td></tr></table> </div>

<div class="feed-description"><table><tr><td width="100%"><img src="images/HSE/QHSE POLICY.jpg" alt="" width="90%" /></td></tr></table> </div> 2013-01-24T11:33:09+00:00 2013-01-24T11:33:09+00:00 https://polydrill.com/index.php/home1/93-coming-soon Super User admin@admin.com

<div class="feed-description"><ul> <li>list 1</li> <li>list 2</li> </ul> <p><strong>Text in bold</strong></p> <ol> <li>UnOrdered list</li> <li>dws</li> <li></li> </ol></div>

<div class="feed-description"><ul> <li>list 1</li> <li>list 2</li> </ul> <p><strong>Text in bold</strong></p> <ol> <li>UnOrdered list</li> <li>dws</li> <li></li> </ol></div> 2012-01-16T12:54:47+00:00 2012-01-16T12:54:47+00:00 https://polydrill.com/index.php/home1/79-typography Super User admin@admin.com

<div class="feed-description"><div id="ja-typo"> <p>This page presents most of typographical aspects of JA T3v2 Framework. <span class="highlight">Make your readers happy</span> with great Typography and User Experience!</p> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Preformatted text</span></h1> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Headings</span></h2> <div class="ja-typo-blockct clearfix"> <h1>This is a sample Heading 1. Lorem ipsum.</h1> <h2>This is a sample Heading 2. Lorem ipsum.</h2> <h3>This is a sample Heading 3. Lorem ipsum.</h3> <h4>This is a sample Heading 4. Lorem ipsum.</h4> <h5>This is a sample Heading 5. Lorem ipsum.</h5> </div> </div> </div> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Special Content</span></h2> <div class="ja-typo-blockct clearfix"> <p>Below is a sample of <strong>pre</strong> tag or <strong>code</strong> class:</p> <pre>#ja-rightcol { width: 180px; float: right; color: #EEEEEE; } </pre> <p>This is a <span class="highlight">highlight phrase</span>. Use <strong>class="highlight"</strong>.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Blockquote</span></h2> <div class="ja-typo-blockct clearfix"> <blockquote><span class="open">T</span>his is a sample <strong>Blockquote</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</blockquote> <blockquote><span class="open">T</span>his is a sample Blockquote. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.<span class="close">!</span></blockquote> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Dropcaps</span></h2> <div class="ja-typo-blockct clearfix"> <p><span class="dropcap">T</span>his is a Magazine Style Drop Cap. The first letter in this paragraph is big. JA Templates bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Lists Style</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block first clearfix"> <h2 class="ja-typo-title"><span>Ordered List</span></h2> <div class="ja-typo-blockct clearfix"><ol> <li>This is a sample <strong>Ordered List</strong>.</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> </ol></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Un-Ordered List</span></h2> <div class="ja-typo-blockct clearfix"> <ul> <li>This is a sample <strong>Unordered List</strong>.</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> </ul> </div> </div> <div class="ja-typo-block last clearfix"> <h2 class="ja-typo-title"><span>Definition List</span></h2> <div class="ja-typo-blockct clearfix"><dl><dt>This is a sample <strong>Definition List</strong>.</dt><dd>Condimentum quis.</dd><dd>Congue Quisque augue elit dolor.</dd><dd>Congue Quisque augue elit dolor.</dd></dl></div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <h2 class="ja-typo-title"><span>Special Unordered Lists</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <ul class="ja-typo-list list-arrow"> <li>This is a sample <strong>Arrow list</strong>.</li> <li>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li> <li>This is a sample Arrowlist.</li> </ul> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <ul class="ja-typo-list list-star"> <li>This is a sample <strong>Star list</strong>.</li> <li>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li> <li>This is a sample Starlist.</li> </ul> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <ul class="ja-typo-list list-check"> <li>This is a sample <strong>Check list</strong>.</li> <li>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li> <li>This is a sample Checklist.</li> </ul> </div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <h2 class="ja-typo-title"><span>Block Number</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="blocknumber blocknumber-1"><span class="bignumber">01</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-1"><span class="bignumber">02</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-1"><span class="bignumber">03</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="blocknumber blocknumber-2"><span class="bignumber">A</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-2"><span class="bignumber">B</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-2"><span class="bignumber">C</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="blocknumber blocknumber-3"><span class="bignumber">a</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-3"><span class="bignumber">b</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-3"><span class="bignumber">c</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Icons Style</span></h1> <div class="ja-typo-blockrow cols-2 clearfix"> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-icon icon-error"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-message"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-tips"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-key"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-tag"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-icon icon-cart"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-doc"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-note"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-photo"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-mobi"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Bubbles</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Grey Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-1"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">   </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-2"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Blue Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-3"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-4"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Black Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-5"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-6"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Grey Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-rounded bubble-1"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-rounded bubble-2"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Blue Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-rounded bubble-3"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-rounded bubble-4"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Black Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-rounded bubble-5"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-rounded bubble-6"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Message Boxes &amp; Legend Styles</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Message Boxes with Icons</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-sticky"><strong>This is a sticky</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-download"><strong>This is a download box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Message Boxes - Style 1</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-grey-1"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-hilite-1"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Message Boxes - Style 2</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-grey-2"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-hilite-2"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Message Boxes with Icons</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-rounded box-sticky"><strong>This is a sticky</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-rounded box-download"><strong>This is a download box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Message Boxes - Style 1</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-rounded box-grey-1"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-rounded box-hilite-1"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Message Boxes - Style 2</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-rounded box-grey-2"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-rounded box-hilite-2"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> <div class="ja-typo-blockrow cols-2 clearfix"> <h2 class="ja-typo-title"><span>Legends</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-1"> <h3 class="legend-title">Legend - Style 1</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-2"> <h3 class="legend-title">Legend - Style 2</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> </div> <div class="ja-typo-blockrow cols-2 clearfix"> <h2 class="ja-typo-title"><span>Rounded Legends</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-rounded legend-1"> <h3 class="legend-title">Rounded Legend - Style 1</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-rounded legend-2"> <h3 class="legend-title">Rounded Legend - Style 2</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Buttons &amp; Tags</span></h1> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Big Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-blue ja-typo-btn-big btn-big-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-big btn-big-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-big btn-big-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-big btn-big-grey" href="#"><span>Button Text</span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Icon Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn ja-typo-btn-icn btn-icn-save" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-tip" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-warning" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-info" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-ok" href="#"><span><span>Button Text</span></span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Small Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-blue ja-typo-btn-sm btn-sm-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-sm btn-sm-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-sm btn-sm-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-sm btn-sm-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-sm btn-sm-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-sm btn-sm-grey" href="#"><span>Button Text</span></a></div> </div> </div> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Big Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-rounded-big btn-blue ja-typo-btn-big btn-big-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-green ja-typo-btn-big btn-big-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-red ja-typo-btn-big btn-big-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-orange ja-typo-btn-big btn-big-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-black ja-typo-btn-big btn-big-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-grey ja-typo-btn-big btn-big-grey" href="#"><span>Button Text</span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Icon Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-save" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-tip" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-warning" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-info" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-ok" href="#"><span><span>Button Text</span></span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Small Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-rounded-sm btn-blue ja-typo-btn-sm btn-sm-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-green ja-typo-btn-sm btn-sm-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-red ja-typo-btn-sm btn-sm-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-orange ja-typo-btn-sm btn-sm-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-black ja-typo-btn-sm btn-sm-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-grey ja-typo-btn-sm btn-sm-grey" href="#"><span>Button Text</span></a></div> </div> </div> <div class="ja-typo-blockrow cols-2 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Squared Tags</span></h2> <div class="ja-typo-blockct clearfix"> <p>This is a sample <span class="ja-typo-tag tag-grey">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-blue">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-green">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-red">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-orange">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-black">Inline Tag</span>. Use this to provide useful information.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Tags</span></h2> <div class="ja-typo-blockct clearfix"> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-grey">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-blue">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-green">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-red">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-orange">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-black">Inline Tag</span>. Use this to provide useful information.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Special Module Style</span></h1> <div class="ja-typo-blockrow cols-4 clearfix"> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-top"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-top</strong> to put this badge on any module you like!</div> </div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-new"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-new</strong> to put this badge on any module you like!</div> </div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-pick"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-pick</strong> to put this badge on any module you like!</div> </div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-hot" style="margin-right: 0;"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-hot</strong> to put this badge on any module you like!</div> </div> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Forms</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <h2 class="ja-typo-title"><span>Form Fieldset</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><fieldset><legend>Templates Fieldset</legend> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac.</fieldset></div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><fieldset class="ja-typo-fieldset fieldset-1"><legend>Special Fieldset - Style 1</legend> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est.</fieldset></div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><fieldset class="ja-typo-fieldset fieldset-2"><legend>Special Fieldset - Style 2</legend> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est.</fieldset></div> </div> </div> <div class="ja-typo-blockrow cols-1 clearfix"> <h2 class="ja-typo-title"><span>Form Elements</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><form> <p><label for="input">Sample Input 1</label> <br /> <input class="inputbox" type="input" name="input" /></p> <p><label for="input">Sample Input 2</label> <br /> <input class="inputbox" type="input" name="input" /></p> <p><input type="radio" /><label for="radio">Sample Radio Input</label> <input type="checkbox" /><label for="checkbox">Sample CheckBox Input</label></p> <p><label for="select">Sample Select Field:</label><br /> <select id="select"><option>Option One</option><option>Option Two</option></select></p> <p><label for="textarea">Sample Textarea Field:</label><br /> <textarea class="inputbox" rows="5" cols="80">Textarea text</textarea></p> <p><button>Submit Button</button> <button>Reset Button</button></p> </form></div> </div> </div> </div> </div></div>

<div class="feed-description"><div id="ja-typo"> <p>This page presents most of typographical aspects of JA T3v2 Framework. <span class="highlight">Make your readers happy</span> with great Typography and User Experience!</p> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Preformatted text</span></h1> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Headings</span></h2> <div class="ja-typo-blockct clearfix"> <h1>This is a sample Heading 1. Lorem ipsum.</h1> <h2>This is a sample Heading 2. Lorem ipsum.</h2> <h3>This is a sample Heading 3. Lorem ipsum.</h3> <h4>This is a sample Heading 4. Lorem ipsum.</h4> <h5>This is a sample Heading 5. Lorem ipsum.</h5> </div> </div> </div> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Special Content</span></h2> <div class="ja-typo-blockct clearfix"> <p>Below is a sample of <strong>pre</strong> tag or <strong>code</strong> class:</p> <pre>#ja-rightcol { width: 180px; float: right; color: #EEEEEE; } </pre> <p>This is a <span class="highlight">highlight phrase</span>. Use <strong>class="highlight"</strong>.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Blockquote</span></h2> <div class="ja-typo-blockct clearfix"> <blockquote><span class="open">T</span>his is a sample <strong>Blockquote</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</blockquote> <blockquote><span class="open">T</span>his is a sample Blockquote. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.<span class="close">!</span></blockquote> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Dropcaps</span></h2> <div class="ja-typo-blockct clearfix"> <p><span class="dropcap">T</span>his is a Magazine Style Drop Cap. The first letter in this paragraph is big. JA Templates bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Lists Style</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block first clearfix"> <h2 class="ja-typo-title"><span>Ordered List</span></h2> <div class="ja-typo-blockct clearfix"><ol> <li>This is a sample <strong>Ordered List</strong>.</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> </ol></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Un-Ordered List</span></h2> <div class="ja-typo-blockct clearfix"> <ul> <li>This is a sample <strong>Unordered List</strong>.</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> </ul> </div> </div> <div class="ja-typo-block last clearfix"> <h2 class="ja-typo-title"><span>Definition List</span></h2> <div class="ja-typo-blockct clearfix"><dl><dt>This is a sample <strong>Definition List</strong>.</dt><dd>Condimentum quis.</dd><dd>Congue Quisque augue elit dolor.</dd><dd>Congue Quisque augue elit dolor.</dd></dl></div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <h2 class="ja-typo-title"><span>Special Unordered Lists</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <ul class="ja-typo-list list-arrow"> <li>This is a sample <strong>Arrow list</strong>.</li> <li>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li> <li>This is a sample Arrowlist.</li> </ul> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <ul class="ja-typo-list list-star"> <li>This is a sample <strong>Star list</strong>.</li> <li>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li> <li>This is a sample Starlist.</li> </ul> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <ul class="ja-typo-list list-check"> <li>This is a sample <strong>Check list</strong>.</li> <li>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li> <li>This is a sample Checklist.</li> </ul> </div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <h2 class="ja-typo-title"><span>Block Number</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="blocknumber blocknumber-1"><span class="bignumber">01</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-1"><span class="bignumber">02</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-1"><span class="bignumber">03</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="blocknumber blocknumber-2"><span class="bignumber">A</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-2"><span class="bignumber">B</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-2"><span class="bignumber">C</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="blocknumber blocknumber-3"><span class="bignumber">a</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-3"><span class="bignumber">b</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-3"><span class="bignumber">c</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Icons Style</span></h1> <div class="ja-typo-blockrow cols-2 clearfix"> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-icon icon-error"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-message"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-tips"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-key"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-tag"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-icon icon-cart"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-doc"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-note"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-photo"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-mobi"><span class="icon">  </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Bubbles</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Grey Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-1"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">   </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-2"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Blue Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-3"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-4"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Black Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-5"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-6"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Grey Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-rounded bubble-1"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-rounded bubble-2"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Blue Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-rounded bubble-3"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-rounded bubble-4"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Black Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-rounded bubble-5"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-rounded bubble-6"> <div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow">  </span><span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Message Boxes &amp; Legend Styles</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Message Boxes with Icons</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-sticky"><strong>This is a sticky</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-download"><strong>This is a download box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Message Boxes - Style 1</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-grey-1"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-hilite-1"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Message Boxes - Style 2</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-grey-2"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-hilite-2"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Message Boxes with Icons</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-rounded box-sticky"><strong>This is a sticky</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-rounded box-download"><strong>This is a download box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Message Boxes - Style 1</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-rounded box-grey-1"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-rounded box-hilite-1"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Message Boxes - Style 2</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-rounded box-grey-2"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-rounded box-hilite-2"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> <div class="ja-typo-blockrow cols-2 clearfix"> <h2 class="ja-typo-title"><span>Legends</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-1"> <h3 class="legend-title">Legend - Style 1</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-2"> <h3 class="legend-title">Legend - Style 2</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> </div> <div class="ja-typo-blockrow cols-2 clearfix"> <h2 class="ja-typo-title"><span>Rounded Legends</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-rounded legend-1"> <h3 class="legend-title">Rounded Legend - Style 1</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-rounded legend-2"> <h3 class="legend-title">Rounded Legend - Style 2</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Buttons &amp; Tags</span></h1> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Big Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-blue ja-typo-btn-big btn-big-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-big btn-big-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-big btn-big-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-big btn-big-grey" href="#"><span>Button Text</span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Icon Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn ja-typo-btn-icn btn-icn-save" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-tip" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-warning" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-info" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-ok" href="#"><span><span>Button Text</span></span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Small Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-blue ja-typo-btn-sm btn-sm-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-sm btn-sm-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-sm btn-sm-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-sm btn-sm-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-sm btn-sm-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-sm btn-sm-grey" href="#"><span>Button Text</span></a></div> </div> </div> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Big Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-rounded-big btn-blue ja-typo-btn-big btn-big-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-green ja-typo-btn-big btn-big-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-red ja-typo-btn-big btn-big-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-orange ja-typo-btn-big btn-big-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-black ja-typo-btn-big btn-big-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-grey ja-typo-btn-big btn-big-grey" href="#"><span>Button Text</span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Icon Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-save" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-tip" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-warning" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-info" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-ok" href="#"><span><span>Button Text</span></span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Small Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-rounded-sm btn-blue ja-typo-btn-sm btn-sm-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-green ja-typo-btn-sm btn-sm-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-red ja-typo-btn-sm btn-sm-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-orange ja-typo-btn-sm btn-sm-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-black ja-typo-btn-sm btn-sm-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-grey ja-typo-btn-sm btn-sm-grey" href="#"><span>Button Text</span></a></div> </div> </div> <div class="ja-typo-blockrow cols-2 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Squared Tags</span></h2> <div class="ja-typo-blockct clearfix"> <p>This is a sample <span class="ja-typo-tag tag-grey">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-blue">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-green">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-red">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-orange">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-black">Inline Tag</span>. Use this to provide useful information.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Tags</span></h2> <div class="ja-typo-blockct clearfix"> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-grey">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-blue">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-green">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-red">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-orange">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-black">Inline Tag</span>. Use this to provide useful information.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Special Module Style</span></h1> <div class="ja-typo-blockrow cols-4 clearfix"> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-top"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-top</strong> to put this badge on any module you like!</div> </div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-new"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-new</strong> to put this badge on any module you like!</div> </div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-pick"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-pick</strong> to put this badge on any module you like!</div> </div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-hot" style="margin-right: 0;"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-hot</strong> to put this badge on any module you like!</div> </div> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Forms</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <h2 class="ja-typo-title"><span>Form Fieldset</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><fieldset><legend>Templates Fieldset</legend> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac.</fieldset></div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><fieldset class="ja-typo-fieldset fieldset-1"><legend>Special Fieldset - Style 1</legend> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est.</fieldset></div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><fieldset class="ja-typo-fieldset fieldset-2"><legend>Special Fieldset - Style 2</legend> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est.</fieldset></div> </div> </div> <div class="ja-typo-blockrow cols-1 clearfix"> <h2 class="ja-typo-title"><span>Form Elements</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><form> <p><label for="input">Sample Input 1</label> <br /> <input class="inputbox" type="input" name="input" /></p> <p><label for="input">Sample Input 2</label> <br /> <input class="inputbox" type="input" name="input" /></p> <p><input type="radio" /><label for="radio">Sample Radio Input</label> <input type="checkbox" /><label for="checkbox">Sample CheckBox Input</label></p> <p><label for="select">Sample Select Field:</label><br /> <select id="select"><option>Option One</option><option>Option Two</option></select></p> <p><label for="textarea">Sample Textarea Field:</label><br /> <textarea class="inputbox" rows="5" cols="80">Textarea text</textarea></p> <p><button>Submit Button</button> <button>Reset Button</button></p> </form></div> </div> </div> </div> </div></div>