<!doctype html>
<html>


<!-- Mirrored from www.eakroko.de/flat/components-elements.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 11 Jun 2016 05:19:17 GMT -->
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<!-- Apple devices fullscreen -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<!-- Apple devices fullscreen -->
	<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

	<title>FLAT - UI Elements</title>

	<!-- Bootstrap -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- jQuery UI -->
	<link rel="stylesheet" href="css/plugins/jquery-ui/smoothness/jquery-ui.html">
	<link rel="stylesheet" href="css/plugins/jquery-ui/smoothness/jquery.ui.theme.html">
	<!-- Notify -->
	<link rel="stylesheet" href="css/plugins/gritter/jquery.gritter.css">
	<!-- Theme CSS -->
	<link rel="stylesheet" href="css/style.css">
	<!-- Color CSS -->
	<link rel="stylesheet" href="css/themes.css">


	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>

	<!-- Nice Scroll -->
	<script src="js/plugins/nicescroll/jquery.nicescroll.min.js"></script>
	<!-- imagesLoaded -->
	<script src="js/plugins/imagesLoaded/jquery.imagesloaded.min.js"></script>
	<!-- jQuery UI -->
	<script src="js/plugins/jquery-ui/jquery.ui.core.min.html"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.widget.min.html"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.mouse.min.html"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.resizable.min.html"></script>
	<script src="js/plugins/jquery-ui/jquery.ui.sortable.min.html"></script>
	<!-- slimScroll -->
	<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Bootbox -->
	<script src="js/plugins/bootbox/jquery.bootbox.js"></script>
	<!-- Notify -->
	<script src="js/plugins/gritter/jquery.gritter.min.js"></script>

	<!-- Theme framework -->
	<script src="js/eakroko.min.js"></script>
	<!-- Theme scripts -->
	<script src="js/application.min.js"></script>
	<!-- Just for demonstration -->
	<script src="js/demonstration.min.js"></script>

	<!--[if lte IE 9]>
		<script src="js/plugins/placeholder/jquery.placeholder.min.js"></script>
		<script>
			$(document).ready(function() {
				$('input, textarea').placeholder();
			});
		</script>
		<![endif]-->

	<!-- Favicon -->
	<link rel="shortcut icon" href="img/favicon.ico" />
	<!-- Apple devices Homescreen icon -->
	<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />

</head>

<body>
	<div id="modal-1" class="modal fade" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">Modal title</h4>
				</div>
				<!-- /.modal-header -->
				<div class="modal-body">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, laudantium, inventore, impedit, excepturi odio quia aut sapiente delectus velit quaerat nesciunt ipsa laboriosam quam placeat ad atque hic vel quibusdam nisi reprehenderit numquam voluptatum
						consectetur modi sint saepe totam tenetur necessitatibus minima provident cumque rem aliquid cupiditate libero omnis tempora.
					</p>
				</div>
				<!-- /.modal-body -->
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
				<!-- /.modal-footer -->
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /#modal-1.modal fade -->
	<div id="navigation">
		<div class="container-fluid">
			<a href="#" id="brand">FLAT</a>
			<a href="#" class="toggle-nav" rel="tooltip" data-placement="bottom" title="Toggle navigation">
				<i class="fa fa-bars"></i>
			</a>
			<ul class='main-nav'>
				<li>
					<a href="index-2.html">
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Forms</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="forms-basic.html">Basic forms</a>
						</li>
						<li>
							<a href="forms-extended.html">Extended forms</a>
						</li>
						<li>
							<a href="forms-validation.html">Validation</a>
						</li>
						<li>
							<a href="forms-wizard.html">Wizard</a>
						</li>
					</ul>
				</li>
				<li class='active'>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Components</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="components-timeline.html">Timeline</a>
						</li>
						<li>
							<a href="components-pagestatistics.html">Page statistics</a>
						</li>
						<li>
							<a href="components-sidebarwidgets.html">Sidebar widgets</a>
						</li>
						<li>
							<a href="components-messages.html">Messages &amp; Chat</a>
						</li>
						<li>
							<a href="components-gallery.html">Gallery &amp; Thumbs</a>
						</li>
						<li>
							<a href="components-tiles.html">Tiles</a>
						</li>
						<li>
							<a href="components-icons.html">Icons &amp; Buttons</a>
						</li>
						<li class='active'>
							<a href="components-elements.html">UI elements</a>
						</li>
						<li>
							<a href="components-typography.html">Typography</a>
						</li>
						<li>
							<a href="components-bootstrap.html">Bootstrap elements</a>
						</li>
						<li>
							<a href="components-grid.html">Grid</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Tables</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="tables-basic.html">Basic tables</a>
						</li>
						<li>
							<a href="tables-dynamic.html">Dynamic tables</a>
						</li>
						<li>
							<a href="tables-large.html">Large tables</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Plugins</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="plugins-charts.html">Charts</a>
						</li>
						<li>
							<a href="plugins-calendar.html">Calendar</a>
						</li>
						<li>
							<a href="plugins-filemanager.html">File manager</a>
						</li>
						<li>
							<a href="plugins-filetrees.html">File trees</a>
						</li>
						<li>
							<a href="plugins-elements.html">Editable elements</a>
						</li>
						<li>
							<a href="plugins-maps.html">Maps</a>
						</li>
						<li>
							<a href="plugins-dragdrop.html">Drag &amp; Drop widgets</a>
						</li>

					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Pages</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="more-error.html">Error pages</a>
						</li>
						<li class='dropdown-submenu'>
							<a href="#" data-toggle="dropdown" class='dropdown-toggle'>Shop</a>
							<ul class="dropdown-menu">
								<li>
									<a href="more-shop-list.html">List view</a>
								</li>
								<li>
									<a href="more-shop-product.html">Product view</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="more-pricing.html">Pricing tables</a>
						</li>
						<li>
							<a href="more-faq.html">FAQ</a>
						</li>
						<li>
							<a href="more-invoice.html">Invoice</a>
						</li>
						<li>
							<a href="more-userprofile.html">User profile</a>
						</li>
						<li>
							<a href="more-searchresults.html">Search results</a>
						</li>
						<li>
							<a href="more-login.html">Login</a>
						</li>
						<li>
							<a href="more-locked.html">Lock screen</a>
						</li>
						<li>
							<a href="more-email.html">Email templates</a>
						</li>
						<li>
							<a href="more-blank.html">Blank page</a>
						</li>
						<li class='dropdown-submenu'>
							<a href="#" data-toggle="dropdown" class='dropdown-toggle'>Blog</a>
							<ul class="dropdown-menu">
								<li>
									<a href="more-blog-list.html">List big image</a>
								</li>
								<li>
									<a href="more-blog-list-small.html">List small image</a>
								</li>
								<li>
									<a href="more-blog-post.html">Post</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>
					<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
						<span>Layouts</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li>
							<a href="layouts-sidebar-hidden.html">Default hidden sidebar</a>
						</li>
						<li>
							<a href="layouts-sidebar-right.html">Sidebar right side</a>
						</li>
						<li>
							<a href="layouts-color.html">Different default color</a>
						</li>
						<li>
							<a href="layouts-fixed.html">Fixed layout</a>
						</li>
						<li>
							<a href="layouts-fixed-topside.html">Fixed topbar and sidebar</a>
						</li>
						<li class='dropdown-submenu'>
							<a href="#">Mobile sidebar</a>
							<ul class="dropdown-menu">
								<li>
									<a href="layouts-mobile-slide.html">Slide</a>
								</li>
								<li>
									<a href="layouts-mobile-button.html">Button</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="layouts-footer.html">Footer</a>
						</li>
					</ul>
				</li>
			</ul>
			<div class="user">
				<ul class="icon-nav">
					<li class='dropdown'>
						<a href="#" class='dropdown-toggle' data-toggle="dropdown">
							<i class="fa fa-envelope"></i>
							<span class="label label-lightred">4</span>
						</a>
						<ul class="dropdown-menu pull-right message-ul">
							<li>
								<a href="#">
									<img src="img/demo/user-1.jpg" alt="">
									<div class="details">
										<div class="name">Jane Doe</div>
										<div class="message">
											Lorem ipsum Commodo quis nisi ...
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/demo/user-2.jpg" alt="">
									<div class="details">
										<div class="name">John Doedoe</div>
										<div class="message">
											Ut ad laboris est anim ut ...
										</div>
									</div>
									<div class="count">
										<i class="fa fa-comment"></i>
										<span>3</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/demo/user-3.jpg" alt="">
									<div class="details">
										<div class="name">Bob Doe</div>
										<div class="message">
											Excepteur Duis magna dolor!
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="components-messages.html" class='more-messages'>Go to Message center
									<i class="fa fa-arrow-right"></i>
								</a>
							</li>
						</ul>
					</li>

					<li class="dropdown sett">
						<a href="#" class='dropdown-toggle' data-toggle="dropdown">
							<i class="fa fa-cog"></i>
						</a>
						<ul class="dropdown-menu pull-right theme-settings">
							<li>
								<span>Layout-width</span>
								<div class="version-toggle">
									<a href="#" class='set-fixed'>Fixed</a>
									<a href="#" class="active set-fluid">Fluid</a>
								</div>
							</li>
							<li>
								<span>Topbar</span>
								<div class="topbar-toggle">
									<a href="#" class='set-topbar-fixed'>Fixed</a>
									<a href="#" class="active set-topbar-default">Default</a>
								</div>
							</li>
							<li>
								<span>Sidebar</span>
								<div class="sidebar-toggle">
									<a href="#" class='set-sidebar-fixed'>Fixed</a>
									<a href="#" class="active set-sidebar-default">Default</a>
								</div>
							</li>
						</ul>
					</li>
					<li class='dropdown colo'>
						<a href="#" class='dropdown-toggle' data-toggle="dropdown">
							<i class="fa fa-tint"></i>
						</a>
						<ul class="dropdown-menu pull-right theme-colors">
							<li class="subtitle">
								Predefined colors
							</li>
							<li>
								<span class='red'></span>
								<span class='orange'></span>
								<span class='green'></span>
								<span class="brown"></span>
								<span class="blue"></span>
								<span class='lime'></span>
								<span class="teal"></span>
								<span class="purple"></span>
								<span class="pink"></span>
								<span class="magenta"></span>
								<span class="grey"></span>
								<span class="darkblue"></span>
								<span class="lightred"></span>
								<span class="lightgrey"></span>
								<span class="satblue"></span>
								<span class="satgreen"></span>
							</li>
						</ul>
					</li>
					<li class='dropdown language-select'>
						<a href="#" class='dropdown-toggle' data-toggle="dropdown">
							<img src="img/demo/flags/us.gif" alt="">
							<span>US</span>
						</a>
						<ul class="dropdown-menu pull-right">
							<li>
								<a href="#">
									<img src="img/demo/flags/br.gif" alt="">
									<span>Brasil</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/demo/flags/de.gif" alt="">
									<span>Deutschland</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/demo/flags/es.gif" alt="">
									<span>España</span>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="img/demo/flags/fr.gif" alt="">
									<span>France</span>
								</a>
							</li>
						</ul>
					</li>
				</ul>
				<div class="dropdown">
					<a href="#" class='dropdown-toggle' data-toggle="dropdown">John Doe
						<img src="img/demo/user-avatar.jpg" alt="">
					</a>
					<ul class="dropdown-menu pull-right">
						<li>
							<a href="more-userprofile.html">Edit profile</a>
						</li>
						<li>
							<a href="#">Account settings</a>
						</li>
						<li>
							<a href="more-login.html">Sign out</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid" id="content">
		<div id="left">
			<form action="http://www.eakroko.de/flat/search-results.html" method="GET" class='search-form'>
				<div class="search-pane">
					<input type="text" name="search" placeholder="Search here...">
					<button type="submit">
						<i class="fa fa-search"></i>
					</button>
				</div>
			</form>
			<div class="subnav">
				<div class="subnav-title">
					<a href="#" class='toggle-subnav'>
						<i class="fa fa-angle-down"></i>
						<span>Content</span>
					</a>
				</div>
				<ul class="subnav-menu">
					<li class='dropdown'>
						<a href="#" data-toggle="dropdown">Articles</a>
						<ul class="dropdown-menu">
							<li>
								<a href="#">Action #1</a>
							</li>
							<li>
								<a href="#">Antoher Link</a>
							</li>
							<li class='dropdown-submenu'>
								<a href="#" data-toggle="dropdown" class='dropdown-toggle'>Go to level 3</a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">This is level 3</a>
									</li>
									<li>
										<a href="#">Unlimited levels</a>
									</li>
									<li>
										<a href="#">Easy to use</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">News</a>
					</li>
					<li>
						<a href="#">Pages</a>
					</li>
					<li>
						<a href="#">Comments</a>
					</li>
				</ul>
			</div>
			<div class="subnav">
				<div class="subnav-title">
					<a href="#" class='toggle-subnav'>
						<i class="fa fa-angle-down"></i>
						<span>Plugins</span>
					</a>
				</div>
				<ul class="subnav-menu">
					<li>
						<a href="#">Cache manager</a>
					</li>
					<li class='dropdown'>
						<a href="#" data-toggle="dropdown">Import manager</a>
						<ul class="dropdown-menu">
							<li>
								<a href="#">Action #1</a>
							</li>
							<li>
								<a href="#">Antoher Link</a>
							</li>
							<li class='dropdown-submenu'>
								<a href="#" data-toggle="dropdown" class='dropdown-toggle'>Go to level 3</a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">This is level 3</a>
									</li>
									<li>
										<a href="#">Unlimited levels</a>
									</li>
									<li>
										<a href="#">Easy to use</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Contact form generator</a>
					</li>
					<li>
						<a href="#">SEO optimization</a>
					</li>
				</ul>
			</div>
			<div class="subnav">
				<div class="subnav-title">
					<a href="#" class='toggle-subnav'>
						<i class="fa fa-angle-down"></i>
						<span>Settings</span>
					</a>
				</div>
				<ul class="subnav-menu">
					<li>
						<a href="#">Theme settings</a>
					</li>
					<li class='dropdown'>
						<a href="#" data-toggle="dropdown">Page settings</a>
						<ul class="dropdown-menu">
							<li>
								<a href="#">Action #1</a>
							</li>
							<li>
								<a href="#">Antoher Link</a>
							</li>
							<li class='dropdown-submenu'>
								<a href="#" data-toggle="dropdown" class='dropdown-toggle'>Go to level 3</a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">This is level 3</a>
									</li>
									<li>
										<a href="#">Unlimited levels</a>
									</li>
									<li>
										<a href="#">Easy to use</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Security settings</a>
					</li>
				</ul>
			</div>
			<div class="subnav subnav-hidden">
				<div class="subnav-title">
					<a href="#" class='toggle-subnav'>
						<i class="fa fa-angle-right"></i>
						<span>Default hidden</span>
					</a>
				</div>
				<ul class="subnav-menu">
					<li>
						<a href="#">Menu</a>
					</li>
					<li class='dropdown'>
						<a href="#" data-toggle="dropdown">With submenu</a>
						<ul class="dropdown-menu">
							<li>
								<a href="#">Action #1</a>
							</li>
							<li>
								<a href="#">Antoher Link</a>
							</li>
							<li class='dropdown-submenu'>
								<a href="#" data-toggle="dropdown" class='dropdown-toggle'>More stuff</a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">This is level 3</a>
									</li>
									<li>
										<a href="#">Easy to use</a>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Security settings</a>
					</li>
				</ul>
			</div>
		</div>
		<div id="main">
			<div class="container-fluid">
				<div class="page-header">
					<div class="pull-left">
						<h1>UI Elements</h1>
					</div>
					<div class="pull-right">
						<ul class="minitiles">
							<li class='grey'>
								<a href="#">
									<i class="fa fa-cogs"></i>
								</a>
							</li>
							<li class='lightgrey'>
								<a href="#">
									<i class="fa fa-globe"></i>
								</a>
							</li>
						</ul>
						<ul class="stats">
							<li class='satgreen'>
								<i class="fa fa-money"></i>
								<div class="details">
									<span class="big">$324,12</span>
									<span>Balance</span>
								</div>
							</li>
							<li class='lightred'>
								<i class="fa fa-calendar"></i>
								<div class="details">
									<span class="big">February 22, 2013</span>
									<span>Wednesday, 13:56</span>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="breadcrumbs">
					<ul>
						<li>
							<a href="more-login.html">Home</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li>
							<a href="components-messages.html">Components</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li>
							<a href="components-elements.html">UI elements</a>
						</li>
					</ul>
					<div class="close-bread">
						<a href="#">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6">
						<div class="box">
							<div class="box-title">
								<h3>
									<i class="fa fa-bars"></i>
									Basic widget
								</h3>
								<div class="actions">
									<a href="#" class="btn btn-mini content-refresh">
										<i class="fa fa-refresh"></i>
									</a>
									<a href="#" class="btn btn-mini content-remove">
										<i class="fa fa-times"></i>
									</a>
									<a href="#" class="btn btn-mini content-slideUp">
										<i class="fa fa-angle-down"></i>
									</a>
								</div>
							</div>
							<div class="box-content">
								Lorem ipsum velit dolor veniam occaecat do eiusmod velit cillum sit. Lorem ipsum laborum sed Duis in in dolor in exercitation irure. Lorem ipsum ad proident ut in mollit id ullamco Ut. Lorem ipsum magna eiusmod in anim deserunt adipisicing. Lorem ipsum
								ex dolore sint consectetur eu non mollit Ut dolore aliquip anim. Lorem ipsum labore ad Ut Duis Excepteur consequat non. Lorem ipsum ut quis ea dolore esse Duis cillum amet eu officia nostrud. Lorem ipsum dolor aliquip cillum ea ut id pariatur
								ad aute mollit in qui. Lorem ipsum magna ut consectetur incididunt sed consectetur ut ullamco dolore Excepteur deserunt. Lorem ipsum mollit ad Excepteur dolore non dolor occaecat reprehenderit eiusmod mollit ut Excepteur dolore dolor ex. Lorem
								ipsum nisi exercitation cillum velit tempor aliqua nisi non. Lorem ipsum enim magna adipisicing do adipisicing aliquip ex pariatur dolore proident fugiat mollit dolor.
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="box box-color">
							<div class="box-title">
								<h3>
									<i class="fa fa-bars"></i>
									Colored widget
								</h3>
								<ul class="tabs">
									<li class="active">
										<a href="#t7" data-toggle="tab">Sample tab #1</a>
									</li>
									<li>
										<a href="#t8" data-toggle="tab">Sample tab #2</a>
									</li>
									<li>
										<a href="#t9" data-toggle="tab">Third tab</a>
									</li>
								</ul>
							</div>
							<div class="box-content">
								<div class="tab-content">
									<div class="tab-pane active" id="t7">
										<h4>First tab</h4>
										Lorem ipsum anim ad culpa ex id anim Excepteur esse et do cillum dolor in dolore cillum. Lorem ipsum Ut est consequat pariatur sint ut incididunt nisi dolore occaecat.
									</div>
									<div class="tab-pane" id="t8">
										<h4>Second tab</h4>
										Lorem ipsum ad proident amet anim voluptate ea. Lorem ipsum voluptate et ex esse mollit labore aliquip culpa dolore culpa anim cillum nulla ut sunt. Lorem ipsum veniam sunt voluptate elit minim incididunt occaecat aute ut ut sunt laboris. Lorem ipsum
										cupidatat labore elit sit in aliqua nostrud adipisicing minim et mollit sunt Ut cupidatat laboris. Lorem ipsum sunt ut labore nostrud ut aliqua dolor sint cupidatat sit Duis in culpa consectetur exercitation. Lorem ipsum sunt anim reprehenderit
										elit minim nulla ut.
									</div>
									<div class="tab-pane" id="t9">
										<h4>Another tab</h4>
										Lorem ipsum commodo dolor sit in sint anim ad ut non et. Lorem ipsum cillum ex sunt ea irure Ut dolore in labore officia nostrud in anim culpa sit esse. Lorem ipsum elit Duis magna et voluptate Duis non pariatur esse laboris nisi laborum nulla. Lorem
										ipsum et tempor ea ad in id consectetur incididunt velit Excepteur officia. Lorem ipsum non consectetur Excepteur commodo aute anim sunt. Lorem ipsum pariatur esse nulla mollit Duis ex. Lorem ipsum cillum sit in ad consequat in ad enim incididunt
										ea laborum pariatur Excepteur aliqua nostrud ut. Lorem ipsum et magna laboris reprehenderit mollit reprehenderit aute Duis aliquip officia nulla. Lorem ipsum dolor Ut dolore in laborum elit dolore quis mollit ut sit Excepteur aute. Lorem ipsum
										quis et eiusmod in irure tempor ea labore cillum dolore labore eiusmod in occaecat qui ea. Lorem ipsum dolor fugiat deserunt incididunt eiusmod sunt magna reprehenderit sed enim ut cillum. Lorem ipsum irure pariatur exercitation sunt eiusmod
										dolore Ut do ut ut minim. Lorem ipsum do ea pariatur in anim deserunt Excepteur nisi culpa nisi aliquip culpa veniam ut non.
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">

					<div class="col-sm-6">
						<div class="box box-color green box-small box-bordered">
							<div class="box-title">
								<h3>
									<i class="fa fa-bars"></i>
									Small widget
								</h3>
								<div class="actions">
									<a href="#" class="btn btn-mini content-refresh">
										<i class="fa fa-refresh"></i>
									</a>
									<a href="#" class="btn btn-mini content-remove">
										<i class="fa fa-times"></i>
									</a>
									<a href="#" class="btn btn-mini content-slideUp">
										<i class="fa fa-angle-down"></i>
									</a>
								</div>
							</div>
							<div class="box-content">
								Lorem ipsum velit dolor veniam occaecat do eiusmod velit cillum sit. Lorem ipsum laborum sed Duis in in dolor in exercitation irure. Lorem ipsum ad proident ut in mollit id ullamco Ut. Lorem ipsum magna eiusmod in anim deserunt adipisicing. Lorem ipsum
								ex dolore sint consectetur eu non mollit Ut dolore aliquip anim. Lorem ipsum labore ad Ut Duis Excepteur consequat non. Lorem ipsum ut quis ea dolore esse Duis cillum amet eu officia nostrud. Lorem ipsum dolor aliquip cillum ea ut id pariatur
								ad aute mollit in qui. Lorem ipsum magna ut consectetur incididunt sed consectetur ut ullamco dolore Excepteur deserunt. Lorem ipsum mollit ad Excepteur dolore non dolor occaecat reprehenderit eiusmod mollit ut Excepteur dolore dolor ex. Lorem
								ipsum nisi exercitation cillum velit tempor aliqua nisi non. Lorem ipsum enim magna adipisicing do adipisicing aliquip ex pariatur dolore proident fugiat mollit dolor.
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="box box-color orange box-condensed box-bordered">
							<div class="box-title">
								<h3>
									<i class="fa fa-bars"></i>
									Condensed widget
								</h3>
								<div class="actions">
									<a href="#" class="btn btn-mini content-refresh">
										<i class="fa fa-refresh"></i>
									</a>
									<a href="#" class="btn btn-mini content-remove">
										<i class="fa fa-times"></i>
									</a>
									<a href="#" class="btn btn-mini content-slideUp">
										<i class="fa fa-angle-down"></i>
									</a>
								</div>
							</div>
							<div class="box-content">
								Lorem ipsum Occaecat ut Duis sint anim proident ullamco do deserunt. Lorem ipsum Amet quis culpa qui irure cillum ex officia. Lorem ipsum Dolore nisi quis Duis commodo sit voluptate dolore. Lorem ipsum Quis ut velit cupidatat est anim cupidatat. Lorem
								ipsum Sint laborum eiusmod id ut sunt pariatur adipisicing sint veniam id ea. Lorem ipsum Cillum dolore elit officia mollit consectetur non dolore in dolore veniam quis Ut. Lorem ipsum In consequat Ut esse nisi adipisicing non ut elit. Lorem ipsum
								Voluptate ut laboris adipisicing eiusmod ad deserunt pariatur culpa. Lorem ipsum Magna officia cillum consectetur Excepteur nostrud sint aute in Excepteur sit et. Lorem ipsum In do dolor sed reprehenderit esse aliqua Ut do.
							</div>
						</div>
					</div>

				</div>
				<div class="row">
					<div class="col-sm-6">
						<div class="box box-bordered">
							<div class="box-title">
								<h3>
									<i class="fa fa-bars"></i>
									Bordered widget
								</h3>
								<div class="actions">
									<a href="#" class="btn btn-mini content-refresh">
										<i class="fa fa-refresh"></i>
									</a>
									<a href="#" class="btn btn-mini content-remove">
										<i class="fa fa-times"></i>
									</a>
									<a href="#" class="btn btn-mini content-slideUp">
										<i class="fa fa-angle-down"></i>
									</a>
								</div>
							</div>
							<div class="box-content">
								Lorem ipsum velit dolor veniam occaecat do eiusmod velit cillum sit. Lorem ipsum laborum sed Duis in in dolor in exercitation irure. Lorem ipsum ad proident ut in mollit id ullamco Ut. Lorem ipsum magna eiusmod in anim deserunt adipisicing. Lorem ipsum
								ex dolore sint consectetur eu non mollit Ut dolore aliquip anim. Lorem ipsum labore ad Ut Duis Excepteur consequat non. Lorem ipsum ut quis ea dolore esse Duis cillum amet eu officia nostrud. Lorem ipsum dolor aliquip cillum ea ut id pariatur
								ad aute mollit in qui. Lorem ipsum magna ut consectetur incididunt sed consectetur ut ullamco dolore Excepteur deserunt. Lorem ipsum mollit ad Excepteur dolore non dolor occaecat reprehenderit eiusmod mollit ut Excepteur dolore dolor ex. Lorem
								ipsum nisi exercitation cillum velit tempor aliqua nisi non. Lorem ipsum enim magna adipisicing do adipisicing aliquip ex pariatur dolore proident fugiat mollit dolor.
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="box box-color box-bordered">
							<div class="box-title">
								<h3>
									<i class="fa fa-bars"></i>
									Bordered &amp; Colored
								</h3>
								<div class="actions">
									<a href="#" class="btn btn-mini content-refresh">
										<i class="fa fa-refresh"></i>
									</a>
									<a href="#" class="btn btn-mini content-remove">
										<i class="fa fa-times"></i>
									</a>
									<a href="#" class="btn btn-mini content-slideUp">
										<i class="fa fa-angle-down"></i>
									</a>
								</div>
							</div>
							<div class="box-content">
								Lorem ipsum ut in consectetur non sunt laboris minim tempor. Lorem ipsum Duis occaecat labore eu reprehenderit tempor nisi ea. Lorem ipsum adipisicing fugiat dolor voluptate aliquip id ut commodo magna dolor eu aute dolor in velit minim. Lorem ipsum mollit
								nostrud aliqua ut culpa dolor. Lorem ipsum commodo consectetur aute ullamco Duis nisi quis cupidatat. Lorem ipsum incididunt amet dolor voluptate est irure. Lorem ipsum magna amet anim aliquip aute sit voluptate minim enim magna.
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6">
						<div class="box box-bordered">
							<div class="box-title">
								<h3>
									<i class="fa fa-bars"></i>
									Tabs
								</h3>
								<ul class="tabs">
									<li class="active">
										<a href="#t1" data-toggle="tab">Sample tab #1</a>
									</li>
									<li>
										<a href="#t2" data-toggle="tab">Sample tab #2</a>
									</li>
									<li>
										<a href="#t3" data-toggle="tab">Third tab</a>
									</li>
								</ul>
							</div>
							<div class="box-content">
								<div class="tab-content">
									<div class="tab-pane active" id="t1">
										<h4>First tab</h4>
										Lorem ipsum anim ad culpa ex id anim Excepteur esse et do cillum dolor in dolore cillum. Lorem ipsum Ut est consequat pariatur sint ut incididunt nisi dolore occaecat.
									</div>
									<div class="tab-pane" id="t2">
										<h4>Second tab</h4>
										Lorem ipsum ad proident amet anim voluptate ea. Lorem ipsum voluptate et ex esse mollit labore aliquip culpa dolore culpa anim cillum nulla ut sunt. Lorem ipsum veniam sunt voluptate elit minim incididunt occaecat aute ut ut sunt laboris. Lorem ipsum
										cupidatat labore elit sit in aliqua nostrud adipisicing minim et mollit sunt Ut cupidatat laboris. Lorem ipsum sunt ut labore nostrud ut aliqua dolor sint cupidatat sit Duis in culpa consectetur exercitation. Lorem ipsum sunt anim reprehenderit
										elit minim nulla ut.
									</div>
									<div class="tab-pane" id="t3">
										<h4>Another tab</h4>
										Lorem ipsum commodo dolor sit in sint anim ad ut non et. Lorem ipsum cillum ex sunt ea irure Ut dolore in labore officia nostrud in anim culpa sit esse. Lorem ipsum elit Duis magna et voluptate Duis non pariatur esse laboris nisi laborum nulla. Lorem
										ipsum et tempor ea ad in id consectetur incididunt velit Excepteur officia. Lorem ipsum non consectetur Excepteur commodo aute anim sunt. Lorem ipsum pariatur esse nulla mollit Duis ex. Lorem ipsum cillum sit in ad consequat in ad enim incididunt
										ea laborum pariatur Excepteur aliqua nostrud ut. Lorem ipsum et magna laboris reprehenderit mollit reprehenderit aute Duis aliquip officia nulla. Lorem ipsum dolor Ut dolore in laborum elit dolore quis mollit ut sit Excepteur aute. Lorem ipsum
										quis et eiusmod in irure tempor ea labore cillum dolore labore eiusmod in occaecat qui ea. Lorem ipsum dolor fugiat deserunt incididunt eiusmod sunt magna reprehenderit sed enim ut cillum. Lorem ipsum irure pariatur exercitation sunt eiusmod
										dolore Ut do ut ut minim. Lorem ipsum do ea pariatur in anim deserunt Excepteur nisi culpa nisi aliquip culpa veniam ut non.
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="box box-bordered box-color satblue">
							<div class="box-title">
								<h3>
									<i class="fa fa-bars"></i>Inline tabs</h3>
							</div>
							<div class="box-content nopadding">
								<ul class="tabs tabs-inline tabs-top">
									<li class='active'>
										<a href="#first11" data-toggle='tab'>
											<i class="fa fa-inbox"></i>Inbox</a>
									</li>
									<li>
										<a href="#second22" data-toggle='tab'>
											<i class="fa fa-share"></i>Sent</a>
									</li>
									<li>
										<a href="#thirds3322" data-toggle='tab'>
											<i class="fa fa-tag"></i>Important</a>
									</li>
									<li>
										<a href="#thirds33" data-toggle='tab'>
											<i class="fa fa-trash-o"></i>Deleted</a>
									</li>
								</ul>
								<div class="tab-content padding tab-content-inline tab-content-bottom">
									<div class="tab-pane active" id="first11">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum voluptatibus velit tempora numquam ipsa consequuntur esse et dolores aliquam sit sunt illo recusandae amet officiis dolorem debitis facilis! Quia dolore facere commodi numquam id quo aperiam
										inventore ratione reiciendis in unde sequi soluta. Obcaecati hic molestias deleniti aliquid optio fugiat repellat ab modi maiores minus eius quasi exercitationem officia reiciendis molestiae in dignissimos aspernatur eveniet voluptas consequuntur
										corporis. Magni itaque quod doloremque quas ad incidunt accusamus libero. Id praesentium veniam beatae est in excepturi atque consequuntur odio! Iste maiores exercitationem temporibus optio nostrum doloremque commodi vero accusamus dolorem aut
										voluptatem tempora maxime tenetur labore nesciunt quis fugit aliquid amet quasi expedita sed delectus voluptatum deserunt illum ad provident suscipit ex consequatur repellat similique qui nemo accusantium distinctio eveniet porro animi obcaecati
										voluptates quo consequuntur dolores saepe sit. Maxime numquam earum quidem iure a at temporibus minima natus? Impedit quo architecto nobis deserunt cupiditate ex provident consectetur! Obcaecati corrupti tempore adipisci voluptatum vitae perferendis
										quidem soluta a officia possimus modi nobis velit facere repellendus quia fugiat assumenda? Non magni at nesciunt officia perferendis fuga inventore quis veritatis voluptas laudantium aliquid iusto omnis eaque vitae commodi repellat voluptatibus
										cupiditate minus ut a.
									</div>
									<div class="tab-pane" id="second22">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto vel labore sed odio laudantium in eum aliquid reiciendis blanditiis consequatur excepturi dicta quisquam soluta quis neque nostrum expedita temporibus illum aliquam voluptatibus a cumque
										sit nulla et consectetur ex maiores sequi culpa suscipit. Voluptate quae id consequatur consequuntur exercitationem cumque beatae obcaecati laudantium? Ea tenetur animi itaque eos aperiam molestiae reprehenderit eaque perferendis iusto beatae
										sapiente fuga ex ab fugit excepturi nesciunt blanditiis nostrum ipsa. Facere repellendus tempore deleniti neque nihil commodi nemo recusandae eveniet error eligendi tenetur quia et consequuntur cupiditate facilis esse aspernatur praesentium
										reprehenderit dolorum accusantium ipsum cum voluptas quisquam ea atque aliquid omnis at quam magnam rem cumque repellat maxime mollitia nulla architecto sequi saepe veritatis optio amet culpa consectetur ducimus sapiente doloribus corporis odit
										adipisci. Commodi ab culpa accusamus maxime amet dolore at necessitatibus fugit beatae id asperiores doloribus perspiciatis expedita quisquam itaque iusto eos ad quibusdam rem fuga ipsum ut quasi. Unde explicabo quae quod saepe maxime nulla
										ut. Aperiam possimus repellendus deleniti quasi quaerat aliquam veniam numquam doloremque sequi perspiciatis eligendi provident nam voluptates nihil earum saepe maxime mollitia maiores porro animi nulla odit sapiente atque totam illo! Accusantium
										quis corporis omnis et.
									</div>
									<div class="tab-pane" id="thirds3322">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque ipsum ab odio accusamus similique dicta ipsam dolor magni nemo? Laudantium numquam consectetur maiores quaerat totam cupiditate error repellendus eos quibusdam dolore ipsum sequi illo blanditiis
										voluptatibus veniam dicta alias tempore consequuntur reprehenderit dignissimos iste sit perferendis possimus quisquam id voluptatum explicabo ut ad accusamus neque. Commodi ipsam quia aperiam nisi id unde sapiente magnam reiciendis voluptate
										placeat in optio consequuntur culpa magni repudiandae veniam aut. Magni sed asperiores omnis error nemo cum minima illum rerum assumenda ipsa excepturi odit laborum doloremque iure temporibus consectetur in culpa libero iusto repellendus. Culpa
										perspiciatis nesciunt explicabo officiis beatae ipsam qui odio architecto asperiores ad amet aspernatur veniam ex voluptates cumque expedita reiciendis nobis incidunt harum praesentium a totam ut cum corrupti quia rem provident delectus fuga
										deserunt itaque aut fugiat veritatis necessitatibus inventore nisi enim aliquid quibusdam! Nihil ratione laboriosam accusamus. Iure sapiente iste odit voluptas sit reiciendis. Cum voluptatibus quia cupiditate cumque eveniet mollitia unde adipisci
										vel itaque ipsa est iste ducimus sed consequuntur ratione eaque voluptates et odit quod nemo quis aut repudiandae ipsum nostrum deserunt! Excepturi cum eos ut labore debitis facilis ipsum! Fugit eos dicta amet neque qui deserunt!
									</div>
									<div class="tab-pane" id="thirds33">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem tempore accusamus officiis et nihil qui ea voluptatem itaque enim obcaecati iure distinctio quam molestiae deleniti iste necessitatibus dolorem quos rerum inventore suscipit! Temporibus suscipit
										excepturi molestias harum tempora nihil sed placeat atque nobis a minima sit id deserunt expedita ex! Tempore incidunt animi iste vitae dignissimos adipisci nisi impedit doloribus blanditiis unde nobis totam laboriosam maxime in quam repudiandae
										eos atque illum. Eaque facilis voluptates architecto suscipit sed dolor possimus earum molestiae ratione porro necessitatibus nihil sint recusandae optio eligendi ipsum maiores cum impedit dolores soluta ullam similique quas quod assumenda laudantium
										unde excepturi sequi hic aperiam tenetur explicabo laboriosam maxime perspiciatis placeat commodi illo dolorem corporis tempora voluptatem culpa nobis veritatis consequatur veniam mollitia ex animi qui omnis dolore et quae. Natus itaque quisquam
										repellat enim accusamus vel deserunt veniam vitae earum nostrum nulla maxime quas ipsa cum rem ut fugiat repellendus quis voluptates eligendi voluptatibus animi obcaecati esse illo incidunt? Amet repudiandae ducimus vel sit neque magni optio
										eveniet ut eum adipisci incidunt laudantium consectetur debitis veniam tempore temporibus maiores inventore! Libero hic quisquam nihil pariatur perspiciatis beatae non at commodi sint dolore tempora corporis explicabo quam saepe?
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6">
						<div class="box box-bordered">
							<div class="box-title">
								<ul class="tabs tabs-left">
									<li class="active">
										<a href="#t10" data-toggle="tab">Sample tab #1</a>
									</li>
									<li>
										<a href="#t11" data-toggle="tab">Sample tab #2</a>
									</li>
									<li>
										<a href="#t12" data-toggle="tab">Third tab</a>
									</li>
								</ul>
								<div class="actions">
									<a href="#" class="btn btn-mini content-refresh">
										<i class="fa fa-refresh"></i>
									</a>
									<a href="#" class="btn btn-mini content-remove">
										<i class="fa fa-times"></i>
									</a>
									<a href="#" class="btn btn-mini content-slideUp">
										<i class="fa fa-angle-down"></i>
									</a>
								</div>
							</div>
							<div class="box-content">
								<div class="tab-content">
									<div class="tab-pane active" id="t10">
										<h4>You can also have tabs &amp; action buttons</h4>
										<p>
											Tabs on the left
										</p>
									</div>
									<div class="tab-pane" id="t11">
										<h4>Second tab</h4>
										Lorem ipsum ad proident amet anim voluptate ea. Lorem ipsum voluptate et ex esse mollit labore aliquip culpa dolore culpa anim cillum nulla ut sunt. Lorem ipsum veniam sunt voluptate elit minim incididunt occaecat aute ut ut sunt laboris. Lorem ipsum
										cupidatat labore elit sit in aliqua nostrud adipisicing minim et mollit sunt Ut cupidatat laboris. Lorem ipsum sunt ut labore nostrud ut aliqua dolor sint cupidatat sit Duis in culpa consectetur exercitation. Lorem ipsum sunt anim reprehenderit
										elit minim nulla ut.
									</div>
									<div class="tab-pane" id="t12">
										<h4>Another tab</h4>
										Lorem ipsum commodo dolor sit in sint anim ad ut non et. Lorem ipsum cillum ex sunt ea irure Ut dolore in labore officia nostrud in anim culpa sit esse. Lorem ipsum elit Duis magna et voluptate Duis non pariatur esse laboris nisi laborum nulla. Lorem
										ipsum et tempor ea ad in id consectetur incididunt velit Excepteur officia. Lorem ipsum non consectetur Excepteur commodo aute anim sunt. Lorem ipsum pariatur esse nulla mollit Duis ex. Lorem ipsum cillum sit in ad consequat in ad enim incididunt
										ea laborum pariatur Excepteur aliqua nostrud ut. Lorem ipsum et magna laboris reprehenderit mollit reprehenderit aute Duis aliquip officia nulla. Lorem ipsum dolor Ut dolore in laborum elit dolore quis mollit ut sit Excepteur aute. Lorem ipsum
										quis et eiusmod in irure tempor ea labore cillum dolore labore eiusmod in occaecat qui ea. Lorem ipsum dolor fugiat deserunt incididunt eiusmod sunt magna reprehenderit sed enim ut cillum. Lorem ipsum irure pariatur exercitation sunt eiusmod
										dolore Ut do ut ut minim. Lorem ipsum do ea pariatur in anim deserunt Excepteur nisi culpa nisi aliquip culpa veniam ut non.
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="box box-bordered box-color lightgrey">
							<div class="box-title">
								<h3>
									<i class="fa fa-bars"></i>Left tabs</h3>
							</div>
							<div class="box-content nopadding">
								<div class="tabs-container">
									<ul class="tabs tabs-inline tabs-left">
										<li class='active'>
											<a href="#first" data-toggle='tab'>
												<i class="fa fa-lock"></i>Security</a>
										</li>
										<li>
											<a href="#second" data-toggle='tab'>
												<i class="fa fa-user"></i>Account</a>
										</li>
										<li>
											<a href="#thirds" data-toggle='tab'>
												<i class="fa fa-twitter"></i>Social</a>
										</li>
									</ul>
								</div>
								<div class="tab-content padding tab-content-inline">
									<div class="tab-pane active" id="first">
										Lorem ipsum Proident do cupidatat exercitation amet velit dolor Ut reprehenderit magna. Lorem ipsum Aute cupidatat labore deserunt nisi irure aliquip. Lorem ipsum Magna aliqua Duis tempor in dolor culpa nulla. Lorem ipsum Aliqua eiusmod qui veniam officia
										voluptate sed esse sed. Lorem ipsum In ad dolore labore sed est dolor laboris tempor consequat. Lorem ipsum Ex aute dolor sunt cillum adipisicing in irure in. Lorem ipsum Do sunt esse eu esse exercitation est id non tempor Excepteur nisi. Lorem
										ipsum Magna labore officia ex in amet adipisicing sunt Excepteur esse irure cillum exercitation. Lorem ipsum Sunt eiusmod voluptate cupidatat Duis eu magna esse nisi. Lorem ipsum Cillum qui exercitation ea eu cillum commodo commodo non velit
										incididunt culpa elit. Lorem ipsum Est minim est sunt Duis tempor ut nulla. Lorem ipsum In ut elit minim cillum id dolor do Duis.
									</div>
									<div class="tab-pane" id="second">
										Lorem ipsum Proident do cupidatat exercitation amet velit dolor Ut reprehenderit magna. Lorem ipsum Elit fugiat aliqua in culpa Ut aliquip Duis id ea enim in velit. Lorem ipsum Dolore qui dolor id enim aliquip Ut occaecat proident occaecat dolore. Lorem
										ipsum Ut veniam tempor eu dolor dolore pariatur consectetur ea elit. Lorem ipsum In dolore anim aliqua nulla ullamco sunt. Lorem ipsum Ex nulla sit esse tempor Excepteur eiusmod labore occaecat sint. Lorem ipsum Laboris ullamco Excepteur nulla
										occaecat occaecat amet mollit irure esse. Lorem ipsum Fugiat in irure aliqua officia nisi eiusmod aute officia. Lorem ipsum Incididunt consequat nulla in eu aute fugiat in anim enim proident do. Lorem ipsum In fugiat in commodo id aliquip in.
										Lorem ipsum Sit commodo in qui amet sit adipisicing incididunt dolor. Lorem ipsum Exercitation esse fugiat do enim enim esse laboris minim. Lorem ipsum Ex eiusmod quis do laborum sunt officia ullamco veniam veniam sunt ex. Lorem ipsum Anim dolore
										quis cillum magna eu magna consectetur laborum magna ut do. Lorem ipsum Excepteur laboris incididunt sed in dolor occaecat ad anim officia velit nulla. Lorem ipsum Dolore eiusmod non sit amet non tempor consequat. Lorem ipsum Do commodo aute
										quis reprehenderit reprehenderit tempor reprehenderit sint. Lorem ipsum Amet voluptate incididunt ex dolore cupidatat ut.
									</div>
									<div class="tab-pane" id="thirds">
										Lorem ipsum Officia quis sint sit sit tempor proident est enim exercitation nostrud do pariatur. Lorem ipsum Veniam aute Duis eu fugiat voluptate ut sed aliquip sunt Duis in cupidatat. Lorem ipsum Ut Excepteur exercitation do quis ut esse ut in dolor
										in. Lorem ipsum Cupidatat anim quis magna esse consequat est dolor sunt quis ex. Lorem ipsum Mollit sint sunt tempor culpa est eiusmod commodo officia est tempor mollit. Lorem ipsum Enim Duis cillum cupidatat eu cupidatat eiusmod ullamco. Lorem
										ipsum Sed dolor cillum non in minim et consequat incididunt ut minim nulla consectetur. Lorem ipsum Deserunt consectetur sint est aute id exercitation dolor ad nulla. Lorem ipsum Dolore velit Duis voluptate dolore consequat dolor Ut.
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6">
						<div class="panel-group panel-widget" id="ac3">
							<div class="panel panel-default blue">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a href="#c1" data-toggle="collapse" data-parent="#ac3">
											Collapsible Group Item #1
										</a>
									</h4>
									<!-- /.panel-title -->
								</div>
								<!-- /.panel-heading -->
								<div id="c1" class="panel-collapse collapse in">
									<div class="panel-body">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eaque saepe doloribus excepturi! Aut minus ullam quaerat tempore fugiat ex.
									</div>
									<!-- /.panel-body -->
								</div>
								<!-- /#c1.panel-collapse collapse in -->
							</div>
							<!-- /.panel panel-default -->
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a href="#c2" data-toggle="collapse" data-parent="#ac3">
											Collapsible Group Item #2
										</a>
									</h4>
									<!-- /.panel-title -->
								</div>
								<!-- /.panel-heading -->
								<div id="c2" class="panel-collapse collapse">
									<div class="panel-body">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, laborum pariatur laudantium nisi quae commodi nihil officia reiciendis voluptatum placeat distinctio tempore incidunt quasi perspiciatis ducimus in at iure qui voluptatem animi delectus deleniti
										adipisci facilis sapiente ad repellat excepturi.
									</div>
									<!-- /.panel-body -->
								</div>
								<!-- /#c1.panel-collapse collapse in -->
							</div>
							<!-- /.panel panel-default -->
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a href="#c3" data-toggle="collapse" data-parent="#ac3">
											Collapsible Group Item #3
										</a>
									</h4>
									<!-- /.panel-title -->
								</div>
								<!-- /.panel-heading -->
								<div id="c3" class="panel-collapse collapse">
									<div class="panel-body">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, nobis, nihil, repellat, adipisci quia soluta sit repellendus eos recusandae esse eveniet accusantium maiores a natus explicabo deserunt nostrum eaque nesciunt numquam aut! Nulla, aspernatur,
										placeat, quam nobis inventore temporibus animi laudantium vero commodi cupiditate officia rerum quis perspiciatis debitis repellendus laboriosam sapiente. Eos, suscipit, quasi voluptate sapiente eveniet amet ipsum.
									</div>
									<!-- /.panel-body -->
								</div>
								<!-- /#c1.panel-collapse collapse in -->
							</div>
							<!-- /.panel panel-default -->
						</div>
						<!-- /.panel-group -->
					</div>
					<div class="col-sm-6">
						<div class="box">
							<div class="box-title">
								<h3>
									<i class="fa fa-bars"></i>
									Accordion
								</h3>
								<div class="actions">
									<a href="#" class="btn btn-mini content-refresh">
										<i class="fa fa-refresh"></i>
									</a>
									<a href="#" class="btn btn-mini content-remove">
										<i class="fa fa-times"></i>
									</a>
									<a href="#" class="btn btn-mini content-slideUp">
										<i class="fa fa-angle-down"></i>
									</a>
								</div>
							</div>
							<div class="box-content">
								<div class="panel-group" id="ac4">
									<div class="panel panel-default blue">
										<div class="panel-heading">
											<h4 class="panel-title">
												<a href="#c11" data-toggle="collapse" data-parent="#ac4">
													Collapsible Group Item #1
												</a>
											</h4>
											<!-- /.panel-title -->
										</div>
										<!-- /.panel-heading -->
										<div id="c11" class="panel-collapse collapse in">
											<div class="panel-body">
												Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eaque saepe doloribus excepturi! Aut minus ullam quaerat tempore fugiat ex.
											</div>
											<!-- /.panel-body -->
										</div>
										<!-- /#c1.panel-collapse collapse in -->
									</div>
									<!-- /.panel panel-default -->
									<div class="panel panel-default">
										<div class="panel-heading">
											<h4 class="panel-title">
												<a href="#c22" data-toggle="collapse" data-parent="#ac4">
													Collapsible Group Item #2
												</a>
											</h4>
											<!-- /.panel-title -->
										</div>
										<!-- /.panel-heading -->
										<div id="c22" class="panel-collapse collapse">
											<div class="panel-body">
												Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, laborum pariatur laudantium nisi quae commodi nihil officia reiciendis voluptatum placeat distinctio tempore incidunt quasi perspiciatis ducimus in at iure qui voluptatem animi delectus deleniti
												adipisci facilis sapiente ad repellat excepturi.
											</div>
											<!-- /.panel-body -->
										</div>
										<!-- /#c1.panel-collapse collapse in -->
									</div>
									<!-- /.panel panel-default -->
									<div class="panel panel-default">
										<div class="panel-heading">
											<h4 class="panel-title">
												<a href="#c33" data-toggle="collapse" data-parent="#ac4">
													Collapsible Group Item #3
												</a>
											</h4>
											<!-- /.panel-title -->
										</div>
										<!-- /.panel-heading -->
										<div id="c33" class="panel-collapse collapse">
											<div class="panel-body">
												Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, nobis, nihil, repellat, adipisci quia soluta sit repellendus eos recusandae esse eveniet accusantium maiores a natus explicabo deserunt nostrum eaque nesciunt numquam aut! Nulla, aspernatur,
												placeat, quam nobis inventore temporibus animi laudantium vero commodi cupiditate officia rerum quis perspiciatis debitis repellendus laboriosam sapiente. Eos, suscipit, quasi voluptate sapiente eveniet amet ipsum.
											</div>
											<!-- /.panel-body -->
										</div>
										<!-- /#c1.panel-collapse collapse in -->
									</div>
									<!-- /.panel panel-default -->
								</div>
								<!-- /.panel-group -->
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6">
						<div class="box box-color box-bordered magenta">
							<div class="box-title">
								<h3>
									<i class="fa fa-comment"></i>
									Tooltips
								</h3>
								<div class="actions">
									<a href="#" class="btn btn-mini content-refresh">
										<i class="fa fa-refresh"></i>
									</a>
									<a href="#" class="btn btn-mini content-remove">
										<i class="fa fa-times"></i>
									</a>
									<a href="#" class="btn btn-mini content-slideUp">
										<i class="fa fa-angle-down"></i>
									</a>
								</div>
							</div>
							<div class="box-content">
								<p>
									<h4>Tooltips</h4>
									<a href="#" class="btn" rel="tooltip" title="Default Tooltip">Default tooltip</a>
									<a href="#" class="btn" rel="tooltip" title="Right Tooltip" data-placement="right">Right tooltip</a>
									<a href="#" class="btn" rel="tooltip" title="Left Tooltip" data-placement="left">Left tooltip</a>
									<a href="#" class="btn" rel="tooltip" title="Bottom Tooltip" data-placement="bottom">Bottom tooltip</a>
								</p>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="box box-color box-bordered lime">
							<div class="box-title">
								<h3>
									<i class="fa fa-bars"></i>
									Modals
								</h3>
								<div class="actions">
									<a href="#" class="btn btn-mini content-refresh">
										<i class="fa fa-refresh"></i>
									</a>
									<a href="#" class="btn btn-mini content-remove">
										<i class="fa fa-times"></i>
									</a>
									<a href="#" class="btn btn-mini content-slideUp">
										<i class="fa fa-angle-down"></i>
									</a>
								</div>
							</div>
							<div class="box-content">
								<p>
									<h4>Modals</h4>
									<a href="#modal-1" role="button" class="btn" data-toggle="modal">Open Modal</a>
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6">
						<div class="box box-color box-bordered orange">
							<div class="box-title">
								<h3>
									<i class="fa fa-comment-o"></i>
									popovers
								</h3>
								<div class="actions">
									<a href="#" class="btn btn-mini content-refresh">
										<i class="fa fa-refresh"></i>
									</a>
									<a href="#" class="btn btn-mini content-remove">
										<i class="fa fa-times"></i>
									</a>
									<a href="#" class="btn btn-mini content-slideUp">
										<i class="fa fa-angle-down"></i>
									</a>
								</div>
							</div>
							<div class="box-content">
								<p>
									<h4>Popover</h4>
									<a href="#" class="btn" rel="popover" data-trigger="hover" title="Default popover" data-content="Lorem ipsum et dolor aute deserunt nisi do. Lorem ipsum irure aute officia id pariatur ex adipisicing deserunt velit consequat cupidatat adipisicing commodo. Lorem ipsum ad fugiat velit elit et non id. ">Default popover</a>
									<a href="#" class="btn" rel="popover" data-trigger="hover" title="Top popover" data-placement="top" data-content="Lorem ipsum et dolor aute deserunt nisi do. Lorem ipsum irure aute officia id pariatur ex adipisicing deserunt velit consequat cupidatat adipisicing commodo. Lorem ipsum ad fugiat velit elit et non id. ">Top popover</a>
									<a href="#" class="btn" rel="popover" data-trigger="hover" title="Left popover" data-placement="left" data-content="Lorem ipsum et dolor aute deserunt nisi do. Lorem ipsum irure aute officia id pariatur ex adipisicing deserunt velit consequat cupidatat adipisicing commodo. Lorem ipsum ad fugiat velit elit et non id. ">Left popover</a>
									<a href="#" class="btn" rel="popover" data-trigger="hover" title="Bottom popover" data-placement="bottom" data-content="Lorem ipsum et dolor aute deserunt nisi do. Lorem ipsum irure aute officia id pariatur ex adipisicing deserunt velit consequat cupidatat adipisicing commodo. Lorem ipsum ad fugiat velit elit et non id. ">Bottom popover</a>
									<a href="#" class="btn" rel="popover" title="Hover popover" data-placement="top" data-content="Lorem ipsum et dolor aute deserunt nisi do. Lorem ipsum irure aute officia id pariatur ex adipisicing deserunt velit consequat cupidatat adipisicing commodo. Lorem ipsum ad fugiat velit elit et non id. ">Click popover</a>
								</p>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="box box-color box-bordered red">
							<div class="box-title">
								<h3>
									<i class="fa fa-bell"></i>
									Notifications
								</h3>
								<div class="actions">
									<a href="#" class="btn btn-mini content-refresh">
										<i class="fa fa-refresh"></i>
									</a>
									<a href="#" class="btn btn-mini content-remove">
										<i class="fa fa-times"></i>
									</a>
									<a href="#" class="btn btn-mini content-slideUp">
										<i class="fa fa-angle-down"></i>
									</a>
								</div>
							</div>
							<div class="box-content">
								<p>
									<h4>Notifications</h4>
								</p>
								<p>
									<a href="#modal-1" role="button" class="btn notify" data-notify-title="Success!" data-notify-message="The user has been successfully edited.">Basic notification</a>
									<a href="#modal-1" role="button" class="btn notify" data-notify-time="1000" data-notify-title="Success!" data-notify-message="The user has been successfully edited.">Timed fade notification (1second)</a>
									<a href="#modal-1" role="button" class="btn notify" data-notify-title="WARNING!" data-notify-message="Please refresh the cache!" data-notify-sticky="true">Sticky notification</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-38620714-4']);
	_gaq.push(['_trackPageview']);

	(function() {
		var ga = document.createElement('script');
		ga.type = 'text/javascript';
		ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(ga, s);
	})();
	</script>
</body>


<!-- Mirrored from www.eakroko.de/flat/components-elements.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 11 Jun 2016 05:19:18 GMT -->
</html>
