<div class="row">
	<div class="col-xs-12 col-sm-6 widget-container-col">
		<!-- #section:custom/widget-box -->
		<div class="widget-box">
			<div class="widget-header">
				<h5 class="widget-title">Default Widget Box</h5>
				<!-- #section:custom/widget-box.toolbar -->
				<div class="widget-toolbar">
					<div class="widget-menu">
						<a href="#" data-action="settings" data-toggle="dropdown">
							<i class="ace-icon fa fa-bars"></i>
						</a>
						<ul class="dropdown-menu dropdown-menu-right dropdown-light-blue dropdown-caret dropdown-closer">
							<li><a data-toggle="tab" href="#dropdown1">Option#1</a></li>
							<li><a data-toggle="tab" href="#dropdown2">Option#2</a></li>
						</ul>
					</div>
					<a href="#" data-action="fullscreen" class="orange2"><i class="ace-icon fa fa-expand"></i></a>
					<a href="#" data-action="reload"><i class="ace-icon fa fa-refresh"></i></a>
					<a href="#" data-action="collapse"><i class="ace-icon fa fa-chevron-up"></i></a>
					<a href="#" data-action="close"><i class="ace-icon fa fa-times"></i></a>
				</div>
				<!-- /section:custom/widget-box.toolbar -->
			</div>

			<div class="widget-body">
			 <div class="widget-main">
				<p class="alert alert-info">
					Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur. Nulla fringilla eleifend consectetur.
				</p>
				<p class="alert alert-success">
					Raw denim you probably haven't heard of them jean shorts Austin.
				</p>
			 </div>
			</div>
		</div>
		<!-- /section:custom/widget-box -->
	</div>
	
	<div class="col-xs-12 col-sm-6 widget-container-col">
		<div class="widget-box widget-color-blue">
			<!-- #section:custom/widget-box.options -->
			<div class="widget-header">
				<h5 class="widget-title bigger lighter"><i class="ace-icon fa fa-table"></i> Tables & Colors</h5>
				<div class="widget-toolbar widget-toolbar-light no-border">
					<select id="simple-colorpicker-1" class="hide">
						  <option selected data-class="blue" value="#307ECC">#307ECC</option>
						  <option data-class="blue2" value="#5090C1">#5090C1</option>
						  <option data-class="blue3" value="#6379AA">#6379AA</option>
						  
						  <option data-class="green" value="#82AF6F">#82AF6F</option>
						  <option data-class="green2" value="#2E8965">#2E8965</option>
						  <option data-class="green3" value="#5FBC47">#5FBC47</option>
						  
						  <option data-class="red" value="#E2755F">#E2755F</option>
						  <option data-class="red2" value="#E04141">#E04141</option>
						  <option data-class="red3" value="#D15B47">#D15B47</option>
						  
						  <option data-class="orange" value="#FFC657">#FFC657</option>
						  <option data-class="purple" value="#7E6EB0">#7E6EB0</option>
						  <option data-class="pink" value="#CE6F9E">#CE6F9E</option>
						  <option data-class="dark" value="#404040">#404040</option>
						  <option data-class="grey" value="#848484">#848484</option>
						  <option data-class="default" value="#EEE">#EEE</option>
					</select>
				</div>
			</div>
			<!-- /section:custom/widget-box.options -->
			
			<div class="widget-body">
			 <div class="widget-main no-padding">
			  <table class="table table-striped table-bordered table-hover">
				<thead class="thin-border-bottom">
					<tr>
						<th><i class="ace-icon fa fa-user"></i> User</th>
						<th><i>@</i> Email</th>
						<th class="hidden-480">Status</th>
					</tr>
				</thead>

				<tbody>
					{{> page.members}}
				</tbody>
			  </table>
			 </div>
			</div>
		</div>

	</div><!-- /.span -->
</div><!-- /.row -->


<div class="space-24"></div>


<div class="row">
	<div class="col-xs-12 col-sm-6 widget-container-col">
		<div class="widget-box widget-color-orange collapsed">
			<!-- #section:custom/widget-box.options.collapsed -->
			<div class="widget-header widget-header-small">
				<h6 class="widget-title"><i class="ace-icon fa fa-sort"></i> Small Header & Collapsed</h6>
				<div class="widget-toolbar">
					<a href="#" data-action="settings"><i class="ace-icon fa fa-cog"></i></a>
					<a href="#" data-action="reload"><i class="ace-icon fa fa-refresh"></i></a>
					<a href="#" data-action="collapse">
						<i class="ace-icon fa fa-plus" data-icon-show="fa-plus" data-icon-hide="fa-minus"></i>
					</a>
					<a href="#" data-action="close"><i class="ace-icon fa fa-times"></i></a>
				</div>
			</div>
			<!-- /section:custom/widget-box.options.collapsed -->
			
			<div class="widget-body">
			 <div class="widget-main">
				<p class="alert alert-info">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis.
				</p>
			 </div>
			</div>
		</div>
	</div>
	
	<div class="col-xs-12 col-sm-6 widget-container-col">
		<div class="widget-box">
			<!-- #section:custom/widget-box.header.options -->
			<div class="widget-header widget-header-large">
				<h4 class="widget-title">Big Header</h4>
				<div class="widget-toolbar">
					<a href="#" data-action="settings"><i class="ace-icon fa fa-cog"></i></a>
					<a href="#" data-action="reload"><i class="ace-icon fa fa-refresh"></i></a>
					<a href="#" data-action="collapse"><i class="ace-icon fa fa-chevron-up"></i></a>
					<a href="#" data-action="close"><i class="ace-icon fa fa-times"></i></a>
				</div>
			</div>
			<!-- /section:custom/widget-box.header.options -->
			
			<div class="widget-body">
			 <div class="widget-main">
				<p class="alert alert-info">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis.
				</p>
			 </div>
			</div>
		</div>
	</div>
</div>


<div class="space-24"></div>


<div class="row">
	<div class="col-xs-12 col-sm-3 widget-container-col">
		<div class="widget-box">
			<div class="widget-header">
				<h5 class="widget-title smaller">With Label</h5>
				<div class="widget-toolbar">
					<span class="label label-success">16% <i class="ace-icon fa fa-arrow-up"></i></span>
				</div>
			</div>
			<div class="widget-body">
			 <div class="widget-main padding-6">
				<div class="alert alert-info">
					Hello World!
				</div>
			 </div>
			</div>
		</div>
	</div>
	
	<div class="col-xs-12 col-sm-3 widget-container-col">
		<div class="widget-box widget-color-dark light-border">
			<div class="widget-header">
				<h5 class="widget-title smaller">With Badge</h5>
				<div class="widget-toolbar">
					<span class="badge badge-danger">Alert</span>
				</div>
			</div>
			<div class="widget-body">
			 <div class="widget-main padding-6">
				<div class="alert alert-info">
					Hello World!
				</div>
			 </div>
			</div>
		</div>
	</div>
	
	<div class="col-xs-12 col-sm-6 widget-container-col">
		<div class="widget-box widget-color-dark">
			<div class="widget-header widget-header-small">
				<h6 class="widget-title smaller">With Labels & Badges</h6>
				<div class="widget-toolbar no-border">
					<label>
						<input type="checkbox" class="ace ace-switch ace-switch-3" /><span class="lbl middle"></span>
					</label>
				</div>
				<div class="widget-toolbar">
					<span class="label label-warning">1.2% <i class="ace-icon fa fa-arrow-down"></i></span>
					<span class="badge badge-info">info</span>
				</div>
			</div>
			<div class="widget-body">
			 <div class="widget-main">
				<div class="alert alert-info">
					Lorem ipsum dolor sit amet, consectetur adipiscing.
				</div>
			 </div>
			</div>
		</div>
	</div>
</div>


<div class="space"></div>


<div class="row">
	<div class="col-xs-12 col-sm-6 widget-container-col">
		<div class="widget-box widget-color-dark">
			<div class="widget-header">
				<h5 class="widget-title bigger lighter">Box with Toolbox</h5>
				<div class="widget-toolbar">
					<div class="progress progress-mini progress-striped active pos-rel" style="width:100px;" data-percent="61%">
						<div class="progress-bar progress-bar-danger" style="width:61%"></div>
					</div>
				</div>
			</div>
		
			<div class="widget-body">
				<!-- #section:custom/widget-box.toolbox -->
				<div class="widget-toolbox">
					<div class="btn-toolbar">
						<div class="btn-group">
							<button class="btn btn-sm btn-success btn-white btn-round">
								<i class="ace-icon fa fa-check bigger-110 green"></i> Approve
							</button>
							<button class="btn btn-sm btn-danger btn-white btn-round">
								<i class="ace-icon fa fa-times bigger-110 red2"></i> Reject
							</button>
						</div>
						<div data-toggle="buttons" class="btn-group">
							<label class="btn btn-sm btn-default btn-white btn-round">
								<i class="icon-only ace-icon fa fa-bold bigger-110"></i>
								<input type="checkbox" value="1" />
							</label>
							<label class="btn btn-sm btn-default btn-white btn-round">
								<i class="icon-only ace-icon fa fa-italic bigger-110"></i>
								<input type="checkbox" value="2" />
							</label>
						</div>
						<div data-toggle="buttons" class="btn-group">
							<label class="btn btn-sm btn-primary btn-white btn-round">
								<i class="icon-only ace-icon fa fa-align-left bigger-110"></i>
								<input type="radio" value="1" />
							</label>
							<label class="btn btn-sm btn-primary btn-white btn-round">
								<i class="icon-only ace-icon fa fa-align-center bigger-110"></i>
								<input type="radio" value="2" />
							</label>
							<label class="btn btn-sm btn-primary btn-white btn-round">
								<i class="icon-only ace-icon fa fa-align-right bigger-110"></i>
								<input type="radio" value="3" />
							</label>
						</div>
					</div>
				</div>
				<!-- /section:custom/widget-box.toolbox -->
				
				<div class="widget-main padding-16">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis. Nullam interdum massa vel nisl fringilla sed viverra erat tincidunt. Phasellus in ipsum velit. Maecenas id erat vel sem convallis blandit. Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur. Nulla fringilla eleifend consectetur. Etiam justo nisl, gravida id egestas eu, eleifend vel metus. Pellentesque tellus ipsum, euismod in facilisis quis, aliquet quis sem.
				</div>
			</div>				

		</div>
	</div>
	
	<div class="col-xs-12 col-sm-6 widget-container-col">
		<div class="widget-box widget-color-pink">
			<div class="widget-header">
				<h5 class="widget-title">Bottom Toolbox (Footer)</h5>
				<div class="widget-toolbar">
					<a href="#" data-action="collapse"><i class="1 ace-icon fa fa-chevron-up bigger-125"></i></a>
				</div>
				<div class="widget-toolbar no-border">
					<button class="btn btn-xs btn-light bigger"><i class="ace-icon fa fa-arrow-left"></i> Prev</button>
					<button class="btn btn-xs bigger btn-yellow dropdown-toggle" data-toggle="dropdown">Next <i class="ace-icon fa fa-chevron-down icon-on-right"></i></button>
					<ul class="dropdown-menu dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
			</div>
			
			<div class="widget-body">
				<div class="widget-main">
					<p class="alert alert-info">
						Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur. Nulla fringilla eleifend consectetur.
					</p>
					<p class="alert alert-success">
						Raw denim you probably haven't heard of them jean shorts Austin.
					</p>
				</div>
				
				<div class="widget-toolbox padding-8 clearfix">
					<button class="btn btn-xs btn-danger pull-left">
						<i class="ace-icon fa fa-times"></i>
						<span class="bigger-110">I don't accept</span>
					</button>
					<button class="btn btn-xs btn-success pull-right">
						<span class="bigger-110">I accept</span>
						<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
					</button>
				</div>
			</div>

			
		</div>
	</div>
</div>


<div class="space"></div>


<div class="row">
	<div class="col-sm-6 widget-container-col">
		<div class="widget-box">
			<div class="widget-header widget-header-small">
				<h5 class="widget-title smaller">Tabbed</h5>
				<!-- #section:custom/widget-box.tabbed -->
				<div class="widget-toolbar no-border">
					<ul class="nav nav-tabs" id="myTab">
						<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
						<li><a data-toggle="tab" href="#profile">Profile</a></li>
						<li><a data-toggle="tab" href="#info">Info</a></li>
					</ul>
				</div>
				<!-- /section:custom/widget-box.tabbed -->
			</div>
			<div class="widget-body">
			 <div class="widget-main padding-6">
				 <div class="tab-content">
				  <div id="home" class="tab-pane in active">
					<p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
				  </div>
				  <div id="profile" class="tab-pane">
					<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
				  </div>
				  <div id="info" class="tab-pane">
					<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
				  </div>
				</div>
			 </div>
			</div>
		</div>
	</div>
	
	<div class="col-sm-6 widget-container-col">
		<div class="widget-box widget-color-dark">
			<div class="widget-header">
				<h6 class="widget-title">Scroll Content</h6>
				<div class="widget-toolbar">
					<a href="#" data-action="settings"><i class="ace-icon fa fa-cog"></i></a>
					<a href="#" data-action="reload"><i class="ace-icon fa fa-refresh"></i></a>
					<a href="#" data-action="collapse"><i class="ace-icon fa fa-chevron-up"></i></a>
					<a href="#" data-action="close"><i class="ace-icon fa fa-times"></i></a>
					<a href="#" data-action="fullscreen" class="orange2"><i class="ace-icon fa fa-expand"></i></a>
				</div>
			</div>
			<div class="widget-body">
			<!-- #section:custom/scrollbar -->
			 <div class="widget-main padding-4 scrollable" data-size="125">
					<div class="content">
						<div class="alert alert-info">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-danger">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-success">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-info">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-danger">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-success">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-info">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-danger">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-success">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-info">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-danger">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-success">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-info">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-danger">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-success">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-info">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-danger">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-success">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-info">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-success">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
						<div class="alert alert-info">
							Lorem ipsum dolor sit amet, consectetur adipiscing.
						</div>
					</div>				
			 </div>
			 <!-- /section:custom/scrollbar -->
			</div>
		</div>
	</div>
</div>




<div class="space-24"></div>


<div class="row">
	<div class="col-sm-6 widget-container-col">
		<!-- #section:custom/widget-box.options.transparent -->
		<div class="widget-box transparent">
			<div class="widget-header">
				<h4 class="widget-title lighter">Transparent Box</h4>
				<div class="widget-toolbar no-border">
					<a href="#" data-action="settings"><i class="ace-icon fa fa-cog"></i></a>
					<a href="#" data-action="reload"><i class="ace-icon fa fa-refresh"></i></a>
					<a href="#" data-action="collapse"><i class="ace-icon fa fa-chevron-up"></i></a>
					<a href="#" data-action="close"><i class="ace-icon fa fa-times"></i></a>
				</div>
			</div>
			<div class="widget-body">
			 <div class="widget-main padding-6 no-padding-left no-padding-right">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis. Nullam interdum massa vel nisl fringilla sed viverra erat tincidunt. Phasellus in ipsum velit. Maecenas id erat vel sem convallis blandit. Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur.
			 </div>
			</div>
		</div>
		<!-- /section:custom/widget-box.options.transparent -->
	</div>

	<div class="col-sm-6 widget-container-col">
		<div class="widget-box transparent">
			<div class="widget-header">
				<h4 class="widget-title lighter">Tabs With Scroll</h4>
				<div class="widget-toolbar no-border">
					<ul class="nav nav-tabs" id="myTab2">
						<li class="active"><a data-toggle="tab" href="#home2">Home</a></li>
						<li><a data-toggle="tab" href="#profile2">Profile</a></li>
						<li><a data-toggle="tab" href="#info2">Info</a></li>
					</ul>
				</div>
			</div>
			<div class="widget-body">
			 <div class="widget-main padding-12 no-padding-left no-padding-right">
				<div class="tab-content padding-4">
				  <div id="home2" class="tab-pane in active">
					<!-- #section:custom/scrollbar.horizontal -->
					<div class="scrollable-horizontal" data-size="800">
						<b>Horizontal Scroll</b>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis. Nullam interdum massa vel nisl fringilla sed viverra erat tincidunt. Phasellus in ipsum velit. Maecenas id erat vel sem convallis blandit. Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur.
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis. Nullam interdum massa vel nisl fringilla sed viverra erat tincidunt. Phasellus in ipsum velit. Maecenas id erat vel sem convallis blandit. Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur.
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis. Nullam interdum massa vel nisl fringilla sed viverra erat tincidunt. Phasellus in ipsum velit. Maecenas id erat vel sem convallis blandit. Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur.
					</div>
					<!-- /section:custom/scrollbar.horizontal -->
				  </div>
				  
				  <div id="profile2" class="tab-pane">
					<div class="scrollable" data-size="100" data-position="left">
						<b>Scroll on Left</b>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis. Nullam interdum massa vel nisl fringilla sed viverra erat tincidunt. Phasellus in ipsum velit. Maecenas id erat vel sem convallis blandit. Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur.
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis. Nullam interdum massa vel nisl fringilla sed viverra erat tincidunt. Phasellus in ipsum velit. Maecenas id erat vel sem convallis blandit. Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur.
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis. Nullam interdum massa vel nisl fringilla sed viverra erat tincidunt. Phasellus in ipsum velit. Maecenas id erat vel sem convallis blandit. Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur.
					</div>
				  </div>
				  
				  <div id="info2" class="tab-pane">
					<div class="scrollable" data-size="100">
						<b>Scroll # 3</b>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis. Nullam interdum massa vel nisl fringilla sed viverra erat tincidunt. Phasellus in ipsum velit. Maecenas id erat vel sem convallis blandit. Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur.
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis. Nullam interdum massa vel nisl fringilla sed viverra erat tincidunt. Phasellus in ipsum velit. Maecenas id erat vel sem convallis blandit. Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur.
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis. Nullam interdum massa vel nisl fringilla sed viverra erat tincidunt. Phasellus in ipsum velit. Maecenas id erat vel sem convallis blandit. Nunc aliquam enim ut arcu aliquet adipiscing. Fusce dignissim volutpat justo non consectetur.
					</div>
				  </div>
			   </div>

			 </div>
			</div>
		</div>
	</div>
</div>