ui-helpers.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Avenxo Admin Theme - shared on themelock.com</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="description" content="Avenxo Admin Theme">
    <meta name="author" content="KaijuThemes">

    <link type='text/css' href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400italic,600' rel='stylesheet'>

    <link type="text/css" href="assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">        <!-- Font Awesome -->
    <link type="text/css" href="assets/fonts/themify-icons/themify-icons.css" rel="stylesheet">              <!-- Themify Icons -->
    <link type="text/css" href="assets/css/styles.css" rel="stylesheet">                                     <!-- Core CSS with all styles -->

    <link type="text/css" href="assets/plugins/codeprettifier/prettify.css" rel="stylesheet">                <!-- Code Prettifier -->
    <link type="text/css" href="assets/plugins/iCheck/skins/minimal/blue.css" rel="stylesheet">              <!-- iCheck -->

    <!--[if lt IE 10]>
        <script type="text/javascript" src="assets/js/media.match.min.js"></script>
        <script type="text/javascript" src="assets/js/respond.min.js"></script>
        <script type="text/javascript" src="assets/js/placeholder.min.js"></script>
    <![endif]-->
    <!-- The following CSS are included as plugins and can be removed if unused-->
    

    </head>

    <body class="animated-content">
        
        <header id="topnav" class="navbar navbar-default navbar-fixed-top" role="banner">

	<div class="logo-area">
		<span id="trigger-sidebar" class="toolbar-trigger toolbar-icon-bg">
			<a data-toggle="tooltips" data-placement="right" title="Toggle Sidebar">
				<span class="icon-bg">
					<i class="ti ti-menu"></i>
				</span>
			</a>
		</span>
		
		<a class="navbar-brand" href="index.html">Avenxo</a>

		<div class="toolbar-icon-bg hidden-xs" id="toolbar-search">
            <div class="input-group">
            	<span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-search"></i></button></span>
				<input type="text" class="form-control" placeholder="Search...">
				<span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-close"></i></button></span>
			</div>
        </div>

	</div><!-- logo-area -->

	<ul class="nav navbar-nav toolbar pull-right">

		<li class="toolbar-icon-bg visible-xs-block" id="trigger-toolbar-search">
			<a href="#"><span class="icon-bg"><i class="ti ti-search"></i></span></a>
		</li>
        
		<li class="toolbar-icon-bg hidden-xs">
            <a href="#"><span class="icon-bg"><i class="ti ti-world"></i></span></i></a>
        </li>

        <li class="toolbar-icon-bg hidden-xs">
            <a href="#"><span class="icon-bg"><i class="ti ti-view-grid"></i></span></i></a>
        </li>

        <li class="toolbar-icon-bg hidden-xs" id="trigger-fullscreen">
            <a href="#" class="toggle-fullscreen"><span class="icon-bg"><i class="ti ti-fullscreen"></i></span></i></a>
        </li>

        <li class="dropdown toolbar-icon-bg hidden-xs">
			<a href="#" class="hasnotifications dropdown-toggle" data-toggle='dropdown'><span class="icon-bg"><i class="ti ti-email"></i></span><span
			class="badge badge-deeporange">2</span></a>
			<div class="dropdown-menu notifications arrow">
				<div class="topnav-dropdown-header">
					<span>Messages</span>
				</div>
				<div class="scroll-pane">
					<ul class="media-list scroll-content">
						<li class="media notification-message">
							<a href="#">
								<div class="media-left">
									<img class="img-circle avatar" src="http://placehold.it/300&text=Placeholder" alt="" />
								</div>
								<div class="media-body">
									<h4 class="notification-heading"><strong>Vincent Keller</strong> <span class="text-gray">‒ Design should be ...</span></h4>
									<span class="notification-time">2 mins ago</span>
								</div>
							</a>
						</li>
						<li class="media notification-message">
							<a href="#">
								<div class="media-left">
									<img class="img-circle avatar" src="http://placehold.it/300&text=Placeholder" alt="" />
								</div>
								<div class="media-body">
									<h4 class="notification-heading"><strong>Frend Pratt</strong> <span class="text-gray">‒ I will start with the ...</span></h4>
									<span class="notification-time">40 mins ago</span>
								</div>
							</a>
						</li>
						<li class="media notification-message">
							<a href="#">
								<div class="media-left">
									<img class="img-circle avatar" src="http://placehold.it/300&text=Placeholder" alt="" />
								</div>
								<div class="media-body">
									<h4 class="notification-heading"><strong>Cynthia Hines</strong> <span class="text-gray">‒ Interior bits are ...</span></h4>
									<span class="notification-time">6 hours ago</span>
								</div>
							</a>
						</li>
						<li class="media notification-message">
							<a href="#">
								<div class="media-left">
									<img class="img-circle avatar" src="http://placehold.it/300&text=Placeholder" alt="" />
								</div>
								<div class="media-body">
									<h4 class="notification-heading"><strong>Robin Horton</strong> <span class="text-gray">‒ Are you even ...</span></h4>
									<span class="notification-time">8 days ago</span>
								</div>
							</a>
						</li>
						<li class="media notification-message">
							<a href="#">
								<div class="media-left">
									<img class="img-circle avatar" src="http://placehold.it/300&text=Placeholder" alt="" />
								</div>
								<div class="media-body">
									<h4 class="notification-heading"><strong>Amanda Torrez</strong> <span class="text-gray">‒ The message is ...</span></h4>
									<span class="notification-time">16 hours ago</span>
								</div>
							</a>
						</li>
						<li class="media notification-message">
							<a href="#">
								<div class="media-left">
									<img class="img-circle avatar" src="http://placehold.it/300&text=Placeholder" alt="" />
								</div>
								<div class="media-body">
									<h4 class="notification-heading"><strong>Khan Farhan</strong> <span class="text-gray">‒ Expected the stuff ...</span></h4>
									<span class="notification-time">2 days ago</span>
								</div>
							</a>
						</li>
						<li class="media notification-message">
							<a href="#">
								<div class="media-left">
									<img class="img-circle avatar" src="http://placehold.it/300&text=Placeholder" alt="" />
								</div>
								<div class="media-body">
									<h4 class="notification-heading"><strong>Will Whedon</strong> <span class="text-gray">‒ The movie of this ...</span></h4>
									<span class="notification-time">4 days ago</span>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div class="topnav-dropdown-footer">
					<a href="#">See all messages</a>
				</div>
			</div>
		</li>
		
		<li class="dropdown toolbar-icon-bg">
			<a href="#" class="hasnotifications dropdown-toggle" data-toggle='dropdown'><span class="icon-bg"><i class="ti ti-bell"></i></span><span class="badge badge-deeporange">2</span></a>
			<div class="dropdown-menu notifications arrow">
				<div class="topnav-dropdown-header">
					<span>Notifications</span>
				</div>
				<div class="scroll-pane">
					<ul class="media-list scroll-content">
						<li class="media notification-success">
							<a href="#">
								<div class="media-left">
									<span class="notification-icon"><i class="ti ti-check"></i></span>
								</div>
								<div class="media-body">
									<h4 class="notification-heading">Update 1.0.4 successfully pushed</h4>
									<span class="notification-time">8 mins ago</span>
								</div>
							</a>
						</li>
						<li class="media notification-info">
							<a href="#">
								<div class="media-left">
									<span class="notification-icon"><i class="ti ti-check"></i></span>
								</div>
								<div class="media-body">
									<h4 class="notification-heading">Update 1.0.3 successfully pushed</h4>
									<span class="notification-time">24 mins ago</span>
								</div>
							</a>
						</li>
						<li class="media notification-teal">
							<a href="#">
								<div class="media-left">
									<span class="notification-icon"><i class="ti ti-check"></i></span>
								</div>
								<div class="media-body">
									<h4 class="notification-heading">Update 1.0.2 successfully pushed</h4>
									<span class="notification-time">16 hours ago</span>
								</div>
							</a>
						</li>
						<li class="media notification-indigo">
							<a href="#">
								<div class="media-left">
									<span class="notification-icon"><i class="ti ti-check"></i></span>
								</div>
								<div class="media-body">
									<h4 class="notification-heading">Update 1.0.1 successfully pushed</h4>
									<span class="notification-time">2 days ago</span>
								</div>
							</a>
						</li>
						<li class="media notification-danger">
							<a href="#">
								<div class="media-left">
									<span class="notification-icon"><i class="ti ti-arrow-up"></i></span>
								</div>
								<div class="media-body">
									<h4 class="notification-heading">Initial Release 1.0</h4>
									<span class="notification-time">4 days ago</span>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div class="topnav-dropdown-footer">
					<a href="#">See all notifications</a>
				</div>
			</div>
		</li>

		<li class="dropdown toolbar-icon-bg">
			<a href="#" class="dropdown-toggle username" data-toggle="dropdown">
				<img class="img-circle" src="http://placehold.it/300&text=Placeholder" alt="" />
			</a>
			<ul class="dropdown-menu userinfo arrow">
				<li><a href="#/"><i class="ti ti-user"></i><span>Profile</span><span class="badge badge-info pull-right">80%</span></a></li>
				<li><a href="#/"><i class="ti ti-panel"></i><span>Account</span></a></li>
				<li><a href="#/"><i class="ti ti-settings"></i><span>Settings</span></a></li>
				<li class="divider"></li>
				<li><a href="#/"><i class="ti ti-stats-up"></i><span>Earnings</span></a></li>
				<li><a href="#/"><i class="ti ti-view-list-alt"></i><span>Statement</span></a></li>
				<li><a href="#/"><i class="ti ti-money"></i><span>Withdrawals</span></a></li>
				<li class="divider"></li>
				<li><a href="#/"><i class="ti ti-shift-right"></i><span>Sign Out</span></a></li>
			</ul>
		</li>

	</ul>

</header>

        <div id="wrapper">
            <div id="layout-static">
                <div class="static-sidebar-wrapper sidebar-default">
                    <div class="static-sidebar">
                        <div class="sidebar">
	<div class="widget">
        <div class="widget-body">
            <div class="userinfo">
                <div class="avatar">
                    <img src="http://placehold.it/300&text=Placeholder" class="img-responsive img-circle"> 
                </div>
                <div class="info">
                    <span class="username">Jonathan Smith</span>
                    <span class="useremail">jon@avenxo.com</span>
                </div>
            </div>
        </div>
    </div>
	<div class="widget stay-on-collapse" id="widget-sidebar">
        <nav role="navigation" class="widget-body">
	<ul class="acc-menu">
		<li class="nav-separator"><span>Explore</span></li>
		<li><a href="index.html"><i class="ti ti-home"></i><span>Dashboard</span><span class="badge badge-teal">2</span></a></li>
		<li><a href="angular/app/"><i class="ti ti-shield"></i><span>AngularJS</span></span></a></li>
		<li><a href="javascript:;"><i class="ti ti-layout"></i><span>Layout</span></a>
			<ul class="acc-menu">
				<li><a href="layout-grids.html">Grid Scaffolding</a></li>
				<li><a href="layout-static-leftbar.html">Static Sidebar</a></li>
				<li><a href="layout-sidebar-scroll.html">Scroll Sidebar</a></li>
				<li><a href="layout-horizontal.html">Horizontal Nav</a></li>
				<li><a href="layout-boxed.html">Boxed</a></li>	
			</ul>
		</li>
		<li><a href="javascript:;"><i class="ti ti-view-list-alt"></i><span>UI Kit</span></a>
			<ul class="acc-menu">
				<li><a href="ui-typography.html">Typography</a></li>
				<li><a href="ui-buttons.html">Buttons</a></li>
				<li><a href="ui-modals.html">Modal</a></li>
                <li><a href="ui-progress.html">Progress</a></li>
				<li><a href="ui-paginations.html">Paginations</a></li>
				<li><a href="ui-breadcrumbs.html">Breadcrumbs</a></li>
				<li><a href="ui-labelsbadges.html">Labels &amp; Badges</a></li>
                <li><a href="ui-alerts.html">Alerts</a></li>
                <li><a href="ui-tabs.html">Tabs</a></li>
                <li><a href="ui-wells.html">Wells</a></li>
                <li><a href="ui-icons-fontawesome.html">FontAwesome Icons</a></li>
                <li><a href="ui-icons-themify.html">Themify Icons</a></li>
				<li><a href="ui-helpers.html">Helpers</a></li>
        		<li><a href="ui-imagecarousel.html">Images &amp; Carousel</a></li>
			</ul>
		</li>
        <li><a href="javascript:;"><i class="ti ti-control-shuffle"></i><span>Components</span></a>
        	<ul class="acc-menu">
        		<li><a href="ui-tiles.html">Tiles</a></li>
        		<li><a href="custom-skylo.html">Page Progress</a></li>
        		<li><a href="custom-bootbox.html">Bootbox</a></li>
        		<li><a href="custom-pines.html">Pines Notification</a></li>
        		<li><a href="custom-pulsate.html">Pulsate</a></li>
				<li><a href="custom-knob.html">jQuery Knob</a></li>
				<li><a href="custom-ionrange.html">Ion Range Slider</a></li>
        	</ul>
        </li>
		<li><a href="javascript:;"><i class="ti ti-pencil"></i><span>Forms</span></a>
			<ul class="acc-menu">
				<li><a href="ui-forms.html">Form Layout</a></li>
				<li><a href="form-components.html">Form Components</a></li>
				<li><a href="form-pickers.html">Pickers</a></li>
				<li><a href="form-wizard.html">Form Wizard</a></li>
				<li><a href="form-validation.html">Form Validation</a></li>
				<li><a href="form-masks.html">Form Masks</a></li>
				<li><a href="form-dropzone.html">Dropzone Uploader</a></li>
				<li><a href="form-summernote.html">Summernote</a></li>
				<li><a href="form-markdown.html">Markdown Editor</a></li>
				<li><a href="form-xeditable.html">Inline Editor</a></li>
				<li><a href="form-gridforms.html">Grid Forms</a></li>
			</ul>
		</li>
		<li>
			<a href="javascript:;"><i class="ti ti-settings"></i><span>Panels</span></a>
			<ul class="acc-menu">
				<li><a href="ui-panels.html">Panels</a></li>
				<li><a href="ui-advancedpanels.html">Draggable Panels</a></li>
			</ul>
		<li><a href="javascript:;"><i class="ti ti-layout-grid3"></i><span>Tables</span></a>
			<ul class="acc-menu">
				<li><a href="ui-tables.html">Basic Tables</a></li>
				<li><a href="tables-responsive.html">Responsive Tables</a></li>
				<li><a href="tables-editable.html">Editable Tables</a></li>
				<li><a href="tables-data.html">Data Tables</a></li>
				<li><a href="tables-fixedheader.html">Fixed Header Tables</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><i class="ti ti-stats-up"></i><span>Analytics</span></a>
			<ul class="acc-menu">
				<li><a href="charts-flot.html">Flot</a></li>
				<li><a href="charts-sparklines.html">Sparklines</a></li>
				<li><a href="charts-morris.html">Morris.js</a></li>
				<li><a href="charts-easypiechart.html">Easy Pie Chart</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><i class="ti ti-map-alt"></i><span>Maps</span></a>
			<ul class="acc-menu">
				<li><a href="maps-google.html">Google Maps</a></li>
				<li><a href="maps-jvectormap.html">jVectorMap</a></li>
				<li><a href="maps-mapael.html">Mapael</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><i class="ti ti-file"></i><span>Pages</span></a>
			<ul class="acc-menu">
				<li><a href="extras-profile.html">Profile</a></li>
				<li><a href="extras-invoice.html">Invoice</a></li>
				<li><a href="javascript:;">Email Templates</a>
					<ul class="acc-menu">
						<li><a href="responsive-email/basic.html">Basic</a></li>
						<li><a href="responsive-email/hero.html">Hero</a></li>
						<li><a href="responsive-email/sidebar.html">Sidebar</a></li>
						<li><a href="responsive-email/sidebar-hero.html">Sidebar Hero</a></li>
					</ul>
				</li>
				<li><a href="coming-soon.html">Coming Soon</a></li>
				<li><a href="extras-faq.html">FAQ</a></li>
				<li><a href="extras-registration.html">Registration</a></li>
				<li><a href="extras-forgotpassword.html">Password Reset</a></li>
				<li><a href="extras-login.html">Login</a></li>
				<li><a href="extras-404.html">404 Page</a></li>
				<li><a href="extras-500.html">500 Page</a></li>
			</ul>
		</li>

		<li class="nav-separator"><span>Extras</span></li>
		<li><a href="app-inbox.html"><i class="ti ti-email"></i><span>Inbox</span><span class="badge badge-danger">3</span></a></li>
		<li><a href="extras-calendar.html"><i class="ti ti-calendar	"></i><span>Calendar</span><span class="badge badge-orange">1</span></a></li>
	</ul>
</nav>
    </div>

    <div class="widget" id="widget-progress">
        <div class="widget-heading">
            Progress
        </div>
        <div class="widget-body">

            <div class="mini-progressbar">
                <div class="clearfix mb-sm">
                    <div class="pull-left">Bandwidth</div>
                    <div class="pull-right">50%</div>
                </div>
                
                <div class="progress">    
                    <div class="progress-bar progress-bar-lime" style="width: 50%"></div>
                </div>
            </div>
            <div class="mini-progressbar">
                <div class="clearfix mb-sm">
                    <div class="pull-left">Storage</div>
                    <div class="pull-right">25%</div>
                </div>
                
                <div class="progress">    
                    <div class="progress-bar progress-bar-info" style="width: 25%"></div>
                </div>
            </div>

        </div>
    </div>
</div>
                    </div>
                </div>
                <div class="static-content-wrapper">
                    <div class="static-content">
                        <div class="page-content">
                            <ol class="breadcrumb">
                                
<li><a href="index.html">Home</a></li>
<li><a href="#">UI Elements</a></li>
<li class="active"><a href="ui-helpers.html">Helpers</a></li>

                            </ol>
                            <div class="container-fluid">
                                

<div class="row">
	<div class="col-md-12 col-lg-6">

		<h4>Margin</h4>
		<div class="alert alert-inverse">
			<p>The default base margin is set to 4px. Other margins are calculated as a multiple of the base margin, e.g. <code>m-md</code> is <code>@base-margin*4</code>. You can change the base margin from the helpers.less file</p>

			<p class="mb-n"><strong>Negative Margins:</strong> Add a class <code>.n</code> for the negative value of that margin. For example <code>.ml-sm.n</code> would produce <code>{margin-left: -8px}</code></p>
		</div>
		
		<div class="panel">
			<div class="panel-body no-padding">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Margin Class</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<tr><td>.m-n  	 </td> <td><code>{margin: 0px  !important}</code></td></tr>
						<tr><td>.m-xs 	 </td> <td><code>{margin: 4px  !important}</code></td></tr>
						<tr><td>.m-sm 	 </td> <td><code>{margin: 8px  !important}</code></td></tr>
						<tr><td>.m    	 </td> <td><code>{margin: 12px !important}</code></td></tr>
						<tr><td>.m-md 	 </td> <td><code>{margin: 16px !important}</code></td></tr>
						<tr><td>.m-lg 	 </td> <td><code>{margin: 24px !important}</code></td></tr>
						<tr><td>.m-xl 	 </td> <td><code>{margin: 32px !important}</code></td></tr>
						<tr><td>.m-xxl	 </td> <td><code>{margin: 40px !important}</code></td></tr>

						<tr><td colspan="2">&nbsp;</td></tr>

						<tr><td>.mb-n  </td>  <td><code>{margin-bottom: 0px  !important}</code></td></tr>
						<tr><td>.mb-xs </td>  <td><code>{margin-bottom: 4px  !important}</code></td></tr>
						<tr><td>.mb-sm </td>  <td><code>{margin-bottom: 8px  !important}</code></td></tr>
						<tr><td>.mb    </td>  <td><code>{margin-bottom: 12px !important}</code></td></tr>
						<tr><td>.mb-md </td>  <td><code>{margin-bottom: 16px !important}</code></td></tr>
						<tr><td>.mb-lg </td>  <td><code>{margin-bottom: 24px !important}</code></td></tr>
						<tr><td>.mb-xl </td>  <td><code>{margin-bottom: 32px !important}</code></td></tr>
						<tr><td>.mb-xxl</td>  <td><code>{margin-bottom: 40px !important}</code></td></tr>

						<tr><td colspan="2">&nbsp;</td></tr>

						<tr><td>.ml-n  </td>  <td><code>{margin-left: 0px  !important}</code></td></tr>
						<tr><td>.ml-xs </td>  <td><code>{margin-left: 4px  !important}</code></td></tr>
						<tr><td>.ml-sm </td>  <td><code>{margin-left: 8px  !important}</code></td></tr>
						<tr><td>.ml    </td>  <td><code>{margin-left: 12px !important}</code></td></tr>
						<tr><td>.ml-md </td>  <td><code>{margin-left: 16px !important}</code></td></tr>
						<tr><td>.ml-lg </td>  <td><code>{margin-left: 24px !important}</code></td></tr>
						<tr><td>.ml-xl </td>  <td><code>{margin-left: 32px !important}</code></td></tr>
						<tr><td>.ml-xxl</td>  <td><code>{margin-left: 40px !important}</code></td></tr>

						<tr><td colspan="2">&nbsp;</td></tr>

						<tr><td>.mr-n  </td>  <td><code>{margin-right: 0px 	!important}</code></td></tr>
						<tr><td>.mr-xs </td>  <td><code>{margin-right: 4px  !important}</code></td></tr>
						<tr><td>.mr-sm </td>  <td><code>{margin-right: 8px  !important}</code></td></tr>
						<tr><td>.mr    </td>  <td><code>{margin-right: 12px !important}</code></td></tr>
						<tr><td>.mr-md </td>  <td><code>{margin-right: 16px !important}</code></td></tr>
						<tr><td>.mr-lg </td>  <td><code>{margin-right: 24px !important}</code></td></tr>
						<tr><td>.mr-xl </td>  <td><code>{margin-right: 32px !important}</code></td></tr>
						<tr><td>.mr-xxl</td>  <td><code>{margin-right: 40px !important}</code></td></tr>

						<tr><td colspan="2">&nbsp;</td></tr>

						<tr><td>.mt-n  </td>  <td><code>{margin-top: 0px  !important}</code></td></tr>
						<tr><td>.mt-xs </td>  <td><code>{margin-top: 4px  !important}</code></td></tr>
						<tr><td>.mt-sm </td>  <td><code>{margin-top: 8px  !important}</code></td></tr>
						<tr><td>.mt    </td>  <td><code>{margin-top: 12px !important}</code></td></tr>
						<tr><td>.mt-md </td>  <td><code>{margin-top: 16px !important}</code></td></tr>
						<tr><td>.mt-lg </td>  <td><code>{margin-top: 24px !important}</code></td></tr>
						<tr><td>.mt-xl </td>  <td><code>{margin-top: 32px !important}</code></td></tr>
						<tr><td>.mt-xxl</td>  <td><code>{margin-top: 40px !important}</code></td></tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>


	<div class="col-md-12 col-lg-6">

		<h4>Padding</h4>
		<div class="alert alert-inverse">
			<p>The default base padding is set to 5px. Other paddings are calculated as a multiple of the base padding, e.g. <code>p-md</code> is <code>@base-padding*4</code>. You can change the base padding from the helpers.less file</p>

			<p class="mb0"><strong>Negative Paddings:</strong> Add a class <code>.n</code> for the negative value of that padding. For example <code>.pl10.n</code> would produce <code>{padding-left: -10px}</code></p>
		</div>
		<div class="panel">
			<div class="panel-body no-padding">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Padding Class</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<tr><td>.p-n  	 </td> <td><code>{padding: 0px  !important}</code></td></tr>
						<tr><td>.p-xs 	 </td> <td><code>{padding: 4px  !important}</code></td></tr>
						<tr><td>.p-sm 	 </td> <td><code>{padding: 8px  !important}</code></td></tr>
						<tr><td>.p    	 </td> <td><code>{padding: 12px !important}</code></td></tr>
						<tr><td>.p-md 	 </td> <td><code>{padding: 16px !important}</code></td></tr>
						<tr><td>.p-lg 	 </td> <td><code>{padding: 24px !important}</code></td></tr>
						<tr><td>.p-xl 	 </td> <td><code>{padding: 32px !important}</code></td></tr>
						<tr><td>.p-xxl	 </td> <td><code>{padding: 40px !important}</code></td></tr>

						<tr><td colspan="2">&nbsp;</td></tr>

						<tr><td>.pb-n  </td>  <td><code>{padding-bottom: 0px  !important}</code></td></tr>
						<tr><td>.pb-xs </td>  <td><code>{padding-bottom: 4px  !important}</code></td></tr>
						<tr><td>.pb-sm </td>  <td><code>{padding-bottom: 8px  !important}</code></td></tr>
						<tr><td>.pb    </td>  <td><code>{padding-bottom: 12px !important}</code></td></tr>
						<tr><td>.pb-md </td>  <td><code>{padding-bottom: 16px !important}</code></td></tr>
						<tr><td>.pb-lg </td>  <td><code>{padding-bottom: 24px !important}</code></td></tr>
						<tr><td>.pb-xl </td>  <td><code>{padding-bottom: 32px !important}</code></td></tr>
						<tr><td>.pb-xxl</td>  <td><code>{padding-bottom: 40px !important}</code></td></tr>

						<tr><td colspan="2">&nbsp;</td></tr>

						<tr><td>.pl-n  </td>  <td><code>{padding-left: 0px  !important}</code></td></tr>
						<tr><td>.pl-xs </td>  <td><code>{padding-left: 4px  !important}</code></td></tr>
						<tr><td>.pl-sm </td>  <td><code>{padding-left: 8px  !important}</code></td></tr>
						<tr><td>.pl    </td>  <td><code>{padding-left: 12px !important}</code></td></tr>
						<tr><td>.pl-md </td>  <td><code>{padding-left: 16px !important}</code></td></tr>
						<tr><td>.pl-lg </td>  <td><code>{padding-left: 24px !important}</code></td></tr>
						<tr><td>.pl-xl </td>  <td><code>{padding-left: 32px !important}</code></td></tr>
						<tr><td>.pl-xxl</td>  <td><code>{padding-left: 40px !important}</code></td></tr>

						<tr><td colspan="2">&nbsp;</td></tr>

						<tr><td>.pr-n  </td>  <td><code>{padding-right: 0px 	!important}</code></td></tr>
						<tr><td>.pr-xs </td>  <td><code>{padding-right: 4px  !important}</code></td></tr>
						<tr><td>.pr-sm </td>  <td><code>{padding-right: 8px  !important}</code></td></tr>
						<tr><td>.pr    </td>  <td><code>{padding-right: 12px !important}</code></td></tr>
						<tr><td>.pr-md </td>  <td><code>{padding-right: 16px !important}</code></td></tr>
						<tr><td>.pr-lg </td>  <td><code>{padding-right: 24px !important}</code></td></tr>
						<tr><td>.pr-xl </td>  <td><code>{padding-right: 32px !important}</code></td></tr>
						<tr><td>.pr-xxl</td>  <td><code>{padding-right: 40px !important}</code></td></tr>

						<tr><td colspan="2">&nbsp;</td></tr>

						<tr><td>.pt-n  </td>  <td><code>{padding-top: 0px  !important}</code></td></tr>
						<tr><td>.pt-xs </td>  <td><code>{padding-top: 4px  !important}</code></td></tr>
						<tr><td>.pt-sm </td>  <td><code>{padding-top: 8px  !important}</code></td></tr>
						<tr><td>.pt    </td>  <td><code>{padding-top: 12px !important}</code></td></tr>
						<tr><td>.pt-md </td>  <td><code>{padding-top: 16px !important}</code></td></tr>
						<tr><td>.pt-lg </td>  <td><code>{padding-top: 24px !important}</code></td></tr>
						<tr><td>.pt-xl </td>  <td><code>{padding-top: 32px !important}</code></td></tr>
						<tr><td>.pt-xxl</td>  <td><code>{padding-top: 40px !important}</code></td></tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div class="col-md-12">
		<h4>Embed Responsively</h4>
		<div class="alert alert-inverse">
			<p class="mb0">The Embed Responsively class helps build responsive embed codes for embedding rich third-party media into responsive web pages. Simply wrap the media object in <code>embed-container</code> class.</p>
		</div>
		<div class="panel">
			<div class="panel-body no-padding">

				<div class="table-responsive">
					<table class="table table-hover table-striped mb0">
						<thead>
							<tr>
								<th width="300">Third Party</th>
								<th>Code Sample</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Youtube</td>
								<td><code>&lt;div class='embed-container'&gt;&lt;iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen&gt;&lt;/iframe&gt;&lt;/div</code></td>
							</tr>
							<tr>
								<td>Vimeo</td>
								<td><code>&lt;div class='embed-container'&gt;&lt;iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt;&lt;/div&gt;</td></code>
							</tr>
							<tr>
								<td>DailyMotion</td>
								<td><code>&lt;div class='embed-container'&gt;&lt;iframe src='http://www.dailymotion.com/embed/video/xsr67x' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt;&lt;/div&gt;</td></code>
							</tr>
							<tr>
								<td>Google Maps</td>
								<td><code>&lt;div class='embed-container'&gt;&lt;iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387144.0075834208!2d-73.97800349999999!3d40.7056308!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1394298866288' width='600' height='450' frameborder='0' style='border:0'&gt;&lt;/iframe&gt;&lt;/div&gt;</td></code>
							</tr>
							<tr>
								<td>Instagram</td>
								<td><code>&lt;div class='embed-container'&gt;&lt;iframe src='//instagram.com/p/dnQi4EGuZx/embed/' frameborder='0' scrolling='no' allowtransparency='true'&gt;&lt;/iframe&gt;&lt;/div&gt;</td></code>
							</tr>
							<tr>
								<td>Vine</td>
								<td><code>&lt;div class='embed-container'&gt;&lt;iframe width='100%' src='https://vine.co/v/h9eAhKWzJlv/embed/simple' frameborder='0' scrolling='no' allowtransparency='true'&gt;&lt;/iframe&gt;&lt;script async src='//platform.vine.co/static/scripts/embed.js' charset='utf-8'&gt;&lt;/script&gt;&lt;/div&gt;;</code></td>
							</tr>

							
						</tbody>
					</table>
				</div>

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


	<div class="col-md-12">
		<h4>Others</h4>
		<div class="panel">
			<div class="panel-body no-padding">

				<div class="table-responsive">
					<table class="table table-hover table-striped mb0">
						<thead>
							<tr>
								<th width="300">Class Functions</th>
								<th>Description</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Vertical Alignment</td>
								<td>To vertically center a div, add <code>position:relative</code> to the parent and <code>vertical-align</code> class to the child.</td>
							</tr>
							<tr>
								<td>Vertical Align For Tables</td>
								<td>
									To vertical align contents in table, add classes <code>vat</code>, <code>vam</code> and <code>vab</code> to td to align contents <i>top</i>, <i>middle</i> and <i>bottom</i> respectively. Alternatively apply the classes <code>table-vat</code>, <code>table-vam</code> and <code>table-vab</code> to the <code>table</code> to align contents to all cells in the table
								</td>
							</tr>
							<tr>
								<td>Avatar</td>
								<td>Using <code>img.avatar</code> will style an image with Avenxo standard for Avatar</td>
							</tr>
							<tr>
								<td>iSelect</td>
								<td>wrap <code>select</code> in <code>div.iSelect</code> for custom font-awesome icons</td>
							</tr>
							

						</tbody>
					</table>
				</div>

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

</div>


                            </div> <!-- .container-fluid -->
                        </div> <!-- #page-content -->
                    </div>
                    <footer role="contentinfo">
    <div class="clearfix">
        <ul class="list-unstyled list-inline pull-left">
            <li><h6 style="margin: 0;">&copy; 2015 Avenxo</h6></li>
        </ul>
        <button class="pull-right btn btn-link btn-xs hidden-print" id="back-to-top"><i class="ti ti-arrow-up"></i></button>
    </div>
</footer>

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

    
    <!-- Switcher -->
    <div class="demo-options">
        <div class="demo-options-icon"><i class="ti ti-paint-bucket"></i></div>
        <div class="demo-heading">Demo Settings</div>

        <div class="demo-body">
            <div class="tabular">
                <div class="tabular-row">
                    <div class="tabular-cell">Fixed Header</div>
                    <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" checked data-size="mini" data-on-color="success" data-off-color="default" name="demo-fixedheader" data-on-text="&nbsp;" data-off-text="&nbsp;"></div>
                </div>
                <div class="tabular-row">
                    <div class="tabular-cell">Boxed Layout</div>
                    <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" data-size="mini" data-on-color="success" data-off-color="default" name="demo-boxedlayout" data-on-text="&nbsp;" data-off-text="&nbsp;"></div>
                </div>
                <div class="tabular-row">
                    <div class="tabular-cell">Collapse Leftbar</div>
                    <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" data-size="mini" data-on-color="success" data-off-color="default" name="demo-collapseleftbar" data-on-text="&nbsp;" data-off-text="&nbsp;"></div>
                </div>
            </div>
        </div>

        <div class="demo-body">
            <div class="option-title">Topnav</div>
            <ul id="demo-header-color" class="demo-color-list">
                <li><span class="demo-cyan"></span></li>
                <li><span class="demo-light-blue"></span></li>
                <li><span class="demo-blue"></span></li>
                <li><span class="demo-indigo"></span></li>
                <li><span class="demo-deep-purple"></span></li> 
                <li><span class="demo-purple"></span></li> 
                <li><span class="demo-pink"></span></li> 
                <li><span class="demo-red"></span></li>
                <li><span class="demo-teal"></span></li>
                <li><span class="demo-green"></span></li>
                <li><span class="demo-light-green"></span></li>
                <li><span class="demo-lime"></span></li>
                <li><span class="demo-yellow"></span></li>
                <li><span class="demo-amber"></span></li>
                <li><span class="demo-orange"></span></li>               
                <li><span class="demo-deep-orange"></span></li>
                <li><span class="demo-midnightblue"></span></li>
                <li><span class="demo-bluegray"></span></li>
                <li><span class="demo-bluegraylight"></span></li>
                <li><span class="demo-black"></span></li> 
                <li><span class="demo-gray"></span></li> 
                <li><span class="demo-graylight"></span></li> 
                <li><span class="demo-default"></span></li>
                <li><span class="demo-brown"></span></li>
            </ul>
        </div>

        <div class="demo-body">
            <div class="option-title">Sidebar</div>
            <ul id="demo-sidebar-color" class="demo-color-list">
                <li><span class="demo-cyan"></span></li>
                <li><span class="demo-light-blue"></span></li>
                <li><span class="demo-blue"></span></li>
                <li><span class="demo-indigo"></span></li>
                <li><span class="demo-deep-purple"></span></li> 
                <li><span class="demo-purple"></span></li> 
                <li><span class="demo-pink"></span></li> 
                <li><span class="demo-red"></span></li>
                <li><span class="demo-teal"></span></li>
                <li><span class="demo-green"></span></li>
                <li><span class="demo-light-green"></span></li>
                <li><span class="demo-lime"></span></li>
                <li><span class="demo-yellow"></span></li>
                <li><span class="demo-amber"></span></li>
                <li><span class="demo-orange"></span></li>               
                <li><span class="demo-deep-orange"></span></li>
                <li><span class="demo-midnightblue"></span></li>
                <li><span class="demo-bluegray"></span></li>
                <li><span class="demo-bluegraylight"></span></li>
                <li><span class="demo-black"></span></li> 
                <li><span class="demo-gray"></span></li> 
                <li><span class="demo-graylight"></span></li> 
                <li><span class="demo-default"></span></li>
                <li><span class="demo-brown"></span></li>
            </ul>
        </div>


    </div>
<!-- /Switcher -->
    <!-- Load site level scripts -->

<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> -->

<script type="text/javascript" src="assets/js/jquery-1.10.2.min.js"></script> 							<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/jqueryui-1.10.3.min.js"></script> 							<!-- Load jQueryUI -->
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script> 								<!-- Load Bootstrap -->
<script type="text/javascript" src="assets/js/enquire.min.js"></script> 									<!-- Load Enquire -->

<script type="text/javascript" src="assets/plugins/velocityjs/velocity.min.js"></script>					<!-- Load Velocity for Animated Content -->
<script type="text/javascript" src="assets/plugins/velocityjs/velocity.ui.min.js"></script>

<script type="text/javascript" src="assets/plugins/wijets/wijets.js"></script>     						<!-- Wijet -->

<script type="text/javascript" src="assets/plugins/codeprettifier/prettify.js"></script> 				<!-- Code Prettifier  -->
<script type="text/javascript" src="assets/plugins/bootstrap-switch/bootstrap-switch.js"></script> 		<!-- Swith/Toggle Button -->

<script type="text/javascript" src="assets/plugins/bootstrap-tabdrop/js/bootstrap-tabdrop.js"></script>  <!-- Bootstrap Tabdrop -->

<script type="text/javascript" src="assets/plugins/iCheck/icheck.min.js"></script>     					<!-- iCheck -->

<script type="text/javascript" src="assets/plugins/nanoScroller/js/jquery.nanoscroller.min.js"></script> <!-- nano scroller -->

<script type="text/javascript" src="assets/js/application.js"></script>
<script type="text/javascript" src="assets/demo/demo.js"></script>
<script type="text/javascript" src="assets/demo/demo-switcher.js"></script>

<!-- End loading site level scripts -->
    
    <!-- Load page level scripts-->
    

    <!-- End loading page level scripts-->

    </body>
</html>