elements.html

<!DOCTYPE html>
<html><head>
<title>HTML KickStart Elements</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.snippet.min.js"></script>                         <!-- SNIPPET -->
<script type="text/javascript" src="js/kickstart.js"></script>                                  <!-- KICKSTART -->
<link rel="stylesheet" type="text/css" href="css/kickstart.css" media="all" />                  <!-- KICKSTART -->
<link rel="stylesheet" type="text/css" href="css/kickstart-grid.css" media="all" />                  <!-- KICKSTART -->

<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
                          <!-- CUSTOM STYLES -->
</head><body><a id="top-of-page"></a><div id="wrap" class="clearfix container">
<!-- ===================================== END HEADER ===================================== -->


<!-- ===================================== 
	TYPOGRAPHY 
===================================== -->
<h3 id="typography">Typography</h3>
<ul class="tabs">
<li><a href="#type-example">Example</a></li>
<li><a href="#type-headings">Headings</a></li>
<li><a href="#type-paragraphs">Paragraphs</a></li>
<li><a href="#type-blockquotes">Blockquote</a></li>
<li><a href="#type-blockquotes-small">Blockquote.small</a></li>
<li><a href="#type-inline-styles">Inline Styles</a></li>
<li><a href="#type-address">Address</a></li>
</ul>

	<div id="type-example" class="tab-content">
	<div class="col_8">
	<h4>Paragraphs</h4>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
	magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
	suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
	hendrerit in vulputate velit esse molestie consequat</p>
	<p>El illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
	qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam 
	liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim 
	placerat facer possim assum.</p>
	
	<!-- BLOCKQUOTES -->
	<h4>Blockquote</h4>
	<blockquote><p>lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
	in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
	et iusto odio
	<span>Someone Important</span></p></blockquote>
	
	<!-- BLOCKQUOTE SMALL -->
	<h4>Blockquote Small</h4>
	<blockquote class="small"><p>lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
	in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
	et iusto odio
	<span>Someone Important</span></p></blockquote>
	</div>
	
	<!-- TYPE STYLES -->
	<div class="col_4">
	<h4>Inline Styles</h4>
	<ul>
	<li><strong>Strong</strong></li>
	<li><em>Emphasis</em></li>
	<li><a href="">Inline Link</a></li>
	<li><strike>Strike</strike></li>
	</ul>
	<hr />
	
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
	<h4>Heading 4</h4>
	<h5>Heading 5</h5>
	<h6>Heading 6</h6>
	<hr />
	
	<h4>Address</h4>
	<address><p>
	1234 South Creek Lane<br />
	Calgary, Alberta, Canada<br />
	T4B–1S6
	</p>
	</address>
	</div>
	</div>
	
	<div id="type-headings" class="tab-content">
	<pre class="html">
	&lt;!-- Headings 1–6 --&gt;
	&lt;h1&gt;Heading 1&lt;/h1&gt;
	&lt;h2&gt;Heading 2&lt;/h2&gt;
	&lt;h3&gt;Heading 3&lt;/h3&gt;
	&lt;h4&gt;Heading 4&lt;/h4&gt;
	&lt;h5&gt;Heading 5&lt;/h5&gt;
	&lt;h6&gt;Heading 6&lt;/h6&gt;</pre>
	</div>
	
	<div id="type-paragraphs" class="tab-content">
	<pre class="html">
	&lt;!-- Paragraph --&gt;
	&lt;p&gt;Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...&lt;/p&gt;
	&lt;p&gt;El illum dolore eu feugiat nulla facilisis at vero eros et accumsan...&lt;/p&gt;</pre>
	</div>
	
	<div id="type-blockquotes" class="tab-content">
	<pre class="html">
	&lt;!-- Blockquote --&gt;
	&lt;blockquote&gt;
	&lt;p&gt;
	lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
	in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
	et iusto odio
	&lt;span&gt;Someone Important&lt;/span&gt;
	&lt;/p&gt;
	&lt;/blockquote&gt;</pre>
	</div>
	
	<div id="type-blockquotes-small" class="tab-content">
	<pre class="html">
	&lt;!-- Blockquote Small --&gt;
	&lt;blockquote class=&quot;small&quot;&gt;
	&lt;p&gt;
	lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
	in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
	et iusto odio
	&lt;span&gt;Someone Important&lt;/span&gt;
	&lt;/p&gt;
	&lt;/blockquote&gt;</pre>
	</div>
	
	<div id="type-inline-styles" class="tab-content">
	<pre class="html">
	&lt;!-- Strong --&gt;
	&lt;strong&gt;Strong&lt;/strong&gt;
	
	&lt;!-- Emphasis --&gt;
	&lt;em&gt;Emphasis&lt;/em&gt;
	
	&lt;!-- Inline Link --&gt;
	&lt;a href=&quot;&quot;&gt;Inline Link&lt;/a&gt;
	
	&lt;!-- Strike --&gt;
	&lt;strike&gt;Strike&lt;/strike&gt;</pre>
	</div>
	
	<div id="type-address" class="tab-content">
	<pre class="html">
	&lt;!-- Address --&gt;
	&lt;address&gt;&lt;p&gt;
	1234 South Creek Lane&lt;br /&gt;
	Calgary, Alberta, Canada&lt;br /&gt;
	T4B&#8211;1S6
	&lt;/p&gt;
	&lt;/address&gt;</pre>
	</div>

<!-- ===================================== 
	LISTS 
===================================== -->
<h3 id="lists">Lists</h3>
<ul class="tabs">
<li><a href="#list-example">Example</a></li>
<li><a href="#list-ul">UL</a></li>
<li><a href="#list-ol">OL</a></li>
<li><a href="#list-checks">UL.checks</a></li>
<li><a href="#list-alt">UL.alt</a></li>
</ul>

	<div id="list-example" class="tab-content">
	<div class="col_3">
	<h4>Unordered List</h4>
	<ul>
	<li>tation ullamcorper suscipit lobortis</li>
	<li>Nam liber tempor cum soluta nobis</li>
	<li>imperdiet doming id quod mazim</li>
	<li>suscipit lobortis nisl ut aliquip ex</li>
	</ul>
	</div>
	
	<div class="col_3">
	<h4>Ordered List</h4>
	<ol>
	<li>tation ullamcorper suscipit lobortis</li>
	<li>Nam liber tempor cum soluta nobis</li>
	<li>imperdiet doming id quod mazim</li>
	<li>suscipit lobortis nisl ut aliquip ex</li>
	</ol>
	</div>
	
	<div class="col_3">
	<h4>UL.checks</h4>
	<ul class="checks">
	<li>tation ullamcorper suscipit lobortis</li>
	<li>Nam liber tempor cum soluta nobis</li>
	<li>imperdiet doming id quod mazim</li>
	<li>suscipit lobortis nisl ut aliquip ex</li>
	</ul>
	</div>
	
	<div class="col_3">
	<h4>UL.alt</h4>
	<ul class="alt">
	<li>tation ullamcorper suscipit lobortis</li>
	<li>Nam liber tempor cum soluta nobis</li>
	<li>imperdiet doming id quod mazim</li>
	<li>suscipit lobortis nisl ut aliquip ex</li>
	</ul>
	</div>
	</div>
	
	<div id="list-ul" class="tab-content">
	<pre class="html">
	&lt;!-- Unordered List --&gt;
	&lt;ul&gt;
	&lt;li&gt;tation ullamcorper suscipit lobortis&lt;/li&gt;
	&lt;li&gt;Nam liber tempor cum soluta nobis&lt;/li&gt;
	&lt;li&gt;imperdiet doming id quod mazim&lt;/li&gt;
	&lt;li&gt;suscipit lobortis nisl ut aliquip ex&lt;/li&gt;
	&lt;/ul&gt;</pre>
	</div>
	
	<div id="list-ol" class="tab-content">
	<pre class="html">
	&lt;!-- Ordered List --&gt;
	&lt;ol&gt;
	&lt;li&gt;tation ullamcorper suscipit lobortis&lt;/li&gt;
	&lt;li&gt;Nam liber tempor cum soluta nobis&lt;/li&gt;
	&lt;li&gt;imperdiet doming id quod mazim&lt;/li&gt;
	&lt;li&gt;suscipit lobortis nisl ut aliquip ex&lt;/li&gt;
	&lt;/ol&gt;</pre>
	</div>
	
	<div id="list-checks" class="tab-content">
	<pre class="html">
	&lt;!-- List Checks --&gt;
	&lt;ul class=&quot;checks&quot;&gt;
	&lt;li&gt;tation ullamcorper suscipit lobortis&lt;/li&gt;
	&lt;li&gt;Nam liber tempor cum soluta nobis&lt;/li&gt;
	&lt;li&gt;imperdiet doming id quod mazim&lt;/li&gt;
	&lt;li&gt;suscipit lobortis nisl ut aliquip ex&lt;/li&gt;
	&lt;/ul&gt;</pre>
	</div>
	
	<div id="list-alt" class="tab-content">
	<pre class="html">
	&lt;!-- List Alternative Style --&gt;
	&lt;ul class=&quot;alt&quot;&gt;
	&lt;li&gt;tation ullamcorper suscipit lobortis&lt;/li&gt;
	&lt;li&gt;Nam liber tempor cum soluta nobis&lt;/li&gt;
	&lt;li&gt;imperdiet doming id quod mazim&lt;/li&gt;
	&lt;li&gt;suscipit lobortis nisl ut aliquip ex&lt;/li&gt;
	&lt;/ul&gt;</pre>
	</div>

<!-- ===================================== 
	MENUS
===================================== -->
<h3 id="menus">Menus</h3>
<ul class="tabs">
<li><a href="#menu-example">Example</a></li>
<li><a href="#menu-horizontal">Horizontal</a></li>
<li><a href="#menu-vertical">Vertical</a></li>
<li><a href="#menu-vertical-right">Vertical.right</a></li>
</ul>

	<div id="menu-example" class="tab-content">
	<!-- MENU VERTICAL -->
	<div class="col_3">
	<h4>Vertical Left</h4>
	<ul class="menu vertical">
	<li class="current"><a href="">Item 1</a></li>
	<li><a href="">Item 2</a></li>
	<li><a href="">Item 3</a>
		<ul>
		<li><a href="">Sub Item</a></li>
		<li><a href="">Sub Item</a>
			<ul>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			</ul>
		</li>
		<li><a href="">Sub Item</a></li>
		</ul>
	</li>
	<li><a href="">Item 4</a></li>
	</ul>
	</div>
	
	<!-- MENU HORIZONTAL -->
	<div class="col_6">
	<h4>Horizontal</h4>
	<ul class="menu">
	<li class="current"><a href="">Item 1</a></li>
	<li><a href="">Item 2</a></li>
	<li><a href="">Item 3</a>
		<ul>
		<li><a href="">Sub Item</a></li>
		<li><a href="">Sub Item</a>
			<ul>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			</ul>
		</li>
		<li><a href="">Sub Item</a></li>
		</ul>
	</li>
	<li><a href="">Item 4</a></li>
	</ul>
	</div>
	
	<!-- MENU VERTICAL RIGHT -->
	<div class="col_3">
	<h4>Vertical Right</h4>
	<ul class="menu vertical right">
	<li><a href="">Item 1</a></li>
	<li><a href="">Item 2</a></li>
	<li><a href="">Item 3</a>
		<ul>
		<li><a href="">Sub Item</a></li>
		<li class="current"><a href="">Sub Item</a>
			<ul>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			<li><a href="">Sub Item</a></li>
			</ul>
		</li>
		<li><a href="">Sub Item</a></li>
		</ul>
	</li>
	<li><a href="">Item 4</a></li>
	</ul>
	</div>
	</div>
	
	<div id="menu-vertical" class="tab-content">
	<pre class="html">
	&lt;!-- Menu Vertical Left --&gt;
	&lt;ul class=&quot;sf-menu vertical&quot;&gt;
	&lt;li class=&quot;current&quot;&gt;&lt;a href=&quot;&quot;&gt;Item 1&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 2&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 3&lt;/a&gt;
		&lt;ul&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;
			&lt;ul&gt;
			&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 4&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;</pre>
	</div>
	
	<div id="menu-horizontal" class="tab-content">
	<pre class="html">
	&lt;!-- Menu Horizontal --&gt;
	&lt;ul class=&quot;sf-menu&quot;&gt;
	&lt;li class=&quot;current&quot;&gt;&lt;a href=&quot;&quot;&gt;Item 1&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 2&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 3&lt;/a&gt;
		&lt;ul&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;
			&lt;ul&gt;
			&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 4&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;</pre>
	</div>
	
	<div id="menu-vertical-right" class="tab-content">
	<pre class="html">
	&lt;!-- Menu Vertical Right --&gt;
	&lt;ul class=&quot;sf-menu vertical right&quot;&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 1&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 2&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 3&lt;/a&gt;
		&lt;ul&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;li class=&quot;current&quot;&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;
			&lt;ul&gt;
			&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/li&gt;
		&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Item 4&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;</pre>
	</div>

<!-- ===================================== 
	TABLES 
===================================== -->
<h3 id="tables">Tables</h3>
<ul class="tabs">
<li><a href="#table-example">Example</a></li>
<li><a href="#table">Table</a></li>
<li><a href="#table-wside">Table w/side TH</a></li>
</ul>

	<div id="table-example" class="tab-content">
	<div class="col_6">
	<h4>Table</h4>
	<table cellspacing="0" cellpadding="0">
	<thead><tr>
		<th>Item1</th>
		<th>Item2</th>
		<th>Item3</th>
	</tr></thead>
	<tbody><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<td>Item1</td>
		<td>Item2</td>
		<td>Item3</td>
	</tr></tbody>
	</table>
	</div>
	
	<div class="col_6">
	<h4>Table w/side TH</h4>
	<table cellspacing="0" cellpadding="0">
	<thead><tr>
		<th>&nbsp;</th>
		<th>Item2</th>
		<th>Item3</th>
	</tr></thead>
	<tbody><tr>
		<th>Item1</th>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<th>Item1</th>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<th>Item1</th>
		<td>Item2</td>
		<td>Item3</td>
	</tr><tr>
		<th>Item1</th>
		<td>Item2</td>
		<td>Item3</td>
	</tr></tbody>
	</table>
	</div>
	</div>
	
	<div id="table" class="tab-content">
	<pre class="html">
	&lt;!-- Table --&gt;
	&lt;table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
	&lt;thead&gt;&lt;tr&gt;
		&lt;th&gt;Item1&lt;/th&gt;
		&lt;th&gt;Item2&lt;/th&gt;
		&lt;th&gt;Item3&lt;/th&gt;
	&lt;/tr&gt;&lt;/thead&gt;
	&lt;tbody&gt;&lt;tr&gt;
		&lt;td&gt;Item1&lt;/td&gt;
		&lt;td&gt;Item2&lt;/td&gt;
		&lt;td&gt;Item3&lt;/td&gt;
	&lt;/tr&gt;&lt;tr&gt;
		&lt;td&gt;Item1&lt;/td&gt;
		&lt;td&gt;Item2&lt;/td&gt;
		&lt;td&gt;Item3&lt;/td&gt;
	&lt;/tr&gt;&lt;tr&gt;
		&lt;td&gt;Item1&lt;/td&gt;
		&lt;td&gt;Item2&lt;/td&gt;
		&lt;td&gt;Item3&lt;/td&gt;
	&lt;/tr&gt;&lt;tr&gt;
		&lt;td&gt;Item1&lt;/td&gt;
		&lt;td&gt;Item2&lt;/td&gt;
		&lt;td&gt;Item3&lt;/td&gt;
	&lt;/tr&gt;&lt;/tbody&gt;
	&lt;/table&gt;</pre>
	</div>
	
	<div id="table-wside" class="tab-content">
	<pre class="html">
	&lt;!-- Table w/Side --&gt;
	&lt;table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
	&lt;thead&gt;&lt;tr&gt;
		&lt;th&gt;&nbsp;&lt;/th&gt;
		&lt;th&gt;Item2&lt;/th&gt;
		&lt;th&gt;Item3&lt;/th&gt;
	&lt;/tr&gt;&lt;/thead&gt;
	&lt;tbody&gt;&lt;tr&gt;
		&lt;th&gt;Item1&lt;/th&gt;
		&lt;td&gt;Item2&lt;/td&gt;
		&lt;td&gt;Item3&lt;/td&gt;
	&lt;/tr&gt;&lt;tr&gt;
		&lt;th&gt;Item1&lt;/th&gt;
		&lt;td&gt;Item2&lt;/td&gt;
		&lt;td&gt;Item3&lt;/td&gt;
	&lt;/tr&gt;&lt;tr&gt;
		&lt;th&gt;Item1&lt;/th&gt;
		&lt;td&gt;Item2&lt;/td&gt;
		&lt;td&gt;Item3&lt;/td&gt;
	&lt;/tr&gt;&lt;tr&gt;
		&lt;th&gt;Item1&lt;/th&gt;
		&lt;td&gt;Item2&lt;/td&gt;
		&lt;td&gt;Item3&lt;/td&gt;
	&lt;/tr&gt;&lt;/tbody&gt;
	&lt;/table&gt;</pre>
	</div>
	
<!-- ===================================== 
	HORIZONTAL RULES 
===================================== -->
<h3 id="horizontal-rules">Horizontal Rules</h3>
<ul class="tabs">
<li><a href="#hr-example">Example</a></li>
<li><a href="#hr-html">HTML</a></li>
</ul>

	<div id="hr-example" class="tab-content">
	<div class="col_4">
	<h4>HR</h4>
	<hr />
	</div>
	
	<div class="col_4">
	<h4>HR.alt1</h4>
	<hr class="alt1" />
	</div>
	
	<div class="col_4">
	<h4>HR.alt2</h4>
	<hr class="alt2" />
	</div>
	</div>
	
	<div id="hr-html" class="tab-content">
	<pre class="html">
	&lt;!-- HR --&gt;
	&lt;hr /&gt;
	
	&lt;!-- HR.alt1 --&gt;
	&lt;hr class=&quot;alt1&quot; /&gt;
	
	&lt;!-- HR.alt2 --&gt;
	&lt;hr class=&quot;alt2&quot; /&gt;</pre>
	</div>

<!-- ===================================== 
	CODE/PRE 
===================================== -->
<h3 id="code">Code/Pre</h3>
<ul class="tabs">
<li><a href="#code-example">Example</a></li>
<li><a href="#code-html">PRE.html</a></li>
<li><a href="#code-css">PRE.css</a></li>
<li><a href="#code-js">PRE.js</a></li>
<li><a href="#code-php">PRE.php</a></li>
</ul>

	<div id="code-example" class="tab-content">
	<div class="col_4">
	<h4>PRE.html</h4>
	<pre class="html">
	&lt;html&gt;
	&lt;head&gt;&lt;title&gt;This is a title&lt;/title&gt;&lt;/head&gt;
	&lt;body class=&quot;subpage&quot;&gt;
		&lt;!-- Content Here --&gt;
	&lt;/body&gt;
	&lt;/html&gt;
	</pre>
	</div>
	
	<!-- CODE CSS -->
	<div class="col_4">
	<h4>PRE.css</h4>
	<pre class="css">
	body{
	font-weight:bold;
	color:#000;
	line-height:150%;
	}
	</pre>
	</div>
	
	<!-- CODE JS -->
	<div class="col_4">
	<h4>PRE.js</h4>
	<pre class="js">
	$(document).ready(function(){
		alert('jQuery');
	});
	</pre>
	</div>
	</div>
	
	<div id="code-html" class="tab-content">
	<pre class="html">
	&lt;!-- Code HTML --&gt;
	&lt;pre class=&quot;html&quot;&gt;
	&#8230;code goes here&#8230; 
	&lt;/pre&gt;</pre>
	</div>
	
	<div id="code-css" class="tab-content">
	<pre class="html">
	&lt;!-- Code CSS --&gt;
	&lt;pre class=&quot;css&quot;&gt;
	&#8230;code goes here&#8230; 
	&lt;/pre&gt;</pre>
	</div>
	
	<div id="code-js" class="tab-content">
	<pre class="html">
	&lt;!-- Code Javascript --&gt;
	&lt;pre class=&quot;js&quot;&gt;
	&#8230;code goes here&#8230; 
	&lt;/pre&gt;</pre>
	</div>
	
	<div id="code-php" class="tab-content">
	<pre class="html">
	&lt;!-- Code PHP --&gt;
	&lt;pre class=&quot;php&quot;&gt;
	&#8230;code goes here&#8230; 
	&lt;/pre&gt;</pre>
	</div>

<!-- ===================================== 
	BUTTONS 
===================================== -->
<h3 id="buttons">Buttons</h3>
<ul class="tabs">
<li><a href="#btn-example">Example</a></li>
<li><a href="#btn-sizes">Button Sizes</a></li>
<li><a href="#btn-icons">Buttons w/Icons</a></li>
<li><a href="#btn-colors">Button Colors</a></li>
</ul>

	<div id="btn-example" class="tab-content">
	<div class="col_4">
	<h4>Buttons</h4>
	<button>Button</button>
	<a class="button" href="">A.button</a><br />
	<button class="small">Small</button> 
	<button class="small" disabled="disabled">Small (disabled)</button><br />
	<button class="medium">Medium</button><br />
	<button class="large">Large</button>
	</div>
	
	<!-- BUTTONS W/ICON -->
	<div class="col_4">
	<h4>Buttons w/Icons</h4>
	<button class="small"><img src="css/img/iconic/gray_dark/arrow_down_16x16.png" alt="arrow_down_16x16" width="16" height="16" />Small</button><br />
	<button class="medium"><img src="css/img/iconic/gray_dark/clock_24x24.png" alt="clock_24x24" width="24" height="24" />Medium</button><br />
	<button class="large"><img src="css/img/iconic/gray_dark/tag_fill_32x32.png" alt="tag_fill_32x32" width="32" height="32" />Large</button><br />
	<button class="medium icon-only"><img src="css/img/iconic/gray_dark/magnifying_glass_16x16.png" alt="magnifying_glass_16x16" width="16" height="16" /></button>
	</div>
	
	<!-- BUTTON VARIATIONS -->
	<div class="col_4">
	<h4>Button Colors</h4>
	<button class="blue">.blue</button>
	<a class="button orange" href="">.orange</a><br />
	<button class="small pink">.pink</button> 
	<button class="small" disabled="disabled">Small (disabled)</button><br />
	<button class="medium green">.green</button><br />
	<button class="large red">.red</button>
	</div>
	</div>
	
	<div id="btn-sizes" class="tab-content">
	<pre class="html">
	&lt;!-- Button Sizes --&gt;
	&lt;button&gt;Button&lt;/button&gt;
	&lt;a class=&quot;button&quot; href=&quot;&quot;&gt;A.button&lt;/a&gt;
	&lt;button class=&quot;small&quot;&gt;Small&lt;/button&gt;
	&lt;button class=&quot;small&quot; disabled=&quot;disabled&quot;&gt;Small (disabled)&lt;/button&gt;
	&lt;button class=&quot;medium&quot;&gt;Medium&lt;/button&gt;
	&lt;button class=&quot;large&quot;&gt;Large&lt;/button&gt;</pre>
	</div>
	
	<div id="btn-icons" class="tab-content">
	<pre class="html">
	&lt;!-- Buttons w/Icons --&gt;
	&lt;button class=&quot;small&quot;&gt;&lt;img src=&quot;css/img/iconic/gray_dark/arrow_down_16x16.png&quot; alt=&quot;arrow_down_16x16&quot; width=&quot;16&quot; height=&quot;16&quot; /&gt;Small&lt;/button&gt;
	&lt;button class=&quot;medium&quot;&gt;&lt;img src=&quot;css/img/iconic/gray_dark/clock_24x24.png&quot; alt=&quot;clock_24x24&quot; width=&quot;24&quot; height=&quot;24&quot; /&gt;Medium&lt;/button&gt;
	&lt;button class=&quot;large&quot;&gt;&lt;img src=&quot;css/img/iconic/gray_dark/tag_fill_32x32.png&quot; alt=&quot;tag_fill_32x32&quot; width=&quot;32&quot; height=&quot;32&quot; /&gt;Large&lt;/button&gt;
	&lt;button class=&quot;medium icon-only&quot;&gt;&lt;img src=&quot;css/img/iconic/gray_dark/magnifying_glass_16x16.png&quot; alt=&quot;magnifying_glass_16x16&quot; width=&quot;16&quot; height=&quot;16&quot; /&gt;&lt;/button&gt;</pre>
	</div>
	
	<div id="btn-colors" class="tab-content">
	<pre class="html">
	&lt;!-- Buttons w/Colors --&gt;
	&lt;button class=&quot;blue&quot;&gt;.blue&lt;/button&gt;
	&lt;a class=&quot;button orange&quot; href=&quot;&quot;&gt;.orange&lt;/a&gt;
	&lt;button class=&quot;small pink&quot;&gt;.pink&lt;/button&gt;
	&lt;button class=&quot;small&quot; disabled=&quot;disabled&quot;&gt;Small (disabled)&lt;/button&gt;
	&lt;button class=&quot;medium green&quot;&gt;.green&lt;/button&gt;
	&lt;button class=&quot;large red&quot;&gt;.red&lt;/button&gt;</pre>
	</div>

<!-- ===================================== 
	TABS 
===================================== -->
<h3 id="tabs">Tabs</h3>
<ul class="tabs">
<li><a href="#tabs-example">Example</a></li>
<li><a href="#tabs-left">Tabs.left</a></li>
<li><a href="#tabs-center">Tabs.center</a></li>
<li><a href="#tabs-right">Tabs.right</a></li>
</ul>

	<div id="tabs-example" class="tab-content">
	<div class="col_4">
	<h4>Tabs.left</h4>
	<ul class="tabs left">
	<li><a href="#tab1">Tab1</a></li>
	<li><a href="#tab2">Tab2</a></li>
	<li><a href="#tab3">Tab3</a></li>
	</ul>
	
	<div id="tab1" class="tab-content">Tab1</div>
	<div id="tab2" class="tab-content">Tab2</div>
	<div id="tab3" class="tab-content">Tab3</div>
	</div>
	
	<!-- TABS CENTER -->
	<div class="col_4">
	<h4>Tabs.center</h4>
	<ul class="tabs center">
	<li><a href="#tabc1">Tab1</a></li>
	<li><a href="#tabc2">Tab2</a></li>
	<li><a href="#tabc3">Tab3</a></li>
	</ul>
	
	<div id="tabc1" class="tab-content">Tab1</div>
	<div id="tabc2" class="tab-content">Tab2</div>
	<div id="tabc3" class="tab-content">Tab3</div>
	</div>
	
	<!-- TABS RIGHT -->
	<div class="col_4">
	<h4>Tabs.right</h4>
	<ul class="tabs right">
	<li><a href="#tabr1">Tab1</a></li>
	<li><a href="#tabr2">Tab2</a></li>
	<li><a href="#tabr3">Tab3</a></li>
	</ul>
	
	<div id="tabr1" class="tab-content">Tab1</div>
	<div id="tabr2" class="tab-content">Tab2</div>
	<div id="tabr3" class="tab-content">Tab3</div>
	</div>
	</div>
	
	<div id="tabs-left" class="tab-content">
	<pre class="html">
	&lt;!-- Tabs Left --&gt;
	&lt;ul class=&quot;tabs left&quot;&gt;
	&lt;li&gt;&lt;a href=&quot;#tabr1&quot;&gt;Tab1&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#tabr2&quot;&gt;Tab2&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#tabr3&quot;&gt;Tab3&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	
	&lt;div id=&quot;tabr1&quot; class=&quot;tab-content&quot;&gt;Tab1&lt;/div&gt;
	&lt;div id=&quot;tabr2&quot; class=&quot;tab-content&quot;&gt;Tab2&lt;/div&gt;
	&lt;div id=&quot;tabr3&quot; class=&quot;tab-content&quot;&gt;Tab3&lt;/div&gt;</pre>
	</div>
	
	<div id="tabs-center" class="tab-content">
	<pre class="html">
	&lt;!-- Tabs Center --&gt;
	&lt;ul class=&quot;tabs center&quot;&gt;
	&lt;li&gt;&lt;a href=&quot;#tabr1&quot;&gt;Tab1&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#tabr2&quot;&gt;Tab2&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#tabr3&quot;&gt;Tab3&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	
	&lt;div id=&quot;tabr1&quot; class=&quot;tab-content&quot;&gt;Tab1&lt;/div&gt;
	&lt;div id=&quot;tabr2&quot; class=&quot;tab-content&quot;&gt;Tab2&lt;/div&gt;
	&lt;div id=&quot;tabr3&quot; class=&quot;tab-content&quot;&gt;Tab3&lt;/div&gt;</pre>
	</div>
	
	<div id="tabs-right" class="tab-content">
	<pre class="html">
	&lt;!-- Tabs Right --&gt;
	&lt;ul class=&quot;tabs right&quot;&gt;
	&lt;li&gt;&lt;a href=&quot;#tabr1&quot;&gt;Tab1&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#tabr2&quot;&gt;Tab2&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;#tabr3&quot;&gt;Tab3&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
	
	&lt;div id=&quot;tabr1&quot; class=&quot;tab-content&quot;&gt;Tab1&lt;/div&gt;
	&lt;div id=&quot;tabr2&quot; class=&quot;tab-content&quot;&gt;Tab2&lt;/div&gt;
	&lt;div id=&quot;tabr3&quot; class=&quot;tab-content&quot;&gt;Tab3&lt;/div&gt;</pre>
	</div>

<!-- ===================================== 
	BREADCRUMBS 
===================================== -->
<h3 id="breadcrumbs">Breadcrumbs</h3>
<ul class="tabs">
<li><a href="#bread-example">Example</a></li>
<li><a href="#bread">Breadcrumbs</a></li>
<li><a href="#bread-alt1">Breadcrumbs.alt1</a></li>
</ul>

	<div id="bread-example" class="tab-content">
	<div class="col_6">
	<h4>Breadcrumbs</h4>
	<ul class="breadcrumbs">
	<li><a href="">Home</a></li>
	<li><a href="">Category</a></li>
	<li><a href="">Sub Category</a></li>
	<li><a href="">Page Title</a></li>
	</ul>
	</div>
	
	<div class="col_6">
	<h4>Breadcrumbs.alt1</h4>
	<ul class="breadcrumbs alt1">
	<li><a href="">Home</a></li>
	<li><a href="">Category</a></li>
	<li><a href="">Sub Category</a></li>
	<li><a href="">Page Title</a></li>
	</ul>
	</div>
	</div>
	
	<div id="bread" class="tab-content">
	<pre class="html">
	&lt;!-- Breadcrumbs --&gt;
	&lt;ul class=&quot;breadcrumbs&quot;&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Category&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Category&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Page Title&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;</pre>
	</div>
	
	<div id="bread-alt1" class="tab-content">
	<pre class="html">
	&lt;!-- Alternative Style --&gt;
	&lt;ul class=&quot;breadcrumbs alt1&quot;&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Category&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Sub Category&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href=&quot;&quot;&gt;Page Title&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;</pre>
	</div>

<!-- ===================================== 
	GRIDS/COLUMNS 
===================================== -->
<h3 id="columns">Grids/Columns</h3>
<ul class="tabs">
<li><a href="#grids-example">Example</a></li>
<li><a href="#grids-html">HTML</a></li>
</ul>

	<div id="grids-example" class="tab-content">
	<div class="col_12 visible">col_12</div>
	<div class="col_1 visible">col_1</div><div class="col_11 visible">col_11</div>
	<div class="col_2 visible">col_2</div><div class="col_10 visible">col_10</div>
	<div class="col_3 visible">col_3</div><div class="col_9 visible">col_9</div>
	<div class="col_4 visible">col_4</div><div class="col_8 visible">col_8</div>
	<div class="col_5 visible">col_5</div><div class="col_7 visible">col_7</div>
	<div class="col_6 visible">col_6</div><div class="col_6 visible">col_6</div>
	<div class="col_7 visible">col_7</div><div class="col_5 visible">col_5</div>
	<div class="col_8 visible">col_8</div><div class="col_4 visible">col_4</div>
	<div class="col_9 visible">col_9</div><div class="col_3 visible">col_3</div>
	<div class="col_10 visible">col_10</div><div class="col_2 visible">col_2</div>
	<div class="col_11 visible">col_11</div><div class="col_1 visible">col_1</div>
	<div class="col_12 visible">col_12</div>
	
	<!-- FOURTHS -->
	<div class="col_3 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_3 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_3 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_3 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	
	<!-- THIRDS -->
	<div class="col_4 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_4 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_4 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	
	<!-- HALF & HALF -->
	<div class="col_6 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	<div class="col_6 visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
	</div>
	
	<div id="grids-html" class="tab-content">
	<pre class="html">
	&lt;!-- Columns/Grid --&gt;
	&lt;div class=&quot;col_12&quot;&gt;col_12&lt;/div&gt;
	&lt;div class=&quot;col_1&quot;&gt;col_1&lt;/div&gt;&lt;div class=&quot;col_11&quot;&gt;col_11&lt;/div&gt;
	&lt;div class=&quot;col_2&quot;&gt;col_2&lt;/div&gt;&lt;div class=&quot;col_10&quot;&gt;col_10&lt;/div&gt;
	&lt;div class=&quot;col_3&quot;&gt;col_3&lt;/div&gt;&lt;div class=&quot;col_9&quot;&gt;col_9&lt;/div&gt;
	&lt;div class=&quot;col_4&quot;&gt;col_4&lt;/div&gt;&lt;div class=&quot;col_8&quot;&gt;col_8&lt;/div&gt;
	&lt;div class=&quot;col_5&quot;&gt;col_5&lt;/div&gt;&lt;div class=&quot;col_7&quot;&gt;col_7&lt;/div&gt;
	&lt;div class=&quot;col_6&quot;&gt;col_6&lt;/div&gt;&lt;div class=&quot;col_6&quot;&gt;col_6&lt;/div&gt;
	&lt;div class=&quot;col_7&quot;&gt;col_7&lt;/div&gt;&lt;div class=&quot;col_5&quot;&gt;col_5&lt;/div&gt;
	&lt;div class=&quot;col_8&quot;&gt;col_8&lt;/div&gt;&lt;div class=&quot;col_4&quot;&gt;col_4&lt;/div&gt;
	&lt;div class=&quot;col_9&quot;&gt;col_9&lt;/div&gt;&lt;div class=&quot;col_3&quot;&gt;col_3&lt;/div&gt;
	&lt;div class=&quot;col_10&quot;&gt;col_10&lt;/div&gt;&lt;div class=&quot;col_2&quot;&gt;col_2&lt;/div&gt;
	&lt;div class=&quot;col_11&quot;&gt;col_11&lt;/div&gt;&lt;div class=&quot;col_1&quot;&gt;col_1&lt;/div&gt;
	&lt;div class=&quot;col_12&quot;&gt;col_12&lt;/div&gt;
	
	&lt;!-- FOURTHS --&gt;
	&lt;div class=&quot;col_3&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;
	&lt;div class=&quot;col_3&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;
	&lt;div class=&quot;col_3&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;
	&lt;div class=&quot;col_3&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;
	
	&lt;!-- THIRDS --&gt;
	&lt;div class=&quot;col_4&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;
	&lt;div class=&quot;col_4&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;
	&lt;div class=&quot;col_4&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;
	
	&lt;!-- HALF &amp; HALF --&gt;
	&lt;div class=&quot;col_6&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;
	&lt;div class=&quot;col_6&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
	nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt;</pre>
	</div>

<!-- ===================================== 
	IMAGES 
===================================== -->
<h3 id="images">Images</h3>
<ul class="tabs">
<li><a href="#images-example">Example</a></li>
<li><a href="#images-placeholder">Placeholder</a></li>
<li><a href="#images-style1">.style1</a></li>
<li><a href="#images-style2">.style2</a></li>
<li><a href="#images-style3">.style3</a></li>
<li><a href="#images-caption">.caption</a></li>
<li><a href="#images-left">.align-left</a></li>
<li><a href="#images-right">.align-right</a></li>
<li><a href="#images-full-width">.full-width</a></li>
<li><a href="#images-gallery">DIV.gallery</a></li>
</ul>

	<div id="images-example" class="tab-content">
	<div class="col_3">
	<h4>Placeholder</h4>
	<img src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" /> 
	</div>
	
	<div class="col_3">
	<h4>IMG.style1</h4>
	<img class="style1" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" /> 
	</div>
	
	<div class="col_3">
	<h4>IMG.style2</h4>
	<img class="style2" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" /> 
	</div>
	
	<div class="col_3">
	<h4>IMG.style3</h4>
	<img class="style3" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" /> 
	</div>
	
	<div class="clear">&nbsp;</div>
	
	<div class="col_6">
	<h4>IMG.caption</h4>
	<img class="caption" alt="This is the image caption" src="http://placehold.it/400x350/4D99E0/ffffff.png&text=400x350" width="400" height="350" /> 
	</div>
	
	<div class="col_6 gallery">
	<h4>DIV.gallery</h4>
	<a href="http://placehold.it/600x450/4D99E0/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/75CC00/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/75CC00/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/E49800/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E49800/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/E4247E/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E4247E/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/00C6E4/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/00C6E4/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/E4DB0F/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/E4DB0F/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/7400E4/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/7400E4/ffffff.png&text=100x100" width="100" height="100" /></a>
	<a href="http://placehold.it/600x450/C50000/ffffff.png&text=600x450"><img src="http://placehold.it/100x100/C50000/ffffff.png&text=100x100" width="100" height="100" /></a>
	</div>
	
	<div class="clear">&nbsp;</div>
	
	<div class="col_4">
	<h4>IMG.align-left</h4>
	<img class="align-left" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
	ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
	ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
	in hendrerit in vulputate velit esse molestie consequat.</p>	
	</div>
	
	<div class="col_4">
	<h4>IMG.align-right</h4>
	<img class="align-right" src="http://placehold.it/100x100/4D99E0/ffffff.png&text=100x100" width="100" height="100" />
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
	ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
	ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
	in hendrerit in vulputate velit esse molestie consequat.</p>	
	</div>
	
	<div class="col_4">
	<h4>IMG.full-width</h4>
	<img class="full-width" src="http://placehold.it/260x200/4D99E0/ffffff.png&text=full+width" />	
	</div>
	</div>
	
	<div id="images-placeholder" class="tab-content">
	<pre class="html">
	&lt;!-- Placeholder --&gt;
	&lt;img src=&quot;http://placehold.it/180x150/4D99E0/ffffff.png&amp;text=180x150&quot; width=&quot;180&quot; height=&quot;150&quot; /&gt;</pre>
	</div>
	
	<div id="images-style1" class="tab-content">
	<pre class="html">
	&lt;!-- Style1 --&gt;
	&lt;img class=&quot;style1&quot; src=&quot;http://placehold.it/180x150/4D99E0/ffffff.png&amp;text=180x150&quot; width=&quot;180&quot; height=&quot;150&quot; /&gt;</pre>
	</div>
	
	<div id="images-style2" class="tab-content">
	<pre class="html">
	&lt;!-- Style2 --&gt;
	&lt;img class=&quot;style2&quot; src=&quot;http://placehold.it/180x150/4D99E0/ffffff.png&amp;text=180x150&quot; width=&quot;180&quot; height=&quot;150&quot; /&gt;</pre>
	</div>
	
	<div id="images-style3" class="tab-content">
	<pre class="html">
	&lt;!-- Style3 --&gt;
	&lt;img class=&quot;style3&quot; src=&quot;http://placehold.it/180x150/4D99E0/ffffff.png&amp;text=180x150&quot; width=&quot;180&quot; height=&quot;150&quot; /&gt;</pre>
	</div>
	
	<div id="images-caption" class="tab-content">
	<pre class="html">
	&lt;!-- Caption --&gt;
	&lt;img class=&quot;caption&quot; alt=&quot;This is the image caption&quot; src=&quot;http://placehold.it/400x350/4D99E0/ffffff.png&amp;text=400x350&quot; width=&quot;400&quot; height=&quot;350&quot; /&gt;</pre>
	</div>
	
	<div id="images-left" class="tab-content">
	<pre class="html">
	&lt;!-- Align Left --&gt;
	&lt;img class=&quot;align-left&quot; src=&quot;http://placehold.it/100x100/4D99E0/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;
	&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
	ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
	ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
	in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;</pre>
	</div>
	
	<div id="images-right" class="tab-content">
	<pre class="html">
	&lt;!-- Align Right --&gt;
	&lt;img class=&quot;align-right&quot; src=&quot;http://placehold.it/100x100/4D99E0/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;
	&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
	ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
	ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor 
	in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;</pre>
	</div>
	
	<div id="images-full-width" class="tab-content">
	<pre class="html">
	&lt;!-- Full Width --&gt;
	&lt;img class=&quot;full-width&quot; src=&quot;http://placehold.it/260x200/4D99E0/ffffff.png&amp;text=full+width&quot; /&gt;</pre>
	</div>
	
	<div id="images-gallery" class="tab-content">
	<pre class="html">
	&lt;!-- Gallery --&gt;
	&lt;div class=&quot;gallery&quot;&gt;
	&lt;a href=&quot;http://placehold.it/600x450/4D99E0/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/4D99E0/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
	&lt;a href=&quot;http://placehold.it/600x450/75CC00/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/75CC00/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
	&lt;a href=&quot;http://placehold.it/600x450/E49800/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/E49800/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
	&lt;a href=&quot;http://placehold.it/600x450/E4247E/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/E4247E/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
	&lt;a href=&quot;http://placehold.it/600x450/00C6E4/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/00C6E4/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
	&lt;a href=&quot;http://placehold.it/600x450/E4DB0F/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/E4DB0F/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
	&lt;a href=&quot;http://placehold.it/600x450/7400E4/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/7400E4/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
	&lt;a href=&quot;http://placehold.it/600x450/C50000/ffffff.png&amp;text=600x450&quot;&gt;&lt;img src=&quot;http://placehold.it/100x100/C50000/ffffff.png&amp;text=100x100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;&lt;/a&gt;
	&lt;/div&gt;</pre>
	</div>

<!-- ===================================== 
	SLIDESHOW 
===================================== -->
<h3 id="slideshow">Slideshow</h3>
<ul class="tabs">
<li><a href="#slideshow-example">Example</a></li>
<li><a href="#slideshow-html">HTML</a></li>
</ul>

	<div id="slideshow-example" class="tab-content">
	<div class="col_8">
	<ul class="slideshow" width="550" height="350">
	<li><img src="http://placehold.it/550x350/4D99E0/ffffff.png&text=550x350" width="550" height="350" /></li>
	<li><img src="http://placehold.it/550x350/75CC00/ffffff.png&text=550x350" width="550" height="350" /></li>
	<li><img src="http://placehold.it/550x350/E49800/ffffff.png&text=550x350" width="550" height="350" /></li>
	<li><span style="padding:20px;display:block;"><h3>Slide Anything</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
	nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></span></li>
	</ul>
	</div>
	
	<div class="col_4">
	<h4>Features</h4>
	<ul class="checks">
	<li>Slide Any HTML Content</li>
	<li>Iframes</li>
	<li>Videos</li>
	<li>Images</li>
	<li>Lightweight</li>
	<li>Multiple Slideshows</li>
	<li>Zero Setup Required</li>
	<li>Flexible Markup</li>
	<li>Unordered List (default)</li>
	</ul>
	</div>
	</div>
	
	<div id="slideshow-html" class="tab-content">
	<pre class="html">
	&lt;!-- Slideshow --&gt;
	&lt;ul class=&quot;slideshow&quot; width=&quot;550&quot; height=&quot;350&quot;&gt;
	&lt;li&gt;&lt;img src=&quot;http://placehold.it/550x350/4D99E0/ffffff.png&amp;text=550x350&quot; width=&quot;550&quot; height=&quot;350&quot; /&gt;&lt;/li&gt;
	&lt;li&gt;&lt;img src=&quot;http://placehold.it/550x350/75CC00/ffffff.png&amp;text=550x350&quot; width=&quot;550&quot; height=&quot;350&quot; /&gt;&lt;/li&gt;
	&lt;li&gt;&lt;img src=&quot;http://placehold.it/550x350/E49800/ffffff.png&text=550x350&quot; width=&quot;550&quot; height=&quot;350&quot; /&gt;&lt;/li&gt;
	&lt;li&gt;&lt;h3&gt;Slide Anything&lt;/h3&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
	sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;&lt;/li&gt;
	&lt;/ul&gt;</pre>
	</div>

<!-- ===================================== 
	FORMS 
===================================== -->
<h3 id="forms">Forms</h3>
<ul class="tabs">
<li><a href="#form-example">Example</a></li>
<li><a href="#form-textfield">Textfield</a></li>
<li><a href="#form-select">Select</a></li>
<li><a href="#form-checkbox">Checkbox</a></li>
<li><a href="#form-radio">Radio</a></li>
<li><a href="#form-fieldset">Fieldset</a></li>
<li><a href="#form-textarea">Textarea</a></li>
<li><a href="#form-notices">Notices</a></li>
</ul>

	<div id="form-example" class="tab-content">
	<form><div class="col_4">
	<label for="text1">Text Field</label>
	<input id="text1" type="text" />
	
	<label for="text2">Placeholder</label>
	<input id="text2" type="text" placeholder="Placeholder Text" />
	
	<label for="text3" class="disabled">Disabled Field</label>
	<input id="text3" type="text" disabled="disabled" />
	
	<label for="text4">Label with Right Hint <span class="right">A-Z, 0-9</span></label>
	<input id="text4" type="text" />
	
	<label for="text5">Label with Hint <span>A-Z, 0-9</span></label>
	<input id="text5" type="text" />
	
	<label for="text6" class="error">Text Field (Error)</label>
	<input id="text6" class="error" type="text" />
	</div>
	
	<div class="col_4">
	<label for="select1">Select Field</label>
	<select id="select1">
	<option value="0">-- Choose --</option>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	</select>
	
	<fieldset>
	<legend>Checkboxes</legend>
	<input type="checkbox" id="check1" /> <label for="check1" class="inline">Checkbox Field</label><br />
	<input type="checkbox" id="check2" /> <label for="check2" class="inline">Checkbox Field</label><br />
	<input type="checkbox" id="check3" /> <label for="check3" class="inline">Checkbox Field</label>
	</fieldset>
	
	<fieldset>
	<legend>Radios</legend>
	<input type="radio" name="radio" id="radio1" /> <label for="radio1" class="inline">Option1</label><br />
	<input type="radio" name="radio" id="radio2" /> <label for="radio2" class="inline">Option1</label><br />
	<input type="radio" name="radio" id="radio3" /> <label for="radio3" class="inline">Option1</label>
	</fieldset>
	
	<label for="file1">File Field</label>
	<input id="file1" type="file" />
	</div>
	
	<div class="col_4">
	<div class="notice error">This is an Error Notice</div>
	<div class="notice warning">This is a Warning Notice</div>
	<div class="notice success">This is a Success Notice</div>
	
	<label for="textarea1">TextArea</label>
	<textarea id="textarea1" placeholder="Placeholder Text"></textarea>
	
	<button type="submit">Submit</button>
	</div></form>
	</div>
	
	<div id="form-textfield" class="tab-content">
	<pre class="html">
	&lt;!-- Text Field --&gt;
	&lt;label for=&quot;text1&quot;&gt;Text Field&lt;/label&gt;
	&lt;input id=&quot;text1&quot; type=&quot;text&quot; /&gt;
	
	&lt;!-- Placeholder Text --&gt;
	&lt;label for=&quot;text2&quot;&gt;Placeholder&lt;/label&gt;
	&lt;input id=&quot;text2&quot; type=&quot;text&quot; placeholder=&quot;Placeholder Text&quot; /&gt;
	
	&lt;!-- Disabled Field --&gt;
	&lt;label for=&quot;text3&quot; class=&quot;disabled&quot;&gt;Disabled Field&lt;/label&gt;
	&lt;input id=&quot;text3&quot; type=&quot;text&quot; disabled=&quot;disabled&quot; /&gt;
	
	&lt;!-- Label with Right Hint --&gt;
	&lt;label for=&quot;text4&quot;&gt;Label with Right Hint &lt;span class=&quot;right&quot;&gt;A-Z, 0-9&lt;/span&gt;&lt;/label&gt;
	&lt;input id=&quot;text4&quot; type=&quot;text&quot; /&gt;
	
	&lt;!-- Label with Hint --&gt;
	&lt;label for=&quot;text5&quot;&gt;Label with Hint &lt;span&gt;A-Z, 0-9&lt;/span&gt;&lt;/label&gt;
	&lt;input id=&quot;text5&quot; type=&quot;text&quot; /&gt;
	
	&lt;!-- Text Field Error --&gt;
	&lt;label for=&quot;text6&quot; class=&quot;error&quot;&gt;Text Field (Error)&lt;/label&gt;
	&lt;input id=&quot;text6&quot; class=&quot;error&quot; type=&quot;text&quot; /&gt;</pre>
	</div>
	
	<div id="form-select" class="tab-content">
	<pre class="html">
	&lt;!-- Select --&gt;
	&lt;label for=&quot;select1&quot;&gt;Select Field&lt;/label&gt;
	&lt;select id=&quot;select1&quot;&gt;
	&lt;option value=&quot;0&quot;&gt;-- Choose --&lt;/option&gt;
	&lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt;
	&lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt;
	&lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt;
	&lt;/select&gt;</pre>
	</div>
	
	<div id="form-checkbox" class="tab-content">
	<pre class="html">
	&lt;!-- Checkbox --&gt;
	&lt;input type=&quot;checkbox&quot; id=&quot;check1&quot; /&gt;
	&lt;label for=&quot;check1&quot; class=&quot;inline&quot;&gt;Checkbox Field&lt;/label&gt;</pre>
	</div>
	
	<div id="form-radio" class="tab-content">
	<pre class="html">
	&lt;!-- Radio --&gt;
	&lt;input type=&quot;radio&quot; name=&quot;radio&quot; id=&quot;radio1&quot; /&gt;
	&lt;label for=&quot;radio1&quot; class=&quot;inline&quot;&gt;Option1&lt;/label&gt;</pre>
	</div>
	
	<div id="form-fieldset" class="tab-content">
	<pre class="html">
	&lt;!-- Fieldset --&gt;
	&lt;fieldset&gt;
	&lt;legend&gt;Checkboxes&lt;/legend&gt;
		&lt;!-- Form Fields Here --&gt;
	&lt;/fieldset&gt;</pre>
	</div>
	
	<div id="form-textarea" class="tab-content">
	<pre class="html">
	&lt;!-- Textarea --&gt;
	&lt;textarea id=&quot;textarea1&quot; placeholder=&quot;Placeholder Text&quot;&gt;&lt;/textarea&gt;</pre>
	</div>
	
	<div id="form-notices" class="tab-content">
	<pre class="html">
	&lt;!-- Error --&gt;
	&lt;div class=&quot;notice error&quot;&gt;This is an Error Notice&lt;/div&gt;
	
	&lt;!-- Warning --&gt;
	&lt;div class=&quot;notice warning&quot;&gt;This is a Warning Notice&lt;/div&gt;
	
	&lt;!-- Success --&gt;
	&lt;div class=&quot;notice success&quot;&gt;This is a Success Notice&lt;/div&gt;</pre>
	</div>


<!-- ===================================== START FOOTER ===================================== -->
<div class="clear"></div>
<div id="footer">
&copy; Copyright 2011–2012 All Rights Reserved. This website was built with <a href="http://www.99lime.com">HTML KickStart</a>
<a id="link-top" href="#top-of-page">Top</a>
</div>

</div><!-- END WRAP -->
</body></html>