<div id="menud">
<p>This page is for development purpose only. You will find here all the current styles and UI elements that can help you with you theme or plugin design.</p>
<a href="#common-text" style="padding:5px 10px;display:inline-block">Common Text styles</a> | 
<a href="#custom-text" style="padding:5px 10px;display:inline-block">Custom Text styles</a> | 
<a href="#lists" style="padding:5px 10px;display:inline-block">Lists</a> | 
<a href="#boxes" style="padding:5px 10px;display:inline-block">Boxes</a> | 
<a href="#panel" style="padding:5px 10px;display:inline-block">The Panel</a> | 
<a href="#helper" style="padding:5px 10px;display:inline-block">Helper classes</a> | 
<a href="#tables" style="padding:5px 10px;display:inline-block">Tables</a> | 
<a href="#accordion" style="padding:5px 10px;display:inline-block">Accordion</a> | 
<a href="#menus" style="padding:5px 10px;display:inline-block">Menus</a> | 
<a href="#buttons" style="padding:5px 10px;display:inline-block">Buttons</a> | 
<a href="#loaders" style="padding:5px 10px;display:inline-block">Loaders</a> | 
<a href="#tabs" style="padding:5px 10px;display:inline-block">Tabs</a> |
<a href="#forms" style="padding:5px 10px;display:inline-block">Form elements</a> |
<a href="#icons" style="padding:5px 10px;display:inline-block">Icons</a>

</div>









<br /><br />
<hr />
<section id="common-text">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Common Text styles</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<table style="width:auto;padding:0 10px;margin:0">
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<h1>Heading 1</h1>' /></td><td style="padding:0px 20px"><h1>Heading 1</h1></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<h2>Heading 2</h2>' /></td><td style="padding:0px 20px"><h2>Heading 2</h2></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:15px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<h3>Heading 3</h3>' /></td><td style="padding:0px 20px"><h3>Heading 3</h3></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<h4>Heading 4</h4>' /></td><td style="padding:0px 20px"><h4>Heading 4</h4></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<h5>Heading 5</h5>' /></td><td style="padding:0px 20px"><h5>Heading 5</h5></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<h6>Heading 6</h6>' /></td><td style="padding:5px 20px"><h6>Heading 6</h6></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<p>Paragraph</p>' /></td><td style="padding:5px 20px"><p>Paragraph</p></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<pre>preformatted</pre>' /></td><td style="padding:5px 20px"><pre>preformatted</pre></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<strong>Strong</strong>' /></td><td style="padding:5px 20px"><strong>Strong</strong></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<em>Emphasis</em>' /></td><td style="padding:5px 20px"><em>Emphasis</em></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<del>Deleted</del>' /></td><td style="padding:5px 20px"><del>Deleted</del></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<mark>Highlighted</mark>' /></td><td style="padding:5px 20px"><mark>Highlighted</mark></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<ins>Inserted</ins>' /></td><td style="padding:5px 20px"><ins>Inserted</ins></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<a href="#">Link</a>' /></td><td style="padding:5px 20px"><a href="javascript:;">Link</a></td></tr>
</table>
<br /><br />

</section>

<hr />
<section id="custom-text">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Custom text style</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<h1 class="pagetitle">Page title style </h1>
<h4 class="pagetitle">Page title style </h4>
<p class="pagetitle">Page title style </p>
<p>You can use this style with any heading of paragraph. Just add the class <mark><code>.pagetitle</code></mark> inline the html tag.</p>
<br /><br />
</section>

<hr />

<section id="lists">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Lists</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<h4>Unordered list</h4>
<ul>
  <li>First element</li>
  <li>Second element</li>
  <li>Third element</li>
</ul>
<h4>Orderer list</h4>
<ol>
  <li>First element</li>
  <li>Second element</li>
  <li>Third element</li>
</ol>
<br /><br />
</section>

<hr />

<section id="boxes">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Boxes</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<div class="note">This box is for notification messages. Just add the class <mark><code>.note</code></mark> to a div.</div>
<div class="error">This box is for error messages. Just add the class <mark><code>.error</code></mark> to a div.</div>
<div class="result">This box is for result messages. Just add the class <mark><code>.result</code></mark> to a div.</div>
<p><small>NOTE: There is a black box for "result messages" that go invisible after a few seconds. Reload this page to see it.</small></p>
<br /><br />
</section>

<hr />

<section id="panel">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">The panel</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<p>Most of the screens are structured with a div named <mark><code>.panel</code></mark>, including a <mark><code>.header</code></mark> div, a <mark><code>.content</code></mark> div and a <mark><code>.footer</code></mark> div (usually empty).</p>
<textarea readonly style="resize:none;height:90px;font-family:monospace;padding:15px 15px 0px;overflow:auto;">
<div class="panel">
    <div class="header"><h2>The header of the panel</h2></div>
    <div class="content">The content of the panel</div>
    <div class="footer">The footer of the panel</div>
</div>
</textarea>
<p>The code above looks like this:</p>
<div class="panel">
    <div class="header"><h2>The header of the panel</h2></div>
    <div class="content">The content of the panel</div>
    <div class="footer">The footer of the panel</div>
</div>
<br />
<p>You can add inside the <code>.content</code> div of the panel all kind of information elemnts, like tables, forms, tabs, accordions, etc.</p>
<br /><br />
</section>

<hr />

<section id="helper">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Helper classes</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<h3>Show & Hide</h3>
<p>Thare are 3 items in this list below. You can modify your browser window size to see the effect.</p>
<ul>
<li>1- THIS ITEM WILL BE VISIBLE ON All SCREENS</li>
<li class="show-on-mobile"><ins>2 - THIS ITEM WILL BE VISIBLE ONLY ON SCREENS SMALLER THAN 768px</ins></li>
<li class="hide-on-mobile"><strong>3 - THIS ITEM WILL BE VISIBLE ONLY ON SCREENS BIGGER THAN 768px</strong></li>
</ul>
<p>The first item one has no class and will be visible on all screens. <br />
The second has the class <mark><code>.show-on-mobile</code></mark> and will be visible only on screens smaller than 768px width.<br />
The third has the class <mark><code>.hide-on-mobile</code></mark> and will be visible only on screens bigger than 768px width.<br />
You can apply this two classes to any element, like cell tables, row tables, complete tables, divs, form elements, paragraphs, etc.</p>
<br /><br />
</section>

<hr />

<section id="tables">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Tables</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<p>The first columns of tables has class <code>.listinghdname</code> for th, and <code>.listingrowname</code> for tds.<br />
The rest of the columns has class <code>.listinghdelement</code> for th, and <code>.listingelement</code> for tds.<br />
The grey rows of tables has class <code>.row1</code> and the white rows has class <code>.rowelement</code>. </p>
<table>
    <thead>
        <tr>
            <th class="listinghdname">th .listinghdname</th>
            <th class="listinghdelement">th .listinghdelement</th>
            <th class="listinghdelement"> </th>
        </tr>
    </thead>
    <tbody>
        <tr class="row1">
            <td class="listingrowname">td .listingrowname</td>
            <td class="listingelement">td .listingelement</td>
            <td class="listingelement"><mark>tr .row1</mark></td>
        </tr>
        <tr class="rowelement ">
            <td class="listingrowname">td .listingrowname</td>
            <td class="listingelement">td .listingelement</td>
            <td class="listingelement"><mark>tr .rowelement</mark></td>
        </tr>
    </tbody>
</table>
<br />
This is the code of the table above:
<textarea readonly style="resize:none;min-height:310px;height:auto !Important;font-family:monospace;width:100%;padding:15px 10px 0px;overflow:auto;">
<table>
 <thead>
   <tr>
     <th class="listinghdname">th .listinghdname</th>
     <th class="listinghdelement">th .listinghdelement</th>
     <th class="listinghdelement"> </th>
   </tr>
 </thead>
 <tbody>
   <tr class="row1">
     <td class="listingrowname">td .listingrowname</td>
     <td class="listingelement">td .listingelement</td>
     <td class="listingelement"><mark>tr .row1</mark></td>
   </tr>
   <tr class="rowelement ">
     <td class="listingrowname">td .listingrowname</td>
     <td class="listingelement">td .listingelement</td>
     <td class="listingelement"><mark>tr .rowelement</mark></td>
   </tr>
 </tbody>
</table>
</textarea>
<br /><br />
</section>

<hr />

<section id="accordion">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">ACCORDION</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<p>To use an accordion, create a div class <mark><code>.accordion</code></mark>. 
Into that div add, for each item, a <code>&lt;h3&gt;</code> tag and insde a <code>&lt;a&gt;</code> with the item title. And after that add a div with the item text. Like this:</p>
<textarea readonly style="resize:none;height:100px;font-family:monospace;padding:15px 15px 0px;overflow:auto;">
<div class="accordion">
  <h3><a href="javascript:;">First item title</a></h3>
  <div>First item text </div>
  <h3><a href="javascript:;">Second item title</a></h3>
  <div>Second item text</div>
</div>
</textarea>
The result should look like this:
<div class="accordion">
  <h3><a href="javascript:;">First item title</a></h3>
  <div>First item text </div>
  <h3><a href="javascript:;">Second item title</a></h3>
  <div>Second item text</div>
</div>
<br /><br />
</section>

<hr />

<section id="menus">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Menus</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<h5>The <mark>#webblertabs</mark></h5>
<div id="webblertabs">
  <ul>
    <li class="current"><a href="javascript:;"><span class="title">Item 1</span></a></li>
    <li><a href="javascript:;"><span class="title">Item 2</span></a></li>
  </ul>
</div>
<textarea readonly style="resize:none;height:100px;font-family:monospace;padding:15px 15px 0px;overflow:auto;">
<div id="webblertabs">
  <ul>
    <li class="current"><a href="#"><span class="title">Item 1</span></a></li>
    <li><a href="#"><span class="title">Item 2</span></a></li>
  </ul>
</div>
</textarea>
<h6>As an alternative, put a <code>#webblertabs</code> inside a div with the class <mark><code>.minitabs</code></mark> and you will have this:</h6>
<div class="minitabs">
<div id="webblertabs">
  <ul>
    <li class="current"><a href="javascript:;"><span class="title">Item 1</span></a></li>
    <li><a href="javascript:;"><span class="title">Item 2</span></a></li>
  </ul>
</div>
</div>
<br />
<br /><br />
</section>

<hr />

<section id="buttons">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Buttons</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<table style="width:auto;padding:0 10px;margin:0">
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:350px;font-family:monospace" readonly value='<a id="login">Login</a>' /></td><td style="padding:5px 20px"><a id="login" href="javascript:;">Login</a></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:350px;font-family:monospace" readonly value='<a id="logout">Logout</a>' /></td><td style="padding:5px 20px"><a id="logout" href="javascript:;">Logout</a></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:5px"><input type="text" style="max-width:100%;min-width:350px;font-family:monospace" readonly value='<a class="action-button">Action button</a>' /></td><td style="padding:0px 20px"><a class="action-button" href="javascript:;">Action button</a></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:5px"><input type="text" style="max-width:100%;min-width:350px;font-family:monospace" readonly value='<a class="button">Submit button</a>' /></td><td style="padding:5px 20px"><a class="button" href="javascript:;">Submit button</a></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:5px"><input type="text" style="max-width:100%;min-width:350px;font-family:monospace" readonly value='<a class="reset"">Reset button</a>' /></td><td style="padding:0px 20px"><a class="reset" href="javascript:;">Reset button</a></td></tr>
</table>
<hr /><br />
These BACK and NEXT buttons need to be inside a <mark>.panel</mark> class. So if you want to use them inside a table,
just add the class="panel" inline the td, as it is done below.
<table style="width:auto;padding:0 10px;margin:0">
<tr><td class="hide-on-mobile" style="padding-top:5px">
<textarea style="max-width:100%;min-width:350px;height:70px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<td class="panel"><div class="step-nav">
    <a class="next" href="#">Next</a>
    <a class="back" href="#">Back</a>
</div></td>
</textarea></td>
<td style="padding:0px 20px" class="panel"><div class="step-nav"><a class="next savechanges" href="javascript:;">Next</a><a class="back savechanges" href="javascript:;">Back</a></td></tr>
</table>

<hr /><br />

<table style="width:auto;padding:0 10px;margin:0">
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:230px;font-family:monospace" readonly value='<a class="hide"></a>' /></td><td style="padding:10px 25px"><a class="hide" href="javascript:;"></a></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:230px;font-family:monospace" readonly value='<a class="del"></a>' /></td><td style="padding:5px 20px"><a class="del" href="javascript:;"></a></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:230px;font-family:monospace" readonly value='<a class="helpdialog"></a>' /></td><td style="padding:5px 20px"><a class="helpdialog" href="javascript:;"></a></td></tr>
</table>
<hr /><br />
<table style="width:auto;padding:0 10px;margin:0">
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:460px;font-family:monospace" readonly value='<span class="send-list"><a class="button"></a></span>' /></td><td style="padding:0px 15px"><span class="send-list"><a class="button" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:460px;font-family:monospace" readonly value='<span class="edit-list"><a class="button"></a></span>' /></td><td style="padding:0px 20px"><span class="edit-list"><a class="button" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:460px;font-family:monospace" readonly value='<span class="add_member"><a class="opendialog"></a></span>' /></td><td style="padding:0px 15px"><span class="add_member"><a class="opendialog" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:460px;font-family:monospace" readonly value='<span class="delete"><a class="confirm"></a></span>' /></td><td style="padding:0px 10px"><span class="delete"><a class="confirm" href="javascript:;"></a></span></td></tr>
</table>
<hr /><br />
<table style="width:auto;padding:0 10px;margin:0">
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:430px;font-family:monospace" readonly value='<span class="view"><a class="button"></a></span>' /></td><td style="padding:0px 20px"><span class="view"><a class="button" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:430px;font-family:monospace" readonly value='<span class="resend"><a class="button"></a></span>' /></td><td style="padding:0px 20px"><span class="resend"><a class="button" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:430px;font-family:monospace" readonly value='<span class="edit"><a class="button"></a></span>' /></td><td style="padding:0px 20px"><span class="edit"><a class="button" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:430px;font-family:monospace" readonly value='<span class="delete"><a class="button"></a></span>' /></td><td style="padding:0px 20px"><span class="delete"><a class="button" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:430px;font-family:monospace" readonly value='<span class="suspend"><a class="button"></a></span>' /></td><td style="padding:0px 20px"><span class="suspend"><a class="button" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:430px;font-family:monospace" readonly value='<span class="marksent"><a class="button"></a></span>' /></td><td style="padding:0px 20px"><span class="marksent"><a class="button" href="javascript:;"></a></span></td></tr>
</table>
<br />
<div class="accordion">
<h3><a href="javascript:;">The big buttons of the Dashboard</a></h3> 
<div>
<p> This buttons only works if they are inside a table inside an accordion. This is a very bad practice, we should modify this soon making a new class named <code>.large-button</code> with all the required attributes to use this large size buttons anywhere.</p>
<table style="padding:0;margin:0;border:0"><tr class="send-campaign"><td class="listingname"><a href="javascript:;">Campaign</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="send-campaign">
 <td class="listingname">
   <a href="#">Campaign</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="manage-campaigns"><td class="listingname"><a href="javascript:;">View</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="manage-campaigns">
 <td class="listingname">
    <a href="#">View</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="manage-users"><td class="listingname"><a href="javascript:;">Suscriber</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="manage-users">
 <td class="listingname">
   <a href="#">Suscriber</a>
  </td>
</tr>
</textarea></td>
</tr>
<tr class="view-statistics"><td class="listingname"><a href="javascript:;">Statistics</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="view-statistics">
 <td class="listingname">
    <a href="#">Statistics</a>
  </td>
</tr>
</textarea></td>
</tr>
<tr class="manage-lists"><td class="listingname"><a href="javascript:;">Lists</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="manage-lists">
 <td class="listingname">
   <a href="#">Lists</a>
  </td>
</tr>
</textarea></td>
</tr>
<tr class="list-users"><td class="listingname"><a href="javascript:;">Suscribers</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="list-users">
 <td class="listingname">
   <a href="#">Suscribers</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="import-users"><td class="listingname"><a href="javascript:;">Import</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="import-users">
 <td class="listingname">
   <a href="#">Import</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="export-users"><td class="listingname"><a href="javascript:;">Export</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="export-users">
 <td class="listingname">
   <a href="#">Export</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="reconcileusers"><td class="listingname"><a href="javascript:;">Reconcile</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="reconcileusers">
 <td class="listingname">
    <a href="#">Reconcile</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="configure"><td class="listingname"><a href="javascript:;">Configure</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="configure">
 <td class="listingname">
    <a href="#">Configure</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="configure-attributes"><td class="listingname"><a href="javascript:;">Attributes</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="configure-attributes">
 <td class="listingname">
    <a href="#">Attributes</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="custom-attribute"><td class="listingname"><a href="javascript:;">Attribute</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="custom-attribute">
 <td class="listingname">
    <a href="#">Attribute</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="spage"><td class="listingname"><a href="javascript:;">Subscribe page</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="spage">
 <td class="listingname">
    <a href="#">Subscribe page</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="admins"><td class="listingname"><a href="javascript:;">Admins</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="admins">
 <td class="listingname">
    <a href="#">Admins</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="adminattributes"><td class="listingname"><a href="javascript:;">Admin attributes</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="adminattributes">
 <td class="listingname">
  <a href="#">Admin attributes</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="send-message"><td class="listingname"><a href="javascript:;">Send</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="send-message">
 <td class="listingname">
    <a href="#">Send</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="templates"><td class="listingname"><a href="javascript:;">Templates</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="templates">
 <td class="listingname">
    <a href="#">Templates</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="list-all-msg"><td class="listingname"><a href="javascript:;">Messages</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="list-all-msg">
 <td class="listingname">
    <a href="#">Messages</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="processqueue"><td class="listingname"><a href="javascript:;">Process</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="processqueue">
 <td class="listingname">
    <a href="#">Process</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="bounces"><td class="listingname"><a href="javascript:;">Bounces</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="bounces">
 <td class="listingname">
    <a href="#">Bounces</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="plugin"><td class="listingname"><a href="javascript:;">Plugin</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="plugin">
 <td class="listingname">
    <a href="#">Plugin</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="setup"><td class="listingname"><a href="javascript:;">Setup</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="setup">
 <td class="listingname">
    <a href="#">Setup</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="dbcheck"><td class="listingname"><a href="javascript:;">Databases</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="dbcheck">
 <td class="listingname">
    <a href="#">Databases</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="upgrade"><td class="listingname"><a href="javascript:;">Upgrade</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="upgrade">
 <td class="listingname">
    <a href="#">Upgrade</a>
 </td>
</tr>
</textarea></td>
</tr>
<tr class="view-log"><td class="listingname"><a href="javascript:;">Log</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="view-log">
 <td class="listingname">
    <a href="#">Log</a>
 </td>
</tr>
</textarea></td>
</tr></table>
</div>
</div><br />
<br /><br />
</section>

<hr />

<section id="loaders">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Loaders</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<h3>Spinner</h3>
<table>
<tr><td width=60><img src="images/busy.gif" with="34" height="34" alt="Please wait" /></td>
<td>
<textarea style="max-width:100%;width:430px;max-height:40px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<img src="images/busy.gif" with="34" height="34" alt="Please wait" />
</textarea>
</td>
</tr>
</table>
<hr /><br />
<h3>Progressbar</h3>
<div aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" role="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" id="progressbar"><div style="width: 50%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div></div>
<br />
<textarea style="max-width:100%;width:100%;height:100px;font-family:monospace;padding:5px;resize:none" readonly>
<div aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" role="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" id="progressbar">
<div style="width: 50%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div>
</div>
</textarea>
<br /><br />
</section>

<hr />

<section id="tabs">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Tabs</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<h3>Common Tabs</h3>
<div class="tabbed">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
  </ul>
<div id="tab1">
<h3>Tab 1 title</h3>
<p>Tab 1 text.</p>
</div> 
<div id="tab2">
<h3>Tab 2 title</h3>
<p>Tab 2 text.</p>
</div> 
</div><!-- /tabbed -->
<br />
<textarea style="max-width:100%;width:100%;height:210px;font-family:monospace;padding:5px;resize:none" readonly>
<div class="tabbed">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
  </ul>
  <div id="tab1">
    <h3>Tab 1 title</h3>
    <p>Tab 1 text.</p>
  </div> 
  <div id="tab2">
    <h3>Tab 2 title</h3>
    <p>Tab 2 text.</p>
  </div> 
</div>
</textarea>
<hr />
<br />
<h3>The Send Tabs</h3>

This tabs are used on the "Start a new Campaign" screen. Each tab is realy a link but designed as a tab, 
and they use the jQuery plugin http://www.gmarwaha.com/jquery/jcarousellite/ 
to slide the tabs when they exceed the width of the container.

<div class="sendtabs_container">
    <div id="sendtabs">
        <ul class="sendcampaign">
            <li class="current"><a href="javascript:;"><span class="tabno">1</span>One</a></li>
            <li><a href="javascript:;"><span class="tabno">2</span>Two</a></li>
            <li><a href="javascript:;"><span class="tabno">3</span>Three</a></li>
            <li><a href="javascript:;"><span class="tabno">4</span>Four</a></li>
            <li><a href="javascript:;"><span class="tabno">5</span>Five</a></li>
            <li><a href="javascript:;"><span class="tabno">6</span>Six</a></li>
        </ul>
    </div>
    <img src="ui/dressprow/images/prevtab.png" id="prev" class="prevtab">
    <img src="ui/dressprow/images/nexttab.png" id="next" class="nexttab">
</div>
<br />
<textarea style="max-width:100%;width:100%;height:210px;font-family:monospace;padding:5px;resize:none" readonly>
<div class="sendtabs_container">
 <div id="sendtabs">
  <ul class="sendcampaign">
   <li class="current"><a href="#"><span class="tabno">1</span>One</a></li>
   <li><a href="#"><span class="tabno">2</span>Two</a></li>
   <li><a href="#"><span class="tabno">3</span>Three</a></li>
   <li><a href="#"><span class="tabno">4</span>Four</a></li>
   <li><a href="#"><span class="tabno">5</span>Five</a></li>
   <li><a href="#"><span class="tabno">6</span>Six</a></li>
  </ul>
 </div>
 <img src="ui/dressprow/images/prevtab.png" id="prev" class="prevtab">
 <img src="ui/dressprow/images/nexttab.png" id="next" class="nexttab">
</div>
</textarea>
</section>
<br />

<hr />

<section id="forms">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Form elements</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />

<input type="text" value="Input type text"></input>

<input type="password" value="Input type password"></input>

<textarea>Textarea</textarea>

<select>
    <option>Select option 1</option>
    <option>Select Option 2</option>
</select>

<label for="check">Checkbox: <input name="check" type="checkbox"></label>
<br />
<label for="radio">Radio: <input name="radio" type="radio"></label>
<br />
<hr />
<br />
<p>There is a small hack in the "Start a New Campaign" screen, under the tab "List".
This hack use a javascript applied to the checkbox inside the <mark>#listselection</mark> div.</p>

<div id="listselection">
 <div class="tabbed">
  <ul class="ui-tabs-nav"></ul> 
  <div id="targetlist1"><ul>
    <li>
    <input style="display: none;" id="targetlist[all]" type="checkbox">
    <label for="targetlist[all]">All Lists</label>
    </li>
   </ul></div>
  </div>
</div>
<br />
<p>All the classes showed below are needed for this to work.</p>

<textarea style="max-width:100%;width:100%;height:170px;font-family:monospace;padding:5px;resize:none" readonly>
<div id="listselection">
 <div class="tabbed">
  <ul class="ui-tabs-nav"></ul> 
  <div id="targetlist1"><ul>
    <li>
    <input style="display: none;" id="targetlist[all]" type="checkbox">
    <label for="targetlist[all]">All Lists</label>
    </li>
   </ul></div>
  </div>
</div>
</textarea>
</section>

<br />

<hr />

<section id="icons">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Icons</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />

<p>There are some small icons in the links of the page "Manage Subscribers" (usermgt), but they are only visible in that page so I can only include the images here.</p>

<p><img src="/lists/admin/ui/dressprow/images/16x16/search.png" /></p>
<p><img src="/lists/admin/ui/dressprow/images/16x16/attibutes.png" /></p>
<p><img src="/lists/admin/ui/dressprow/images/16x16/pencil.png" /></p>
<p><img src="/lists/admin/ui/dressprow/images/16x16/database.png" /></p>
<p><img src="/lists/admin/ui/dressprow/images/16x16/issue.png" /></p>
<p><img src="/lists/admin/ui/dressprow/images/16x16/check.png" /></p>
<p><img src="/lists/admin/ui/dressprow/images/16x16/importusers.png" /></p>
<p><img src="/lists/admin/ui/dressprow/images/16x16/exportusers.png" /></p>

</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

$(document).ready(function() {
    var counttab = 6;
    var currenttab = $('.current').attr('id');
    if(matchMedia('only screen and (max-width: 480px)').matches){ tabs=2; starttab=currenttab-2; }
    else if(matchMedia('only screen and (max-width: 767px)').matches){ tabs=3; starttab=currenttab-3;}
    else if(matchMedia('only screen and (max-width: 967px)').matches){ tabs=4; starttab=currenttab-4;}
    else{ tabs=6; starttab=currenttab-6; }

    $('#sendtabs').jCarouselLite({
        btnNext: '.nexttab',
        btnPrev: '.prevtab',
        circular: false,
        visible: tabs,
        auto: null,
        speed:100,
        scroll:1,
        start: starttab
    });
});
$(window).resize(function(){
    var counttab = 6;
    var currenttab = $('.current').attr('id');
    if(matchMedia('only screen and (max-width: 480px)').matches){ tabs=2;starttab=currenttab-2;}
    else if(matchMedia('only screen and (max-width: 767px)').matches){ tabs=3; starttab=currenttab-3;}
    else if(matchMedia('only screen and (max-width: 967px)').matches){ tabs=4; starttab=currenttab-4;}
    else{ tabs=6; starttab=currenttab-6; }

    $('#sendtabs').jCarouselLite({
        btnNext: '.nexttab',
        btnPrev: '.prevtab',
        circular: false,
        visible: tabs,
        auto: null,
        speed:100,
        scroll:1,
        start: starttab
    });
});

</script>