<div class="mbf clearfix">
	<div class="grid_12 alpha">
		<div class="title">
			<h4> Accordion </h4>
		</div>
		<ul class="tt-accordion">
			<li class="sub-accordion">
				<div class="accordion-head">
					<div class="accordion-head-sign"></div>
					<p>Simply dummy text of the printing in this</p>
				</div>
				<div class="accordion-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
			</li>
			<!-- /accordion item -->
			<li class="sub-accordion">
				<div class="accordion-head">
					<div class="accordion-head-sign"></div>
					<p>Simple blockquote code in accordion content section</p>
				</div>
				<div class="accordion-content">
					<div class="blockquote">
						<div><i class="icon-quote-left icon-4x pull-left icon-muted"></i>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
					</div>
				</div>
			</li>
			<!-- /accordion item -->
			<li class="sub-accordion">
				<div class="accordion-head">
					<div class="accordion-head-sign"></div>
					<p>External Video in accordion content</p>
				</div>
				<div class="accordion-content">
					<iframe src="http://player.vimeo.com/video/4749536?title=1&amp;byline=1&amp;portrait=1" width="100%" height="300"></iframe>
				</div>
			</li>
			<!-- /accordion item -->
		</ul>
		<!-- /accordion -->
	</div>
	<!-- /grid6 alpha --><br>
<br>

	<div class="grid_12 omega">
		<div class="title">
			<h4> Toggle </h4>
		</div>
		<ul class="tt-toggle">
			<li class="sub-toggle">
				<div class="toggle-head">
					<div class="toggle-head-sign"></div>
					<p>Simply dummy text of the printing in this</p>
				</div>
				<div class="toggle-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
			</li>
			<!-- /toggle item -->
			<li class="sub-toggle">
				<div class="toggle-head">
					<div class="toggle-head-sign"></div>
					<p>Simple blockquote code in toggle content section</p>
				</div>
				<div class="toggle-content">
					<div class="blockquote">
						<div><i class="icon-quote-left icon-4x pull-left icon-muted"></i>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
					</div>
				</div>
			</li>
			<!-- /toggle item -->
			<li class="sub-toggle">
				<div class="toggle-head">
					<div class="toggle-head-sign"></div>
					<p>External Video in accordion content</p>
				</div>
				<div class="toggle-content">
					<iframe src="http://player.vimeo.com/video/4749536?title=1&amp;byline=1&amp;portrait=1" width="100%" height="300"></iframe>
				</div>
			</li>
			<!-- /toggle item -->
		</ul>
		<!-- /toggle -->
	</div>
	<!-- /grid6 omega -->
</div>
<!-- /mbf -->
<div class="mbf clearfix">
	<div class="title">
		<h4>Grid System</h4>
	</div>
	<div class="mbf clearfix"><span class="grid_12 tt toptip" title="class='grid_12'"> 1/1</span></div>
	<div class="mbf clearfix"><span class="grid_6 tt toptip" title="class='grid_6'"> 1/2 </span><span class="grid_6 tt toptip" title="class='grid_6'"> 1/2 </span></div>
	<div class="mbf clearfix"><span class="grid_4 tt toptip" title="class='grid_4'"> 1/3 </span><span class="grid_4 tt toptip" title="class='grid_4'"> 1/3 </span><span class="grid_4 tt toptip" title="class='grid_4'"> 1/3 </span></div>
	<div class="mbf clearfix"><span class="grid_3 tt toptip" title="class='grid_3'"> 1/4 </span><span class="grid_3 tt toptip" title="class='grid_3'"> 1/4 </span><span class="grid_3 tt toptip" title="class='grid_3'"> 1/4 </span><span class="grid_3 tt toptip" title="class='grid_3'"> 1/4 </span></div>
	<div class="mbf clearfix"><span class="grid_5 tt toptip" title="class='grid_5'"> 5/12 </span><span class="grid_7 tt toptip" title="class='grid_7'"> 7/12 </span></div>
	<div class="mbf clearfix"><span class="grid_4 tt toptip" title="class='grid_4'"> 1/3 </span><span class="grid_8 tt toptip" title="class='grid_8'"> 2/3 </span></div>
	<div class="mbf clearfix"><span class="grid_3 tt toptip" title="class='grid_3'"> 1/4 </span><span class="grid_9 tt toptip" title="class='grid_9'"> 3/4 </span></div>
	<div class="mbf clearfix"><span class="grid_2 tt toptip" title="class='grid_2'"> 2/12 </span><span class="grid_10 tt toptip" title="class='grid_10'"> 10/12 </span></div>
	<div class="mbt clearfix"><span class="grid_1 tt toptip" title="class='grid_1'"> 1/12 </span><span class="grid_11 tt toptip" title="class='grid_11'"> 11/12 </span></div>
</div>
<!-- /mbf -->
<div class="mbf clearfix">
	<div class="title">
		<h4>BlockQuotes</h4>
	</div>
	<div class="blockquote"> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words.</div>
</div>
<!-- /mbf -->
<div class="mbf clearfix">
	<div class="grid_12 alpha">
		<div class="title">
			<h4>Messages</h4>
		</div>
		<div class="notification-box notification-box-success"><p><i class="fa-check"></i>Your Account Activated Successfully.</p><a href="#" class="notification-close notification-close-success"><i class="fa-times"></i></a></div>
		<div class="notification-box notification-box-info"><p><i class="fa-flag"></i>Insert your information text here for box info.</p><a href="#" class="notification-close notification-close-info"><i class="fa-times"></i></a></div>
		<div class="notification-box notification-box-error"><p><i class="fa-power-off"></i>Error: This Input Required.</p><a href="#" class="notification-close notification-close-error"><i class="fa-times"></i></a></div>
		<div class="notification-box notification-box-warning"><p><i class="fa-exclamation-triangle"></i>Warning: Please Read All Terms.</p><a href="#" class="notification-close notification-close-warning"><i class="fa-times"></i></a></div>
	</div>
	<!-- /grid6 alpha -->
	<div class="grid_12 mbt omega">
		<div class="title">
			<h4> Buttons </h4>
		</div>
		<a href="" class="tbutton large"><span>Large Button</span></a>&nbsp;&nbsp;<a href="" class="tbutton medium"><span>Medium Button</span></a>&nbsp;&nbsp;<a href="" class="tbutton small"><span>Smal Button</span></a></div>
	<!-- /grid6 omega -->
	<div class="grid_6 omega">
		<div class="title">
			<h4> Video iFrame </h4>
		</div>
		<iframe src="http://www.youtube.com/embed/xv7ayM0mrls" width="100%" height="200"></iframe>
	</div>
	<!-- /grid6 omega -->
</div>
<!-- /mbf -->
<div class="mbf clearfix">
	<div class="grid_12 alpha">
		<div class="title">
			<h4>Tabs</h4>
		</div>
		<ul class="tabs">
			<li><a href="#t-1" class="active">Tab 1</a></li>
			<li><a href="#t-2">Tab 2</a></li>
			<li><a href="#t-3">Tab 3</a></li>
		</ul>
		<!-- tabs -->
		<ul class="tabs-content">
			<li id="t-1" class="active"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sem dui, molestie vitae ornare tincidunt, semper non metus. Nulla sagittis porttitor varius. Vestibulum eleifend, lorem sit amet gravida accumsan, nisi est tempor risus, non suscipit lectus nunc sit amet nunc. Pellentesque iaculis sapien at lacus vulputate sodales et eget quam. Etiam tristique bibendum leo, quis sagittis urna tempus non. </li>
			<!-- tab content -->
			<li id="t-2"> Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus aliquet. Duis mollis, est non commodo luctus. </li>
			<!-- tab content -->
			<li id="t-3"> Nulla sagittis porttitor varius. Vestibulum eleifend, lorem sit amet gravida accumsan, nisi est tempor risus, non suscipit lectus nunc sit amet nunc. Pellentesque iaculis sapien at lacus vulputate sodales et eget quam. Etiam tristique bibendum leo, quis sagittis urna tempus non. </li>
			<!-- tab content -->
		</ul>
		<!-- end tabs -->
	</div>
	<!-- /grid4 alpha -->
	<div class="grid_12 mbt omega">
		<div class="title">
			<h4> Table </h4>
		</div>
		<table class="table">
			<thead>
				<tr>
					<th scope="col">/</th>
					<th scope="col">HTML Files</th>
					<th scope="col">PHP Files</th>
					<th scope="col">PSD Files</th>
					<th scope="col">Animation Version</th>
					<th scope="col">More Colors</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Basic Package</td>
					<td><i class="fa-check"></i></td>
					<td><i class="fa-check"></i></td>
					<td><i class="fa-times"></i></td>
					<td><i class="fa-times"></i></td>
					<td><i class="fa-times"></i></td>
				</tr>
				<tr>
					<td>Developer Package</td>
					<td><i class="fa-check"></i></td>
					<td><i class="fa-check"></i></td>
					<td><i class="fa-check"></i></td>
					<td><i class="fa-times"></i></td>
					<td><i class="fa-times"></i></td>
				</tr>
				<tr>
					<td>Pro Package</td>
					<td><i class="fa-check"></i></td>
					<td><i class="fa-check"></i></td>
					<td><i class="fa-check"></i></td>
					<td><i class="fa-check"></i></td>
					<td><i class="fa-times"></i></td>
				</tr>
				<tr>
					<td>Premium Package</td>
					<td><i class="fa-check"></i></td>
					<td><i class="fa-check"></i></td>
					<td><i class="fa-check"></i></td>
					<td><i class="fa-check"></i></td>
					<td><i class="fa-check"></i></td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="6">Footer Note: Lorem ipsum dolor sit amet</td>
				</tr>
			</tfoot>
		</table>
	</div>
	<!-- /grid8 omega -->
</div>