<div class="note">Typography is a key element in web design. This templates delivers you sophisticated typography and various stylings. The style guide gives you an overview about all possible HTML tag stylings provided by the template. It also helps you to set up the available classes for special stylings.</div>

<h1>This is an H1 Header</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<h2>This is an H2 Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<h3>This is an H3 Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<h4>This is an H4 Header</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<h5>This is an H5 Header</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<h6>This is an H6 Header</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<p class="dropcap"><strong>Dropcap: use &lt;p class="dropcap"&gt;</strong>. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<hr class="dotted" />

<strong>Horizontal Rule:</strong> &lt;hr&gt; tag with class="dotted"

<hr class="dotted" />

<div class="floatbox">
	<div class="float-left width33">
	
		<h4>Inline Styles</h4>
		<p>
			<a href="#">Default &lt;a&gt; tag</a>
			<br /><a href="#" class="icon-folder">&lt;a&gt; with class="icon-folder"</a>
			<br /><a href="#" class="icon-file">&lt;a&gt; with class="icon-file"</a>
			<br /><a href="#" class="icon-download">&lt;a&gt; with class="icon-download"</a>
			<br /><a href="#" class="icon-external">&lt;a&gt; with class="icon-external"</a>
			<br /><a href="#" class="icon-pdf">&lt;a&gt; with class="icon-pdf"</a>
			<br /><br /><em>Default &lt;em&gt;</em>
			<br /><em class="box">&lt;em&gt; with class="box"</em>
			<br /><br /><acronym title="By marking up acronyms you can give useful information to browsers, spell checkers, translation systems and search-engine indexers.">Default &lt;acronym&gt;</acronym>
			<br /><abbr title="By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and search-engine indexers.">Default &lt;abbr&gt;</abbr>
		
		</p>
	
	</div>
	<div class="float-left width33">

		<h4>Unordered List Styles</h4>

		<ul>
			<li>Default &lt;ul&gt; tag</li>
			<li>Lorem ipsum dolor</li>
			<li>Lorem ipsum dolor</li>
		</ul>

		<ul class="checkbox">
			<li>&lt;ul&gt; with class="checkbox"</li>
		</ul>
		
		<ul class="arrow">
		  <li>&lt;ul&gt; with class="arrow"</li>
		</ul>
		
		<ul class="star">
		  <li>&lt;ul&gt; with class="star"</li>
		</ul>
		
		<ul class="check">
		  <li>&lt;ul&gt; with class="check"</li>
		</ul>

	</div>
	<div class="float-left width33">
	
		<h4>Ordered List Styles</h4>

		<ol>
			<li>Default &lt;ol&gt; tag</li>
			<li>Lorem ipsum dolor</li>
			<li>Lorem ipsum dolor</li>
		</ol>

		<ol class="disc">
		  <li>&lt;ol&gt; tag with class="disc"</li>
		  <li>Item 2</li>
		  <li>Item 3</li>
		  <li>Item 4</li>
		</ol>

	</div>
</div>

<hr class="dotted" />

<h4>Div and Span Styles</h4>
<div class="note"><strong>&lt;div&gt; or &lt;span&gt; tag with class="note"</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.<br />
</div>
<div class="info"><strong>&lt;div&gt; or &lt;span&gt; tag with class="info"</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.<br />
</div>
<div class="alert"><strong>&lt;div&gt; or &lt;span&gt; tag with class="alert"</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.<br />
</div>
<div class="download"><strong>&lt;div&gt; or &lt;span&gt; tag with class="download"</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.<br />
</div>
<div class="tip"><strong>&lt;div&gt; or &lt;span&gt; tag with class="tip"</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.<br />
</div>

<hr class="dotted" />

<h4>Blockquote and Q Styles</h4>
<strong>Default &lt;q&gt; tag:</strong> <q>This is a quote!</q>

<br /><br /><strong>Default &lt;blockquote&gt; tag with block element as child:</strong>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></blockquote>

<strong>&lt;blockquote&gt; tag with class="quotation" and an an additional &lt;p&gt; tag.</strong>
<br />(use &lt;blockquote&gt;&lt;p&gt;....&lt;/p&gt;&lt;/blockquote&gt;)
<blockquote class="quotation">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	</p>
</blockquote>

<hr class="dotted" />

<h4>Combine Styles</h4>
<div class="floatbox">

	<p class="dropcap" style="margin-top: 5px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <span class="info inset-right width25"><strong>Combine Tags</strong> with class "inset-right" or "inset-left". Example: &lt;span class=" info inset-right width25"&gt;.</span> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</p>
	
	<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <q class="blockquote inset-left width25"><strong>Combine Tags</strong> with class "inset-right" or "inset-left". Example: &lt;q class=" blockquote inset-right width25"&gt;.</q> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</p>
	
	<p class="dropcap">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="tip inset-right width25"><strong>Possible Width Classes</strong> .width15, .width18, .width20, .width23, .width25, .width33, .width35, .width40, .width45, .width50</span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	</p>
	
	<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</p>
	
</div>

<hr class="dotted" />

<div class="floatbox">
	<div class="float-left width50">
		
		<h4>Form Styles</h4>
	
		<form action="#">
		<fieldset style="margin-right: 20px;">
		<legend>Form legend</legend>
		<div><label for="f1">Text input:</label> <input type="text" value="input text" id="f1"/></div>
		<div><label for="f2">Radio input:</label> <input type="radio" id="f2"/></div>
		<div><label for="f3">Checkbox input:</label> <input type="checkbox" id="f3"/></div>
		<div><label for="f4">Select field:</label> <select id="f4"><option>Option 01</option><option>Option 02</option></select></div>
		<div><label for="f5">Textarea:</label><br/><textarea rows="5" cols="30" id="f5">Textarea text</textarea></div>
		<div><label for="f6">Button:</label> <input type="button" value="button text" id="f6"/></div>
		</fieldset>
		</form>

	</div>
	<div class="float-left width50">
	
		<h4>Preformatted Text Style</h4>
		<pre>
pre {
	margin: 10px 0 10px 0px;
	padding: 5px 0 5px 10px;
	border: 1px dotted #aab4be;
	border-left: 20px solid #b4b4b4;
	background: #fafafa;
	font-size: 90%;
	color: #2E8B57;
	font-family: "Courier New", Courier, monospace;
	
	/* Browser specific (not valid) styles */
	/* to make preformatted text wrap */
	 
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla */
}
		</pre>
			
	</div>
</div>