<h1 class="pagetitle"><span>Template Typography</span></h1><br /><br />
<h1>This is an H1 Heading</h1>
<div class="code" style="margin-bottom:20px;">&lt;h1>This is an H1 Heading&lt;/h1></div>
<h2>This is an H2 Heading</h2>
<div class="code" style="margin-bottom:20px;">&lt;h2>This is an H2 Heading&lt;/h2></div>
<h3>This is an H3 Heading</h3>
<div class="code" style="margin-bottom:20px;">&lt;h3>This is an H3 Heading&lt;/h3></div>
<h4>This is an H4 Heading</h4>
<div class="code" style="margin-bottom:20px;">&lt;h4>This is an H4 Heading&lt;/h4></div>
<h5>This is an H5 Heading</h5>
<div class="code" style="margin-bottom:20px;">&lt;h5>This is an H5 Heading&lt;/h5></div>

<div class="dropcap">D</div>ropcap Styling for article intros and much more. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nunc lorem, eleifend vel, rhoncus sed, congue quis, leo. Aliquam dignissim dui quis purus. Phasellus vehicula, ante eu mollis pharetra, enim felis iaculis lacus, congue ullamcorper lorem eros at libero.
<br /><p></p><br />
<div class="code">&lt;div class="dropcap">D&lt;/div>ropcap Styling</div>
<br /><br />

<div style="float:left;width:45.5%;margin-right:30px;">


<blockquote class="opensmall">
	<p>This is the Example Quote Class this can be used to create quotes in article pages by using the code below</p>
</blockquote>
<div class="code">&lt;blockquote class="opensmall">This is the Example Quote Class&lt;/blockquote></div>
<br /><br />
</div>

<div style="float:left;width:48.5%;">

<blockquote class="openlarge">
	<p>Example LG Quote Class</p>
</blockquote>
<div class="code">&lt;blockquote class="openlarge">This is the Example Quote Class&lt;/blockquote></div>
<br /><br /></div>

<div style="clear:both;"></div>

<div style="float:left;width:45.5%;margin-right:30px;">


<div class="code">This is the code div class. Curabitur bibendum metus porta dui sagittis sagittis. Suspendisse placerat orci eget massa. Donec vitae nisi. Sed tincidunt adipiscing mauris. In lorem. Maecenas dapibus commodo sapien. Nam nulla.</div>
<br /><br />
<div class="code">&lt;div class="code">This is the code div class&lt;/div></div>
</div>
<div style="float:left;width:48.5%;">

<div class="highlight">This is the highlight div class. Curabitur bibendum metus porta dui sagittis sagittis. Suspendisse placerat orci eget massa. Donec vitae nisi. Sed tincidunt adipiscing mauris. In lorem. Maecenas dapibus commodo sapien. Nam nulla.</div>
<br /><br />
<div class="code">&lt;div class="highlight">This is the highlight div class&lt;/div></div>
</div>

<div style="clear:both;"></div>
<br /><br />
<h1 class="pagetitle"><span>Bubble Div Styles</span></h1><br /><br />* Please note all Bubble Styles require browsers CSS3 compliant for round corners.  Sorry IE 6-8!<br />
<div style="float: left; width: 40%;margin-right: 20px;">
<div class="bubble-red">This is Bubble Red. </div>
<div class="code">&lt;div class="bubble-red">bubble-red&lt;/div></div>
<div class="bubble-blue">This is Bubble Blue</div>
<div class="code">&lt;div class="bubble-blue">bubble-blue&lt;/div></div>
<div class="bubble-green">This is Bubble Green</div>
<div class="code">&lt;div class="bubble-green">bubble-green&lt;/div></div>
<div class="bubble-cyan">This is Bubble Cyan</div>
<div class="code">&lt;div class="bubble-cyan">bubble-cyan&lt;/div></div><br /><br /><br />
</div>
<div style="float: left; width: 40%;">
<div class="bubble-tan">This is Bubble Tan</div>
<div class="code">&lt;div class="bubble-tan">bubble-tan&lt;/div></div><br />
<div class="bubble-yellow">This is Bubble Yellow</div>
<div class="code">&lt;div class="bubble-yellow">bubble-yellow&lt;/div></div><br />
<div class="bubble-grey">This is Bubble Grey</div>
<div class="code">&lt;div class="bubble-grey">bubble-grey&lt;/div></div><br />
<div class="bubble-pink">This is Bubble Pink</div>
<div class="code">&lt;div class="bubble-pink">bubble-pink&lt;/div></div><br /></div>
<div style="clear:both;"></div>
<h1 class="pagetitle"><span>Blog Div Styles</span></h1><br /><br />* Please note all Blog Styles require browsers CSS3 compliant for round corners.  Sorry IE 6-8!<br /><br />
<div style="float: left; width: 40%;margin-right: 20px;">
<div class="blog-red">This is Blog Red</div><br />
<div class="code">&lt;div class="blog-red">blog-red&lt;/div></div><br />
<div class="blog-blue">This is Blog Blue</div><br />
<div class="code">&lt;div class=">blog-blue">blog-blue&lt;/div></div><br />
<div class="blog-green">This is Blog Green</div><br />
<div class="code">&lt;div class="blog-green">blog-green&lt;/div></div><br />
<div class="blog-cyan">This is Blog Cyan</div><br />
<div class="code">&lt;div class="blog-cyan">blog-cyan&lt;/div></div><br /></div>
<div style="float: left; width: 40%;">
<div class="blog-tan">This is Blog Tan</div><br />
<div class="code">&lt;div class="blog-tan">blog-tan&lt;/div></div><br />
<div class="blog-yellow">This is Blog Yellow</div><br />
<div class="code">&lt;div class="blog-yellow">blog-yellow&lt;/div></div><br />
<div class="blog-grey">This is Blog Grey</div><br />
<div class="code">&lt;div class="blog-grey">blog-grey&lt;/div></div><br />
<div class="blog-pink">This is Blog Pink</div><br />
<div class="code">&lt;div class="blog-pink">blog-pink&lt;/div></div><br />
</div>
<div style="clear:both;"></div>
<br /><br />
<h1 class="pagetitle"><span>Note Style</span></h1><br /><br />
<div class="note">This the note style. Curabitur bibendum metus porta dui sagittis sagittis. Suspendisse placerat orci eget massa. Donec vitae nisi. Sed tincidunt adipiscing mauris. In lorem. Maecenas dapibus commodo sapien. Nam nulla.</div><br /><br /><br />
<div class="code">&lt;div class="note">This is note style&lt;/div></div><br />

<h1 class="pagetitle"><span>Numbered Styles</span></h1><br /><br />

<div style="float: left; width: 40%;margin-right: 20px;">
<h5 style="margin-bottom:24px; margin-top:0 !important; font-size:24px; padding-bottom:16px; border-bottom:1px solid #ebebeb;">Large</h5>
<div class="numbered">1</div>
<div class="code">&lt;div class="numbered">1&lt;/div></div><br />
</div>
<div style="float: left; width: 30%;margin-right: 20px;">
<h5 style="margin-bottom:24px; margin-top:0 !important; font-size:24px; padding-bottom:16px; border-bottom:1px solid #ebebeb;">Medium</h5>
<div class="numbered-medium">2</div>
<div class="code">&lt;div class="numbered-medium">2&lt;/div></div><br />
</div>

<div style="float: left; width: 20%;">
<h5 style="margin-bottom:24px; margin-top:0 !important; font-size:24px; padding-bottom:16px; border-bottom:1px solid #ebebeb;">Small</h5>
<div class="numbered-small">3</div>
<div class="code">&lt;div class="numbered-small">3&lt;/div></div><br />
</div>

<div style="clear:both;"></div>



<h1 class="pagetitle"><span>Button Styles</span></h1><br /><br />* Please note all Button Styles require browsers CSS3 compliant for round corners.  Sorry IE 6-8!<br /><br /><br />
<div style="float: left; width: 50%;margin-right: 20px; margin-bottom:35px;">
<button class="blue">Blue Button</button><br /><br />
<div class="code">&lt;button class="blue">Blue Button&lt;/div></div><br />
<br />
<button class="cyan">Cyan Button</button><br /><br />
<div class="code">&lt;button class="cyan">Cyan Button&lt;/div></div><br /><br />
<button class="red">Red Button</button><br /><br />
<div class="code">&lt;button class="red">Red Button&lt;/div></div><br /><br /><br />
<button class="green">Green Button</button><br /><br />
<div class="code">&lt;button class="green">Green Button&lt;/div></div><br /><br /><br />
<button class="tan">Tan Button</button><br /><br />
<div class="code">&lt;button class="tan">Tan Button&lt;/div></div><br /><br /><br />
<button class="yellow">Yellow Button</button><br /><br />
<div class="code">&lt;button class="yellow">Yellow Button&lt;/div></div><br /><br /><br />
<button class="grey">Grey Button</button><br /><br />
<div class="code">&lt;button class="grey">Grey Button&lt;/div></div><br /><br /><br />
<button class="pink">Pink Button</button><br /><br />
<div class="code">&lt;button class="pink">Pink Button&lt;/div></div><br /><br /><br />
</div>
<div style="float: left; width: 40%;margin-right: 20px; margin-bottom:35px;">
<button class="blue-pill">Blue Pill Button</button><br /><br />
<div class="code">&lt;button class="blue-pill">Blue Pill Button&lt;/div></div><br /><br />
<button class="cyan-pill">Cyan Pill Button</button><br /><br />
<div class="code">&lt;button class="cyan-pill">Cyan Pill Button&lt;/div></div><br /><br />
<button class="red-pill">Red Pill Button</button><br /><br />
<div class="code">&lt;button class="red-pill">Red Pill Button&lt;/div></div><br /><br />
<button class="green-pill">Green Pill Button</button><br /><br />
<div class="code">&lt;button class="green-pill">Green Pill Button&lt;/div></div><br /><br />
<button class="tan-pill">Tan Pill Button</button><br /><br />
<div class="code">&lt;button class="tan-pill">Tan Pill Button&lt;/div></div><br /><br />
<button class="yellow-pill">Yellow Pill Button</button><br /><br />
<div class="code">&lt;button class="yellow-pill">Yellow Pill Button&lt;/div></div><br /><br />
<button class="grey-pill">Grey Pill Button</button><br /><br />
<div class="code">&lt;button class="grey-pill">Grey Pill Button&lt;/div></div><br /><br />
<button class="pink-pill">Pink Pill Button</button><br /><br />
<div class="code">&lt;button class="pink-pill">Pink Pill Button&lt;/div></div><br /><br />
</div>





<div style="clear:both;"></div>
<div style="float: left; width: 45%;">
<h1 class="pagetitle"><span>UL List Styles</span></h1><br /><br />
<ul class="checklist"><li>This is checklist</li></ul>
<ul class="articlelist"><li>This is articlelist</li></ul>
<ul class="starlist"><li>This is starlist</li></ul>
<ul class="arrowlist"><li>This is arrowlist</li></ul>
<ul class="xlist"><li>This is xlist</li></ul>
<ul class="astlist"><li>This is astlist</li></ul>
<ul class="movielist"><li>This is movielist</li></ul>
<ul class="bloglist"><li>This is bloglist</li></ul>
<ul class="photolist"><li>This is photolist</li></ul>
<ul class="datelist"><li>This is datelist</li></ul>
<br /><br />

</div>
<div style="float: left; width: 40%;margin-left:20px;">
<h1 class="pagetitle"><span>P Styles</span></h1><br /><br />
<p class="error">This is a sample of the 'error' style.</p><br />
<p class="ideas">This is a sample of the 'ideas' style.</p><br />
<p class="message">This is a sample of the 'message' style.</p><br />
<p class="astrix">This is a sample of the 'astrix' style.</p><br />
<p class="com">This is com</p><br />
<p class="mod">This is mod</p><br />
<p class="plug">This is plug</p><br />
<p class="lang">This is lang</p><br />
<p class="rss">This is RSS</p><br />
<p class="download">This is a sample of the 'download' style.</p><br />
<p class="x">This is a sample of the 'x' style. </p><br />
<p class="xblack">This is xblack</p><br />
<p class="heart">This is heart</p><br />
<p class="photolink">This is photolink</p>
<p class="photored">This is photored</p>
<p class="photoblue">This is photoblue</p>
<p class="photogreen">This is photogreen</p>
<p class="photoorange">This is photoorange</p>
<p class="photopink">This is photopink</p>
<p class="photogrey">This is photogrey</p>
<p class="photoblack">This is photoblack</p><br />
<p class="starred">This is starred</p>
<p class="starblue">This is starblue</p>
<p class="stargreen">This is stargreen</p>
<p class="starorange">This is starorange</p>
<p class="stargrey">This is stargrey</p>
</div>
<br />

</td>
</tr>

</table>