<a name="typ-back-to-top" class="floatright">&nbsp;</a>
<div class="rt-demo-grid-3">
<ul class="list-icon rightarrow">
	<li><a href="#contentbox">Content Box</a></li>
	<li><a href="#quote">Quote</a></li>	
	<li><a href="#pre">Pre Code</a></li>
	<li><a href="#dropcap">DropCap</a></li>	
</ul>
</div>
<div class="rt-demo-grid-3">
<ul class="list-icon rightarrow">
	<li><a href="#headers">Standard Headers</a></li>	
	<li><a href="#icon-bullets">Icon List Styles</a></li>
	<li><a href="#list-standard">Standard List Styles</a></li>
	<li><a href="#emphasis">Emphasis</a></li>	
</ul>
</div>
<div class="rt-demo-grid-3">
<ul class="list-icon rightarrow">
	<li><a href="#insets">Inset</a></li>
	<li><a href="#notice">Notice</a></li>	
	<li><a href="#using-typography">Using Typography</a></li>	
</ul>
</div>

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

<h3><a name="contentbox" href="#contentbox">Content Box Styles</a> <a class="floatright" href="#typ-back-to-top"><span class="text-icon uparrow">&nbsp;</span></a></h3> 

<div class="rt-demo-grid-4">
<div class="contentbox1">To replicate, use the following formatting: <strong>&lt;div class="contentbox1"&gt;...&lt;/div&gt; (HTML)</strong> or <strong>&#91;contentbox class="contentbox1"&#93;...&#91;/contentbox&#93; (ROKCANDY)</strong>.</div>

<div class="contentbox2">To replicate, use the following formatting: <strong>&lt;div class="contentbox2"&gt;...&lt;/div&gt; (HTML)</strong> or <strong>&#91;contentbox class="contentbox2"&#93;...&#91;/contentbox&#93; (ROKCANDY)</strong>.</div>

<div class="contentbox3">To replicate, use the following formatting: <strong>&lt;div class="contentbox3"&gt;...&lt;/div&gt; (HTML)</strong> or <strong>&#91;contentbox class="contentbox3"&#93;...&#91;/contentbox&#93; (ROKCANDY)</strong>.</div>
</div>

<div class="rt-demo-grid-4">
<div class="contentbox4">To replicate, use the following formatting: <strong>&lt;div class="contentbox4"&gt;...&lt;/div&gt; (HTML)</strong> or <strong>&#91;contentbox class="contentbox4"&#93;...&#91;/contentbox&#93; (ROKCANDY)</strong>.</div>

<div class="contentbox5">To replicate, use the following formatting: <strong>&lt;div class="contentbox5"&gt;...&lt;/div&gt; (HTML)</strong> or <strong>&#91;contentbox class="contentbox5"&#93;...&#91;/contentbox&#93; (ROKCANDY)</strong>.</div>

<div class="contentbox6">To replicate, use the following formatting: <strong>&lt;div class="contentbox6"&gt;...&lt;/div&gt; (HTML)</strong> or <strong>&#91;contentbox class="contentbox6"&#93;...&#91;/contentbox&#93; (ROKCANDY)</strong>.</div>
</div>
<div class="clear"></div>
<br />

<h3><a name="quote" href="#quote">Quote Styles</a> <a class="floatright" href="#typ-back-to-top"><span class="text-icon uparrow">&nbsp;</span></a></h3>

<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>&#91;blockquote class="default"&#93;...&#91;/blockquote&#93; (ROKCANDY)</strong>.</p></blockquote>

<br /><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>&#91;blockquote class="alignleft"&#93;...&#91;/blockquote&#93; (ROKCANDY)</strong>.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor, commodo sit amet tempor id, gravida eget orci. In molestie feugiat nunc ac lobortis. Ut non nisi dolor, ac ultricies lorem. Vestibulum non lectus in arcu gravida malesuada. Curabitur sed sollicitudin mi. Aenean sit amet tortor ac arcu gravida rutrum eget ac dui. Phasellus rutrum dapibus nulla, a venenatis tortor eleifend vitae. Ut tincidunt vestibulum blandit. Nulla aliquet urna non enim convallis in vehicula mi scelerisque. Aliquam blandit imperdiet lorem eu ultrices. Nulla in dolor non ipsum fringilla sodales sed ac turpis. Nam nisi arcu, tincidunt sodales.</p>

<br /><br />

<blockquote class="alignright"><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>&#91;blockquote class="alignright"&#93;...&#91;/blockquote&#93; (ROKCANDY)</strong>.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor, commodo sit amet tempor id, gravida eget orci. In molestie feugiat nunc ac lobortis. Ut non nisi dolor, ac ultricies lorem. Vestibulum non lectus in arcu gravida malesuada. Curabitur sed sollicitudin mi. Aenean sit amet tortor ac arcu gravida rutrum eget ac dui. Phasellus rutrum dapibus nulla, a venenatis tortor eleifend vitae. Ut tincidunt vestibulum blandit. Nulla aliquet urna non enim convallis in vehicula mi scelerisque. Aliquam blandit imperdiet lorem eu ultrices. Nulla in dolor non ipsum fringilla sodales sed ac turpis. Nam nisi arcu, tincidunt sodales.</p>

<br />
<h3><a name="pre" href="#pre">Pre Code Styles</a> <a class="floatright" href="#typ-back-to-top"><span class="text-icon uparrow">&nbsp;</span></a></h3>

<pre class="lines">This is a sample <strong>&lt;pre class=&quot;lines&quot;&gt;...&lt;/pre&gt; (HTML)</strong> or,
<strong>&#91;pre2 class="{lines}"&#93; ... &#91;/pre2&#93; (ROKCANDY)</strong> tag:
	
div.modulebox-black div.bx1 {
  background: url(../images/black/box_bl.png) 0 100% no-repeat;
}

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

div.modulebox-black div.bx3 {
  background: url(../images/black/box_tl.png) 0 0 no-repeat;
  padding: 0;
  margin: 0;
}
</pre>

<br />

<pre>This is a sample <strong>&lt;pre&gt;...&lt;/pre&gt; (HTML)</strong> or, 
<strong>&#91;pre class="{lines}"&#93; ... &#91;/pre&#93; (ROKCANDY)</strong> tag:
	
div.modulebox-black div.bx1 {
  background: url(../images/black/box_bl.png) 0 100% no-repeat;
}

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

div.modulebox-black div.bx3 {
  background: url(../images/black/box_tl.png) 0 0 no-repeat;
  padding: 0;
  margin: 0;
}
</pre>

<br />

<h3><a name="dropcap" href="#dropcap">DropCap Styles</a> <a class="floatright" href="#typ-back-to-top"><span class="text-icon uparrow">&nbsp;</span></a></h3>

<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 penatibus magnis.</p>

<p>Use the following format: <strong>&lt;p class="dropcap"&gt;...&lt;/p&gt; (HTML)</strong> or <strong>&#91;dropcap class="dropcap"&#93;...&#91;/dropcap&#93; (ROKCANDY)</strong>. You can use any letter, symbol or number.</p>

<div class="rt-demo-grid-4">
<p class="dropcap2">Praesent rutrum sapien ac felis. Use this format: <strong>&lt;p class="dropcap2"&gt;...&lt;/p&gt; (HTML)</strong> or <strong>&#91;dropcap class="dropcap2"&#93; ... &#91;/dropcap&#93; (ROKCANDY)</strong></p>
</div>

<div class="rt-demo-grid-4">
<p class="dropcap3">Praesent rutrum sapien ac felis. Use this format: <strong>&lt;p class="dropcap3"&gt;...&lt;/p&gt; (HTML)</strong> or <strong>&#91;dropcap class="dropcap3"&#93; ... &#91;/dropcap&#93; (ROKCANDY)</strong></p>
</div>

<div class="rt-demo-grid-4">
<p class="dropcap4">Praesent rutrum sapien ac felis. Use this format: <strong>&lt;p class="dropcap4"&gt;...&lt;/p&gt; (HTML)</strong> or <strong>&#91;dropcap class="dropcap4"&#93; ... &#91;/dropcap&#93; (ROKCANDY)</strong></p>
</div>

<div class="rt-demo-grid-4">
<p class="dropcap5">Praesent rutrum sapien ac felis. Use this format: <strong>&lt;p class="dropcap5"&gt;...&lt;/p&gt; (HTML)</strong> or <strong>&#91;dropcap class="dropcap5"&#93; ... &#91;/dropcap&#93; (ROKCANDY)</strong></p>
</div>

<div class="rt-demo-grid-4">
<p class="dropcap6">Praesent rutrum sapien ac felis. Use this format: <strong>&lt;p class="dropcap6"&gt;...&lt;/p&gt; (HTML)</strong> or <strong>&#91;dropcap class="dropcap6"&#93; ... &#91;/dropcap&#93; (ROKCANDY)</strong></p>
</div>

<div class="rt-demo-grid-4">
<p class="dropcap7">Praesent rutrum sapien ac felis. Use this format: <strong>&lt;p class="dropcap7"&gt;...&lt;/p&gt; (HTML)</strong> or <strong>&#91;dropcap class="dropcap7"&#93; ... &#91;/dropcap&#93; (ROKCANDY)</strong></p>
</div>

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

<br />

<h3><a name="headers" href="#headers">Standard Header Styles</a> <a class="floatright" href="#typ-back-to-top"><span class="text-icon uparrow">&nbsp;</span></a></h3>

<div class="rt-demo-grid-4">
  <div class="componentheading">This is a ComponentHeading</div>
  <p>Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede.</p>
</div>

<div class="rt-demo-grid-4">
  <div class="contentheading">This is a Contentheading</div>
  <p>Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a.</p>
</div>
<div class="clear"></div>

<div class="rt-demo-grid-4">
  <h1>This is a H1 Header</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.</p>
</div>

<div class="rt-demo-grid-4">
  <h2>This is a H2 Header</h2>
  <p>Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor</p>
</div>
<div class="clear"></div>

<div class="rt-demo-grid-4">
  <h3>This is a H3 Header</h3>
  <p>Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit.</p>
</div>

<div class="rt-demo-grid-4">
  <h4>This is a H4 Header</h4>
  <p>Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante.</p>
</div>
<div class="clear"></div>

<h5>This is a H5 Header</h5>

<p>Pellentesque vel enim urna, sit amet blandit ipsum. Maecenas quis sem sit amet nunc pretium mattis. Sed dapibus semper est, sed pretium erat sodales sed. Aenean hendrerit fringilla sem, et tincidunt libero ornare at. </p>

<br />

<h3><a name="icon-bullets" href="#icon-bullets">List Styles - Icons</a> <a class="floatright" href="#typ-back-to-top"><span class="text-icon uparrow">&nbsp;</span></a></h3>

<div class="rt-demo-grid-4">
  <ul class="list-icon email">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon email</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon email</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon phone">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon phone</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon phone</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon quote">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon quote</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon quote</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon cart">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon cart</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon cart</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon rss">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon rss</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon rss</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon tags">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon tags</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon tags</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon write">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon write</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon write</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon info">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon info</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon info</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon sound">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon sound</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon sound</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon rightarrow">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon rightarrow</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon rightarrow</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon leftarrow">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon leftarrow</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon leftarrow</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon circlearrow">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon circlearrow</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon circlearrow</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon dropbox">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon dropbox</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon dropbox</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
<ul class="list-icon vimeo">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon vimeo</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon vimeo</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
</div>

<div class="rt-demo-grid-4">
  <ul class="list-icon downarrow">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon downarrow</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon downarrow</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon uparrow">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon uparrow</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon uparrow</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon person">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon person</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon person</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon calendar">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon calendar</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon calendar</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon doc">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon doc</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon doc</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon bulb">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon bulb</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon bulb</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon twitter">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon twitter</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon twitter</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon youtube">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon youtube</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon youtube</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon skype">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon skype</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon skype</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon facebook">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon facebook</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon facebook</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon like">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon like</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon like</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
  <ul class="list-icon video">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon video</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon video</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
<ul class="list-icon paypal">
    <li>To use this style create a list in the following format: <strong>&lt;ul class="</strong><em class="normal">list-icon paypal</em><strong>"&gt;&lt;li&gt;....&lt;/li&gt;&lt;li&gt;....&lt;/li&gt;...&lt;/ul&gt; (HTML)</strong>.</li>
    <li>To use this style create a list in the following format: <strong>&#91;list class="<em class="normal">list-icon paypal</em>"&#93;&#91;li&#93;...&#91;/li&#93;&#91;li&#93;...&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</strong>.</li>
  </ul>
  <br />
</div>
<div class="clear"></div>

<p>To replicate, the following format: <strong>&lt;span class="text-icon iconname"&gt;...&lt;/span&gt; (HTML)</strong> or <strong>&#91;icon class=&quot;icon name&quot;&#93;...&#91;/icon&#93; (ROKCANDY)</strong>. The class names are listed below, such as "<strong>text-icon email</strong>".</p>

<div class="rt-demo-grid-4">
<span class="text-icon email">A text item with an email icon</span><br /><br />
<span class="text-icon phone">A text item with a phone icon</span><br /><br />
<span class="text-icon quote">A text item with a quote icon</span><br /><br />
<span class="text-icon cart">A text item with a cart icon</span><br /><br />
<span class="text-icon rss">A text item with a rss icon</span><br /><br />
<span class="text-icon tags">A text item with a tags icon</span><br /><br />
<span class="text-icon write">A text item with a write icon</span><br /><br />
<span class="text-icon info">A text item with an info icon</span><br /><br />
<span class="text-icon sound">A text item with a sound icon</span><br /><br />
<span class="text-icon rightarrow">A text item with a rightarrow icon</span><br /><br />
<span class="text-icon leftarrow">A text item with a leftarrow icon</span><br /><br />
<span class="text-icon circlearrow">A text item with a circlearrow icon</span><br /><br />
<span class="text-icon downarrow">A text item with a downarrow icon</span><br /><br />
<span class="text-icon uparrow">A text item with an uparrow icon</span><br /><br />
</div>

<div class="rt-demo-grid-4">
<span class="text-icon person">A text item with a person icon</span><br /><br />
<span class="text-icon calendar">A text item with a calendar icon</span><br /><br />
<span class="text-icon doc">A text item with a doc icon</span><br /><br />
<span class="text-icon bulb">A text item with a bulb icon</span><br /><br />
<span class="text-icon twitter">A text item with a twitter icon</span><br /><br />
<span class="text-icon youtube">A text item with a youtube icon</span><br /><br />
<span class="text-icon skype">A text item with a skype icon</span><br /><br />
<span class="text-icon facebook">A text item with a facebook icon</span><br /><br />
<span class="text-icon like">A text item with a like icon</span><br /><br />
<span class="text-icon video">A text item with a video icon</span><br /><br />
<span class="text-icon dropbox">A text item with a dropbox icon</span><br /><br />
<span class="text-icon vimeo">A text item with a vimeo icon</span><br /><br />
<span class="text-icon paypal">A text item with a paypal icon</span><br /><br />
</div>
<div class="clear"></div>

<h3><a name="list-standard" href="#list-standard">List Styles - CSS3 Advanced</a> <a class="floatright" href="#typ-back-to-top"><span class="text-icon uparrow">&nbsp;</span></a></h3>
<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>&#91;list class=&quot;class name&quot;&#93;&#91;li&#93;....&#91;/li&#93;&#91;li....&#91;/li&#93;&#91;/list&#93; (ROKCANDY)</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>
<li>Checkmark</li>
</ul>

<ul class="circle-checkmark">
<li>Circle-Checkmark</li>
<li>Circle-Checkmark</li>
<li>Circle-Checkmark</li>
</ul>

<ul class="square-checkmark">
<li>Square-Checkmark</li>
<li>Square-Checkmark</li>
<li>Square-Checkmark</li>
</ul>

<ul class="checkmark green">
<li>Checkmark Green</li>
<li>Checkmark Green</li>
<li>Checkmark Green</li>
</ul>

<ul class="checkmark yellow">
<li>Checkmark Yellow</li>
<li>Checkmark Yellow</li>
<li>Checkmark Yellow</li>
</ul>

<ul class="checkmark red">
<li>Checkmark Red</li>
<li>Checkmark Red</li>
<li>Checkmark Red</li>
</ul>

<ul class="checkmark blue">
<li>Checkmark Blue</li>
<li>Checkmark Blue</li>
<li>Checkmark Blue</li>
</ul>

<ul class="checkmark white">
<li>Checkmark White</li>
<li>Checkmark White</li>
<li>Checkmark White</li>
</ul>
</div>

<div class="rt-demo-grid-3">
<ul class="triangle-small">
<li>Triangle-Small</li>
<li>Triangle-Small</li>
<li>Triangle-Small</li>
</ul>

<ul class="triangle">
<li>Triangle</li>
<li>Triangle</li>
<li>Triangle</li>
</ul>

<ul class="triangle-large">
<li>Triangle-Large</li>
<li>Triangle-Large</li>
<li>Triangle-Large</li>
</ul>

<ul class="triangle green">
<li>Triangle Green</li>
<li>Triangle Green</li>
<li>Triangle Green</li>
</ul>

<ul class="triangle yellow">
<li>Triangle Yellow</li>
<li>Triangle Yellow</li>
<li>Triangle Yellow</li>
</ul>

<ul class="triangle red">
<li>Triangle Red</li>
<li>Triangle Red</li>
<li>Triangle Red</li>
</ul>

<ul class="triangle blue">
<li>Triangle Blue</li>
<li>Triangle Blue</li>
<li>Triangle Blue</li>
</ul>

<ul class="triangle white">
<li>Triangle White</li>
<li>Triangle White</li>
<li>Triangle White</li>
</ul>
</div>

<div class="rt-demo-grid-2">
<ul class="circle-small">
<li>Circle-Small</li>
<li>Circle-Small</li>
<li>Circle-Small</li>
</ul>

<ul class="circle">
<li>Circle</li>
<li>Circle</li>
<li>Circle</li>
</ul>

<ul class="circle-large">
<li>Circle-Large</li>
<li>Circle-Large</li>
<li>Circle-Large</li>
</ul>

<ul class="circle green">
<li>Circle Green</li>
<li>Circle Green</li>
<li>Circle Green</li>
</ul>

<ul class="circle yellow">
<li>Circle Yellow</li>
<li>Circle Yellow</li>
<li>Circle Yellow</li>
</ul>

<ul class="circle red">
<li>Circle Red</li>
<li>Circle Red</li>
<li>Circle Red</li>
</ul>

<ul class="circle blue">
<li>Circle Blue</li>
<li>Circle Blue</li>
<li>Circle Blue</li>
</ul>

<ul class="circle white">
<li>Circle White</li>
<li>Circle White</li>
<li>Circle White</li>
</ul>
</div>

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

<h3><a name="emphasis" href="#emphasis">Emphasis Styles</a> <a class="floatright" href="#typ-back-to-top"><span class="text-icon uparrow">&nbsp;</span></a></h3>

<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>&#91;emphasis&#93;...&#91;/emphasis&#93; (ROKCANDY)</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>&#91;emphasisbold&#93;...&#91;/emphasisbold&#93; (ROKCANDY)</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>&#91;emphasisbold2&#93;...&#91;/emphasisbold2&#93; (ROKCANDY)</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>&#91;highlight class=&quot;default&quot;&#93;...&#91;/highlight&#93; (ROKCANDY)</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>&#91;highlight class=&quot;white&quot;&#93;...&#91;/highlight&#93; (ROKCANDY)</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>&#91;highlight class=&quot;black&quot;&#93;...&#91;/highlight&#93; (ROKCANDY)</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>&#91;highlight class=&quot;green&quot;&#93;...&#91;/highlight&#93; (ROKCANDY)</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>&#91;highlight class=&quot;yellow&quot;&#93;...&#91;/highlight&#93; (ROKCANDY)</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>&#91;highlight class=&quot;blue&quot;&#93;...&#91;/highlight&#93; (ROKCANDY)</strong></p>

<p>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>&#91;highlight class=&quot;red&quot;&#93;...&#91;/highlight&#93; (ROKCANDY)</strong></p>

<br />

<h3><a name="insets" href="#insets">Inset Styles</a> <a class="floatright" href="#typ-back-to-top"><span class="text-icon uparrow">&nbsp;</span></a></h3>

<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"><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>&#91;inset side="right" title="Inset Right Title"&#93; ... some content ...&#91;/inset&#93; (ROKCANDY)</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"><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>&#91;inset side="left" title="Inset Left Title"&#93; ... some content ...&#91;/inset&#93; (ROKCANDY)</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>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>

<h3><a name="notice" href="#notice">Notice Styles</a> <a class="floatright" href="#typ-back-to-top"><span class="text-icon uparrow">&nbsp;</span></a></h3>

<p class="approved">This is a <a>sample</a> of the <em>Approved</em> style. To replicate, use the following html: <em>&lt;p class="approved"&gt;....&lt;/p&gt;</em> (HTML) or <em>&#91;notice class="approved"&#93; <em class="normal">...</em> &#91;/notice&#93;</em> (ROKCANDY).</p>

<p class="attention">This is a <a>sample</a> of the <em>Attention</em> style. To replicate, use the following html: <em>&lt;p class="attention"&gt;....&lt;/p&gt;</em> (HTML) or <em>&#91;notice class="attention"&#93; <em class="normal">...</em> &#91;/notice&#93;</em> (ROKCANDY).</p>

<p class="notice">This is a <a>sample</a> of the <em>Notice</em> style. To replicate, use the following html: <em>&lt;p class="notice"&gt;....&lt;/p&gt;</em> (HTML) or <em>&#91;notice class="notice"&#93; <em class="normal">...</em> &#91;/notice&#93;</em> (ROKCANDY).</p>

<p class="alert">This is a <a>sample</a> of the <em>Alert</em> style. To replicate, use the following html: <em>&lt;p class="alert"&gt;....&lt;/p&gt;</em> (HTML) or <em>&#91;notice class="alert"&#93; <em class="normal">...</em> &#91;/notice&#93;</em> (ROKCANDY).</p>

<br />

<h2><a href="#using-typography" name="using-typography">Using Typography</a> <a class="floatright" href="#typ-back-to-top"><span class="text-icon uparrow">&nbsp;</span></a></h2>

<p class="notice">If you are using the TinyMCE editor, go to <strong>Extensions &rarr; Plugin Manager &rarr; TinyMCE 2.0 &rarr; Set Code Clean-up on Save to Never</strong>.</p>

<h3>Typography - RokCandy</h3>

<p>In this example, we will use the Attention Span Style - Syntax: <strong>&#91;div class="attention" class2="typo-icon"&#93;...&#91;/div&#93;</strong> syntax.</p>

<ul class="list-icon rightarrow">
  <li>Go to <strong>Content &rarr; Article Manager &rarr; Select an Article</strong>.</li>
  <li>Insert <strong>&#91;div class="attention" class2="typo-icon"&#93;</strong> <em>.... some content ....</em> <strong>&#91;/div&#93;</strong></li>
  <li>Save</li>
</ul>

<h3>Typography - HTML</h3>

<p>In this example, we will use the Attention Span Style - Syntax: <strong>&lt;div class=&quot;attention&quot;&gt;&lt;div class=&quot;typo-icon&quot;&gt;...&lt;/div&gt;&lt;/div&gt;</strong> syntax.</p>

<p><em class="bold2">Content Editor</em></p>

<ul class="list-icon rightarrow">
  <li>Go to <strong>Content &rarr; Article Manager &rarr; Select an Article</strong>; or <strong>Extensions &rarr; Module Manager &rarr; A Module, for a custom module.</strong></li>
  <li>Click the <strong>HTML mode</strong> or equivalent in your editor</li>
  <li>Insert <strong>&lt;div class=&quot;attention&quot;&gt;&lt;div class=&quot;typo-icon&quot;&gt; ... some content ... &lt;/div&gt;&lt;/div&gt;</strong></li>
  <li>Save</li>
</ul>

<p><em class="bold2">No Editor</em></p>

<ul class="list-icon rightarrow">
  <li>Go to <strong>Content &rarr; Article Manager &rarr; Select an Article</strong>; or <strong>Extensions &rarr; Module Manager &rarr; A Module, for a custom module.</strong></li>
  <li>Click the <strong>HTML mode</strong> or equivalent in your editor</li>
  <li>Insert <strong>&lt;div class=&quot;attention&quot;&gt;&lt;div class=&quot;typo-icon&quot;&gt; ... some content ... &lt;/div&gt;&lt;/div&gt;</strong></li>
  <li>Save</li>
</ul>

<p class="attention">Note, with the Content Editor (WYSIWYG) enabled, you need to enter HTML mode.</p>