﻿<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="keywords" content="admin template, admin dashboard, inbox templte, calendar template, form validation">
<meta name="author" content="DazeinCreative">
<meta name="description" content="ORB - Powerfull and Massive Admin Dashboard Template with tonns of useful features">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ORB | Portlets</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<!--Demo Colors Override-->
<link id="demo-styles" href="css/styles-defaults.css" rel="stylesheet" type="text/css">

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<script type="text/javascript" src="js/vendors/modernizr/modernizr.custom.js"></script>
</head>
<body>

<!--Smooth Scroll-->
<div class="smooth-overflow">
<!--Navigation-->
    <nav class="main-header clearfix" role="navigation"> <a class="navbar-brand" href="index.html"><span class="text-blue">ORB</span></a> 
      
      <!--Search-->
      <div class="site-search">
        <form action="#" id="inline-search">
          <i class="fa fa-search"></i>
          <input type="search" placeholder="Search">
        </form>
      </div>
      
      <!--Navigation Itself-->
      
      <div class="navbar-content"> 
        
        <!--Sidebar Toggler--> 
        <a href="#" class="btn btn-default left-toggler"><i class="fa fa-bars"></i></a> 
        <!--Right Userbar Toggler--> 
        <a href="#" class="btn btn-user right-toggler pull-right"><i class="entypo-vcard"></i> <span class="logged-as hidden-xs">Logged as</span><span class="logged-as-name hidden-xs">Anton Durant</span></a> 
        <!--Fullscreen Trigger-->
        <button type="button" class="btn btn-default hidden-xs pull-right" id="toggle-fullscreen"> <i class=" entypo-popup"></i> </button>
        
        <!--Settings Dropdown-->
        <div class="btn-group pull-right">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <i class="entypo-cog"></i></button>
          <div id="settings-dropdown" class="dropdown-menu keep_open orb-form">
            <div class="dropdown-header">Settings <span class="badge pull-right">6</span></div>
            <div class="dropdown-container">
              <div class="nano">
                <div class="nano-content">
                  <ul class="settings-dropdown">
                    <li>
                      <label class="toggle">
                        <input type="checkbox" name="checkbox-toggle" checked>
                        <i></i>Prevent Midnblow</label>
                    </li>
                    <li>
                      <label class="toggle">
                        <input type="checkbox" name="checkbox-toggle" checked>
                        <i></i>Sleep All nights</label>
                    </li>
                    <li>
                      <label class="toggle">
                        <input type="checkbox" name="checkbox-toggle" checked>
                        <i></i>Drink more Coffee</label>
                    </li>
                    <li>
                      <label class="toggle">
                        <input type="checkbox" name="checkbox-toggle" checked>
                        <i></i>Auto feed cat</label>
                    </li>
                    <li>
                      <label class="toggle">
                        <input type="checkbox" name="checkbox-toggle" checked>
                        <i></i>Dummy Checkbox</label>
                    </li>
                    <li>
                      <label class="toggle">
                        <input type="checkbox" name="checkbox-toggle" checked>
                        <i></i>Read More Books</label>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="dropdown-footer"> <a class="btn btn-dark" href="#">Save</a> </div>
          </div>
        </div>
        
        <!--Lock Screen--> 
        <a href="#" data-toggle="modal" class="btn btn-default hidden-xs pull-right lockme"> <i class="entypo-lock"></i> </a> 
        
        <!--Notifications Dropdown-->
        
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <i class="entypo-megaphone"></i><span class="new"></span></button>
          <div id="notification-dropdown" class="dropdown-menu">
            <div class="dropdown-header">Notifications <span class="badge pull-right">8</span></div>
            <div class="dropdown-container">
              <div class="nano">
                <div class="nano-content">
                  <ul class="notification-dropdown">
                    <li class="bg-warning"><a href="#"> <span class="notification-icon"><i class="fa fa-bolt"></i></span>
                      <h4>Server Down</h4>
                      <p>Server #435 was shut down (Power loss)</p>
                      <span class="label label-default"><i class="entypo-clock"></i> 59 mins ago</span> </a> </li>
                    <li class="bg-info"><a href="#"> <span class="notification-icon"><i class="fa fa-bolt"></i></span>
                      <h4>Too Many Connections</h4>
                      <p>Too many connections to Database Server</p>
                      <span class="label label-default"><i class="entypo-clock"></i> 2 hours ago</span> </a> </li>
                    <li class="bg-danger"><a href="#"> <span class="notification-icon"><i class="fa fa-android"></i></span>
                      <h4>Sausage Stolen</h4>
                      <p>Someone stole your hot sausage</p>
                      <span class="label label-default"><i class="entypo-clock"></i> 3 hours ago</span> </a> </li>
                    <li class="bg-success"><a href="#"> <span class="notification-icon"><i class="fa fa-bolt"></i></span>
                      <h4>Defragmentation Completed</h4>
                      <p>Disc Defragmentation Completed on Server</p>
                      <span class="label label-default"><i class="entypo-clock"></i> 3 hours ago</span> </a> </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="dropdown-footer"><a class="btn btn-dark" href="#">See All</a></div>
          </div>
        </div>
        
        <!--Inbox Dropdown-->
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="entypo-mail"></i><span class="new"></span></button>
          <div id="inbox-dropdown" class="dropdown-menu inbox">
            <div class="dropdown-header">Inbox <span class="badge pull-right">32</span></div>
            <div class="dropdown-container">
              <div class="nano">
                <div class="nano-content">
                  <ul class="inbox-dropdown">
                    <li><a href="#"> <span class="user-image"><img src="images/users/1.jpg" alt="Gluck Morris" /></span>
                      <h4>Why don't u answer calls?</h4>
                      <p>Listen, dude, time is off. I'll find you soon! Sounds good?...</p>
                      <span class="label label-default"><i class="entypo-clock"></i> 59 mins ago</span> <span class="delete"><i class="entypo-back"></i></span> </a> </li>
                    <li><a href="#"> <span class="user-image"><img src="images/users/6.jpg" alt="Gluck Morris" /></span>
                      <h4>Rawrr, rawrrr...</h4>
                      <p>Listen, dude, time is off. I'll find you soon! Sounds good?...</p>
                      <span class="label label-default"><i class="entypo-clock"></i> 2 hours ago</span> <span class="delete"><i class="entypo-back"></i></span> </a> </li>
                    <li><a href="#"> <span class="user-image"><img src="images/users/5.jpg" alt="Gluck Morris" /></span>
                      <h4>Why so serious?</h4>
                      <p>Listen, dude, time is off. I'll find you soon! Sounds good?...</p>
                      <span class="label label-default"><i class="entypo-clock"></i> 3 hours ago</span> <span class="delete"><i class="entypo-back"></i></span> </a> </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="dropdown-footer"><a class="btn btn-dark" href="admin-inbox.html">Save All</a></div>
          </div>
        </div>
      </div>
    </nav>
    
    <!--/Navigation--> 
    
    <!--MainWrapper-->
    <div class="main-wrap"> 
      
      <!--OffCanvas Menu -->
      <aside class="user-menu"> 
        
        <!-- Tabs -->
        <div class="tabs-offcanvas">
          <ul class="nav nav-tabs nav-justified">
            <li class="active"><a href="#userbar-one" data-toggle="tab">Main</a></li>
            <li><a href="#userbar-two" data-toggle="tab">Users</a></li>
            <li><a href="#userbar-three" data-toggle="tab">ToDo</a></li>
          </ul>
          <div class="tab-content"> 
            
            <!--User Primary Panel-->
            <div class="tab-pane active" id="userbar-one">
              <div class="main-info">
                <div class="user-img"><img src="images/users/2-big.jpg" alt="User Picture" /></div>
                <h1>Anton Durant <small>Administrator</small></h1>
              </div>
              <div class="list-group"> <a href="#" class="list-group-item"><i class="fa fa-user"></i>Profile</a> <a href="#" class="list-group-item"><i class="fa fa-cog"></i>Settings</a> <a href="#" class="list-group-item"><i class="fa fa-flask"></i>Projects<span class="badge">2</span></a>
                <div class="empthy"></div>
                <a href="#" class="list-group-item"><i class="fa fa-refresh"></i>Updates<span class="badge">5</span></a> <a href="#" class="list-group-item"><i class="fa fa-comment"></i>Messages<span class="badge">12</span></a> <a href="#" class="list-group-item"><i class="fa fa-comments"></i> Comments<span class="badge">45</span></a>
                <div class="empthy"></div>
                <a href="#" data-toggle="modal" class="list-group-item lockme"><i class="fa fa-lock"></i> Lock</a> <a data-toggle="modal" href="#" class="list-group-item goaway"><i class="fa fa-power-off"></i> Sign Out</a> </div>
            </div>
            
            <!--User Chat Panel-->
            <div class="tab-pane" id="userbar-two">
              <div class="chat-users-menu"> 
                <!--Adding Some Scroll-->
                <div class="nano">
                  <div class="nano-content">
                    <div class="buttons">
                      <div class="btn-group btn-group-xs">
                        <button type="button" class="btn btn-default">Friends</button>
                        <button type="button" class="btn btn-default">Work</button>
                        <button type="button" class="btn btn-default">Girls</button>
                      </div>
                    </div>
                    <ul>
                      <li><a href="#"><span class="chat-name">Gluck Morris</span><span class="user-img"><img src="images/users/1.jpg" alt="User"/></span><span class="label label-success">Online</span><span class="badge">5</span></a></li>
                      <li><a href="#"><span class="chat-name">Anton Durant</span><span class="user-img"><img src="images/users/2.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">Spiderman</span><span class="user-img"><img src="images/users/3.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">Muchacho</span><span class="user-img"><img src="images/users/4.jpg" alt="User"/></span><span class="label label-default">Offline</span></a></li>
                      <li><a href="#"><span class="chat-name">Mr. Joker</span><span class="user-img"><img src="images/users/5.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">Chewbacca</span><span class="user-img"><img src="images/users/6.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">The Piggy</span><span class="user-img"><img src="images/users/7.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">Anton Durant</span><span class="user-img"><img src="images/users/2.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">Spiderman</span><span class="user-img"><img src="images/users/3.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">Muchacho</span><span class="user-img"><img src="images/users/4.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">Anton Durant</span><span class="user-img"><img src="images/users/2.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">Spiderman</span><span class="user-img"><img src="images/users/3.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">Muchacho</span><span class="user-img"><img src="images/users/4.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">Anton Durant</span><span class="user-img"><img src="images/users/2.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">Spiderman</span><span class="user-img"><img src="images/users/3.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">Muchacho</span><span class="user-img"><img src="images/users/4.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">Anton Durant</span><span class="user-img"><img src="images/users/2.jpg" alt="User"/></span><span class="label label-default">Offline</span></a></li>
                      <li><a href="#"><span class="chat-name">Spiderman</span><span class="user-img"><img src="images/users/3.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                      <li><a href="#"><span class="chat-name">Muchacho</span><span class="user-img"><img src="images/users/4.jpg" alt="User"/></span><span class="label label-success">Online</span></a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            
            <!--User Tasks Panel-->
            <div class="tab-pane" id="userbar-three">
              <div class="nano"> 
                <!--Adding Some Scroll-->
                <div class="nano-content">
                  <div class="small-todos">
                    <div class="input-group input-group-sm">
                      <input id="new-todo" placeholder="Add ToDo" type="text" class="form-control">
                      <span class="input-group-btn">
                      <button id="add-todo" class="btn btn-default" type="button"><i class="fa fa-plus-circle"></i></button>
                      </span> </div>
                    <section id="task-list">
                      <ul id="todo-list">
                      </ul>
                    </section>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- /tabs --> 
        
      </aside>
      <!-- /Offcanvas user menu--> 
      
      <!--Main Menu-->
      <div class="responsive-admin-menu">
        <div class="responsive-menu">ORB
          <div class="menuicon"><i class="fa fa-angle-down"></i></div>
        </div>
      <ul id="menu">
        <li><a class="submenu" href="#" title="Dashboard" data-id="dash-sub"><i class="entypo-briefcase"></i><span> Dashboard</span></a>
          <ul id="dash-sub">
            <li><a href="index.html" title="Dashboard Variant One"><i class="fa fa-cubes"></i><span> Layout I </span></a></li>
            <li><a href="index-2.html" title="Dashboard Variant Two"><i class="fa fa-cubes"></i><span> Layout II <span class="badge">New!</span></span></a></li>
          </ul>
        </li>
          <li><a href="admin-inbox.html" title="Inbox"><i class="entypo-inbox"></i><span> Inbox <span class="badge">32</span></span></a></li>
          <li><a class="submenu active" href="#" title="Widgets" data-id="widgets-sub"><i class="entypo-rocket"></i><span> Widgets</span></a>
            <ul id="widgets-sub">
              <li><a href="admin-widgets.html" title="Power Widgets"><i class="entypo-rocket"></i><span> Power Widgets</span></a></li>
              <li><a href="admin-portlets.html" title="Portlets"><i class="fa fa-square"></i><span> Portlets</span></a></li>
            </ul>
          </li>
          <li><a href="#" class="submenu" data-id="tables-sub" title="Tables"><i class="fa fa-table"></i><span> Tables</span></a> 
            <!-- Tables Sub-Menu -->
            <ul id="tables-sub" class="accordion">
              <li><a href="admin-tables.html" title="Timeline"><i class="fa fa-table"></i><span> Tables</span></a></li>
              <li><a href="admin-datatables.html" title="Profile"><i class="entypo-database"></i><span> Datatables</span></a></li>
            </ul>
          </li>
          <li><a class="submenu" href="#" data-id="other-sub" title="Other Contents"><i class="fa fa-th"></i><span> Forms</span></a> 
            <!-- Forms Sub-Menu -->
            <ul id="other-sub" class="accordion">
              <li><a href="admin-forms.html" title="Forms"><i class="fa fa-th"></i><span> Forms</span></a></li>
              <li><a href="admin-forms-bootstrap.html" title="Bootstrap Forms"><i class="fa fa-table"></i><span> Bootstrap Forms</span></a></li>
              <li><a href="admin-forms-plugins.html" title="Forms Plugins"><i class="fa fa-puzzle-piece"></i><span> Form Plugins</span></a></li>
              <li><a href="admin-forms-validation.html" title="Forms Validation"><i class="fa fa-check-circle"></i><span> Form Validation</span></a></li>
              <li><a href="admin-forms-wizard.html" title="Forms Wizard"><i class="fa fa-magic"></i><span> Form Wizard</span></a></li>
            </ul>
          <li> <a class="submenu" href="#" title="Graph &amp; Charts" data-id="graph-sub"><i class="entypo-chart-area"></i><span> Graph &amp; Charts</span></a> 
            <!-- Graph and Charts Menu -->
            <ul id="graph-sub" class="accordion">
              <li><a href="admin-chart-morris.html" title="Video Gallery"><i class="entypo-chart-bar"></i><span> Morris Charts</span></a></li>
              <li><a href="admin-chart-flot.html" title="Photo Gallery"><i class="entypo-chart-line"></i><span> Flot Charts</span></a></li>
              <li><a href="admin-chart-others.html" title="Photo Gallery"><i class="entypo-chart-pie"></i><span> Others Charts</span></a></li>
            </ul>
          <li> <a class="submenu" href="#" data-id="interface-sub" title="Interface"><i class="entypo-palette"></i><span> Interface</span></a> 
            <!-- Interface Sub-Menu -->
            <ul id="interface-sub" class="accordion">
              <li><a href="admin-typography.html" title="Typography"><i class="entypo-language"></i><span> Typography</span></a></li>
              <li><a href="admin-nestable.html" title="Nestable"><i class="entypo-list-add"></i><span> Nestable</span></a></li>
              <li><a href="admin-tree-view.html" title="Tree View"><i class="entypo-flow-tree"></i><span> Tree View</span></a></li>
              <li><a href="admin-animation.html" title="Animation"><i class="entypo-cd"></i><span> Animation</span></a></li>
              <li><a href="admin-components.html" title="Components"><i class="entypo-traffic-cone"></i><span> Components</span></a></li>
              <li><a href="admin-elements.html" title="Elements"><i class="entypo-archive"></i><span> Elements</span></a></li>
              <li><a href="admin-buttons.html" title="Items List"><i class="entypo-list"></i><span> Buttons</span></a></li>
              <li><a href="#" data-id="fonts-sub" title="Icon Fonts" class="submenu"><i class="fa fa-heart"></i><span> Icons</span></a>
                <ul id="fonts-sub">
                  <li><a href="admin-font-awesome.html" title="Awesome Font"><i class="fa fa-flag"></i><span> Awesome</span></a></li>
                  <li><a href="admin-font-glyphicons.html" title="Glyphicons"><i class="entypo-cancel-circled"></i><span> Glyphicons</span></a></li>
                  <li><a href="admin-font-entypo.html" title="Entypo"><i class="entypo-flag"></i><span> Entypo</span></a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li> <a class="submenu" href="#" data-id="pages-sub" title="Pages"><i class="entypo-book"></i><span> Pages</span></a> 
            <!-- Pages Sub-Menu -->
            <ul id="pages-sub">
              <li><a href="admin-megamenu.html" title="MegaMenu"><i class="entypo-menu"></i><span> MegaMenu <span class="badge">New!</span></span></a></li>
          <li><a href="admin-timeline.html" title="Timeline"><i class="entypo-chart-bar"></i><span> Timeline</span></a></li>
              <li><a href="admin-profile.html" title="Profile"><i class="entypo-user"></i><span> Profile</span></a></li>
              <li><a href="admin-gallery.html" title="Gallery"><i class="entypo-picture"></i><span> Gallery</span></a></li>
              <li><a href="admin-user-list.html" title="Items List"><i class="entypo-list"></i><span> Items List</span></a></li>
              <li><a href="admin-pricelists.html" title="Pricelists"><i class="entypo-tag"></i><span> Pricelists</span></a></li>
              <li><a href="admin-forum.html" title="Forum"><i class="entypo-comment"></i><span> Forum</span></a></li>
              <li><a href="admin-chat.html" title="Chat"><i class="entypo-chat"></i><span> Chat</span></a></li>
              <li><a href="admin-404.html" title="404"><i class="entypo-window"></i><span> 404 Error</span></a></li>
              <li><a href="admin-404.html" title="500"><i class="entypo-window"></i><span> 500 Error</span></a></li>
              <li><a href="admin-login.html" title="Login"><i class="entypo-vcard"></i><span> Login Page</span></a></li>
              <li><a href="admin-clear.html" title="Clear Page"><i class="entypo-monitor"></i><span> Carte blanche</span></a></li>
              <li><a href="admin-events.html" title="Events Calendar"><i class="entypo-calendar"></i><span> Calendar</span></a></li>
              <li><a href="admin-search.html" title="Search Results"><i class="entypo-search"></i><span> Search Results</span></a></li>
              <li><a href="admin-invoice.html" title="Invoice"><i class="entypo-box"></i><span> Invoice</span></a></li>
            </ul>
          </li>
          <li> <a class="submenu" href="#" data-id="maps-sub" title="Maps"><i class="entypo-map"></i><span> Maps</span></a> 
            <!-- Maps Sub-Menu -->
            <ul id="maps-sub">
              <li><a href="admin-maps-google.html" title="Google Maps"><i class="entypo-location"></i><span> Google Maps</span></a></li>
              <li><a href="admin-maps-vector.html" title="Vector Maps"><i class="entypo-compass"></i><span> Vector Maps</span></a></li>
            </ul>
          </li>
          
          <!-- Other Contents Menu -->
          <li><a href="http://bigmedved.ru/orb/frontend/" title="Front End"><i class="entypo-cog"></i><span> Front End <span class="badge">New!</span></span></a></li>
        </ul>
      </div>
      <!--/MainMenu-->
      
      <!--Content Wrapper-->
      <div class="content-wrapper"> 
        <!--Horisontal Dropdown-->
        <nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">
          <div class="cbp-hsinner">
            <ul class="cbp-hsmenu">
              <li> <a href="#"><span class="icon-bar"></span></a>
                <ul class="cbp-hssubmenu">
                  <li><a href="#">
                    <div class="sparkle-dropdown"><span class="inlinebar">10,8,8,7,8,9,7,8,10,9,7,5</span>
                      <p class="sparkle-name">project income</p>
                      <p class="sparkle-amount">$23989 <i class="fa fa-chevron-circle-up"></i></p>
                    </div>
                    </a></li>
                  <li><a href="#">
                    <div class="sparkle-dropdown"><span class="linechart">5,6,7,9,9,5,3,2,9,4,6,7</span>
                      <p class="sparkle-name">site traffic</p>
                      <p class="sparkle-amount">122541 <i class="fa fa-chevron-circle-down"></i></p>
                    </div>
                    </a></li>
                  <li><a href="#">
                    <div class="sparkle-dropdown"><span class="simpleline">9,6,7,9,3,5,7,2,1,8,6,7</span>
                      <p class="sparkle-name">Processes</p>
                      <p class="sparkle-amount">890 <i class="fa fa-plus-circle"></i></p>
                    </div>
                    </a></li>
                  <li><a href="#">
                    <div class="sparkle-dropdown"><span class="inlinebar">10,8,8,7,8,9,7,8,10,9,7,5</span>
                      <p class="sparkle-name">orders</p>
                      <p class="sparkle-amount">$23989 <i class="fa fa-chevron-circle-up"></i></p>
                    </div>
                    </a></li>
                  <li><a href="#">
                    <div class="sparkle-dropdown"><span class="piechart">1,2,3</span>
                      <p class="sparkle-name">active/new</p>
                      <p class="sparkle-amount">500/200 <i class="fa fa-chevron-circle-up"></i></p>
                    </div>
                    </a></li>
                  <li><a href="#">
                    <div class="sparkle-dropdown"><span class="stackedbar">3:6,2:8,8:4,5:8,3:6,9:4,8:1,5:7,4:8,9:5,3:5</span>
                      <p class="sparkle-name">fault/success</p>
                      <p class="sparkle-amount">$23989 <i class="fa fa-chevron-circle-up"></i></p>
                    </div>
                    </a></li>
                </ul>
              </li>
            </ul>
          </div>
        </nav>
        
        <!--Breadcrumb-->
        <div class="breadcrumb clearfix">
          <ul>
            <li><a href="index.html"><i class="fa fa-home"></i></a></li>
            <li><a href="index.html">Dashboard</a></li>
            <li class="active">Data</li>
          </ul>
        </div>
        <!--/Breadcrumb-->
        
        <div class="page-header">
          <h1>Portlets<small>Gallery</small></h1>
        </div>
        
        <!-- Widget Row Start grid -->
        <div class="row" id="powerwidgets">
          <div class="col-md-3 col-sm-6 bootstrap-grid"> 
            
            <!-- New widget -->
            <div class="powerwidget powerwidget-as-portlet powerwidget-as-portlet-cold-grey" id="widget1" data-widget-editbutton="false">
              <header> </header>
              <div class="inner-spacer nopadding">
                <div class="portlet-big-icon animated bounceIn text-pink"><i class="fa fa-heart"></i></div>
                <ul class="portlet-bottom-block">
                  <li class="col-md-4 col-sm-4 col-xs-4"><strong>5</strong><small>Friends</small></li>
                  <li class="col-md-4 col-sm-4 col-xs-4"><strong>232</strong><small>Posts</small></li>
                  <li class="col-md-4 col-sm-4 col-xs-4"><strong>2</strong><small>Requests</small></li>
                </ul>
              </div>
            </div>
            <!-- /New widget --> 
            
          </div>
          <!-- /Inner Row Col-md-3 -->
          
          <div class="col-md-3 col-sm-6 bootstrap-grid"> 
            
            <!-- New widget -->
            <div class="powerwidget powerwidget-as-portlet powerwidget-as-portlet-blue" id="widget2" data-widget-editbutton="false">
              <header> </header>
              <div class="inner-spacer nopadding">
                <div class="portlet-big-icon"><i class="fa entypo-facebook-circled"></i></div>
                <ul class="portlet-bottom-block">
                  <li class="col-md-4 col-sm-4 col-xs-4"><strong>19</strong><small>Friends</small></li>
                  <li class="col-md-4 col-sm-4 col-xs-4"><strong>232</strong><small>Posts</small></li>
                  <li class="col-md-4 col-sm-4 col-xs-4"><strong>507</strong><small>Requests</small></li>
                </ul>
              </div>
            </div>
            <!-- /New widget --> 
            
          </div>
          <!-- /Inner Row Col-md-3 -->
          
          <div class="col-md-3 col-sm-6 bootstrap-grid"> 
            
            <!-- New widget -->
            <div class="powerwidget powerwidget-as-portlet powerwidget-as-portlet-green-alt" id="widget3" data-widget-editbutton="false">
              <header> </header>
              <div class="inner-spacer nopadding">
                <div class="portlet-big-icon"><i class="fa fa-money"></i></div>
                <ul class="portlet-bottom-block">
                  <li class="col-md-6 col-sm-6 col-xs-6"><strong>$2791</strong><small>Income</small></li>
                  <li class="col-md-6 col-sm-6 col-xs-6"><strong>$2322</strong><small>Outcome</small></li>
                </ul>
              </div>
            </div>
            <!-- /New widget --> 
            
          </div>
          <!-- /Inner Row Col-md-3 -->
          
          <div class="col-md-3 col-sm-6 bootstrap-grid"> 
            
            <!-- New widget -->
            <div class="powerwidget powerwidget-as-portlet powerwidget-as-portlet-purple" id="widget4" data-widget-editbutton="false">
              <header> </header>
              <div class="inner-spacer nopadding">
                <div class="portlet-big-icon"><i class="fa fa-google-plus"></i></div>
                <ul class="portlet-bottom-block">
                  <li class="col-md-4 col-sm-4 col-xs-4"><strong>199</strong><small>Friends</small></li>
                  <li class="col-md-4 col-sm-4 col-xs-4"><strong>211</strong><small>Posts</small></li>
                  <li class="col-md-4 col-sm-4 col-xs-4"><strong>588</strong><small>Requests</small></li>
                </ul>
              </div>
            </div>
            <!-- /New widget --> 
            
          </div>
          <!-- /Inner Row Col-md-3 -->
          <div class="clearfix"></div>
          <div class="col-md-6 bootstrap-grid"> 
            
            <!-- New widget -->
            <div class="powerwidget powerwidget-as-portlet powerwidget-as-portlet-white" id="widget5" data-widget-editbutton="false">
              <header>
                <h2>Portlet<small>With Carousel</small></h2>
              </header>
              <div class="inner-spacer nopadding">
                <div class="portlet-profile">
                  <div class="user-img"><img src="images/users/2-big.jpg" alt="User Picture" /></div>
                  <h1>Anton Durant</h1>
                  Followers: 451 | Friends: 45 | Items: 22 </div>
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                  <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                  </ol>
                  <div class="carousel-inner">
                    <div class="item item4 active"> </div>
                    <div class="item item5"></div>
                    <div class="item item6"></div>
                  </div>
                  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
              </div>
            </div>
            <!-- /New widget --> 
            
            <!-- New widget -->
            <div class="powerwidget powerwidget-as-portlet-white" id="chart-portlet-1" data-widget-editbutton="false">
              <header>
                <h2>SalesChart<small>With Sparklines</small></h2>
              </header>
              <div class="inner-spacer">
                <div class="row">
                  <div class="col-md-12 text-center"> <span id="portlet-compositeline">8,4,3,6,7,0,1,4,4,10,5,10,4,7,2,1,4,6,5,9,10</span> </div>
                  <div class="col-md-6 col-sm-6 col-xs-6 text-center">
                    <h1 class="text-purple margin-0px margin-top">25551</h1>
                    <small class="text-purple">Gadget Sales <i class="fa fa-chevron-circle-up"></i></small> </div>
                  <div class="col-md-6 col-sm-6 col-xs-6 text-center">
                    <h1 class="text-blue margin-0px margin-top">6891</h1>
                    <small class="text-blue">Toys Sales <i class="fa fa-chevron-circle-up"></i></small> </div>
                </div>
              </div>
            </div>
            <!-- /New widget --> 
            
            <!-- New widget -->
            <div class="powerwidget powerwidget-as-portlet powerwidget-as-portlet-blue" id="widget7" data-widget-editbutton="false">
              <header>
                <h2>Portlet<small>With Vector Map</small></h2>
              </header>
              <div class="inner-spacer">
                <div id="vmap-usa" class="jqvmap"></div>
              </div>
            </div>
            <!-- /New widget --> 
            
            <!-- New widget -->
            <div class="powerwidget powerwidget-as-portlet powerwidget-as-portlet-blue" id="widget10" data-widget-editbutton="false">
              <header>
                <h2>Portlet<small>Weather</small></h2>
              </header>
              <div class="inner-spacer nopadding">
                <div class="weather-current-city">
                  <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-6"><span class="current-city">London, GB</span><span class="current-temp">19&deg;C</span><span class="current-day">Wednesday, 14 April</span></div>
                    <div class="col-md-6 col-sm-6 col-xs-6"><span class="current-day-icon">
                      <canvas id="clear-day" width="120" height="120"></canvas>
                      </span></div>
                  </div>
                </div>
                <div class="row">
                  <ul class="days">
                    <li class="col-md-3 col-sm-3 col-xs-3"><strong>Tue</strong>
                      <canvas id="snow" width="50" height="50"></canvas>
                      <span>19&deg;</span></li>
                    <li class="col-md-3 col-sm-3 col-xs-3"><strong>Fri</strong>
                      <canvas id="rain" width="50" height="50"></canvas>
                      <span>17&deg;</span></li>
                    <li class="col-md-3 col-sm-3 col-xs-3"><strong>Sat</strong>
                      <canvas id="sleet" width="50" height="50"></canvas>
                      <span>23&deg;</span></li>
                    <li class="col-md-3 col-sm-3 col-xs-3"><strong>Sun</strong>
                      <canvas id="fog" width="50" height="50"></canvas>
                      <span>21&deg;</span></li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- /New widget --> 
            
            <!-- New widget -->
            <div class="powerwidget powerwidget-as-portlet powerwidget-as-portlet-white" id="widget9" data-widget-editbutton="false">
              <header>
                <h2>Portlet<small>With Tabs</small></h2>
              </header>
              <div class="inner-spacer"> 
                
                <!-- tabs green-->
                <div class="tabs-grey">
                  <ul class="nav nav-tabs">
                    <li class="active"><a href="#one-normal" data-toggle="tab"><i class="fa fa-camera"></i> One</a></li>
                    <li><a href="#two-normal" data-toggle="tab"><i class="fa fa-music"></i> Two</a></li>
                    <li><a href="#three-normal" data-toggle="tab"><i class="fa fa-film"></i> Three</a></li>
                  </ul>
                  <div class="tab-content">
                    <div class="tab-pane active" id="one-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed elit non arcu gravida cursus. Ut non porttitor augue. Sed ornare diam ac tortor molestie, ut vestibulum nibh placerat. In hac habitasse platea dictumst. Vivamus pharetra pretium purus, ut suscipit magna malesuada at. </div>
                    <div class="tab-pane" id="two-normal">Praesent porta, urna et gravida facilisis, dolor ante cursus ante, lobortis feugiat orci odio sit amet erat. Ut elit neque, placerat at mi at, accumsan ullamcorper nibh. Donec dignissim, eros a rhoncus porttitor, erat est facilisis metus, suscipit consectetur tellus lacus at quam. Aenean nec nibh justo. </div>
                    <div class="tab-pane" id="three-normal">Nulla posuere mauris sem, vel hendrerit arcu fringilla ut. Quisque lacinia placerat dolor. Etiam semper convallis pulvinar. Suspendisse sollicitudin erat ac faucibus adipiscing. Pellentesque sagittis mollis tincidunt. Duis blandit leo ligula, vitae commodo diam posuere eget. Donec tempor euismod elementum. Nunc interdum bibendum lobortis. </div>
                  </div>
                </div>
                <!-- /tabs --> 
                
              </div>
            </div>
            <!-- /New widget --> 
            
          </div>
          <!-- /Inner Row Col-md-6 -->
          
          <div class="col-md-6 bootstrap-grid"> 
            
            <!-- New widget -->
            <div class="powerwidget powerwidget-as-portlet powerwidget-as-portlet-green" id="widdget6" data-widget-editbutton="false">
              <header>
                <h2>Google Map<small>Styled!</small></h2>
              </header>
              <div class="inner-spacer nopadding">
                <div class="map-container" id="map_canvas"></div>
              </div>
            </div>
            <!-- /New widget --> 
            
            <!-- New widget -->
            <div class="powerwidget powerwidget-as-portlet-cold-grey" id="chartjs-portlet-2" data-widget-editbutton="false">
              <header>
                <h2>SalesChart<small>with ChartJS</small></h2>
              </header>
              <div class="inner-spacer">
                <div class="row">
                  <div class="col-md-12 text-center">
                    <canvas id="chartjs-line-portlet" height="120" width="310"></canvas>
                  </div>
                  <div class="col-md-4 col-sm-4 col-xs-4 text-center">
                    <h1 class="text-yellow margin-0px margin-negative-top-10px">2584</h1>
                    <small class="text-yellow"><strong>Gadget Sales</strong> <i class="fa fa-chevron-circle-up"></i></small> </div>
                  <div class="col-md-4 col-sm-4 col-xs-4 text-center">
                    <h1 class="text-blue margin-0px margin-negative-top-10px">1823</h1>
                    <small class="text-blue"><strong>Books Sales</strong> <i class="fa fa-chevron-circle-up"></i></small> </div>
                  <div class="col-md-4 col-sm-4 col-xs-4 text-center">
                    <h1 class="text-white margin-0px margin-negative-top-10px">2345</h1>
                    <small class="text-white"><strong>Toys Sales</strong> <i class="fa fa-chevron-circle-up"></i></small> </div>
                  <div class="col-md-12 text-center">
                    <canvas class="margin-top" id="chartjs-line-portlet2" height="120" width="310"></canvas>
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-3 text-center">
                    <h2 class="margin-0px margin-negative-top-10px">158</h2>
                    <small><strong>Hold</strong> <i class="fa fa-chevron-circle-up"></i></small> </div>
                  <div class="col-md-3 col-sm-3 col-xs-3 text-center">
                    <h2 class="text-orange margin-0px margin-negative-top-10px">333</h2>
                    <small class="text-orange"><strong>Sales</strong> <i class="fa fa-chevron-circle-up"></i></small> </div>
                  <div class="col-md-3 col-sm-3 col-xs-3 text-center">
                    <h2 class="text-red margin-0px margin-negative-top-10px">321</h2>
                    <small class="text-red"><strong>Orders</strong> <i class="fa fa-chevron-circle-up"></i></small> </div>
                  <div class="col-md-3 col-sm-3 col-xs-3 text-center">
                    <h2 class="text-yellow margin-0px margin-negative-top-10px">166</h2>
                    <small class="text-yellow"><strong>Cancelled</strong> <i class="fa fa-chevron-circle-up"></i></small> </div>
                </div>
              </div>
            </div>
            <!-- /New widget --> 
            
            <!-- New widget -->
            <div class="powerwidget powerwidget-as-portlet powerwidget-as-portlet-cold-grey" id="widget12" data-widget-editbutton="false">
              <header>
                <h2>Muchachita<small>Camila Magrane</small></h2>
              </header>
              <div class="inner-spacer nopadding">
                <div class="vidz">
                  <iframe src="http://player.vimeo.com/video/85261544?title=0&amp;byline=0&amp;portrait=0&amp;color=5bc0de&amp;autoplay=0&amp;loop=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                </div>
              </div>
            </div>
            <!-- /New widget --> 
            
          
          </div>
          <!-- /Inner Row Col-md-6 --> 
        </div>
        <!-- /Widgets Row End Grid--> 
      </div>
      <!-- / Content Wrapper --> 
    </div>
    <!--/MainWrapper--> 
  </div>
<!--/Smooth Scroll--> 


       <div class="scroll-to-top">
		<!-- <p>Scroll to top</p> *Use this as a text option, instead of the image icon.*-->
		</div>



<!-- scroll top -->
<div class="scroll-top-wrapper hidden-xs">
    <i class="fa fa-angle-up"></i>
</div>
<!-- /scroll top -->



<!--Modals-->

<!--Power Widgets Modal-->
<div class="modal" id="delete-widget">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <i class="fa fa-lock"></i> </div>
      <div class="modal-body text-center">
        <p>Are you sure to delete this widget?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="trigger-deletewidget-reset">Cancel</button>
        <button type="button" class="btn btn-primary" id="trigger-deletewidget">Delete</button>
      </div>
    </div>
    <!-- /.modal-content --> 
  </div>
  <!-- /.modal-dialog --> 
</div>
<!-- /.modal --> 

<!--Sign Out Dialog Modal-->
<div class="modal" id="signout">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <i class="fa fa-lock"></i> </div>
      <div class="modal-body text-center">Are You Sure Want To Sign Out?</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="yesigo">Ok</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content --> 
  </div>
  <!-- /.modal-dialog --> 
</div>
<!-- /.modal --> 

<!--Lock Screen Dialog Modal-->
<div class="modal" id="lockscreen">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <i class="fa fa-lock"></i> </div>
      <div class="modal-body text-center">Are You Sure Want To Lock Screen?</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="yesilock">Ok</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content --> 
  </div>
  <!-- /.modal-dialog --> 
</div>
<!-- /.modal --> 

<!--Scripts--> 
<!--Google Maps-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<!--JQuery--> 
<script type="text/javascript" src="js/vendors/jquery/jquery.min.js"></script> 
<script type="text/javascript" src="js/vendors/jquery/jquery-ui.min.js"></script>

<!--GMap-->
<script type="text/javascript" src="js/vendors/gmap/jquery.gmap.min.js"></script>

<!--Fullscreen--> 
<script type="text/javascript" src="js/vendors/fullscreen/screenfull.min.js"></script> 

<!--NanoScroller--> 
<script type="text/javascript" src="js/vendors/nanoscroller/jquery.nanoscroller.min.js"></script> 

<!--Sparkline--> 
<script type="text/javascript" src="js/vendors/sparkline/jquery.sparkline.min.js"></script> 

<!--Horizontal Dropdown--> 
<script type="text/javascript" src="js/vendors/horisontal/cbpHorizontalSlideOutMenu.js"></script> 
<script type="text/javascript" src="js/vendors/classie/classie.js"></script> 

<!--PowerWidgets--> 
<script type="text/javascript" src="js/vendors/powerwidgets/powerwidgets.min.js"></script> 

<!--Chart.js--> 
<script type="text/javascript" src="js/vendors/chartjs/chart.min.js"></script> 

<!--Bootstrap--> 
<script type="text/javascript" src="js/vendors/bootstrap/bootstrap.min.js"></script> 

<!--Vector Map--> 
<script type="text/javascript" src="js/vendors/vector-map/jquery.vmap.min.js"></script> 
<script type="text/javascript" src="js/vendors/vector-map/jquery.vmap.sampledata.js"></script> 
<script type="text/javascript" src="js/vendors/vector-map/jquery.vmap.usa.js"></script> 

<!--ToDo--> 
<script type="text/javascript" src="js/vendors/todos/todos.js"></script> 

<!--FitVids--> 
<script type="text/javascript" src="js/vendors/fitvids/jquery.fitvids.js"></script>

<!--SkyCons-->  
<script type="text/javascript" src="js/vendors/skycons/skycons.js"></script> 
<script>
      var icons = new Skycons({"color": "#fff"}),
          list  = [
            "clear-day", "clear-night", "partly-cloudy-day",
            "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
            "fog"
          ],
          i;

      for(i = list.length; i--; )
        icons.set(list[i], list[i]);

      icons.play();
    </script> 

<!--Main App--> 
<script type="text/javascript" src="js/scripts.js"></script>

<!--Switcher-->
<script type="text/javascript" src="js/vendors/demo-switcher/switcher.core.min.js"></script>
<script type="text/javascript" src="js/vendors/demo-switcher/switcher.load.js"></script>  




<!--/Scripts-->

</body>
</html>