<a name="Heading"></a>
<h2>Heading</h2>
<p>
Heading: h1, h2, h3, h4 and h5 font size parameter is available for all main layouts.
</p>

<div class="item-separator"></div>
<div class="item-separator"></div>

<a name="Toggle"></a>
<h2>Content Toggle</h2>
<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla. Vestibulum gravida elit in dui rutrum placerat. Vivamus vitae fermentum tortor. Etiam lacinia sodales velit, in convallis nunc molestie et.</p>
<div class="item-separator"></div>

<div class="toggle 9">
  Click me to toggle content...
</div>
<div class="toggle_content 9">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla. Vestibulum gravida elit in dui rutrum placerat. Vivamus vitae fermentum tortor. Etiam lacinia sodales velit, in convallis nunc molestie et.
</div>
<div class="toggle 10">
  Click me to toggle content...
</div>
<div class="toggle_content 10">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla. Vestibulum gravida elit in dui rutrum placerat. Vivamus vitae fermentum tortor. Etiam lacinia sodales velit, in convallis nunc molestie et.
</div>
<div class="toggle 11">
  Click me to toggle content...
</div>
<div class="toggle_content 11">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla. Vestibulum gravida elit in dui rutrum placerat. Vivamus vitae fermentum tortor. Etiam lacinia sodales velit, in convallis nunc molestie et.
</div>
<div class="item-separator"></div>
<div class="item-separator"></div>
  <p>
  Morbi iaculis tellus non sapien aliquet viverra. Etiam non risus ac turpis consequat aliquet. Morbi eu turpis molestie ipsum imperdiet sollicitudin. Donec rhoncus, lacus eget dapibus aliquam, risus massa aliquam ligula, ac rutrum tellus mi a nunc. <br />
</p>
<div class="item-separator"></div>

<div class="toggle 12">
  Click here to grab the code
</div>
<div class="toggle_content 12">
    &lt;div class="toggle 1"&gt;<br />
      Click me to toggle content...<br />
    &lt;/div&gt;<br />
    &lt;div class="toggle_content 1"&gt;<br />
        Your text here ...<br />
    &lt;/div&gt;<br />
    .<br />
    .<br />
    <em>There are 15 content toggles available per page, each should contain a different ID: 1, 2, 3 .... 15</em><br />
    .<br />
    .<br />
    &lt;div class="toggle 15"&gt;<br />
      Click me to toggle content...<br />
    &lt;/div&gt;<br />
    &lt;div class="toggle_content 15"&gt;<br />
        Your text here ...<br />
    &lt;/div&gt;<br />
</div>

<div class="item-separator"></div>
<div class="item-separator"></div>
<div class="item-separator"></div>

<a name="Blockquote"></a>
<h2>Blockquote styles</h2>
<p>
<blockquote class="left">This is a left blockquote.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed pharetra aliquet metus.</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla. Vestibulum gravida elit in dui rutrum placerat. Vivamus vitae fermentum tortor. Etiam lacinia sodales velit, in convallis nunc molestie et.
Morbi iaculis tellus non sapien aliquet viverra. Etiam non risus ac turpis consequat aliquet. Morbi eu turpis molestie ipsum imperdiet sollicitudin. Donec rhoncus, lacus eget dapibus aliquam, risus massa aliquam ligula, ac rutrum tellus mi a nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce volutpat, sapien eget placerat rutrum, urna mauris iaculis ligula, at tincidunt ligula ante ac enim. Duis pulvinar, est a aliquet sollicitudin, quam risus bibendum velit, in blandit orci eros non risus. Pellentesque ac ullamcorper velit. Vestibulum ornare tincidunt lacinia. Donec vel ante justo, quis scelerisque est. Phasellus a feugiat felis. Integer eu risus libero. Nullam pulvinar dolor vitae ante fermentum sodales.
</p>
<div class="item-separator"></div>
<div class="toggle 1">
  Click here to grab the code
</div>
<div class="toggle_content 1">
  &lt;blockquote class="left"&gt;Your text here ...&lt;/blockquote&gt;
</div>

<div class="item-separator"></div>
<p>
<blockquote class="right">This is a right blockquote.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed pharetra aliquet metus.</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla. Vestibulum gravida elit in dui rutrum placerat. Vivamus vitae fermentum tortor. Etiam lacinia sodales velit, in convallis nunc molestie et.
Morbi iaculis tellus non sapien aliquet viverra. Etiam non risus ac turpis consequat aliquet. Morbi eu turpis molestie ipsum imperdiet sollicitudin. Donec rhoncus, lacus eget dapibus aliquam, risus massa aliquam ligula, ac rutrum tellus mi a nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce volutpat, sapien eget placerat rutrum, urna mauris iaculis ligula, at tincidunt ligula ante ac enim. Duis pulvinar, est a aliquet sollicitudin, quam risus bibendum velit, in blandit orci eros non risus. Pellentesque ac ullamcorper velit. Vestibulum ornare tincidunt lacinia. Donec vel ante justo, quis scelerisque est. Phasellus a feugiat felis. Integer eu risus libero. Nullam pulvinar dolor vitae ante fermentum sodales.
</p>
<div class="item-separator"></div>

<div class="toggle 2">
  Click here to grab the code
</div>
<div class="toggle_content 2">
  &lt;blockquote class="right"&gt;Your text here ...&lt;/blockquote&gt;
</div>

<div class="item-separator"></div>
<p>
<blockquote>This is a fullwidth blockquote.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla. Vestibulum gravida elit in dui rutrum placerat. Vivamus vitae fermentum tortor. Etiam lacinia sodales velit, in convallis nunc molestie et. Morbi iaculis tellus non sapien aliquet viverra. Etiam non risus ac turpis consequat aliquet.</blockquote>
</p>
<div class="item-separator"></div>
<div class="toggle 3">
  Click here to grab the code
</div>
<div class="toggle_content 3">
  &lt;blockquote&gt;Your text here ...&lt;/blockquote&gt;
</div>

<div class="item-separator"></div>
<div class="item-separator"></div>
<div class="item-separator"></div>

<a name="Note"></a>
<h2>Note style</h2>
 <div class="note"><b>Note:</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla. Vestibulum gravida elit in dui rutrum placerat. Vivamus vitae fermentum tortor. Etiam lacinia sodales velit, in convallis nunc molestie et. Morbi iaculis tellus non sapien aliquet viverra. Etiam non risus ac turpis consequat aliquet.</div>
<div class="item-separator"></div>
<div class="toggle 4">
  Click here to grab the code
</div>
<div class="toggle_content 4">
  &lt;div class="note"&gt;&lt;b&gt;Note: &lt;/b&gt;Your text here ...&lt;/div&gt;
</div>

<div class="item-separator"></div>
<div class="item-separator"></div>
<div class="item-separator"></div>

<a name="List"></a>
<h2>List styles</h2>
<ul>
  <li>
    <b>General list style.</b><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla.
  </li>
</ul>
<ul>
  <li class="list-1">
    <b>List style 1.</b> To apply this list style use: "list-1"<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla.
  </li>
</ul>
<ul>  
  <li class="list-2">
    <b>List style 2.</b> To apply this list style use: "list-2"<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla.
  </li>
</ul>
<ul>
  <li class="list-3">
    <b>List style 3.</b> To apply this list style use: "list-3"<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla.
  </li>
</ul>
<ul>  
  <li class="list-4">
    <b>List style 4.</b> To apply this list style use: "list-4"<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla.
  </li>
</ul>
<ul>  
  <li class="list-5">
    <b>List style 5.</b> To apply this list style use: "list-5"<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla.
  </li>
</ul>
<ul>  
  <li class="list-6">
    <b>List style 6.</b> To apply this list style use: "list-6"<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla.
  </li>
</ul>
<ul>  
  <li class="list-7">
    <b>List style 7.</b> To apply this list style use: "list-7"<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla.
  </li>
</ul>
<ul>  
  <li class="list-8">
    <b>List style 8.</b> To apply this list style use: "list-8"<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla.
  </li>
</ul>
<ul>  
  <li class="list-9">
    <b>List style 9.</b> To apply this list style use: "list-9"<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla.
  </li>
</ul>

<div class="item-separator"></div>

<div class="toggle 5">
  Click here to grab the code
</div>
<div class="toggle_content 5">
    &lt;ul&gt;<br />  
       &lt;li class="list-1"&gt;Your text here ...&lt;/li&gt;<br />
    &lt;/ul&gt;<br /><br />
    .<br />
    . <em>There are 9 list styles availble: list-1, list-2, list-3, ... and list-9</em><br />
    .<br /><br />  
    &lt;ul&gt;<br />  
       &lt;li class="list-9"&gt;Your text here ...&lt;/li&gt;<br />
    &lt;/ul&gt;
</div>

<div class="item-separator"></div>
<div class="item-separator"></div>
<div class="item-separator"></div>

<a name="Images"></a>
<h2>Image styles</h2>
<p>
  <img class="left" src="images/sampledata/as002037/img.typo.png" border="0" width="400" />  
<b>Custom Image Frame with Left Alignment</b><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla. Vestibulum gravida elit in dui rutrum placerat. Vivamus vitae fermentum tortor. Etiam lacinia sodales velit, in convallis nunc molestie et.Morbi iaculis tellus non sapien aliquet viverra. Etiam non risus ac turpis consequat aliquet. Morbi eu turpis molestie ipsum imperdiet sollicitudin. Donec rhoncus, lacus eget dapibus aliquam, risus massa aliquam ligula, ac rutrum tellus mi a nunc. <br />
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce volutpat, sapien eget placerat rutrum, urna mauris iaculis ligula, at tincidunt ligula ante ac enim. Duis pulvinar, est a aliquet sollicitudin, quam risus bibendum velit, in blandit orci eros non risus. Pellentesque ac ullamcorper velit. Vestibulum ornare tincidunt lacinia. Donec vel ante justo, quis scelerisque est. Phasellus a feugiat felis. Integer eu risus libero. Nullam pulvinar dolor vitae ante fermentum sodales. Morbi iaculis tellus non sapien aliquet viverra. Etiam non risus ac turpis consequat aliquet.
</p>
<div class="item-separator"></div>
<div class="toggle 6">
  Click here to grab the code
</div>
<div class="toggle_content 6">
    &lt;p&gt;<br />
    &lt;img class="left" src="images/sampledata/as002037/img.typo.png" border="0" width="400" /&gt;<br />  
    &lt;b&gt;Custom Image Frame with Left Alignment&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla. Vestibulum gravida elit in dui rutrum placerat. Vivamus vitae fermentum tortor. Etiam lacinia sodales velit, in convallis nunc molestie et.<br />
    &lt;/p&gt;
</div>

<div class="item-separator"></div>
<div class="item-separator"></div>

<p>
<img class="right" src="images/sampledata/as002037/img.typo.png" border="0" width="400" />
<b>Custom Image Frame with Right Alignment</b><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla. Vestibulum gravida elit in dui rutrum placerat. Vivamus vitae fermentum tortor. Etiam lacinia sodales velit, in convallis nunc molestie et. Morbi iaculis tellus non sapien aliquet viverra. Etiam non risus ac turpis consequat aliquet. Morbi eu turpis molestie ipsum imperdiet sollicitudin. Donec rhoncus, lacus eget dapibus aliquam, risus massa aliquam ligula, ac rutrum tellus mi a nunc. <br />
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce volutpat, sapien eget placerat rutrum, urna mauris iaculis ligula, at tincidunt ligula ante ac enim. Duis pulvinar, est a aliquet sollicitudin, quam risus bibendum velit, in blandit orci eros non risus. Pellentesque ac ullamcorper velit. Vestibulum ornare tincidunt lacinia. Donec vel ante justo, quis scelerisque est. Phasellus a feugiat felis. Integer eu risus libero. Nullam pulvinar dolor vitae ante fermentum sodales. Morbi iaculis tellus non sapien aliquet viverra. Etiam non risus ac turpis consequat aliquet.
</p>
<div class="item-separator"></div>
<div class="toggle 7">
  Click here to grab the code
</div>
<div class="toggle_content 7">
    &lt;p&gt;<br />
    &lt;img class="right" src="images/sampledata/as002037/img.typo.png" border="0" width="400" /&gt;<br />  
    &lt;b&gt;Custom Image Frame with Left Alignment&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla. Vestibulum gravida elit in dui rutrum placerat. Vivamus vitae fermentum tortor. Etiam lacinia sodales velit, in convallis nunc molestie et.<br />
    &lt;/p&gt;
</div>

<div class="item-separator"></div>
<div class="item-separator"></div>

<p>
<b>Custom Image Frame with Center Alignment</b><br /><br />
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus. Sed consectetur iaculis purus tempus pulvinar. Nullam consequat imperdiet fringilla. Vestibulum gravida elit in dui rutrum placerat. Vivamus vitae fermentum tortor. Etiam lacinia sodales velit, in convallis nunc molestie et.<br /><br /></p>
  <div class="center">
  <img class="center" src="images/sampledata/as002037/img.typo.png" border="0" width="400" />
  </div>
  <p>
  Morbi iaculis tellus non sapien aliquet viverra. Etiam non risus ac turpis consequat aliquet. Morbi eu turpis molestie ipsum imperdiet sollicitudin. Donec rhoncus, lacus eget dapibus aliquam, risus massa aliquam ligula, ac rutrum tellus mi a nunc. <br />
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce volutpat, sapien eget placerat rutrum, urna mauris iaculis ligula, at tincidunt ligula ante ac enim. Duis pulvinar, est a aliquet sollicitudin, quam risus bibendum velit, in blandit orci eros non risus. Pellentesque ac ullamcorper velit. Vestibulum ornare tincidunt lacinia. Donec vel ante justo, quis scelerisque est. Phasellus a feugiat felis. Integer eu risus libero. Nullam pulvinar dolor vitae ante fermentum sodales. Morbi iaculis tellus non sapien aliquet viverra. Etiam non risus ac turpis consequat aliquet.
</p>
<div class="item-separator"></div>
<div class="toggle 8">
  Click here to grab the code
</div>
<div class="toggle_content 8">
    &lt;p&gt;<br />
    &lt;b&gt;Custom Image Frame with Center Alignment&lt;/b&gt;&lt;br /&gt;&lt;br /&gt;<br />
    Some text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus.<br />
    &lt;/p&gt;<br />
    &lt;div class="center"&gt;<br />
    &lt;img class="center" src="images/sampledata/as002037/img.typo.png" border="0" width="400" /&gt;<br />
    &lt;/div&gt;<br />
    &lt;p&gt;<br />
    Some text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam justo neque. Maecenas blandit luctus rhoncus.<br />
    &lt;/p&gt;
</div>


