<h4>Creating Beautiful Content With Simple Code</h4>

<p>Typography is a fundamental part of a template, providing you with the tools to characterise your content and bring it to life. There is a vast array of typography available with Ximenia template, as is with our previous releases, from list styles, notice blocks and a diverse number of other elements. </p>

<div class="rt-demo-width-50 rt-demo-block"><div class="largepaddingall">
  <h2>&lt;h1&gt; Heading Styles</h2>
  
  <h1>H1. Heading 1</h1>
  <div class="clear"></div>
  <h2>H2. Heading 2</h2>
  <h3>H3. Heading 3</h3>
  <h4>H4. Heading 4</h4>
  <h5>H5. Heading 5</h5>
  <h1 class="rt-pagetitle">H1. Page Title</h1>
  <div class="clear"></div>
  <h1 class="title nomarginbottom">H1. Content Title</h1>
</div></div>

<div class="rt-demo-width-50 rt-demo-block"><div class="largepaddingall">
  <h2>&lt;ul&gt; List Styles</h2>
  
  <ul>
    <li><em>This is an example of a standard list style.</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh.</li>
    <li><em>This is an example of a standard list style.</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh.</li>
    <li><em>This is an example of a standard list style.</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh.</li>
    <li><em>This is an example of a standard list style.</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh.</li>    
    <li><em>This is an example of a standard list style.</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh.</li>        
  </ul>
</div></div>

<div class="clear largemarginbottom">&nbsp;</div><br />

<div class="rt-demo-width-50 rt-demo-block"><div class="largepaddingall">
  <h2>&lt;p&gt; DropCap Styles</h2>
  
  <p class="dropcap">Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibu. Pellentesque vel enim urna, sit amet blandit ipsum. Maecenas quis sem sit amet nunc pretium mattis. Sed dapibus semper est, sed pretium erat.</p>
  
  <p>Use the following format: <strong>&lt;p class="dropcap"&gt;...&lt;/p&gt; (HTML)</strong> or <strong>&#091;dropcap class="dropcap"&#093;...&#091;/dropcap&#093; (SHORTCODE)</strong>. You can use any letter, symbol or number.</p>
  
  <p class="dropcap2">Praesent rutrum sapien ac felis. Use this format: <strong>&lt;p class="dropcap2"&gt;...&lt;/p&gt; (HTML)</strong> or <strong>&#091;dropcap class="dropcap2"&#093; ... &#091;/dropcap&#093; (SHORTCODE)</strong></p>
  
  <p class="dropcap3">Praesent rutrum sapien ac felis. Use this format: <strong>&lt;p class="dropcap3"&gt;...&lt;/p&gt; (HTML)</strong> or <strong>&#091;dropcap class="dropcap3"&#093; ... &#091;/dropcap&#093; (SHORTCODE)</strong></p>
  
  <p class="dropcap4">Praesent rutrum sapien ac felis. Use this format: <strong>&lt;p class="dropcap4"&gt;...&lt;/p&gt; (HTML)</strong> or <strong>&#091;dropcap class="dropcap4"&#093; ... &#091;/dropcap&#093; (SHORTCODE)</strong></p>
  
  <p class="dropcap5 nomarginbottom">Praesent rutrum sapien ac felis. Use this format: <strong>&lt;p class="dropcap5"&gt;...&lt;/p&gt; (HTML)</strong> or <strong>&#091;dropcap class="dropcap5"&#093; ... &#091;/dropcap&#093; (SHORTCODE)</strong></p>
</div></div>

<div class="rt-demo-width-50 rt-demo-block"><div class="largepaddingall">
  <h2>&lt;blockquote&gt;  Styles</h2>
  
  <blockquote><p>To replicate, use the following formatting: <strong>&lt;blockquote&gt;&lt;p&gt;....&lt;/p&gt;&lt;/blockquote&gt; (HTML)</strong> or <strong>&#091;blockquote class="default"&#093;...&#091;/blockquote&#093; (SHORTCODE)</strong>.</p></blockquote>
  <br />
  <blockquote class="alignleft"><p>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.</p></blockquote>
  
  <p>To replicate, use the following formatting: <strong>&lt;blockquote class=&quot;alignleft&quot;&gt;&lt;p&gt;....&lt;/p&gt;&lt;/blockquote&gt; (HTML)</strong> or <strong>&#091;blockquote class="alignleft"&#093;...&#091;/blockquote&#093; (SHORTCODE)</strong>.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor.</p>
  <br />
  <blockquote class="alignright nomarginbottom"><p>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.</p></blockquote>
  
  <p>To replicate, use the following formatting: <strong>&lt;blockquote class=&quot;alignright&quot;&gt;&lt;p&gt;....&lt;/p&gt;&lt;/blockquote&gt; (HTML)</strong> or <strong>&#091;blockquote class="alignright"&#093;...&#091;/blockquote&#093; (SHORTCODE)</strong>.</p>
  
  <p class="nomarginbottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor.</p>
</div></div>

<div class="clear largemarginbottom">&nbsp;</div><br />

<div class="rt-demo-width-50 rt-demo-block"><div class="largepaddingall">
  <h2>&lt;pre&gt; Code Styles</h2>
  
  <pre class="lines">This is a sample <strong>&lt;pre class=&quot;lines&quot;&gt;...&lt;/pre&gt; (HTML)</strong> or,
<strong>&#091;pre2 class="{lines}"&#093; ... &#091;/pre2&#093; (SHORTCODE)</strong> tag:

div.modulebox-black div.bx1 {
  background: url(../images/box_bl.png) 0 100% repeat;
}

div.modulebox-black div.bx2 {
  background: url(../images/box_tr.png) 100% 0 repeat;
}
</pre>
  
  <pre class="nomarginbottom">This is a sample <strong>&lt;pre&gt;...&lt;/pre&gt; (HTML)</strong> or,
<strong>&#091;pre class="{lines}"&#093; ... &#091;/pre&#093; (SHORTCODE)</strong> tag:

div.modulebox-black div.bx1 {
  background: url(../images/box_bl.png) 0 100% repeat;
}

div.modulebox-black div.bx2 {
  background: url(../images/box_tr.png) 100% 0 repeat;
}
</pre>
</div></div>

<div class="rt-demo-width-50 rt-demo-block"><div class="largepaddingall">
  <h2>&lt;p&gt; Notice Styles</h2>
  
  <p class="approved">This is a <a href="void(0);">sample</a> of the <em>Approved</em> style. To replicate, use the following syntax: <em>&lt;p class="approved"&gt;....&lt;/p&gt;</em> (HTML) or <em>&#091;notice class="approved"&#093; <em class="normal">...</em> &#091;/notice&#093;</em> (SHORTCODE).</p>
  
  <p class="attention">This is a <a href="void(0);">sample</a> of the <em>Attention</em> style. To replicate, use the following syntax: <em>&lt;p class="attention"&gt;....&lt;/p&gt;</em> (HTML) or <em>&#091;notice class="attention"&#093; <em class="normal">...</em> &#091;/notice&#093;</em> (SHORTCODE).</p>
  
  <p class="notice">This is a <a href="void(0);">sample</a> of the <em>Notice</em> style. To replicate, use the following syntax: <em>&lt;p class="notice"&gt;....&lt;/p&gt;</em> (HTML) or <em>&#091;notice class="notice"&#093; <em class="normal">...</em> &#091;/notice&#093;</em> (SHORTCODE).</p>
  
  <p class="alert nomarginbottom">This is a <a href="void(0);">sample</a> of the <em>Alert</em> style. To replicate, use the following syntax: <em>&lt;p class="alert"&gt;....&lt;/p&gt;</em> (HTML) or <em>&#091;notice class="alert"&#093; <em class="normal">...</em> &#091;/notice&#093;</em> (SHORTCODE).</p>
</div></div>

<div class="clear largemarginbottom">&nbsp;</div><br />

<div class="rt-demo-width-50 rt-demo-block"><div class="largepaddingall">
  <h2>&lt;span&gt; Text Icon</h2>
  <p>To replicate, the following format: <strong>&lt;span class="text-icon iconname"&gt;...&lt;/span&gt; (HTML)</strong> or <strong>&#091;icon class=&quot;icon name&quot;&#093;...&#091;/icon&#093; (SHORTCODE)</strong>. The class names are listed below, such as "<strong>text-icon email</strong>".</p>
  
  <div class="rt-demo-grid-3 nomarginleft nomarginright">
    <span class="text-icon email">Text with an email icon</span><br /><br />
    <span class="text-icon phone">Text with a phone icon</span><br /><br />
    <span class="text-icon quote">Text with a quote icon</span><br /><br />
    <span class="text-icon cart">Text with a cart icon</span><br /><br />
    <span class="text-icon rss">Text with a rss icon</span><br /><br />
    <span class="text-icon tags">Text with a tags icon</span><br /><br />
    <span class="text-icon write">Text with a write icon</span><br /><br />
    <span class="text-icon info">Text with an info icon</span><br /><br />
    <span class="text-icon sound">Text with a sound icon</span><br /><br />
    <span class="text-icon rightarrow">Text with a rightarrow icon</span><br /><br />
    <span class="text-icon leftarrow">Text with a leftarrow icon</span><br /><br />
    <span class="text-icon circlearrow">Text with a circlearrow icon</span><br /><br />
    <span class="text-icon downarrow">Text with a downarrow icon</span><br /><br />
    <span class="text-icon uparrow">Text with an uparrow icon</span><br /><br />
    <span class="text-icon person">Text with a person icon</span><br /><br />
    <span class="text-icon calendar">Text with a calendar icon</span><br /><br />
    <span class="text-icon doc">Text with a doc icon</span>
  </div>
  <div class="rt-demo-grid-3 nomarginright">
    <span class="text-icon bulb">Text with a bulb icon</span><br /><br />
    <span class="text-icon twitter">Text with a twitter icon</span><br /><br />
    <span class="text-icon youtube">Text with a youtube icon</span><br /><br />
    <span class="text-icon skype">Text with a skype icon</span><br /><br />
    <span class="text-icon facebook">Text with a facebook icon</span><br /><br />
    <span class="text-icon like">Text with a like icon</span><br /><br />
    <span class="text-icon video">Text with a video icon</span><br /><br />
    <span class="text-icon dropbox">Text with a dropbox icon</span><br /><br />
    <span class="text-icon vimeo">Text with a vimeo icon</span><br /><br />
    <span class="text-icon paypal">Text with a paypal icon</span>
  </div>
</div></div>

<div class="rt-demo-width-50 rt-demo-block"><div class="largepaddingall">
  <h2>&lt;em&gt; Emphasis Styles</h2>
  
  <p>This is a emphasis tag that allows you to <em class="italic">highlight words or phrases</em>. Use the following format: <strong>&lt;em class=&quot;italic&quot;&gt;...&lt;/em&gt; (HTML)</strong> or <strong>&#091;emphasis&#093;...&#091;/emphasis&#093; (SHORTCODE)</strong></p>
  
  <p>This is a emphasis tag that allows you to <em class="bold">highlight words or phrases</em>. Use the following format: <strong>&lt;em class=&quot;bold&quot;&gt;...&lt;/em&gt; (HTML)</strong> or <strong>&#091;emphasisbold&#093;...&#091;/emphasisbold&#093; (SHORTCODE)</strong></p>
  
  <p>This is a emphasis tag that allows you to <em class="bold2">highlight words or phrases</em>. Use the following format: <strong>&lt;em class=&quot;bold2&quot;&gt;...&lt;/em&gt; (HTML)</strong> or <strong>&#091;emphasisbold2&#093;...&#091;/emphasisbold2&#093; (SHORTCODE)</strong></p>
  
  <p>This is a emphasis tag that allows you to <em class="highlight">highlight words or phrases</em>. Use the following format: <strong>&lt;em class=&quot;highlight&quot;&gt;...&lt;/em&gt; (HTML)</strong> or <strong>&#091;highlight class=&quot;default&quot;&#093;...&#091;/highlight&#093; (SHORTCODE)</strong></p>
  
  <p>This is a emphasis tag that allows you to <em class="highlight white">highlight words or phrases</em>. Use the following format: <strong>&lt;em class=&quot;highlight white&quot;&gt;...&lt;/em&gt; (HTML)</strong> or <strong>&#091;highlight class=&quot;white&quot;&#093;...&#091;/highlight&#093; (SHORTCODE)</strong></p>
  
  <p>This is a emphasis tag that allows you to <em class="highlight black">highlight words or phrases</em>. Use the following format: <strong>&lt;em class=&quot;highlight black&quot;&gt;...&lt;/em&gt; (HTML)</strong> or <strong>&#091;highlight class=&quot;black&quot;&#093;...&#091;/highlight&#093; (SHORTCODE)</strong></p>
  
  <p>This is a emphasis tag that allows you to <em class="highlight green">highlight words or phrases</em>. Use the following format: <strong>&lt;em class=&quot;highlight green&quot;&gt;...&lt;/em&gt; (HTML)</strong> or <strong>&#091;highlight class=&quot;green&quot;&#093;...&#091;/highlight&#093; (SHORTCODE)</strong></p>
  
  <p>This is a emphasis tag that allows you to <em class="highlight yellow">highlight words or phrases</em>. Use the following format: <strong>&lt;em class=&quot;highlight yellow&quot;&gt;...&lt;/em&gt; (HTML)</strong> or <strong>&#091;highlight class=&quot;yellow&quot;&#093;...&#091;/highlight&#093; (SHORTCODE)</strong></p>
  
  <p>This is a emphasis tag that allows you to <em class="highlight blue">highlight words or phrases</em>. Use the following format: <strong>&lt;em class=&quot;highlight blue&quot;&gt;...&lt;/em&gt; (HTML)</strong> or <strong>&#091;highlight class=&quot;blue&quot;&#093;...&#091;/highlight&#093; (SHORTCODE)</strong></p>
  
  <p class="nomarginbottom">This is a emphasis tag that allows you to <em class="highlight red">highlight words or phrases</em>. Use the following format: <strong>&lt;em class=&quot;highlight red&quot;&gt;...&lt;/em&gt; (HTML)</strong> or <strong>&#091;highlight class=&quot;red&quot;&#093;...&#091;/highlight&#093; (SHORTCODE)</strong></p>
</div></div>

<div class="clear largemarginbottom">&nbsp;</div><br />

<h2>Font Awesome Icons</h2>

<p>Font Awesome is a pictographic language of web-related actions which delivers 220 icons. The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0 and you can find the full examples of usage at <a href="http://fortawesome.github.com/Font-Awesome" target="_blank">Font Awesome - http://fortawesome.github.com/Font-Awesome</a></p>

<p>To replicate, use the following format: <strong>&lt;span class="<em>icon-name</em>"&gt;&lt;span&gt;</strong> or <strong>&#091;span class=&quot;<em>icon-name</em>&quot;&#093;...&#091;/span&#093; (SHORTCODE)</strong>. The icons name are listed below, such as "<strong>icon-signal</strong>".</p>

<div class="rt-demo-grid-3">
  <span class="icon-adjust">Text using <strong>icon-adjust</strong></span><br /><br />
  <span class="icon-asterisk">Text using <strong>icon-asterisk</strong></span><br /><br />
  <span class="icon-calendar">Text using <strong>icon-calendar</strong></span><br /><br />
</div>

<div class="rt-demo-grid-3">
  <span class="icon-flag">Text using <strong>icon-flag</strong></span><br /><br />
  <span class="icon-external-link">Text using <strong>icon-external-link</strong></span><br /><br />
  <span class="icon-gift">Text using <strong>icon-gift</strong></span><br /><br />
</div>

<div class="rt-demo-grid-3">
  <span class="icon-print">Text using <strong>icon-print</strong></span><br /><br />
  <span class="icon-group">Text using <strong>icon-group</strong></span><br /><br />
  <span class="icon-signal">Text using <strong>icon-signal</strong></span><br /><br />
</div>

<div class="rt-demo-grid-3">
  <span class="icon-shopping-cart">Text using <strong>icon-shopping-cart</strong></span><br /><br />
  <span class="icon-leaf">Text using <strong>icon-leaf</strong></span><br /><br />
  <span class="icon-download-alt">Text using <strong>icon-download-alt</strong></span><br /><br />
</div>

<div class="clear largemarginbottom">&nbsp;</div><br />

<h2>&lt;ul&gt; List Styles (Icons)</h2>

<p>To replicate, use the following format: <strong>&lt;ul class="list-icon icon_name"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong> or <strong>&#091;list class="list-icon icon_name"&#093;&#091;li&#093;....&#091;/li&#093;&#091;li....&#091;/li&#093;&#091;/list&#093; (SHORTCODE)</strong>. The icon names are listed below, such as "<strong>cart</strong>".</p>

<div class="rt-demo-grid-3">
  <ul class="list-icon email">
    <li>A list item using the <strong>list-icon email</strong> class.</li>
    <li>A list item using the <strong>list-icon email</strong> class.</li>  </ul>
  <br />
  <ul class="list-icon phone">
    <li>A list item using the <strong>list-icon phone</strong> class.</li>
    <li>A list item using the <strong>list-icon phone</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon quote">
    <li>A list item using the <strong>list-icon quote</strong> class.</li>
    <li>A list item using the <strong>list-icon quote</strong> class.</li>  </ul>
  <br />
  <ul class="list-icon twitter">
    <li>A list item using the <strong>list-icon twitter</strong> class.</li>
    <li>A list item using the <strong>list-icon twitter</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon youtube">
    <li>A list item using the <strong>list-icon youtube</strong> class.</li>
    <li>A list item using the <strong>list-icon youtube</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon facebook">
    <li>A list item using the <strong>list-icon facebook</strong> class.</li>
    <li>A list item using the <strong>list-icon facebook</strong> class.</li>  </ul>
  <br />
  <ul class="list-icon cart nomarginbottom">
    <li>A list item using the <strong>list-icon cart</strong> class.</li>
    <li>A list item using the <strong>list-icon cart</strong> class.</li>  </ul>
</div>
<div class="rt-demo-grid-3">
  <ul class="list-icon tags">
    <li>A list item using the <strong>list-icon tags</strong> class.</li>
    <li>A list item using the <strong>list-icon tags</strong> class.</li>  </ul>
  <br />
  <ul class="list-icon write">
    <li>A list item using the <strong>list-icon write</strong> class.</li>
    <li>A list item using the <strong>list-icon write</strong> class.</li>  </ul>
  <br />
  <ul class="list-icon info">
    <li>A list item using the <strong>list-icon info</strong> class.</li>
    <li>A list item using the <strong>list-icon info</strong> class.</li>  </ul>
  <br />
  <ul class="list-icon sound">
    <li>A list item using the <strong>list-icon sound</strong> class.</li>
    <li>A list item using the <strong>list-icon sound</strong> class.</li>  </ul>
  <br />
  <ul class="list-icon rightarrow">
    <li>A list item using the <strong>list-icon rightarrow</strong> class.</li>
    <li>A list item using the <strong>list-icon rightarrow</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon skype">
    <li>A list item using the <strong>list-icon skype</strong> class.</li>
    <li>A list item using the <strong>list-icon skype</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon rss nomarginbottom">
    <li>A list item using the <strong>list-icon rss</strong> class.</li>
    <li>A list item using the <strong>list-icon rss</strong> class.</li>
  </ul>
</div>
<div class="rt-demo-grid-3">
  <ul class="list-icon leftarrow">
    <li>A list item using the <strong>list-icon leftarrow</strong> class.</li>
    <li>A list item using the <strong>list-icon leftarrow</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon circlearrow">
    <li>A list item using the <strong>list-icon circlearrow</strong> class.</li>
    <li>A list item using the <strong>list-icon circlearrow</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon dropbox">
    <li>A list item using the <strong>list-icon dropbox</strong> class.</li>
    <li>A list item using the <strong>list-icon dropbox</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon vimeo">
    <li>A list item using the <strong>list-icon vimeo</strong> class.</li>
    <li>A list item using the <strong>list-icon vimeo</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon downarrow">
    <li>A list item using the <strong>list-icon downarrow</strong> class.</li>
    <li>A list item using the <strong>list-icon downarrow</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon video">
    <li>A list item using the <strong>list-icon video</strong> class.</li>
    <li>A list item using the <strong>list-icon video</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon like nomarginbottom">
    <li>A list item using the <strong>list-icon like</strong> class.</li>
    <li>A list item using the <strong>list-icon like</strong> class.</li>
  </ul>
</div>
<div class="rt-demo-grid-3">
  <ul class="list-icon uparrow">
    <li>A list item using the <strong>list-icon uparrow</strong> class.</li>
    <li>A list item using the <strong>list-icon uparrow</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon person">
    <li>A list item using the <strong>list-icon person</strong> class.</li>
    <li>A list item using the <strong>list-icon person</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon calendar">
    <li>A list item using the <strong>list-icon calendar</strong> class.</li>
    <li>A list item using the <strong>list-icon calendar</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon bulb">
    <li>A list item using the <strong>list-icon bulb</strong> class.</li>
    <li>A list item using the <strong>list-icon bulb</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon paypal">
    <li>A list item using the <strong>list-icon paypal</strong> class.</li>
    <li>A list item using the <strong>list-icon paypal</strong> class.</li>
  </ul>
  <br />
  <ul class="list-icon doc nomarginbottom">
    <li>A list item using the <strong>list-icon doc</strong> class.</li>
    <li>A list item using the <strong>list-icon doc</strong> class.</li>
  </ul>
</div>

<div class="clear largemarginbottom">&nbsp;</div><br />

<h2>&lt;ul&gt; List Styles (CSS3)</h2>

<p>These list styles are based on the latest CSS3 techniques and are designed to work in modern browsers (will not display properly in IE6-IE8).</p>

<p>To replicate, use the following format: <strong>&lt;ul class="class name"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong> or <strong>&#091;list class=&quot;class name&quot;&#093;&#091;li&#093;....&#091;/li&#093;&#091;li....&#091;/li&#093;&#091;/list&#093; (SHORTCODE)</strong>. The class names are listed below, such as "<strong>checkmark red</strong>".</p>

<div class="rt-demo-grid-3">
  <ul class="checkmark">
    <li>checkmark</li>
    <li>checkmark</li>
  </ul>
  
  <ul class="circle-checkmark">
    <li>circle-checkmark</li>
    <li>circle-checkmark</li>
  </ul>
  
  <ul class="square-checkmark">
    <li>square-checkmark</li>
    <li>square-checkmark</li>
  </ul>
  
  <ul class="checkmark green">
    <li>checkmark green</li>
    <li>checkmark green</li>
  </ul>
  
  <ul class="checkmark yellow">
    <li>checkmark yellow</li>
    <li>checkmark yellow</li>
  </ul>
  
  <ul class="checkmark red nomarginbottom">
    <li>checkmark red</li>
    <li>checkmark red</li>
  </ul>
</div>
<div class="rt-demo-grid-3">
  <ul class="checkmark blue">
    <li>checkmark blue</li>
    <li>checkmark blue</li>
  </ul>
  
  <ul class="checkmark white">
    <li>checkmark white</li>
    <li>checkmark white</li>
  </ul>
  
  <ul class="triangle-small">
    <li>triangle-small</li>
    <li>triangle-small</li>
  </ul>
  
  <ul class="triangle">
    <li>triangle</li>
    <li>triangle</li>
  </ul>
  
  <ul class="triangle-large">
    <li>triangle-large</li>
    <li>triangle-large</li>
  </ul>
  
  <ul class="triangle green nomarginbottom">
    <li>triangle green</li>
    <li>triangle green</li>
  </ul>
</div>
<div class="rt-demo-grid-3">
  <ul class="triangle yellow">
    <li>triangle yellow</li>
    <li>triangle yellow</li>
  </ul>
  
  <ul class="triangle red">
    <li>triangle red</li>
    <li>triangle red</li>
  </ul>
  
  <ul class="triangle blue">
    <li>triangle blue</li>
    <li>triangle blue</li>
  </ul>
  
  <ul class="triangle white">
    <li>triangle white</li>
    <li>triangle white</li>
  </ul>
  
  <ul class="circle-small">
    <li>circle-small</li>
    <li>circle-small</li>
  </ul>
  
  <ul class="circle nomarginbottom">
    <li>circle</li>
    <li>circle</li>
  </ul>
</div>
<div class="rt-demo-grid-3">
  <ul class="circle-large">
    <li>circle-large</li>
    <li>circle-large</li>
  </ul>
  
  <ul class="circle green">
    <li>circle green</li>
    <li>circle green</li>
  </ul>
  
  <ul class="circle yellow">
    <li>circle yellow</li>
    <li>circle yellow</li>
  </ul>
  
  <ul class="circle red">
    <li>circle red</li>
    <li>circle red</li>
  </ul>
  
  <ul class="circle blue">
    <li>circle blue</li>
    <li>circle blue</li>
  </ul>
  
  <ul class="circle white nomarginbottom">
    <li>circle white</li>
    <li>circle white</li>
  </ul>
</div>

<div class="clear largemarginbottom">&nbsp;</div><br />

<h2>&lt;span&gt; Inset Styles</h2>

<p>
  Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  <span class="inset-right nomarginbottom"><span class="inset-right-title">Inset Right Title</span>You will need to use the following formatting: <strong>&lt;span class=&quot;inset-right&quot;&gt; &lt;span class=&quot;inset-right-title&quot;&gt; .... &lt;/span&gt; <em class="normal"> ... some content ... </em>&lt;/strong&gt; (HTML)</strong> or <strong>&#091;inset side="right" title="Inset Right Title"&#093; ... some content ...&#091;/inset&#093; (SHORTCODE)</strong></span>
  Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.
</p>

<p>
  Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  <span class="inset-left nomarginbottom"><span class="inset-left-title">Inset Left Title</span>You will need to use the following formatting: <strong>&lt;span class=&quot;inset-left&quot;&gt; &lt;span class=&quot;inset-left-title&quot;&gt; .... &lt;/span&gt; <em class="normal"> ... some content ... </em>&lt;/strong&gt; (HTML)</strong> or <strong>&#091;inset side="left" title="Inset Left Title"&#093; ... some content ...&#091;/inset&#093; (SHORTCODE)</strong></span>
  Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.</p>

<p>Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque.</p>
<p class="nomarginbottom">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<div class="clear"></div>
