<h2>General Elements</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<ul>
<li>Bullet List 1</li>
<ul>
<li>Bullet List 1.1</li>
<li>Bullet List 1.2</li>
<li>Bullet List 1.3</li>
<li>Bullet List 1.4</li>
</ul>
<li>Bullet List 2</li>
<li>Bullet List 3</li>
<li>Bullet List 4</li>
</ul>
<ol>
<li>Number List 1</li>
<ol>
<li>Number List 1.1</li>
<li>Number List 1.2</li>
<li>Number List 1.3</li>
<li>Number List 1.4</li>
</ol>
<li>Number List 2</li>
<li>Number List 3</li>
<li>Number List 4</li>
</ol><dl><dt>Definition title dt</dt><dd>Defination description dd</dd><dt>Definition title dt</dt><dd>Defination description dd</dd></dl>
<p><code>Code tag:&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</code></p>
<blockquote>
<p>block quote&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>
<div class="box f-left">element with class <strong>.f-left</strong></div>
<div class="box f-right">element with class <strong>.f-right</strong></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&nbsp;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Tables</h2>
<p>Table with class <strong>.data-table</strong></p>
<table class="data-table" style="width: 100%; display:inline-table" border="0">
<thead>
<tr><th>THEAD TH</th><th>THEAD TH</th><th>THEAD TH</th><th>THEAD TH</th><th>THEAD TH</th></tr>
</thead>
<tbody>
<tr>
<td>TBODY TD</td>
<td>TBODY TD</td>
<td>TBODY TD</td>
<td>TBODY TD</td>
<td>TBODY TD</td>
</tr>
<tr>
<td>TBODY TD</td>
<td>TBODY TD</td>
<td>TBODY TD</td>
<td>TBODY TD</td>
<td>TBODY TD</td>
</tr>
<tr>
<td>TBODY TD</td>
<td>TBODY TD</td>
<td>TBODY TD</td>
<td>TBODY TD</td>
<td>TBODY TD</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<h2>Custom CSS Classes</h2>
<p class="small">tag <strong>small</strong> and class <strong>.small</strong></p>
<p class="underline">element with class <strong>.underline</strong></p>
<p><strong>ul.none</strong> and <strong>ol.none</strong>:</p>
<ul class="none">
<li>Bullet List 1</li>
<ul>
<li>Bullet List 1.1</li>
<li>Bullet List 1.2</li>
<li>Bullet List 1.3</li>
<li>Bullet List 1.4</li>
</ul>
<li>Bullet List 2</li>
<li>Bullet List 3</li>
<li>Bullet List 4</li>
</ul>
<p><strong>ul.hoz</strong> and <strong>ol.hoz</strong>:</p>
<ul class="hoz">
<li>Bullet List 1</li>
<li>Bullet List 2</li>
<li>Bullet List 3</li>
<li>Bullet List 4</li>
</ul>
<div class="box">
<p>paragraph with class <strong>.box</strong>:</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<p class="bottom">Paragraph with class <strong>.bottom</strong> always has margin-bottom = 0.</p>
<p>Add class <strong>.hide-lte2</strong> to hide element when screen's width less than 1280px.</p>
<p class="box hide-lte2">This block will disappear when resize window less than 1280px</p>
<p>Add class <strong>.hide-lte1</strong> to hide element when screen's width less than 980px.</p>
<p class="box hide-lte1">This block will disappear when resize window less than 980px</p>
<p>Add class <strong>.hide-lte0</strong> to hide element when screen's width less than 760px.</p>
<p class="box hide-lte0">This block will disappear when resize window less than 760px</p>
<p>&nbsp;</p>
<h2>Icons</h2>
<table class="data-table" border="0" style="display:inline-table">
<tbody>
<tr>
<td align="center" valign="top">
<p>.icon.search</p>
<p><span class="icon search">span.icon.search</span></p>
</td>
<td align="center" valign="top">
<p>.icon.my_account</p>
<p><span class="icon facebook">span.icon.my_account</span></p>
</td>
<td align="center" valign="top">
<p>.icon.log_in</p>
<p><span class="icon pinterest">span.icon.log_in</span></p>
</td>
<td align="center" valign="top">
<p>.icon.register</p>
<p><span class="icon register">span.icon.register</span></p>
</td>
<td align="center" valign="top">
<p>.icon.phone</p>
<p><span class="icon phone">span.icon.phone</span></p>
</td>
<td align="center" valign="top">
<p>.icon.address</p>
<p><span class="icon address">span.icon.address</span></p>
</td>
<td align="center" valign="top">
<p>.icon.email</p>
<p><span class="icon email">span.icon.email</span></p>
</td>
</tr>
<tr>
<td align="center" valign="top">
<p>.icon.facebook</p>
<p><span class="icon facebook">span.icon.facebook</span></p>
</td>
<td align="center" valign="top">
<p>.icon.pinterest</p>
<p><span class="icon pinterest">span.icon.pinterest</span></p>
</td>
<td align="center" valign="top">
<p>.icon.twitter</p>
<p><span class="icon twitter">span.icon.twitter</span></p>
</td>
<td align="center" valign="top">
<p>.icon.google</p>
<p><span class="icon google">span.icon.google</span></p>
</td>
<td align="center" valign="top">
<p>.icon.rss</p>
<p><span class="icon rss">span.icon.rss</span></p>
</td>
<td align="center" valign="top">
<p>.icon.vimeo</p>
<p><span class="icon vimeo">span.icon.vimeo</span></p>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<h2>Logo</h2>
<table class="data-table" border="0" style="display:inline-table">
<tbody>
<tr>
<td align="center" valign="top">
<p>.brand-logo.visa</p>
<p><span class="brand-logo visa">span.brand-logo.visa</span></p>
</td>
<td align="center" valign="top">
<p>.brand-logo.paypal</p>
<p><span class="brand-logo paypal">span.brand-logo.paypal</span></p>
</td>
<td align="center" valign="top">
<p>.brand-logo.express</p>
<p><span class="brand-logo express">span.brand-logo.express</span></p>
</td>
<td align="center" valign="top">
<p>.brand-logo.master</p>
<p><span class="brand-logo master">span.brand-logo.master</span></p>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<h2>Label</h2>
<table class="data-table" border="0" style="display:inline-table">
<tbody>
<tr>
<td align="center" valign="top">
<p>.label.new</p>
<ul style="padding-left: 0; margin: 0;">
<li style="position: relative; list-style: none; height: 70px;"><span class="productlabels_icons"><span class="label new"><span>New</span></span></span></li>
</ul>
</td>
<td align="center" valign="top">
<p>.label.hot</p>
<ul style="padding-left: 0; margin: 0;">
<li style="position: relative; list-style: none; height: 70px;"><span class="productlabels_icons"><span class="label hot"><span>Best</span></span></span></li>
</ul>
</td>
<td align="center" valign="top">
<p>.label.special</p>
<ul style="padding-left: 0; margin: 0;">
<li style="position: relative; list-style: none; height: 70px;"><span class="productlabels_icons"><span class="label special"><span>Sale</span></span></span></li>
</ul>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>image with class <strong>.img-responsive</strong>:</p>
<p><img class="img-responsive" title="image with class .img-responsive" src="{{media url="wysiwyg/category.jpg"}}" alt="image with class .img-responsive" /></p>