<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Neon Admin Panel" />
<meta name="author" content="" />
<title>Neon | Tabs & Accordions</title>
<link rel="stylesheet" href="assets/js/jquery-ui/css/no-theme/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="assets/css/font-icons/entypo/css/entypo.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/neon-core.css">
<link rel="stylesheet" href="assets/css/neon-theme.css">
<link rel="stylesheet" href="assets/css/neon-forms.css">
<link rel="stylesheet" href="assets/css/custom.css">
<script src="assets/js/jquery-1.11.0.min.js"></script>
<script>$.noConflict();</script>
<!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="page-body" data-url="http://neon.dev">
<div class="page-container"><!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->
<div class="sidebar-menu">
<div class="sidebar-menu-inner">
<header class="logo-env">
<!-- logo -->
<div class="logo">
<a href="index.html">
<img src="assets/images/logo@2x.png" width="120" alt="" />
</a>
</div>
<!-- logo collapse icon -->
<div class="sidebar-collapse">
<a href="#" class="sidebar-collapse-icon"><!-- add class "with-animation" if you want sidebar to have animation during expanding/collapsing transition -->
<i class="entypo-menu"></i>
</a>
</div>
<!-- open/close menu icon (do not remove if you want to enable menu on mobile devices) -->
<div class="sidebar-mobile-menu visible-xs">
<a href="#" class="with-animation"><!-- add class "with-animation" to support animation -->
<i class="entypo-menu"></i>
</a>
</div>
</header>
<ul id="main-menu" class="main-menu">
<!-- add class "multiple-expanded" to allow multiple submenus to open -->
<!-- class "auto-inherit-active-class" will automatically add "active" class for parent elements who are marked already with class "active" -->
<li>
<a href="index.html">
<i class="entypo-gauge"></i>
<span class="title">Dashboard</span>
</a>
<ul>
<li>
<a href="index.html">
<span class="title">Dashboard 1</span>
</a>
</li>
<li>
<a href="dashboard-2.html">
<span class="title">Dashboard 2</span>
</a>
</li>
<li>
<a href="dashboard-3.html">
<span class="title">Dashboard 3</span>
</a>
</li>
<li>
<a href="skin-black.html">
<span class="title">Skins</span>
</a>
<ul>
<li>
<a href="skin-black.html">
<span class="title">Black Skin</span>
</a>
</li>
<li>
<a href="skin-white.html">
<span class="title">White Skin</span>
</a>
</li>
<li>
<a href="skin-purple.html">
<span class="title">Purple Skin</span>
</a>
</li>
<li>
<a href="skin-cafe.html">
<span class="title">Cafe Skin</span>
</a>
</li>
<li>
<a href="skin-red.html">
<span class="title">Red Skin</span>
</a>
</li>
<li>
<a href="skin-green.html">
<span class="title">Green Skin</span>
</a>
</li>
<li>
<a href="skin-yellow.html">
<span class="title">Yellow Skin</span>
</a>
</li>
<li>
<a href="skin-blue.html">
<span class="title">Blue Skin</span>
</a>
</li>
<li>
<a href="skin-facebook.html">
<span class="title">Facebook Skin</span>
<span class="badge badge-secondary badge-roundless">New</span>
</a>
</li>
</ul>
</li>
<li>
<a href="highlights.html">
<span class="title">What's New</span>
<span class="badge badge-success badge-roundless">v1.8</span>
</a>
</li>
</ul>
</li>
<li>
<a href="layout-api.html">
<i class="entypo-layout"></i>
<span class="title">Layouts</span>
</a>
<ul>
<li>
<a href="layout-api.html">
<span class="title">Layout API</span>
</a>
</li>
<li>
<a href="layout-collapsed-sidebar.html">
<span class="title">Collapsed Sidebar</span>
</a>
</li>
<li>
<a href="layout-fixed-sidebar.html">
<span class="title">Fixed Sidebar</span>
</a>
</li>
<li>
<a href="layout-chat-open.html">
<span class="title">Chat Open</span>
</a>
</li>
<li>
<a href="layout-horizontal-menu-boxed.html">
<span class="title">Horizontal Menu Boxed</span>
</a>
</li>
<li>
<a href="layout-horizontal-menu-fluid.html">
<span class="title">Horizontal Menu Fluid</span>
</a>
</li>
<li>
<a href="layout-mixed-menus.html">
<span class="title">Mixed Menus</span>
</a>
</li>
<li>
<a href="layout-right-sidebar.html">
<span class="title">Right Sidebar</span>
</a>
</li>
<li>
<a href="layout-both-menus-right-sidebar.html">
<span class="title">Both Menus (Right Sidebar)</span>
</a>
</li>
<li>
<a href="layout-page-transition-fade.html">
<span class="title">Page Enter Transitions</span>
</a>
<ul>
<li>
<a href="layout-page-transition-fade.html">
<span class="title">Fade Scale</span>
</a>
</li>
<li>
<a href="layout-page-transition-left-in.html">
<span class="title">Left In</span>
</a>
</li>
<li>
<a href="layout-page-transition-right-in.html">
<span class="title">Right In</span>
</a>
</li>
<li>
<a href="layout-page-transition-fade-only.html">
<span class="title">Fade Only</span>
</a>
</li>
</ul>
</li>
<li>
<a href="layout-boxed.html">
<span class="title">Boxed Layout</span>
</a>
</li>
</ul>
</li>
<li>
<a href="index.html" target="_blank">
<i class="entypo-monitor"></i>
<span class="title">Frontend</span>
</a>
</li>
<li class="opened active">
<a href="ui-panels.html">
<i class="entypo-newspaper"></i>
<span class="title">UI Elements</span>
</a>
<ul>
<li>
<a href="ui-panels.html">
<span class="title">Panels</span>
</a>
</li>
<li>
<a href="ui-tiles.html">
<span class="title">Tiles</span>
</a>
</li>
<li>
<a href="forms-buttons.html">
<span class="title">Buttons</span>
</a>
</li>
<li>
<a href="ui-typography.html">
<span class="title">Typography</span>
</a>
</li>
<li class="active">
<a href="ui-tabs-accordions.html">
<span class="title">Tabs & Accordions</span>
</a>
</li>
<li>
<a href="ui-tooltips-popovers.html">
<span class="title">Tooltips & Popovers</span>
</a>
</li>
<li>
<a href="ui-navbars.html">
<span class="title">Navbars</span>
</a>
</li>
<li>
<a href="ui-breadcrumbs.html">
<span class="title">Breadcrumbs</span>
</a>
</li>
<li>
<a href="ui-badges-labels.html">
<span class="title">Badges & Labels</span>
</a>
</li>
<li>
<a href="ui-progress-bars.html">
<span class="title">Progress Bars</span>
</a>
</li>
<li>
<a href="ui-modals.html">
<span class="title">Modals</span>
</a>
</li>
<li>
<a href="ui-blockquotes.html">
<span class="title">Blockquotes</span>
</a>
</li>
<li>
<a href="ui-alerts.html">
<span class="title">Alerts</span>
</a>
</li>
<li>
<a href="ui-pagination.html">
<span class="title">Pagination</span>
</a>
</li>
</ul>
</li>
<li>
<a href="mailbox.html">
<i class="entypo-mail"></i>
<span class="title">Mailbox</span>
<span class="badge badge-secondary">8</span>
</a>
<ul>
<li>
<a href="mailbox.html">
<i class="entypo-inbox"></i>
<span class="title">Inbox</span>
</a>
</li>
<li>
<a href="mailbox-compose.html">
<i class="entypo-pencil"></i>
<span class="title">Compose Message</span>
</a>
</li>
<li>
<a href="mailbox-message.html">
<i class="entypo-attach"></i>
<span class="title">View Message</span>
</a>
</li>
</ul>
</li>
<li>
<a href="forms-main.html">
<i class="entypo-doc-text"></i>
<span class="title">Forms</span>
</a>
<ul>
<li>
<a href="forms-main.html">
<span class="title">Basic Elements</span>
</a>
</li>
<li>
<a href="forms-advanced.html">
<span class="title">Advanced Plugins</span>
</a>
</li>
<li>
<a href="forms-wizard.html">
<span class="title">Form Wizard</span>
</a>
</li>
<li>
<a href="forms-validation.html">
<span class="title">Data Validation</span>
</a>
</li>
<li>
<a href="forms-masks.html">
<span class="title">Input Masks</span>
</a>
</li>
<li>
<a href="forms-sliders.html">
<span class="title">Sliders</span>
</a>
</li>
<li>
<a href="forms-file-upload.html">
<span class="title">File Upload</span>
</a>
</li>
<li>
<a href="forms-wysiwyg.html">
<span class="title">Editors</span>
</a>
</li>
</ul>
</li>
<li>
<a href="tables-main.html">
<i class="entypo-window"></i>
<span class="title">Tables</span>
</a>
<ul>
<li>
<a href="tables-main.html">
<span class="title">Basic Tables</span>
</a>
</li>
<li>
<a href="tables-datatable.html">
<span class="title">Data Tables</span>
</a>
</li>
</ul>
</li>
<li>
<a href="extra-icons.html">
<i class="entypo-bag"></i>
<span class="title">Extra</span>
<span class="badge badge-info badge-roundless">New Items</span>
</a>
<ul>
<li>
<a href="extra-icons.html">
<span class="title">Icons</span>
<span class="badge badge-success">3</span>
</a>
<ul>
<li>
<a href="extra-icons.html">
<span class="title">Font Awesome</span>
</a>
</li>
<li>
<a href="extra-icons-entypo.html">
<span class="title">Entypo</span>
</a>
</li>
<li>
<a href="extra-icons-glyphicons.html">
<span class="title">Glyph Icons</span>
</a>
</li>
</ul>
</li>
<li>
<a href="extra-portlets.html">
<span class="title">Portlets</span>
</a>
</li>
<li>
<a href="extra-google-maps.html">
<span class="title">Maps</span>
</a>
<ul>
<li>
<a href="extra-google-maps.html">
<span class="title">Google Maps</span>
</a>
</li>
<li>
<a href="extra-vector-maps.html">
<span class="title">Vector Maps</span>
</a>
</li>
</ul>
</li>
<li>
<a href="extra-chat-api.html">
<span class="title">Chat API</span>
</a>
</li>
<li>
<a href="extra-calendar.html">
<span class="title">Calendar</span>
</a>
</li>
<li>
<a href="extra-calendar-2.html">
<span class="title">Calendar 2</span>
<span class="badge badge-secondary badge-roundless">New</span>
</a>
</li>
<li>
<a href="extra-notes.html">
<span class="title">Notes</span>
</a>
</li>
<li>
<a href="extra-lockscreen.html">
<span class="title">Lockscreen</span>
</a>
</li>
<li>
<a href="extra-login.html">
<span class="title">Login</span>
</a>
</li>
<li>
<a href="extra-register.html">
<span class="title">Register</span>
</a>
</li>
<li>
<a href="extra-invoice.html">
<span class="title">Invoice</span>
</a>
</li>
<li>
<a href="extra-gallery.html">
<span class="title">Gallery</span>
</a>
<ul>
<li>
<a href="extra-gallery.html">
<span class="title">Albums</span>
</a>
</li>
<li>
<a href="extra-gallery-single.html">
<span class="title">Single Album</span>
</a>
</li>
</ul>
</li>
<li>
<a href="extra-members.html">
<span class="title">Members</span>
</a>
</li>
<li>
<a href="extra-profile.html">
<span class="title">Profile</span>
</a>
</li>
<li>
<a href="extra-404.html">
<span class="title">404 Page</span>
</a>
</li>
<li>
<a href="extra-blank-page.html">
<span class="title">Blank Page</span>
</a>
</li>
<li>
<a href="extra-timeline.html">
<span class="title">Timeline</span>
</a>
</li>
<li>
<a href="extra-comments.html">
<span class="title">Comments</span>
</a>
</li>
<li>
<a href="extra-timeline-centered.html">
<span class="title">Timeline Centered</span>
</a>
</li>
<li>
<a href="extra-tocify.html">
<span class="title">Tocify</span>
</a>
</li>
<li>
<a href="ui-notifications.html">
<span class="title">Notifications</span>
</a>
</li>
<li>
<a href="extra-new-post.html">
<span class="title">New Post</span>
</a>
</li>
<li>
<a href="extra-settings.html">
<span class="title">Settings</span>
</a>
</li>
<li>
<a href="extra-scrollbox.html">
<span class="title">Scrollbox</span>
</a>
</li>
<li>
<a href="extra-image-crop.html">
<span class="title">Image Crop</span>
</a>
</li>
<li>
<a href="extra-search.html">
<span class="title">Search Page</span>
</a>
</li>
<li>
<a href="extra-language-selector.html">
<span class="title">Language Selector</span>
</a>
</li>
<li>
<a href="extra-nestable.html">
<span class="title">Nestable Lists</span>
</a>
</li>
<li>
<a href="extra-file-tree.html">
<span class="title">File Tree</span>
</a>
</li>
<li>
<a href="extra-load-progress.html">
<span class="title">Load Progress</span>
</a>
</li>
</ul>
</li>
<li>
<a href="charts.html">
<i class="entypo-chart-bar"></i>
<span class="title">Charts</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-flow-tree"></i>
<span class="title">Menu Levels</span>
</a>
<ul>
<li>
<a href="#">
<i class="entypo-flow-line"></i>
<span class="title">Menu Level 1.1</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-flow-line"></i>
<span class="title">Menu Level 1.2</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-flow-line"></i>
<span class="title">Menu Level 1.3</span>
</a>
<ul>
<li>
<a href="#">
<i class="entypo-flow-parallel"></i>
<span class="title">Menu Level 2.1</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-flow-parallel"></i>
<span class="title">Menu Level 2.2</span>
</a>
<ul>
<li>
<a href="#">
<i class="entypo-flow-cascade"></i>
<span class="title">Menu Level 3.1</span>
</a>
<ul>
<li>
<a href="#">
<i class="entypo-flow-branch"></i>
<span class="title">Menu Level 4.1</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="entypo-flow-cascade"></i>
<span class="title">Menu Level 3.2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="entypo-flow-parallel"></i>
<span class="title">Menu Level 2.3</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="main-content">
<div class="row">
<!-- Profile Info and Notifications -->
<div class="col-md-6 col-sm-8 clearfix">
<ul class="user-info pull-left pull-none-xsm">
<!-- Profile Info -->
<li class="profile-info dropdown"><!-- add class "pull-right" if you want to place this from right -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="assets/images/thumb-1@2x.png" alt="" class="img-circle" width="44" />
John Henderson
</a>
<ul class="dropdown-menu">
<!-- Reverse Caret -->
<li class="caret"></li>
<!-- Profile sub-links -->
<li>
<a href="extra-timeline.html">
<i class="entypo-user"></i>
Edit Profile
</a>
</li>
<li>
<a href="mailbox.html">
<i class="entypo-mail"></i>
Inbox
</a>
</li>
<li>
<a href="extra-calendar.html">
<i class="entypo-calendar"></i>
Calendar
</a>
</li>
<li>
<a href="#">
<i class="entypo-clipboard"></i>
Tasks
</a>
</li>
</ul>
</li>
</ul>
<ul class="user-info pull-left pull-right-xs pull-none-xsm">
<!-- Raw Notifications -->
<li class="notifications dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="entypo-attention"></i>
<span class="badge badge-info">6</span>
</a>
<ul class="dropdown-menu">
<li class="top">
<p class="small">
<a href="#" class="pull-right">Mark all Read</a>
You have <strong>3</strong> new notifications.
</p>
</li>
<li>
<ul class="dropdown-menu-list scroller">
<li class="unread notification-success">
<a href="#">
<i class="entypo-user-add pull-right"></i>
<span class="line">
<strong>New user registered</strong>
</span>
<span class="line small">
30 seconds ago
</span>
</a>
</li>
<li class="unread notification-secondary">
<a href="#">
<i class="entypo-heart pull-right"></i>
<span class="line">
<strong>Someone special liked this</strong>
</span>
<span class="line small">
2 minutes ago
</span>
</a>
</li>
<li class="notification-primary">
<a href="#">
<i class="entypo-user pull-right"></i>
<span class="line">
<strong>Privacy settings have been changed</strong>
</span>
<span class="line small">
3 hours ago
</span>
</a>
</li>
<li class="notification-danger">
<a href="#">
<i class="entypo-cancel-circled pull-right"></i>
<span class="line">
John cancelled the event
</span>
<span class="line small">
9 hours ago
</span>
</a>
</li>
<li class="notification-info">
<a href="#">
<i class="entypo-info pull-right"></i>
<span class="line">
The server is status is stable
</span>
<span class="line small">
yesterday at 10:30am
</span>
</a>
</li>
<li class="notification-warning">
<a href="#">
<i class="entypo-rss pull-right"></i>
<span class="line">
New comments waiting approval
</span>
<span class="line small">
last week
</span>
</a>
</li>
</ul>
</li>
<li class="external">
<a href="#">View all notifications</a>
</li>
</ul>
</li>
<!-- Message Notifications -->
<li class="notifications dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="entypo-mail"></i>
<span class="badge badge-secondary">10</span>
</a>
<ul class="dropdown-menu">
<li>
<form class="top-dropdown-search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search anything..." name="s" />
</div>
</form>
<ul class="dropdown-menu-list scroller">
<li class="active">
<a href="#">
<span class="image pull-right">
<img src="assets/images/thumb-1.png" alt="" class="img-circle" />
</span>
<span class="line">
<strong>Luc Chartier</strong>
- yesterday
</span>
<span class="line desc small">
This ain’t our first item, it is the best of the rest.
</span>
</a>
</li>
<li class="active">
<a href="#">
<span class="image pull-right">
<img src="assets/images/thumb-1.png" alt="" class="img-circle" />
</span>
<span class="line">
<strong>Salma Nyberg</strong>
- 2 days ago
</span>
<span class="line desc small">
Oh he decisively impression attachment friendship so if everything.
</span>
</a>
</li>
<li>
<a href="#">
<span class="image pull-right">
<img src="assets/images/thumb-1.png" alt="" class="img-circle" />
</span>
<span class="line">
Hayden Cartwright
- a week ago
</span>
<span class="line desc small">
Whose her enjoy chief new young. Felicity if ye required likewise so doubtful.
</span>
</a>
</li>
<li>
<a href="#">
<span class="image pull-right">
<img src="assets/images/thumb-1.png" alt="" class="img-circle" />
</span>
<span class="line">
Sandra Eberhardt
- 16 days ago
</span>
<span class="line desc small">
On so attention necessary at by provision otherwise existence direction.
</span>
</a>
</li>
</ul>
</li>
<li class="external">
<a href="mailbox.html">All Messages</a>
</li>
</ul>
</li>
<!-- Task Notifications -->
<li class="notifications dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="entypo-list"></i>
<span class="badge badge-warning">1</span>
</a>
<ul class="dropdown-menu">
<li class="top">
<p>You have 6 pending tasks</p>
</li>
<li>
<ul class="dropdown-menu-list scroller">
<li>
<a href="#">
<span class="task">
<span class="desc">Procurement</span>
<span class="percent">27%</span>
</span>
<span class="progress">
<span style="width: 27%;" class="progress-bar progress-bar-success">
<span class="sr-only">27% Complete</span>
</span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">App Development</span>
<span class="percent">83%</span>
</span>
<span class="progress progress-striped">
<span style="width: 83%;" class="progress-bar progress-bar-danger">
<span class="sr-only">83% Complete</span>
</span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">HTML Slicing</span>
<span class="percent">91%</span>
</span>
<span class="progress">
<span style="width: 91%;" class="progress-bar progress-bar-success">
<span class="sr-only">91% Complete</span>
</span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">Database Repair</span>
<span class="percent">12%</span>
</span>
<span class="progress progress-striped">
<span style="width: 12%;" class="progress-bar progress-bar-warning">
<span class="sr-only">12% Complete</span>
</span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">Backup Create Progress</span>
<span class="percent">54%</span>
</span>
<span class="progress progress-striped">
<span style="width: 54%;" class="progress-bar progress-bar-info">
<span class="sr-only">54% Complete</span>
</span>
</span>
</a>
</li>
<li>
<a href="#">
<span class="task">
<span class="desc">Upgrade Progress</span>
<span class="percent">17%</span>
</span>
<span class="progress progress-striped">
<span style="width: 17%;" class="progress-bar progress-bar-important">
<span class="sr-only">17% Complete</span>
</span>
</span>
</a>
</li>
</ul>
</li>
<li class="external">
<a href="#">See all tasks</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- Raw Links -->
<div class="col-md-6 col-sm-4 clearfix hidden-xs">
<ul class="list-inline links-list pull-right">
<!-- Language Selector -->
<li class="dropdown language-selector">
Language:
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-close-others="true">
<img src="assets/images/flag-uk.png" />
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">
<img src="assets/images/flag-de.png" />
<span>Deutsch</span>
</a>
</li>
<li class="active">
<a href="#">
<img src="assets/images/flag-uk.png" />
<span>English</span>
</a>
</li>
<li>
<a href="#">
<img src="assets/images/flag-fr.png" />
<span>François</span>
</a>
</li>
<li>
<a href="#">
<img src="assets/images/flag-al.png" />
<span>Shqip</span>
</a>
</li>
<li>
<a href="#">
<img src="assets/images/flag-es.png" />
<span>Español</span>
</a>
</li>
</ul>
</li>
<li class="sep"></li>
<li>
<a href="#" data-toggle="chat" data-collapse-sidebar="1">
<i class="entypo-chat"></i>
Chat
<span class="badge badge-success chat-notifications-badge is-hidden">0</span>
</a>
</li>
<li class="sep"></li>
<li>
<a href="extra-login.html">
Log Out <i class="entypo-logout right"></i>
</a>
</li>
</ul>
</div>
</div>
<hr />
<ol class="breadcrumb bc-3" >
<li>
<a href="index.html"><i class="fa-home"></i>Home</a>
</li>
<li>
<a href="ui-panels.html">UI Elements</a>
</li>
<li class="active">
<strong>Tabs & Accordions</strong>
</li>
</ol>
<h2>Tabs and Accordions</h2>
<br />
<div class="row">
<div class="col-md-6">
<ul class="nav nav-tabs bordered"><!-- available classes "bordered", "right-aligned" -->
<li class="active">
<a href="#home" data-toggle="tab">
<span class="visible-xs"><i class="entypo-home"></i></span>
<span class="hidden-xs">Home</span>
</a>
</li>
<li>
<a href="#profile" data-toggle="tab">
<span class="visible-xs"><i class="entypo-user"></i></span>
<span class="hidden-xs">Profile</span>
</a>
</li>
<li>
<a href="#messages" data-toggle="tab">
<span class="visible-xs"><i class="entypo-mail"></i></span>
<span class="hidden-xs">Messages</span>
</a>
</li>
<li>
<a href="#settings" data-toggle="tab">
<span class="visible-xs"><i class="entypo-cog"></i></span>
<span class="hidden-xs">Settings</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<div class="scrollable" data-height="120">
<p>Carriage quitting securing be appetite it declared. High eyes kept so busy feel call in. Would day nor ask walls known. But preserved advantage are but and certainty earnestly enjoyment. Passage weather as up am exposed. And natural related man subject. Eagerness get situation his was delighted. </p>
<p>Fulfilled direction use continual set him propriety continued. Saw met applauded favourite deficient engrossed concealed and her. Concluded boy perpetual old supposing. Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As hastened oh produced prospect formerly up am. Placing forming nay looking old married few has. Margaret disposed add screened rendered six say his striking confined. </p>
<p>When be draw drew ye. Defective in do recommend suffering. House it seven in spoil tiled court. Sister others marked fat missed did out use. Alteration possession dispatched collecting instrument travelling he or on. Snug give made at spot or late that mr. </p>
<p>Luckily friends do ashamed to do suppose. Tried meant mr smile so. Exquisite behaviour as to middleton perfectly. Chicken no wishing waiting am. Say concerns dwelling graceful six humoured. Whether mr up savings talking an. Active mutual nor father mother exeter change six did all. </p>
</div>
</div>
<div class="tab-pane" id="profile">
<p>Fulfilled direction use continual set him propriety continued. Saw met applauded favourite deficient engrossed concealed and her. Concluded boy perpetual old supposing. Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As hastened oh produced prospect formerly up am. Placing forming nay looking old married few has. Margaret disposed add screened rendered six say his striking confined. </p>
<p>When be draw drew ye. Defective in do recommend suffering. House it seven in spoil tiled court. Sister others marked fat missed did out use. Alteration possession dispatched collecting instrument travelling he or on. Snug give made at spot or late that mr. </p>
<p>Luckily friends do ashamed to do suppose. Tried meant mr smile so. Exquisite behaviour as to middleton perfectly. Chicken no wishing waiting am. Say concerns dwelling graceful six humoured. Whether mr up savings talking an. Active mutual nor father mother exeter change six did all. </p>
<p>Carriage quitting securing be appetite it declared. High eyes kept so busy feel call in. Would day nor ask walls known. But preserved advantage are but and certainty earnestly enjoyment. Passage weather as up am exposed. And natural related man subject. Eagerness get situation his was delighted. </p>
</div>
<div class="tab-pane" id="messages">
<p>When be draw drew ye. Defective in do recommend suffering. House it seven in spoil tiled court. Sister others marked fat missed did out use. Alteration possession dispatched collecting instrument travelling he or on. Snug give made at spot or late that mr. </p>
<p>Carriage quitting securing be appetite it declared. High eyes kept so busy feel call in. Would day nor ask walls known. But preserved advantage are but and certainty earnestly enjoyment. Passage weather as up am exposed. And natural related man subject. Eagerness get situation his was delighted. </p>
<p>Fulfilled direction use continual set him propriety continued. Saw met applauded favourite deficient engrossed concealed and her. Concluded boy perpetual old supposing. Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As hastened oh produced prospect formerly up am. Placing forming nay looking old married few has. Margaret disposed add screened rendered six say his striking confined. </p>
<p>Luckily friends do ashamed to do suppose. Tried meant mr smile so. Exquisite behaviour as to middleton perfectly. Chicken no wishing waiting am. Say concerns dwelling graceful six humoured. Whether mr up savings talking an. Active mutual nor father mother exeter change six did all. </p>
</div>
<div class="tab-pane" id="settings">
<p>Luckily friends do ashamed to do suppose. Tried meant mr smile so. Exquisite behaviour as to middleton perfectly. Chicken no wishing waiting am. Say concerns dwelling graceful six humoured. Whether mr up savings talking an. Active mutual nor father mother exeter change six did all. </p>
<p>Carriage quitting securing be appetite it declared. High eyes kept so busy feel call in. Would day nor ask walls known. But preserved advantage are but and certainty earnestly enjoyment. Passage weather as up am exposed. And natural related man subject. Eagerness get situation his was delighted. </p>
<p>Fulfilled direction use continual set him propriety continued. Saw met applauded favourite deficient engrossed concealed and her. Concluded boy perpetual old supposing. Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As hastened oh produced prospect formerly up am. Placing forming nay looking old married few has. Margaret disposed add screened rendered six say his striking confined. </p>
<p>When be draw drew ye. Defective in do recommend suffering. House it seven in spoil tiled court. Sister others marked fat missed did out use. Alteration possession dispatched collecting instrument travelling he or on. Snug give made at spot or late that mr. </p>
</div>
</div>
</div>
<div class="col-md-6">
<ul class="nav nav-tabs right-aligned"><!-- available classes "bordered", "right-aligned" -->
<li class="active"><a href="#home-2" data-toggle="tab">
<span class="visible-xs"><i class="entypo-home"></i></span>
<span class="hidden-xs">Home</span>
</a>
</li>
<li>
<a href="#profile-2" data-toggle="tab">
<span class="visible-xs"><i class="entypo-user"></i></span>
<span class="hidden-xs">Profile</span>
</a>
</li>
<li>
<a href="#messages-2" data-toggle="tab">
<span class="visible-xs"><i class="entypo-mail"></i></span>
<span class="hidden-xs">Messages</span>
</a>
</li>
<li>
<a href="#settings-2" data-toggle="tab">
<span class="visible-xs"><i class="entypo-cog"></i></span>
<span class="hidden-xs">Settings</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home-2">
<div class="scrollable" data-height="120">
<p>Carriage quitting securing be appetite it declared. High eyes kept so busy feel call in. Would day nor ask walls known. But preserved advantage are but and certainty earnestly enjoyment. Passage weather as up am exposed. And natural related man subject. Eagerness get situation his was delighted. </p>
<p>Fulfilled direction use continual set him propriety continued. Saw met applauded favourite deficient engrossed concealed and her. Concluded boy perpetual old supposing. Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As hastened oh produced prospect formerly up am. Placing forming nay looking old married few has. Margaret disposed add screened rendered six say his striking confined. </p>
<p>When be draw drew ye. Defective in do recommend suffering. House it seven in spoil tiled court. Sister others marked fat missed did out use. Alteration possession dispatched collecting instrument travelling he or on. Snug give made at spot or late that mr. </p>
<p>Luckily friends do ashamed to do suppose. Tried meant mr smile so. Exquisite behaviour as to middleton perfectly. Chicken no wishing waiting am. Say concerns dwelling graceful six humoured. Whether mr up savings talking an. Active mutual nor father mother exeter change six did all. </p>
</div>
</div>
<div class="tab-pane" id="profile-2">
Profile Tab
</div>
<div class="tab-pane" id="messages-2">
Messages Tab
</div>
<div class="tab-pane" id="settings-2">
Settings Tab
</div>
</div>
<br />
</div>
</div>
<h3>Accordions</h3>
<br />
<div class="row">
<div class="col-md-6">
<div class="panel-group joined" id="accordion-test-2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-test-2" href="#collapseOne-2">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne-2" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-test-2" href="#collapseTwo-2" class="collapsed">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo-2" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-test-2" href="#collapseThree-2" class="collapsed">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree-2" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-group" id="accordion-test">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-test" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-test" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-test" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<h3>Vertical Tabs</h3>
<br />
<div class="row">
<div class="col-md-6">
<div class="tabs-vertical-env">
<ul class="nav tabs-vertical"><!-- available classes "right-aligned" -->
<li class="active"><a href="#v-home" data-toggle="tab">Home</a></li>
<li><a href="#v-profile" data-toggle="tab">Profile</a></li>
<li><a href="#v-messages" data-toggle="tab">Messages</a></li>
<li><a href="#v-settings" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="v-home">
<p>Carriage quitting securing be appetite it declared. High eyes kept so busy feel call in. Would day nor ask walls known. But preserved advantage are but and certainty earnestly enjoyment. Passage weather as up am exposed. And natural related man subject. Eagerness get situation his was delighted. </p>
</div>
<div class="tab-pane" id="v-profile">
<p>Fulfilled direction use continual set him propriety continued. Saw met applauded favourite deficient engrossed concealed and her. Concluded boy perpetual old supposing. Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As hastened oh produced prospect formerly up am. Placing forming nay looking old married few has. Margaret disposed add screened rendered six say his striking confined. </p>
</div>
<div class="tab-pane" id="v-messages">
<p>When be draw drew ye. Defective in do recommend suffering. House it seven in spoil tiled court. Sister others marked fat missed did out use. Alteration possession dispatched collecting instrument travelling he or on. Snug give made at spot or late that mr. </p>
</div>
<div class="tab-pane" id="v-settings">
<p>Luckily friends do ashamed to do suppose. Tried meant mr smile so. Exquisite behaviour as to middleton perfectly. Chicken no wishing waiting am. Say concerns dwelling graceful six humoured. Whether mr up savings talking an. Active mutual nor father mother exeter change six did all. </p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="tabs-vertical-env">
<ul class="nav tabs-vertical right-aligned"><!-- available classes "right-aligned" -->
<li class="active"><a href="#v-home" data-toggle="tab">Home</a></li>
<li><a href="#v2-profile" data-toggle="tab">Profile</a></li>
<li><a href="#v2-messages" data-toggle="tab">Messages</a></li>
<li><a href="#v2-settings" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="v2-home">
<p>Carriage quitting securing be appetite it declared. High eyes kept so busy feel call in. Would day nor ask walls known. But preserved advantage are but and certainty earnestly enjoyment. Passage weather as up am exposed. And natural related man subject. Eagerness get situation his was delighted. </p>
</div>
<div class="tab-pane" id="v2-profile">
<p>Fulfilled direction use continual set him propriety continued. Saw met applauded favourite deficient engrossed concealed and her. Concluded boy perpetual old supposing. Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As hastened oh produced prospect formerly up am. Placing forming nay looking old married few has. Margaret disposed add screened rendered six say his striking confined. </p>
</div>
<div class="tab-pane" id="v2-messages">
<p>When be draw drew ye. Defective in do recommend suffering. House it seven in spoil tiled court. Sister others marked fat missed did out use. Alteration possession dispatched collecting instrument travelling he or on. Snug give made at spot or late that mr. </p>
</div>
<div class="tab-pane" id="v2-settings">
<p>Luckily friends do ashamed to do suppose. Tried meant mr smile so. Exquisite behaviour as to middleton perfectly. Chicken no wishing waiting am. Say concerns dwelling graceful six humoured. Whether mr up savings talking an. Active mutual nor father mother exeter change six did all. </p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="main">
© 2014 <strong>Neon</strong> Admin Theme by <a href="http://laborator.co" target="_blank">Laborator</a>
</footer>
</div>
<div id="chat" class="fixed" data-current-user="Art Ramadani" data-order-by-status="1" data-max-chat-history="25">
<div class="chat-inner">
<h2 class="chat-header">
<a href="#" class="chat-close"><i class="entypo-cancel"></i></a>
<i class="entypo-users"></i>
Chat
<span class="badge badge-success is-hidden">0</span>
</h2>
<div class="chat-group" id="group-1">
<strong>Favorites</strong>
<a href="#" id="sample-user-123" data-conversation-history="#sample_history"><span class="user-status is-online"></span> <em>Catherine J. Watkins</em></a>
<a href="#"><span class="user-status is-online"></span> <em>Nicholas R. Walker</em></a>
<a href="#"><span class="user-status is-busy"></span> <em>Susan J. Best</em></a>
<a href="#"><span class="user-status is-offline"></span> <em>Brandon S. Young</em></a>
<a href="#"><span class="user-status is-idle"></span> <em>Fernando G. Olson</em></a>
</div>
<div class="chat-group" id="group-2">
<strong>Work</strong>
<a href="#"><span class="user-status is-offline"></span> <em>Robert J. Garcia</em></a>
<a href="#" data-conversation-history="#sample_history_2"><span class="user-status is-offline"></span> <em>Daniel A. Pena</em></a>
<a href="#"><span class="user-status is-busy"></span> <em>Rodrigo E. Lozano</em></a>
</div>
<div class="chat-group" id="group-3">
<strong>Social</strong>
<a href="#"><span class="user-status is-busy"></span> <em>Velma G. Pearson</em></a>
<a href="#"><span class="user-status is-offline"></span> <em>Margaret R. Dedmon</em></a>
<a href="#"><span class="user-status is-online"></span> <em>Kathleen M. Canales</em></a>
<a href="#"><span class="user-status is-offline"></span> <em>Tracy J. Rodriguez</em></a>
</div>
</div>
<!-- conversation template -->
<div class="chat-conversation">
<div class="conversation-header">
<a href="#" class="conversation-close"><i class="entypo-cancel"></i></a>
<span class="user-status"></span>
<span class="display-name"></span>
<small></small>
</div>
<ul class="conversation-body">
</ul>
<div class="chat-textarea">
<textarea class="form-control autogrow" placeholder="Type your message"></textarea>
</div>
</div>
</div>
<!-- Chat Histories -->
<ul class="chat-history" id="sample_history">
<li>
<span class="user">Art Ramadani</span>
<p>Are you here?</p>
<span class="time">09:00</span>
</li>
<li class="opponent">
<span class="user">Catherine J. Watkins</span>
<p>This message is pre-queued.</p>
<span class="time">09:25</span>
</li>
<li class="opponent">
<span class="user">Catherine J. Watkins</span>
<p>Whohoo!</p>
<span class="time">09:26</span>
</li>
<li class="opponent unread">
<span class="user">Catherine J. Watkins</span>
<p>Do you like it?</p>
<span class="time">09:27</span>
</li>
</ul>
<!-- Chat Histories -->
<ul class="chat-history" id="sample_history_2">
<li class="opponent unread">
<span class="user">Daniel A. Pena</span>
<p>I am going out.</p>
<span class="time">08:21</span>
</li>
<li class="opponent unread">
<span class="user">Daniel A. Pena</span>
<p>Call me when you see this message.</p>
<span class="time">08:27</span>
</li>
</ul>
</div>
<!-- Bottom scripts (common) -->
<script src="assets/js/gsap/main-gsap.js"></script>
<script src="assets/js/jquery-ui/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/joinable.js"></script>
<script src="assets/js/resizeable.js"></script>
<script src="assets/js/neon-api.js"></script>
<!-- Imported scripts on this page -->
<script src="assets/js/neon-chat.js"></script>
<!-- JavaScripts initializations and stuff -->
<script src="assets/js/neon-custom.js"></script>
<!-- Demo Settings -->
<script src="assets/js/neon-demo.js"></script>
</body>
</html>